カスタムテンプレートを選択した際に、エディタ側にもbodyclassを付与する方法(メモ)

公開日:2022(令和4)年12月20日/最終更新日:

WordPress Customize Ideas | Personal WP Customization Notes (PWCN)

【景品表示法に基づく表記】ページ内のコンテンツには、商品プロモーションが含まれています

TT2をはじめとするブロックテーマで、テンプレートを追加(カスタムテンプレートを追加)すると、フロントエンド側では以下のような形でbodyclassが付与されます。

【固定ページで作成したカスタムテンプレートを使った場合】
page-template-wp-custom-template-カスタムテンプレートスラグ

【投稿で作成したカスタムテンプレートを使った場合】
post-template-wp-custom-template-カスタムテンプレートスラグ

例えば、「page-wide」というスラグ(カスタムテンプレート名)を持つテンプレートを追加すると、以下の画像のように、フロントエンドでは「page(またはpost)-template-wp-custom-template-page-wide」というクラスがbodyタグに追加されるというものです。

カスタムテンプレートを選択した際に、エディタ側にもbodyclassを付与する方法(メモ)|Personal WP Customization Notes (PWCN)

でも、ブロックエディタ側には、このbodyclassが追加されないんです。

カスタムテンプレートを選択した際に、エディタ側にもbodyclassを付与する方法(メモ)|Personal WP Customization Notes (PWCN)

いろいろ調べていると、iframe内に出力されているようなのですが、できればbodyclassに付与して同じスタイルコードを使いたい。

そんな時に便利なコードを紹介します。

コードを使用する前に、ここをクリックして注意事項をご確認ください

本ページで掲載しているコードは、以下に了承した上で使用ください

  • コードは商用・非商用問わず自由に使っていただいて構いませんが、コード追加による不具合やトラブルが発生しても当方では一切責任を負いません
  • コードは有効化しているテーマのfunctions.php、style.cssなどへ追加することで機能します。それらのファイルへの変更を行うことに不安のある方は使用しないでください
  • コードは本ページの公開日時点で私の環境において動作したものです。WordPressバージョン他環境の違いによって動作しないことがあります
  • コードは、セキュリティ、コードの正確さなどにおいて完全なものではありません。中には紹介するコードを簡略化するために省略している部分があるものもありますので、ご自身でコードを十分に検証し、必要な部分の編集を行った上で使用するようにしてください
  • 掲載しているのは参考コードです。自身の環境に合わせるための編集はご自身で対応いただく必要があります(コメント欄等から質問いただいても基本回答は致しません)
  • 掲載しているコードの転載を禁じます(SNSで紹介いただいたり、本ページへのリンクを張っていただくことは大歓迎です)

紹介するコードは、こちらのページに掲載されているものを少し変えて、フロントエンドと同じクラスが付与されるようにしたものです(コード提供者に大感謝!!)

以下のコードをテーマのfunctions.phpや独自プラグインのプログラムへ追加するだけです。

/***** エディター側にbodyclassを追加 *****/
if ( !function_exists( 'sample_admin_body_template_class' ) ){
function sample_admin_body_template_class( $str_classes ) {
    global $post;
    $template_slug = get_page_template_slug( $post );
    $classes   = explode(' ', $str_classes);
    $classes[] = $template_slug;
global $post_type;
	$pre_type = $post_type.'-template';
	$new_str_classes = join($pre_type, $classes);

    return $new_str_classes;
}
}
add_filter( 'admin_body_class', 'sample_admin_body_template_class' );

参考ページのコードでは、管理画面(編集画面)側に出力されるクラスに「投稿タイプ-template」が付加されず、完全一致にならないため、管理画面側の判別関数を追加(コードの赤字部分)して完全一致するようにしています

1点、注意事項として、カスタムテンプレートでないテンプレートのbodyclassにも「page-template-(投稿の場合はpost-template-)」というクラスが出力されてしまいますが、クラスが1つ追加されるだけで、特に使うこともないでしょうから、このままで大丈夫でしょう。

調べると、他にもJSを使う方法などが紹介されていますが、このコードが一番単純かつ、すぐに実現できるコードなので、メモを兼ねて公開しておくこととしました。

ただし..この方法では実現できないことがあります。それは..

ブロックテーマのテンプレート編集画面ではbodyclassが付与されないことです。

原因は、テンプレート編集画面は、投稿編集画面などのように特定のテンプレートを適用させていないので、当然ながら「get_page_template_slug」関数で使用しているテンプレートを判定することは無理なので、結構な時間を使って調べ、いろいろと試行してみましたが、私の能力では残念ながら実現できませんでした。

冒頭の参考ページ内のリンクなどでいろいろと言及されているようですが、この件については解決に至っていない(というか、エディタという名前のいろいろなものがごちゃごちゃになっていそうな感じ)ので、今後のテーマエディター(今はベータ版みたい)の改善に期待したいところです。

, , , , , , ,
Lolipop ServerMoshimo Ad x-serverMoshimo Ad

WordPress Customize Ideas | Personal WP Customization Notes (PWCN)
CSSをHTMLソースに直接出力する、wp_add_inline_style()の使い方