テーマカスタマイザーの設定をエディタースタイルに反映させる方法の紹介

日付 2017年2月2日

カテゴリーカスタマイズ

最近そういえばあまりカスタマイズ方法について書いていなかったので、テーマ「ShapeShifter」でも取り入れているエディタースタイルの生成方法について紹介していこうと思います。

ところでエディタスタイルってどのスタイルが使用されているかご存知でしょうか？

既に利用されている方はご存知でしょうが、実はビジュアルエディタ用のスタイルを作成して、それをワードプレスの関数「add_editor_style」で読み込ませているんです。そうするとエディタスタイル用にCSSファイルが必要になるんです。

ですので、恐らくですが、大体のエディタスタイルはテーマのコンテンツ部分のCSSコードをコピペして、ラッパークラスなどの変更をするのであれば一部編集しておいて、あとは上記のコードで読ませるだけでしょう。

でも、CSSファイルに直接テーマカスタマイザーで設定した値を入力することってできないじゃないですか。また、直接管理画面のフッターあたりにスタイルを出力しても、ビジュアルエディタはiframeで表示されていますので、管理画面でスタイルを出力しても反映されないんですよ。ええ、上記のコードで読ませるとiframe内でスタイルを読ませることが出来るんですよ。

そこでどうやってテーマカスタマイザーのスタイル設定を反映させるのか、というのが今回のテーマです。

解決方法はエディタスタイルの自動生成

具体的なコーディングの前に、何をするかアイディアの整理をします。

テーマカスタマイザーでの設定値を反映させるには、通常テーマのヘッダーやフッターに出力しますよね？それと似た方法でエディタスタイル用のCSSコードを使えるようにしておきます。

中にはPHPファイルのヘッダーから編集して、CSSファイルのように扱っているケースもあるようですが、個々で紹介するのはCSSファイルを生成する方法です。

簡単に３ステップで出来るようになっていますので、思ったほど難度を感じないんじゃないかと思います。

エディタスタイル生成の下準備

まず、最初に任意のディレクトリにCSSファイルを作成します。名前は適当で構いませんし、何も書く必要もありません。

そして、次にワードプレス関数「add_editor_style」をコールする関数をアクションフック「admin_init」で読ませるようにします。

<?php

add_action( 'admin_init', 'add_your_editor_styles' );
function add_your_editor_styles() {

  add_editor_style( esc_url( get_template_directory_uri() . '/path/to/your-editor-style.css' ) );

}

?>

サードパーティのスタイルも併用したい場合は、同様の方法で一緒に読ませるようにしておきます。

これでビジュアルエディタ上で「your-editor-style.css」が反映されるようになった筈です。まだ何も書いていないと思いますが、「p { color: red; }」でも何でも構いませんのでCSSファイルに書き込んでみて、ちゃんと反映されているか確認しておいてください。

準備は以上です。

では、次からは生成方法についてです。

まずはPHPでスタイルを取得できるようにしておく

テーマカスタマイザーで設定する値ですから、PHPでスタイルを取得する必要がありますので、まずはCSSコードを書くことが出来るようなPHPファイルが必要になります。

まずは「get_theme_mods」ですべてのテーマカスタマイザーでの設定値を取得できますので、これを変数に与えます。

ちょっと変数「$styles」を作成してそれにCSSコードを与える例を書いておきます。

<?php
function get_your_generated_editor_style() {

  $your_theme_mods = get_theme_mods();

  $styles = '';

  $styles .= '
    .selector1 { 
      color: ' . $your_theme_mods['selector1-color'] . ';
    }
  ' ;
  $styles .= '.selector2 { font-size: ' . $your_theme_mods['selector2-font-size'] . '; } ';
  $styles .= '.selector3 { font-weight: ' . $your_theme_mods['selector3-font-weight'] . '; } ';
  $styles .= '.selector4 { font-family: ' . $your_theme_mods['selector4-font-family'] . '; } ';

  // その他のスタイルの追加

  $styles = sanitize_text_field( $styles );

  return $styles;

}
?>

これでここで定義された関数「your_get_generated_editor_style」で生成したCSSコードを取得できるようになります。必要ならフィルターを付けてもいいと思います。

最後に「sanitize_text_field」でサニタイズするのは、勿論本来のサニタイズの意味もありますが、これで改行なども削除できますので、文字数を削減できるからでもあります。

で、一応の補足ですが、CSSファイルを生成するのに使いますので、バックスラッシュを使う場合はエスケープして入力しておいてください。

使用例としてはCSSアイコンなどでプロパティの疑似クラスに与えるプロパティ「content」の値です。FontAwesomeなどユニコードの前にバックスラッシュが入りますが、このバックスラッシュは「//」のようにエスケープしておきます。

ワードプレスのファイルシステムでCSSファイルに書き込み

ワードプレスにもファイルシステム関数やクラスが用意されていますので、これを使用して生成したコードを空の「your-editor-style.css」に書き込みます。

ファイルシステムを使うにはアクションフックの「admin_init」以降ですので、関数を作成して保存するコードを書いていきましょう。

<?php
add_action( 'admin_init', 'save_your_editor_styles' );
function save_your_editor_styles() {

  # Preparations
    if ( ! current_user_can( 'manage_options' ) ) {
      return;
    }

    $nonce_url = esc_url( wp_nonce_url( 
      'post.php', 
      'your-editor-style' 
    ) );

    # Check
      if ( false === ( $creds = request_filesystem_credentials( $nonce_url, '', false, false, null ) ) ) {
        return;
      }

    # Init WP_Filesystem_Base
      if ( ! WP_Filesystem( $creds ) ) {
        request_filesystem_credentials( $nonce_url, '', true, false, null );
        return;
      }

      global $wp_filesystem;

  # Vars
    $style = '';


  # Update File
    $editor_style_file = <span class="crayon-e">get_template_directory_uri</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span> <span class="crayon-sy">.</span> '/path/to/your-editor-style.css';
    if ( $wp_filesystem->is_writable( $editor_style_file ) ) {

      $style .= get_your_generated_editor_style();
      $wp_filesystem->put_contents( $editor_style_file, $style );

    }

}
?>

大体こんな感じじゃないでしょうか。

あとは書き込みの条件やフックさせる条件を限定することで、自分の都合の良いタイミングで読み込ませるようにしておきましょう。