WordPress

用意されているclassをエディターに設定する方法-WordPressテーマ「Godios.」

Godios.には「リンク、下線、マーカー、文字の大きさ」などのclassが用意されています。

Godios.に用意されているclass

<a href="#" class="link-icon">リンクアイコンを付けたいリンク</a>
<span class="underline">下線を付けたい文字</span>
<span class="underline blue">ブルーの下線文字</span>
<span class="underline green">グリーンの下線文字</span>
<span class="underline yellow">イエローの下線文字</span>
<span class="underline pink">ピンクの下線文字</span>
<span class="underline orange">オレンジの下線文字</span>
<span class="underline gray">グレーの下線文字</span>
<span class="marker">マーカーを引きたい文字</span>
<span class="marker blue">ブルーのマーカー文字</span>
<span class="marker green">グリーンのマーカー文字</span>
<span class="marker yellow">イエローのマーカー文字</span>
<span class="marker pink">ピンクのマーカー文字</span>
<span class="marker orange">オレンジのマーカー文字</span>
<span class="marker gray">グレーのマーカー文字</span>
<span class="fs20">大きくしたい文字</span>
<span class="fs25">大きくしたい文字</span>
<span class="fs30">大きくしたい文字&lt;/span>

しかし、エディターにそのclassを設定するボタンが用意されていません。CSSをわかっている人ならテキストエディターで直接ソースを書けばよいですが、CSSにあまり明るくない人や、ビジュアルエディターでガンガンスタイルを設定したい人は、エディターにスタイルを設定するボタンをカスタマイズしましょう。

エディターにスタイルを設定する

私の場合、文字サイズを大きくすることもないと思い、下線とマーカーを1色ずつ使えれば良いのでシンプルに下記のclassを追加することにしました。

<span class="underline">下線を付けたい文字</span>
<span class="marker">マーカーを引きたい文字</span>

WordPressのメニューで「外観＞テーマの編集」をクリック。編集するテーマが「Godios. Child Theme」なのを確認し、右のナビから「テーマのための関数 (functions.php)」を選択します。

「これより下に子テーマ用関数をお書きください。」の下に下記ソースを貼り付けます。

function editor_setting($init) {
  $style_formats = array(
        array(
          'title' => 'マーカー',
          'inline' => 'span',
          'classes'=> 'marker'
        ),
        array(
          'title' => '下線',
          'inline' => 'span',
          'classes'=> 'underline'
        )
  );
$init['style_formats'] = json_encode( $style_formats );
  return $init;
}
add_filter('tiny_mce_before_init', 'editor_setting');
 
//エディタのスタイルメニューを有効化
function add_stylebuttons( $buttons ){
         array_splice( $buttons, 1, 0, 'styleselect' );
         return $buttons;
}
add_filter( 'mce_buttons_2' , 'add_stylebuttons' );

追加するclassを増やしたければ、3行目「array(」から7行目」「),」までをコピーして、7行目と8行目の間に増やしたい数だけ追加してください。各ソースの説明は下記です。

title
エディターに表示される任意の名前です。
inline or block
spanやaなどタグ名です。divなどのブロック要素の場合、inlineではなくblockにしてください。
classes
設定するclass名です。

投稿の編集画面に「スタイル」というプルダウンが追加され、設定したスタイルが追加されました。

その他のGodios.に移行する際の注意点につきましては下記を参照してください。

WordPressテーマ「Godios.」に移行する際の注意点

Godios.ダウンロード

革新的な表示速度を実現可能にした無料WordpressテーマGodios.のダウンロードはこちらから

ダウンロード