DTPでInDesignやillustratorで「段落スタイル」を使用していると、「ページ毎にデザインをワンクリックで変更、指定」ができますね。
この便利な仕組みをWordPressに追加できたら便利ですよね。

ちなみに、WordPressテーマ「Avada」では、カテゴリー毎にレイアウトテンプレートを作成し、そのテンプレートにclass指定をしておけば、投稿時に自動でclassが指定されてカテゴリー毎に見出しデザインを適応してくれる便利な機能はありますが、設計時点でしっかり構築しておく必要があります。

しかし、ちょっとした工夫で投稿ごとにデザインを切り替える仕組みを作ることができます。

今回はプラグインを導入せず、子テーマの functions.php と style.css だけで、投稿編集画面からワンクリックでCSSデザインを切り替えるスイッチャーの実装方法をご紹介します。

こんな感じで機能追加されます。記事によって、デザインを選択するだけ。
CSSを用意しておく必要はありますが、現状なら、サーバーにAIをSSH接続させて記述させてしまえば…簡単ですね〜

仕組みの全体像

まずはどのような仕組みで動作するかを確認しましょう。

• 投稿編集画面のサイドバーに、独自のデザイン選択パネル（ラジオボタン）を追加。
• 選択した値を投稿メタデータとして保存。
• 記事を表示する際、body_class フィルターを使って、bodyタグにクラス（例：css-design-kihon）を動的に付与。
• style.css にそのクラスを起点としたCSSを記述することで、ページごとにデザインを切り替える。

この方法はとてもシンプルですが、一度作れば運用が非常に楽になります。

実装ステップ：3つのファイルを活用する

実装にはPHPとCSSの知識が必要ですが、コードはどれも標準的なものです。必ず子テーマのファイルを使って作業してください。

ステップ1：編集画面に選択パネルを表示する

まず、投稿編集画面の右側に「CSSデザイン」を選択するパネルを追加します。functions.php に以下のコードを記述しましょう。

// コードスニペット1：メタボックス登録・描画
add_action( 'add_meta_boxes', function() {
    add_meta_box(
        'css_design_selector',
        'CSSデザイン',
        'render_css_design_meta_box',
        'post',
        'side',
        'default'
    );
} );

function render_css_design_meta_box( $post ) {
    $current = get_post_meta( $post->ID, '_css_design', true );
    wp_nonce_field( 'css_design_save', 'css_design_nonce' );
    $designs = [
        ''       => 'デフォルト',
        'kihon'  => '基本デザイン',
        'boshu'  => '募集要項',
    ];
    echo '<fieldset>';
    foreach ( $designs as $key => $label ) {
        printf(
            '<label style="display:block; margin:5px 0;"><input type="radio" name="css_design" value="%s"%s> %s</label>',
            esc_attr( $key ),
            checked( $current, $key, false ),
            esc_html( $label )
        );
    }
    echo '</fieldset>';
}

ステップ2：選択した値を保存する

次に、投稿を更新した際に選択した内容がデータベースに保存されるようにします。セキュリティ対策（nonce検証と許可リスト）を含めて記述するのがポイントです。

// コードスニペット2：save_post でメタ保存
add_action( 'save_post', function( $post_id ) {
    if ( ! isset( $_POST['css_design_nonce'] ) ) return;
    if ( ! wp_verify_nonce( $_POST['css_design_nonce'], 'css_design_save' ) ) return;
    if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;
    if ( ! current_user_can( 'edit_post', $post_id ) ) return;

    $allowed = [ '', 'kihon', 'boshu' ];
    $value   = isset( $_POST['css_design'] ) ? $_POST['css_design'] : '';
    if ( in_array( $value, $allowed, true ) ) {
        update_post_meta( $post_id, '_css_design', $value );
    }
} );

ステップ3：bodyタグにクラスを付与する

ここが最も重要な部分です。body_class フィルターを使い、投稿で選択された値をbodyタグのクラスとして出力します。これにより、CSSでページごとに見出しなどを制御できるようになります。

// コードスニペット3：body_class フィルター
add_filter( 'body_class', function( $classes ) {
    if ( is_singular( 'post' ) ) {
        $design = get_post_meta( get_the_ID(), '_css_design', true );
        if ( $design ) {
            $classes[] = 'css-design-' . $design;
        }
    }
    return $classes;
} );

ステップ4：CSSでデザインを定義する

最後に、スタイルを適用します。style.css に、付与したクラスを起点にした見出しスタイルなどを記述しましょう。

/* コードスニペット4：基本デザイン（kihon）の例 */
body.css-design-kihon .post-content h2 {
  font-size: 30px;
  font-weight: 700;
  text-align: left;
  margin-top: 90px;
  margin-bottom: 50px;
  line-height: 1.5;
}
body.css-design-kihon .post-content h2:first-of-type {
  margin-top: 40px;
}
body.css-design-kihon .post-content h3 {
  background: #333;
  color: #fff;
  padding: 0.4em 0.8em;
  font-size: 20px;
  margin-top: 50px;
}
body.css-design-kihon .post-content h4 {
  border-left: 10px solid #333;
  padding-left: 0.8em;
  margin-top: 30px;
}

運用のコツと注意点

デザインの追加方法

新しいデザインを増やしたいときは、以下の3箇所を修正するだけでOKです。

• $designs 配列：パネルの表示名を追加
• $allowed 配列：許可するキー（スラッグ）を追加
• style.css：新しいクラス名（body.css-design-〇〇）に基づいたCSSを追加

知っておくべき仕様

• 固定ページには影響しません：is_singular('post') を使用しているため、意図せず固定ページのデザインが変わることはありません。
• デフォルトの動作：値を空にすれば、テーマの標準的なスタイルがそのまま適用されます。
• 子テーマでの実装：必ず子テーマのファイルに追記してください。親テーマを直接編集すると、テーマのアップデート時に設定がすべて消えてしまいます。

まとめ

今回の方法は、プラグインに頼らずWordPressの機能を活かした「ちょっとプロっぽい」カスタマイズです。一度仕組みを作ってしまえば、クライアントワークや自身のサイト運用で、記事ごとに見せ方を変えたい時に非常に重宝します。

ぜひ、皆さんの制作環境で試してみてください！

執筆時点のWordPress環境にて動作確認済みです。カスタマイズはバックアップを取った上で行ってください。