WordPressの投稿エディターにカスタムスタイルオプションを追加する2つの方法

WordPressの投稿エディターは、その名の通り投稿やコンテンツを編集するための機能ですが、デフォルトの状態ではカスタムCSSクラスを追加することができません。独自のCSSスタイルやクラスを適用したい場合、「テキスト」モードに切り替えてHTMLコードを直接編集するしかありません。

しかし、WordPressは非常にカスタマイズ性の高いCMSです。投稿エディターにカスタムスタイルオプションをあらかじめ登録しておけば、数クリックでCSSスタイルを適用できるようになり、いちいちテキストモードに切り替えたり、クラス名を暗記したりする必要がなくなります。

カスタムスタイルオプションを追加する方法は主に2つあります。ひとつは無料プラグインを利用する方法、もうひとつはコードスニペットを追加する手動の方法です。どちらも仕組みはほぼ同じなので、自分に合った方を選んで進めてください。

注意：この記事では、基本的なHTMLとCSSの知識があり、CSSクラス、ブロックレベル要素、HTML要素、属性などの概念を理解していることを前提としています。

方法1：プラグイン「TinyMCE Custom Styles」を使う

投稿エディターにカスタムスタイルオプションを追加する最も簡単な方法は、無料プラグイン「TinyMCE Custom Styles」を利用することです。

このプラグインの優れた点は、カスタムCSSを記述できるエディター用スタイルシートを自動的に作成してくれることです。これにより、リンク・画像・フォーム・ボタンなどのフロントエンドの見た目を、投稿エディター内でそのまま確認できるようになります。

手順1：まず、通常のWordPressプラグインと同じ手順でTinyMCE Custom Stylesをダウンロード・インストールし、有効化します。有効化後、「設定」→「TinyMCE Custom Styles」からプラグインの設定ページを開きましょう。

手順2：設定ページを開くと、エディター用スタイルシートの配置場所を選択するよう促すメッセージが表示されます。テーマの構成に応じて3つの選択肢から選べるので、それぞれの説明をよく読み、環境に合ったものを選びましょう。筆者は独自のGenesis子テーマを使用しているため、2番目のオプションを選択しました。選択後、「Save all Settings（すべての設定を保存）」ボタンをクリックして保存します。

手順3：ページを下にスクロールし、「Add new style（新規スタイルを追加）」ボタンをクリックします。スタイル名を入力し、タイプ（inline／block／selector）を選択、タイプの値とCSSクラス名を入力していきます。

手順4：一番右側の項目で、対象要素が「Wrapper（ラッパー）」かどうかを選択します。このオプションを有効にすると、エディター内で選択したブロックレベル要素を、新しいブロックレベル要素で包む形になります。

手順5：必要であれば、「CSS Styles」カテゴリ直下の「Add new style」からカスタムCSSを直接登録することも可能です。ただし、管理しやすさの観点から、テーマディレクトリ内の「editor-style.css」ファイルに直接スタイルを記述することをおすすめします（手順2で2番目のオプションを選んだ場合）。

手順6：すべての入力が完了したら、ページ最下部の「Save all settings（すべての設定を保存）」ボタンをクリックします。

手順7：これで設定は完了です。以降、投稿エディターのツールバーに「Formats（書式）」という新しいドロップダウンメニューが表示され、そこに追加したカスタムスタイルが並びます。スタイルを選ぶだけで必要なCSSコードが自動的に挿入され、テキストモードでその内容を確認できます。

手順8：「editor-style.css」に対応するスタイルを記述しておけば、ドロップダウンメニューからスタイルを適用した瞬間に、そのデザインがエディター上に反映されます。

なお、将来的にプラグインを無効化・削除しても、作成済みのエディター用スタイルシートは残ります。ただし、投稿エディターからカスタムスタイルオプションへはアクセスできなくなる点に注意してください。

方法2：functions.phpを編集して手動で追加する

プラグインの利用を避けたい場合は、「functions.php」にコードスニペットを追加することで同じ機能を実現できます。実装は大きく2つのパートに分かれます。ひとつはCSSを挿入するためのボタンをツールバーに追加する処理、もうひとつはCSSスタイルをエディター上で有効化する処理です。

ツールバーにカスタムCSSスタイルボタンを追加する

以下のコードを「functions.php」の末尾に追記してください。なお、このコードはWordPress公式が提供しているサンプルをベースにしています。

// Callback function to insert 'styleselect' into the $buttons array
function my_mce_buttons_2( $buttons ) {
    array_unshift( $buttons, 'styleselect' );
    return $buttons;
}

// Register our callback to the appropriate filter
add_filter( 'mce_buttons_2', 'my_mce_buttons_2' );

// Callback function to filter the MCE settings
function my_mce_before_init_insert_formats( $init_array ) {

    // Define the style_formats array
    $style_formats = array(

        // Each array child is a format with its own settings
        array(
            'title' => '.translation',
            'block' => 'blockquote',
            'classes' => 'translation',
            'wrapper' => true,
        ),

        array(
            'title' => '⇠.rtl',
            'block' => 'blockquote',
            'classes' => 'rtl',
            'wrapper' => true,
        ),

        array(
            'title' => '.ltr⇢',
            'block' => 'blockquote',
            'classes' => 'ltr',
            'wrapper' => true,
        ),

    );

    // Insert the array, JSON ENCODED, into 'style_formats'
    $init_array['style_formats'] = json_encode( $style_formats );
    return $init_array;
}

// Attach callback to 'tiny_mce_before_init'
add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats' );

このコードは、自分のスタイルオプションに合わせてカスタマイズが必要です。上記の例では、各配列がひとつのスタイルオプションに対応しています。「title」にスタイル名、「block」にブロックタイプ、「classes」にCSSクラス名を指定し、要素がラッパーの場合は「wrapper」を「true」、そうでなければ「false」にします。

新しいスタイルオプションを追加したいときは、配列を丸ごと複製して各フィールドを書き換えるだけです。筆者の場合、最初の配列を自サイトの「Blue Button（青いボタン）」オプション向けに編集しています。

カスタマイズが完了したら、修正した「functions.php」を保存し、サーバーにアップロードしましょう。

エディター用スタイルシート（editor-style.css）を作成する

次に「editor-style.css」という名前のファイルを作成し、投稿エディター上で再現したいCSSスタイルを記述します。ここで定義するCSSクラス名は、先ほどスタイルオプションのコードで指定したクラス名と完全に一致させる必要がある点に注意してください。

続いて、テーマの「functions.php」を開き、以下のコードを追加します。

// Add custom editor stylesheet
function mte_add_editor_styles() {
    add_editor_style( 'editor-style.css' );
}
add_action( 'init', 'mte_add_editor_styles' );

「editor-style.css」と「functions.php」の両方のファイルをサーバーにアップロードすれば、作業はすべて完了です。以降は、WordPressの投稿エディターからいつでもカスタムスタイルオプションを呼び出せるようになります。

スタイルはリアルタイムでエディターに反映されるので、投稿しながら見た目を確認できるのも大きなメリットです。

これらの方法を使ってWordPressの投稿エディターにカスタムスタイルオプションを追加してみた感想や体験談があれば、ぜひコメント欄で共有してください。