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">大きくしたい文字</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.に移行する際の注意点につきましては下記を参照してください。
Godios.ダウンロード
革新的な表示速度を実現可能にした無料WordpressテーマGodios.のダウンロードはこちらから