タグ: 私の備忘録

記事の一覧

  • wp-block-library-theme-inline-css を削除

    クリックして本文を表示

    WordPress 5.8.2 現在、フロントに下記のようなインラインCSSが読み込まれていることに気が付きました。

    <style id='wp-block-library-theme-inline-css'>
    /// 中略    
    </style>

    調べてみたところ、
    wp_common_block_scripts_and_styles()
    という関数の中に

    if ( current_theme_supports( 'wp-block-styles' ) ) {
    	wp_enqueue_style( 'wp-block-library-theme' );
    }

    と書いてあり、おそらくこの 'wp-block-library-theme' というキーで読み込まれているスタイルのようだぞ、と。
    前後の if 文を見ると、テーマで 'wp-block-styles' をサポートしている場合と読めるので、ブロックスタイルをサポートしていたら、上記のインラインスタイルを読み込むというような仕組みらしい。5.0 から、設置されているようですね。

    調べたら、当該のテーマでは、ばっちり、add_theme_support( 'wp-block-styles' ) してました。

    とは言え、邪魔なので、フロントからは削除

    テーマの functions.php に下記のように書きます。

    function ccc_theme_scripts() {
    	
    	//そのほか
    	
    	/**
    	 * wp_common_block_scripts_and_styles() 経由で
    	 * ブロックスタイルサポート時に読み込まれているインラインCSSをフロントからは削除
    	 * 
    	 * @url https://developer.wordpress.org/reference/functions/wp_common_block_scripts_and_styles/
    	 */
    	wp_dequeue_style( 'wp-block-library-theme' );
    	
    	//そのほか
    }
    add_action( 'wp_enqueue_scripts', 'ccc_theme_scripts' );

    'wp-block-library-theme' というキーで読み込まれているスタイルなので、同じキー名で否定する、、、という感じです、
    wp_dequeue_style( 'wp-block-library-theme' )
    が、その部分です。
    テーマでフロントに読み込むスクリプトやスタイルをまとめて読み込んでいる部分に一緒に書いています。たぶん、そうじゃないと動かないはず(試してないですが)。

    あくまで、フロントだけ削除してます。管理画面でも読み込まれているんですけど、そっちは、まあ、いいかな、、、と思って、、、。フロントエンドの <head> の中をスッキリさせたい、スタイルの衝突を防ぎたいのが目的です。(仕方ないのかもしれないけど、まじ、インラインCSSはやめてくれ!て思う・・・)

    下記の記事を参考にしました。

    2023-08-19 CSSの例はざっくり削りました。

  • リビジョンの制御

    クリックして本文を表示

    リビジョン、便利な機能なのですが、開発中にリビジョンが「かさむ」のが少し、嫌で。
    需要はあるかわかりませんが、リビジョンを停止、もしくは上限を設ける方法のご案内です。

    下記のコードを、wp-config.php に書きます。

    /**
     * リビジョンを制御
     * リビジョンを保存しない
     * @url https://ja.wordpress.org/support/article/revisions/#%E3%83%AA%E3%83%93%E3%82%B8%E3%83%A7%E3%83%B3%E8%A8%AD%E5%AE%9A
     */
    define( 'WP_POST_REVISIONS', false );
    
    /**
     * リビジョンを制御
     * リビジョンを3件保存(プラス自動保存1つ)
     */
    define( 'WP_POST_REVISIONS', 3 );
    
    /**
     * リビジョンを制御
     * リビジョンを全て保存(デフォルト)
     */
    define( 'WP_POST_REVISIONS', true );

    参考にしたのは下記のページ。

    リビジョンの削除

    ざっと調べたところ、プラグインを使うというのが優勢でした。DBから直接削除も可能です。いずれも、実施の際はバックアップを取ってから!というのが重要かと。

    いずれ、WP-CLI とかで、できるようになったらいいなあ・・・・。

  • WPの投稿でブロックエディタを使わないようにする方法

    クリックして本文を表示

    便利なブロックエディタですが、WordPressをCMSとして使う際などに、クライアントが操作するにはハードルが高い…ということもあるあるです。クライアントが更新するのは「投稿」だけなので、ここだけブロックエディタを使わないようにしたい、というような状況で使えるチップスです。

    投稿タイプごとにブロックエディタを使うかどうかを判断する use_block_editor_for_post_type()という関数があり、そこへフィルターフックで条件を追加します。

    下記の例は投稿タイプが「投稿(post)」だったら、ブロックエディタを「使わない」場合のサンプルコードです。

    function hide_block_editor( $use_block_editor, $post_type ) {
    	if ( $post_type === 'post' ) {
    		return false;
    	}
    	return $use_block_editor;
    }
    add_filter( 'use_block_editor_for_post_type', 'hide_block_editor', 10, 2 );

    use_block_editor_for_post_type() の概要にも記載がありますが、

    The block editor depends on the REST API, and if the post type is not shown in the REST API, then it won’t work with the block editor.

    https://developer.wordpress.org/reference/functions/use_block_editor_for_post_type/#description

    ブロックエディタは REST API に依存しているので投稿タイプ REST API に含まない場合はブロックエディタが働かないです。カスタム投稿を追加して使う際などに、'show_in_rest' をうっかり false に設定していたり、

    余談 プラグイン「Classic Editor」を使う

    「Classic Editor」プラグインは、サイト内でブロックエディタを無効化するだけではなく、デフォルトでどちらのエディタを使うかや、ユーザごとにどちらを使うか、記事ごとにブロックエディタを使うか従来のエディタを使うか選択することができます。ブロックエディタを全く切り捨ててしまうより、少しずつでもブロックエディタの画面に慣れてもらう方がメリットが大きいと思う場合は、このプラグインを使う手もあるかな、と思います。

  • カテゴリ一覧から子カテゴリの記事をなくす (WordPress)

    クリックして本文を表示

    「何言ってるんだこの人???」

    ・・・と、言われるかもしれませんが。
    WordPressでカテゴリ一覧やターム別一覧を表示すると、デフォルトで、もれなく子孫カテゴリの記事も含まれます。「えっ?なんでwww」と、思いますが、そういう仕様のようで・・・。

    百聞は一見にしかず。
    こちらをご覧ください https://learning.ccc-labo.net/category/followup/
    この「勉強会のフォローアップ」というカテゴリには子カテゴリがあります。
    勉強会のフォローアップ
     └条件分岐いろいろ
     └自習課題
    「勉強会のフォローアップ」の一覧には、「勉強会のフォローアップ」、「条件分岐いろいろ」、「自習課題」の3つのカテゴリのいずれかを選択している記事が表示されています。

    かえって都合が良いこともあるので、私はブログを書くときはあまり気にしていないです。それでも時には、子カテゴリの記事は不要で、純粋に、そのカテゴリを選んでいる記事だけが表示されてほしいということもあります。

    というわけで、「WPのカテゴリ(ターム)別一覧から子カテゴリの記事を外す」方法です。

    以下に書く方法やサンプルコードは、下記の「参考記事」をもとにしました。
    https://hseki-luckey.hatenablog.jp/entry/2018/01/16/233106
    考え方についても、この記事を参考にしているので、先にこちらを読んでおかれると以下の理解が早いと思います。

    parse_tax_query を使って解決する

    parse_tax_query ってなんやねん、、、と思っていますが、当方、フィルターとかアクションとかがよくわかってないほどの理解度なので、説明できません。
    なので、さくっとサンプルコードです。テーマの functinos.php に書いて使います。

    function custom_search_parse_tax_query($query){
    	if ( is_admin() || ! $query->is_main_query() ){
    		return;
    	}
    	if( $query->is_tax('hoge_cat') ){
    		$query->tax_query->queries[0]['include_children'] = false;
    	}
    }
    add_action('parse_tax_query', 'custom_search_parse_tax_query');

    これでOKです。
    5行目の $query->is_tax('hoge_cat') 部分が、「子カテゴリの記事をなくす」の対象になるアーカイブの条件を書いている部分です。
    カテゴリだったら  $query->is_category()
    特定のタームだったら $query->is_tax('hoge_cat', 'foo')
    などとします。WPの条件分岐についてはこちら。

    6行目の部分で、「クエリの中の tax_query の中の queries の中の0番目の中にある include_children の値を false に変えている」ということだと理解しています。
    ただ、これは、何かの条件で「queries の0番目」の位置が変わってしまったら効かないかエラーになったりしそうかな?と思います。
    その場合はクエリの中身を見て正しく書き直すと良いと思います。

    pre_get_post だと何が起きている?

    以前にこの方法で試したことがあったのですが、「参考記事」ではSQLのクエリが増えることや処理時間が伸びることを理由に、失敗例とされています。(当方、SQLのクエリは理解できないのと、まだ記事が少ない状況で試したので、いずれも実感できず・・・)なので、なにかしら「余計なことをしている」印象を持っています。

    こちらもコードは functions.php に書きます。

    function custom_category_archive_query($query){
    	if ( is_admin() || ! $query->is_main_query() ){
    		return;
    	}
    	if( $query->is_tax('hoge_cat') ){
    		$term = get_queried_object();
    		$tax_query = array(
    			array(
    				'taxonomy' => $term->taxonomy,
    				'field' => 'term_id',
    				'terms' => array($term->term_id),
    				'include_children' => false
    			)
    		);
    		$query->set('tax_query', $tax_query);
    	}
    }
    add_filter('pre_get_posts', 'custom_category_archive_query');

    これでも、ねらった表示にはなります。しかし、遅かったり余計なSQL文がはいると・・・・・いったい何が起こるのか、できれば理解したい。

    で、SQLは読めないので、いっそ、$query を見てみようと思いつき。
    taxonomy.php に以下を記載。

    echo '<pre>'. print_r( $wp_query, true ) .'</pre>';

    ダサかろうが全て実際に表示してみるスタイル….
    以下のような表示が得られます。

    WP_Query Object
    (
    //省略
    [tax_query] => WP_Tax_Query Object
    	(
    		[queries] => Array
    			(
    				[0] => Array
    					(
    						[taxonomy] => archive_cat
    						[terms] => Array
    							(
    								[0] => 9
    							)
    
    						[field] => term_id
    						[operator] => IN
    						[include_children] => 
    					)
    
    				[1] => Array
    					(
    						[taxonomy] => archive_cat
    						[terms] => Array
    							(
    								[0] => zaidanjyouhou
    							)
    
    						[field] => slug
    						[operator] => IN
    						[include_children] => 1
    					)
    
    			)
    
    		[relation] => AND
    //省略

    注目は [queries] の中身で、[1]の方が、WPのデフォルトで出てくるもので、[0]の方が、おそらく、pre_get_posts を書くことによって追加されたものだと思います。
    やりたいことはあくまで、 [1] に書いてある [include_children] => 1 を0(表記なし)にすること、なので、pre_get_posts ではやはり「余計なことをしてる」ということになるのかと。

  • WPブロックをホワイトリストで指定して、一部のブロックのみを使う方法

    クリックして本文を表示

    便利で楽しいブロックエディタですが、クライアントに納品するCMSとする時、WPのブロックが多すぎたり、全てのブロックのスタイリングをするのがしんどい場合があります。
    必要なブロック以外は表示したくない!!その方法を解説します。

    技術もコード書くのも不要!最もお手軽な方法

    不要なブロックを表示させない最も簡単な方法は「ブロックマネージャー」で必要なブロックにのみチェックを入れていく方法です。
    ブロックマネージャーは、投稿編集画面の右上にある歯車マークをクリックし、「ブロックマネージャー」のリンクをクリックすると現れます。

    この方法でも、ブラウザに依存しないで、管理画面のログインユーザごとに設定が可能だった記憶…。クライアントに引き渡す前に、クライアントのログインアカウントで設定するなどすれば、そのまま不要なブロックを隠した状態で運用できるはずです。(ごめんなさい、未検証です!)

    テーマの functions.php などで制御する場合

    ブロックマネージャーからもブロックを削除しておきたい場合、allowed_block_types_all フィルタを使って、使いたいWPブロックだけをホワイトリスト形式で指定することができます。不要なものを削除ではなく、使いたいものだけ許可する。テーマの functions.php に書くほか、プラグイン化もできると思います。

    サンプルコードはこんな感じ

    function whitelist_block_types( $allowed_block_types, $block_editor_context ) {
    	$allowed_block_types = array(
    		'core/paragraph',
    		'core/heading',
    		'core/image',
    	);
    	return $allowed_block_types;
    }
    add_filter( 'allowed_block_types_all', 'whitelist_block_types', 10, 2 );

    サンプルコードは以下の記事を参考にしました。参考記事には、投稿タイプごとにブロックの表示を制御する方法が書いてあります、これもよく使いそう。
    https://qiita.com/TetsuakiHamano/items/421746f7c6429ac54282#allowed_block_types_all-

    以前は「allowed_block_types」だった

    allowed_block_types_all は、WordPress 5.8 から新たに実装されたフィルターです。以前は同じことを allowed_block_types というフィルターで行っていましたが、こちらは5.8で非推奨になったそうです。 allowed_block_types フィルターを使っている場合は、5.8にすると警告が出ますのでご注意を。

    私は、よく使っていたので、Deprecated エラーが多発しています…( ꒪⌓꒪)

    注意!!セットで許可しないと使えないものがある

    ボタンやカラムなど別のブロックを内包するタイプのブロックは外身と中身(言い方…)をセットで許可しないと動かないです。

    'core/button', //ボタン
    'core/buttons', //ボタン
    
    'core/column', //カラム
    'core/columns', //カラム
    
    'core/social-link', //ソーシャルアイコン
    'core/social-links', //ソーシャルアイコン

    余談 ブロックの一覧を知りたい

    ブロックエディタが登場して数年、最初よりもずいぶんブロックが増えたはず。ホワイトリストで指定するときはブロックの「名前(core/hogehoge)」が必要になりますが、以前からそれを知る術とは…となっていました。ちょいちょい探しているものの、見つからない・・・。

    したらば、今回、allowed_block_types_all を調べる過程で、下記の記事を発見。
    https://wemo.tech/4010
    「PHP側で特定のブロックをオフにする方法」という見出しにあるサンプルコードですが、不要なものだけを消したいが、刻々と追加される新しいブロックはそのままホワイトリストに追加されるようにしたいという思いで書かれたコードと読み取りました。削除したいブロックの名前を配列にしておき、全てのブロックの一覧の配列と比べて、差分だけを取得し、ホワイトリスト用の配列にしようという方法と思われます。
    なので、サンプルコードにあった「全てのブロック取得」の部分を参考に、全ブロックの名前とついでにタイトルを取得できるコードを書いてみました。

    $all_block = '';
    $block_types = WP_Block_Type_Registry::get_instance()->get_all_registered();
    foreach ($block_types as $block ){
    	$all_block = $all_block . "\n" . "'" . $block->name . "'" . ', //' . $block->title . ' (' . $block->category . ')';
    }
    var_dump( $all_block );

    出力が var_dump なのはお許しください…。
    でもできた。
    (2021−12−24 カテゴリも出力しました)

    これを使って今日時点のブロック一覧を取得したものが以下になります。ホワイトリストを作成する際などに、お役立てください。

    (以下、2022-02-14 時点のブロック一覧)

    'core/legacy-widget', //従来のウィジェット (widgets)
    'core/widget-group', // (widgets)
    'core/archives', //アーカイブ (widgets)
    'core/avatar', //アバター (theme)
    'core/block', //再利用ブロック (reusable)
    'core/calendar', //カレンダー (widgets)
    'core/categories', //カテゴリー一覧 (widgets)
    'core/comment-author-name', //コメントの投稿者名 (theme)
    'core/comment-content', //コメント本文 (theme)
    'core/comment-date', //コメント日付 (theme)
    'core/comment-edit-link', //コメント編集リンク (theme)
    'core/comment-reply-link', //コメント返信リンク (theme)
    'core/comment-template', //コメントテンプレート (design)
    'core/comments', //コメント (theme)
    'core/comments-pagination', //コメントのページネーション (theme)
    'core/comments-pagination-next', //コメントの次のページ (theme)
    'core/comments-pagination-numbers', //コメントのページ番号 (theme)
    'core/comments-pagination-previous', //コメントの前のページ (theme)
    'core/comments-title', //コメントタイトル (theme)
    'core/cover', //カバー (media)
    'core/file', //ファイル (media)
    'core/gallery', //ギャラリー (media)
    'core/home-link', //ホームへのリンク (design)
    'core/image', //画像 (media)
    'core/latest-comments', //最新のコメント (widgets)
    'core/latest-posts', //最新の投稿 (widgets)
    'core/loginout', //ログイン / ログアウト (theme)
    'core/navigation', //ナビゲーション (theme)
    'core/navigation-link', //カスタムリンク (design)
    'core/navigation-submenu', //サブメニュー (design)
    'core/page-list', //固定ページリスト (widgets)
    'core/pattern', //パターン (theme)
    'core/post-author', //投稿者 (theme)
    'core/post-author-biography', //投稿者の経歴 (theme)
    'core/post-comments-form', //投稿コメントフォーム (theme)
    'core/post-content', //投稿コンテンツ (theme)
    'core/post-date', //投稿日 (theme)
    'core/post-excerpt', //投稿の抜粋 (theme)
    'core/post-featured-image', //投稿のアイキャッチ画像 (theme)
    'core/post-navigation-link', //投稿ナビゲーションリンク (theme)
    'core/post-template', //投稿テンプレート (theme)
    'core/post-terms', //投稿タグ (theme)
    'core/post-title', //投稿タイトル (theme)
    'core/query', //クエリーループ (theme)
    'core/query-no-results', //結果なし (theme)
    'core/query-pagination', //ページ送り (theme)
    'core/query-pagination-next', //次のページ (theme)
    'core/query-pagination-numbers', //ページ番号 (theme)
    'core/query-pagination-previous', //前のページ (theme)
    'core/query-title', //クエリータイトル (theme)
    'core/read-more', //続きを読む (theme)
    'core/rss', //RSS (widgets)
    'core/search', //検索 (widgets)
    'core/shortcode', //ショートコード (widgets)
    'core/site-logo', //サイトロゴ (theme)
    'core/site-tagline', //サイトのキャッチフレーズ (theme)
    'core/site-title', //サイトのタイトル (theme)
    'core/social-link', //ソーシャルアイコン (widgets)
    'core/tag-cloud', //タグクラウド (widgets)
    'core/template-part', //テンプレートパーツ (theme)
    'core/term-description', //タームの説明 (theme)
    'core/audio', //音声 (media)
    'core/button', //ボタン (design)
    'core/buttons', //ボタン (design)
    'core/code', //コード (text)
    'core/column', //カラム (text)
    'core/columns', //カラム (design)
    'core/embed', //埋め込み (embed)
    'core/freeform', //クラシック (text)
    'core/group', //グループ (design)
    'core/heading', //見出し (text)
    'core/html', //カスタム HTML (widgets)
    'core/list', //リスト (text)
    'core/list-item', //リスト項目 (text)
    'core/media-text', //メディアとテキスト (media)
    'core/missing', //非サポート (text)
    'core/more', //続き (design)
    'core/nextpage', //ページ区切り (design)
    'core/paragraph', //段落 (text)
    'core/preformatted', //整形済みテキスト (text)
    'core/pullquote', //プルクオート (text)
    'core/quote', //引用 (text)
    'core/separator', //区切り (design)
    'core/social-links', //ソーシャルアイコン (widgets)
    'core/spacer', //スペーサー (design)
    'core/table', //テーブル (text)
    'core/text-columns', //テキストカラム (非推奨) (design)
    'core/verse', //詩 (text)
    'core/video', //動画 (media)
    'core/post-comments', // (theme)

    2022-11-16追記
    公式でコアブロックの一覧を見つけたので、記載しておきます。

    https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/archives

カテゴリ

タグクラウド

css functions theme.json WordPress wp-config すぐ使えるTips カスタムブロック ダイナミックブロック ブロックエディタ 擬似クラス 私の備忘録

最近の記事

月別アーカイブ