お問い合わせはコチラから

Cocoonのビジュアルエディタ スタイル拡張を他のテーマで導入する

サイト運営
2018.07.26
スポンサーリンク

この記事では、Simplicity2の後継Wordpress無料テーマである『Cocoon』に実装されている拡張スタイル＋ビジュアルエディタ拡張を他のWordpressテーマでも使えるようにカスタマイズする方法を説明します。

Cocoonのビジュアルエディタ拡張は、メニューが階層化されているのでとても使いやすいと思います。

結論から申しますと、結構簡単に『Cocoon』と同じ拡張スタイルを他のWordpressテーマのビジュアルエディタに導入することができました。

拡張スタイルと言ってるのは、CSSで装飾された囲みやボタンやアンダーラインのことです。それらをエディタから呼び出せるようにするのがビジュアルエディタの拡張になります。

定型文やショートコードを登録し、エディタから呼び出す方法

定型文やショートコードを登録し、エディタから呼び出す方法はいくつかあります。

私が調べた感じでは大きく2通りで、AddQuickTagは難あり（後述）なので、今回はCocoonで採用されているTinyMCEの拡張で対応します。

  • AddQuicktagプラグインを使う
  • WordPressビジュアルエディタ（TinyMCE）を拡張する

AddQuicktagプラグインを使いたくない理由

よく見かけるのが、AddQuicktagというプラグインを使う方法です。

AddQuicktag
AddQuicktag は HTML エディター・ビジュアルエディターへのクイックタグの追加を容易にします。
ja.wordpress.org

クイックタグの登録が面倒くさい

私も最初は使用していました、しかし登録するのがGUI経由でチマチマひとつづつやらないといけないので登録数が増えてくると、嫌になってきます。

1個登録するたびに、たくさんチェックボックスをONにしないといけないのです。

参考：AddQuickTagで設定したクイックタグが表示されない時の対処法

一括登録のために、インポートできるjson形式のファイルを作成すれば一気に登録も可能でしょうが、そのためだけに環境を作るのも時間が惜しい。

クイックタグの選択メニューの階層化ができない

登録が一括でできたとしても、定型文やショートコードの登録項目が増えてくると、AddQuicktagはプルダウンリストが一つしかないので、メニューを階層化しないと使いにくくなります。しかし、その方法もないのか見つけられません。あと、不具合らしき動きも放置されたままなのも気持ち悪い感じがしました。

タグを大量に登録する場合は登録方法、使い勝手ともに難あり

そんなこんなで、AddQuicktagを絶賛している人は多いのですが、登録する段階でかなり心が折れるプラグインなので、今回は使っていません。

もちろん、10個以下ぐらいのショートコードや定型文であればAddQuickTagは導入、登録も簡単ですし、使い勝手も悪くないです。

WordPressビジュアルエディタ（TinyMCE）の『スタイル』を拡張する

CocoonはWordpressのビジュアルエディタを拡張してあります。Cocoonと同じ方法を使うことで資産を利用させてもらおうということです。

Cocoon
SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100％GPLテーマです。
wp-cocoon.com

完全にCocoonをコピーするのは大変ですし、だったらCocoon使えばよいって話なので、今回はビジュアルエディタの『スタイル』をCocoonと同じような見た目に拡張するところまでにします。

ビジュアルエディタの『スタイル』のカスタマイズのコード

スタイル拡張について
スタイル拡張に自分で作ったアンダーラインのCSSを登録することはできませんでしょうか？
wp-cocoon.com

↑のサイトで紹介されているコードを参考に進めていきます。

紹介されているコードが最新のCocoonと比べて少し古いので、最新版を参考にした以下のコードをfunction.phpにコピペすれば、ビジュアルエディタの『スタイル』は拡張されるようになります。

<?php
add_filter( 'tiny_mce_before_init', 'custom_tiny_mce_style_formats' );
function custom_tiny_mce_style_formats( $settings ) {

$font_sizes = array();
for ($i=12; $i <= 22 ; $i++) {
$font_sizes[] = array(
'title' => $i.'px',
'inline' => 'span',
'classes' => 'fz-'.$i.'px'
);
$i++;
}
for ($i=24; $i <= 48 ; $i++) {
$font_sizes[] = array(
'title' => $i.'px',
'inline' => 'span',
'classes' => 'fz-'.$i.'px'
);
$i++;
$i++;
$i++;
}

$style_formats = array(
array(
'title' => __( 'インライン', THEME_NAME ),
'items' => array(
array(
'title' => __( '太字', THEME_NAME ),
'inline' => 'span',
'classes' => 'bold'
),
array(
'title' => __( '赤字', THEME_NAME ),
'inline' => 'span',
'classes' => 'red'
),
array(
'title' => __( '太い赤字', THEME_NAME ),
'inline' => 'span',
'classes' => 'bold-red'
),
array(
'title' => __( '赤アンダーライン', THEME_NAME ),
'inline' => 'span',
'classes' => 'red-under'
),
array(
'title' => __( '打ち消し線', THEME_NAME ),
'inline' => 'span',
'classes' => 'strike'
),
array(
'title' => __( 'キーボードキー', THEME_NAME ),
'inline' => 'span',
'classes' => 'keyboard-key'
),
),
),
array(
'title' => __( 'マーカー', THEME_NAME ),
'items' => array(
array(
'title' => __( '黄色マーカー', THEME_NAME ),
'inline' => 'span',
'classes' => 'marker'
),
array(
'title' => __( '赤色マーカー', THEME_NAME ),
'inline' => 'span',
'classes' => 'marker-red'
),
array(
'title' => __( '青色マーカー', THEME_NAME ),
'inline' => 'span',
'classes' => 'marker-blue'
),
array(
'title' => __( '黄色アンダーラインマーカー', THEME_NAME ),
'inline' => 'span',
'classes' => 'marker-under'
),
array(
'title' => __( '赤色アンダーラインマーカー', THEME_NAME ),
'inline' => 'span',
'classes' => 'marker-under-red'
),
array(
'title' => __( '青色アンダーラインマーカー', THEME_NAME ),
'inline' => 'span',
'classes' => 'marker-under-blue'
),
),
),
array(
'title' => __( 'フォントサイズ', THEME_NAME ),
'items' => $font_sizes,
),
array(
'title' => __( 'ボックス（アイコン）', THEME_NAME ),
'items' => array(
array(
'title' => __( '補足情報(i)', THEME_NAME ),
'block' => 'div',
'classes' => 'information-box'
),
array(
'title' => __( '補足情報(?)', THEME_NAME ),
'block' => 'div',
'classes' => 'question-box'
),
array(
'title' => __( '補足情報(!)', THEME_NAME ),
'block' => 'div',
'classes' => 'alert-box'
),
array(
'title' => __( '補足情報(メモ)', THEME_NAME ),
'block' => 'div',
'classes' => 'memo-box'
),
array(
'title' => __( '補足情報(コメント)', THEME_NAME ),
'block' => 'div',
'classes' => 'comment-box'
),
),
),
array(
'title' => __( 'ボックス（案内）', THEME_NAME ),
'items' => array(
array(
'title' => __( 'プライマリー（濃い水色）', THEME_NAME ),
'block' => 'div',
'classes' => 'primary-box'
),
array(
'title' => __( 'サクセス（薄い緑）', THEME_NAME ),
'block' => 'div',
'classes' => 'success-box'
),
array(
'title' => __( 'インフォ（薄い青）', THEME_NAME ),
'block' => 'div',
'classes' => 'info-box'
),
array(
'title' => __( 'ワーニング（薄い黄色）', THEME_NAME ),
'block' => 'div',
'classes' => 'warning-box'
),
array(
'title' => __( 'デンジャー（薄い赤色）', THEME_NAME ),
'block' => 'div',
'classes' => 'danger-box',
),
),
),
array(
'title' => __( 'ボックス（白抜き）', THEME_NAME ),
'items' => array(
array(
'title' => __( '灰色', THEME_NAME ),
'block' => 'div',
'classes' => 'blank-box'
),
array(
'title' => __( '黄色', THEME_NAME ),
'block' => 'div',
'classes' => 'blank-box bb-yellow'
),
array(
'title' => __( '赤色', THEME_NAME ),
'block' => 'div',
'classes' => 'blank-box bb-red'
),
array(
'title' => __( '青色', THEME_NAME ),
'block' => 'div',
'classes' => 'blank-box bb-blue'
),
),
),
array(
'title' => __( 'ボックス（タブ）', THEME_NAME ),
'items' => array(
array(
'title' => __( 'ボックス（チェック）', THEME_NAME ),
'items' => array(
array(
'title' => __( '灰色', THEME_NAME ),
'block' => 'div',
'classes' => 'blank-box bb-tab bb-check'
),
array(
'title' => __( '黄色', THEME_NAME ),
'block' => 'div',
'classes' => 'blank-box bb-tab bb-check bb-yellow'
),
array(
'title' => __( '赤色', THEME_NAME ),
'block' => 'div',
'classes' => 'blank-box bb-tab bb-check bb-red'
),
array(
'title' => __( '青色', THEME_NAME ),
'block' => 'div',
'classes' => 'blank-box bb-tab bb-check bb-blue'
),
),
),
array(
'title' => __( 'ボックス（コメント）', THEME_NAME ),
'items' => array(
array(
'title' => __( '灰色', THEME_NAME ),
'block' => 'div',
'classes' => 'blank-box bb-tab bb-comment'
),
array(
'title' => __( '黄色', THEME_NAME ),
'block' => 'div',
'classes' => 'blank-box bb-tab bb-comment bb-yellow'
),
array(
'title' => __( '赤色', THEME_NAME ),
'block' => 'div',
'classes' => 'blank-box bb-tab bb-comment bb-red'
),
array(
'title' => __( '青色', THEME_NAME ),
'block' => 'div',
'classes' => 'blank-box bb-tab bb-comment bb-blue'
),
),
),
array(
'title' => __( 'ボックス（ポイント）', THEME_NAME ),
'items' => array(
array(
'title' => __( '灰色', THEME_NAME ),
'block' => 'div',
'classes' => 'blank-box bb-tab bb-point'
),
array(
'title' => __( '黄色', THEME_NAME ),
'block' => 'div',
'classes' => 'blank-box bb-tab bb-point bb-yellow'
),
array(
'title' => __( '赤色', THEME_NAME ),
'block' => 'div',
'classes' => 'blank-box bb-tab bb-point bb-red'
),
array(
'title' => __( '青色', THEME_NAME ),
'block' => 'div',
'classes' => 'blank-box bb-tab bb-point bb-blue'
),
),
),
array(
'title' => __( 'ボックス（ティップス）', THEME_NAME ),
'items' => array(
array(
'title' => __( '灰色', THEME_NAME ),
'block' => 'div',
'classes' => 'blank-box bb-tab bb-tips'
),
array(
'title' => __( '黄色', THEME_NAME ),
'block' => 'div',
'classes' => 'blank-box bb-tab bb-tips bb-yellow'
),
array(
'title' => __( '赤色', THEME_NAME ),
'block' => 'div',
'classes' => 'blank-box bb-tab bb-tips bb-red'
),
array(
'title' => __( '青色', THEME_NAME ),
'block' => 'div',
'classes' => 'blank-box bb-tab bb-tips bb-blue'
),
),
),
array(
'title' => __( 'ボックス（ヒント）', THEME_NAME ),
'items' => array(
array(
'title' => __( '灰色', THEME_NAME ),
'block' => 'div',
'classes' => 'blank-box bb-tab bb-hint'
),
array(
'title' => __( '黄色', THEME_NAME ),
'block' => 'div',
'classes' => 'blank-box bb-tab bb-hint bb-yellow'
),
array(
'title' => __( '赤色', THEME_NAME ),
'block' => 'div',
'classes' => 'blank-box bb-tab bb-hint bb-red'
),
array(
'title' => __( '青色', THEME_NAME ),
'block' => 'div',
'classes' => 'blank-box bb-tab bb-hint bb-blue'
),
),
),
array(
'title' => __( 'ボックス（ピックアップ）', THEME_NAME ),
'items' => array(
array(
'title' => __( '灰色', THEME_NAME ),
'block' => 'div',
'classes' => 'blank-box bb-tab bb-pickup'
),
array(
'title' => __( '黄色', THEME_NAME ),
'block' => 'div',
'classes' => 'blank-box bb-tab bb-pickup bb-yellow'
),
array(
'title' => __( '赤色', THEME_NAME ),
'block' => 'div',
'classes' => 'blank-box bb-tab bb-pickup bb-red'
),
array(
'title' => __( '青色', THEME_NAME ),
'block' => 'div',
'classes' => 'blank-box bb-tab bb-pickup bb-blue'
),
),
),
array(
'title' => __( 'ボックス（ブックマーク）', THEME_NAME ),
'items' => array(
array(
'title' => __( '灰色', THEME_NAME ),
'block' => 'div',
'classes' => 'blank-box bb-tab bb-bookmark'
),
array(
'title' => __( '黄色', THEME_NAME ),
'block' => 'div',
'classes' => 'blank-box bb-tab bb-bookmark bb-yellow'
),
array(
'title' => __( '赤色', THEME_NAME ),
'block' => 'div',
'classes' => 'blank-box bb-tab bb-bookmark bb-red'
),
array(
'title' => __( '青色', THEME_NAME ),
'block' => 'div',
'classes' => 'blank-box bb-tab bb-bookmark bb-blue'
),
),
),
array(
'title' => __( 'ボックス（メモ）', THEME_NAME ),
'items' => array(
array(
'title' => __( '灰色', THEME_NAME ),
'block' => 'div',
'classes' => 'blank-box bb-tab bb-memo'
),
array(
'title' => __( '黄色', THEME_NAME ),
'block' => 'div',
'classes' => 'blank-box bb-tab bb-memo bb-yellow'
),
array(
'title' => __( '赤色', THEME_NAME ),
'block' => 'div',
'classes' => 'blank-box bb-tab bb-memo bb-red'
),
array(
'title' => __( '青色', THEME_NAME ),
'block' => 'div',
'classes' => 'blank-box bb-tab bb-memo bb-blue'
),
),
),
array(
'title' => __( 'ボックス（ダウンロード）', THEME_NAME ),
'items' => array(
array(
'title' => __( '灰色', THEME_NAME ),
'block' => 'div',
'classes' => 'blank-box bb-tab bb-download'
),
array(
'title' => __( '黄色', THEME_NAME ),
'block' => 'div',
'classes' => 'blank-box bb-tab bb-download bb-yellow'
),
array(
'title' => __( '赤色', THEME_NAME ),
'block' => 'div',
'classes' => 'blank-box bb-tab bb-download bb-red'
),
array(
'title' => __( '青色', THEME_NAME ),
'block' => 'div',
'classes' => 'blank-box bb-tab bb-download bb-blue'
),
),
),
array(
'title' => __( 'ボックス（ブレイク）', THEME_NAME ),
'items' => array(
array(
'title' => __( '灰色', THEME_NAME ),
'block' => 'div',
'classes' => 'blank-box bb-tab bb-break'
),
array(
'title' => __( '黄色', THEME_NAME ),
'block' => 'div',
'classes' => 'blank-box bb-tab bb-break bb-yellow'
),
array(
'title' => __( '赤色', THEME_NAME ),
'block' => 'div',
'classes' => 'blank-box bb-tab bb-break bb-red'
),
array(
'title' => __( '青色', THEME_NAME ),
'block' => 'div',
'classes' => 'blank-box bb-tab bb-break bb-blue'
),
),
),
array(
'title' => __( 'ボックス（Amazon）', THEME_NAME ),
'items' => array(
array(
'title' => __( '灰色', THEME_NAME ),
'block' => 'div',
'classes' => 'blank-box bb-tab bb-amazon'
),
array(
'title' => __( '黄色', THEME_NAME ),
'block' => 'div',
'classes' => 'blank-box bb-tab bb-amazon bb-yellow'
),
array(
'title' => __( '赤色', THEME_NAME ),
'block' => 'div',
'classes' => 'blank-box bb-tab bb-amazon bb-red'
),
array(
'title' => __( '青色', THEME_NAME ),
'block' => 'div',
'classes' => 'blank-box bb-tab bb-amazon bb-blue'
),
),
),
),
),
array(
'title' => __( 'ボックス（付箋風）', THEME_NAME ),
'items' => array(
array(
'title' => __( '灰色', THEME_NAME ),
'block' => 'div',
'classes' => 'blank-box sticky'
),
array(
'title' => __( '黄色', THEME_NAME ),
'block' => 'div',
'classes' => 'blank-box sticky st-yellow'
),
array(
'title' => __( '赤色', THEME_NAME ),
'block' => 'div',
'classes' => 'blank-box sticky st-red'
),
array(
'title' => __( '青色', THEME_NAME ),
'block' => 'div',
'classes' => 'blank-box sticky st-blue'
),
),
),
array(
'title' => __( 'バッジ', THEME_NAME ),
'items' => array(
array(
'title' => __( 'バッジ（オレンジ）', THEME_NAME ),
'inline' => 'span',
'classes' => 'badge'
),
array(
'title' => __( 'バッジ（レッド）', THEME_NAME ),
'inline' => 'span',
'classes' => 'badge badge-red'
),
array(
'title' => __( 'バッジ（ピンク）', THEME_NAME ),
'inline' => 'span',
'classes' => 'badge badge-pink'
),
array(
'title' => __( 'バッジ（パープル）', THEME_NAME ),
'inline' => 'span',
'classes' => 'badge badge-purple'
),
array(
'title' => __( 'バッジ（ブルー）', THEME_NAME ),
'inline' => 'span',
'classes' => 'badge badge-blue'
),
array(
'title' => __( 'バッジ（グリーン）', THEME_NAME ),
'inline' => 'span',
'classes' => 'badge badge-green'
),
array(
'title' => __( 'バッジ（イエロー）', THEME_NAME ),
'inline' => 'span',
'classes' => 'badge badge-yellow'
),
array(
'title' => __( 'バッジ（ブラウン）', THEME_NAME ),
'inline' => 'span',
'classes' => 'badge badge-brown'
),
array(
'title' => __( 'バッジ（グレー）', THEME_NAME ),
'inline' => 'span',
'classes' => 'badge badge-grey'
),
),
),
array(
'title' => __( 'ボタン（β機能）', THEME_NAME ),
'items' => array(

array(
'title' => __( 'レッド（小）', THEME_NAME ),
'inline' => 'a',
'classes' => 'btn btn-red'
),
array(
'title' => __( 'レッド（中）', THEME_NAME ),
'inline' => 'a',
'classes' => 'btn btn-red btn-m'
),
array(
'title' => __( 'レッド（大）', THEME_NAME ),
'inline' => 'a',
'classes' => 'btn btn-red btn-l',
),

array(
'title' => __( 'ピンク（小）', THEME_NAME ),
'inline' => 'a',
'classes' => 'btn btn-pink'
),
array(
'title' => __( 'ピンク（中）', THEME_NAME ),
'inline' => 'a',
'classes' => 'btn btn-pink btn-m'
),
array(
'title' => __( 'ピンク（大）', THEME_NAME ),
'inline' => 'a',
'classes' => 'btn btn-pink btn-l'
),

array(
'title' => __( 'パープル（小）', THEME_NAME ),
'inline' => 'a',
'classes' => 'btn btn-purple'
),
array(
'title' => __( 'パープル（中）', THEME_NAME ),
'inline' => 'a',
'classes' => 'btn btn-purple btn-m'
),
array(
'title' => __( 'パープル（大）', THEME_NAME ),
'inline' => 'a',
'classes' => 'btn btn-purple btn-l'
),

array(
'title' => __( 'ディープパープル（小）', THEME_NAME ),
'inline' => 'a',
'classes' => 'btn btn-deep'
),
array(
'title' => __( 'ディープパープル（中）', THEME_NAME ),
'inline' => 'a',
'classes' => 'btn btn-deep btn-m'
),
array(
'title' => __( 'ディープパープル（大）', THEME_NAME ),
'inline' => 'a',
'classes' => 'btn btn-deep btn-l'
),

array(
'title' => __( 'インディゴ[紺色]（小）', THEME_NAME ),
'inline' => 'a',
'classes' => 'btn btn-indigo'
),
array(
'title' => __( 'インディゴ[紺色]（中）', THEME_NAME ),
'inline' => 'a',
'classes' => 'btn btn-indigo btn-m'
),
array(
'title' => __( 'インディゴ[紺色]（大）', THEME_NAME ),
'inline' => 'a',
'classes' => 'btn btn-indigo btn-l'
),

array(
'title' => __( 'ブルー（小）', THEME_NAME ),
'inline' => 'a',
'classes' => 'btn btn-blue'
),
array(
'title' => __( 'ブルー（中）', THEME_NAME ),
'inline' => 'a',
'classes' => 'btn btn-blue btn-m'
),
array(
'title' => __( 'ブルー（大）', THEME_NAME ),
'inline' => 'a',
'classes' => 'btn btn-blue btn-l'
),

array(
'title' => __( 'ライトブルー（小）', THEME_NAME ),
'inline' => 'a',
'classes' => 'btn btn-light-blue'
),
array(
'title' => __( 'ライトブルー（中）', THEME_NAME ),
'inline' => 'a',
'classes' => 'btn btn-light-blue btn-m'
),
array(
'title' => __( 'ライトブルー（大）', THEME_NAME ),
'inline' => 'a',
'classes' => 'btn btn-light-blue btn-l'
),

array(
'title' => __( 'シアン（小）', THEME_NAME ),
'inline' => 'a',
'classes' => 'btn btn-cyan'
),
array(
'title' => __( 'シアン（中）', THEME_NAME ),
'inline' => 'a',
'classes' => 'btn btn-cyan btn-m'
),
array(
'title' => __( 'シアン（大）', THEME_NAME ),
'inline' => 'a',
'classes' => 'btn btn-cyan btn-l'
),

array(
'title' => __( 'ティール[緑色がかった青]（小）', THEME_NAME ),
'inline' => 'a',
'classes' => 'btn btn-teal'
),
array(
'title' => __( 'ティール[緑色がかった青]（中）', THEME_NAME ),
'inline' => 'a',
'classes' => 'btn btn-teal btn-m'
),
array(
'title' => __( 'ティール[緑色がかった青]（大）', THEME_NAME ),
'inline' => 'a',
'classes' => 'btn btn-teal btn-l'
),

array(
'title' => __( 'グリーン（小）', THEME_NAME ),
'inline' => 'a',
'classes' => 'btn btn-green'
),
array(
'title' => __( 'グリーン（中）', THEME_NAME ),
'inline' => 'a',
'classes' => 'btn btn-green btn-m'
),
array(
'title' => __( 'グリーン（大）', THEME_NAME ),
'inline' => 'a',
'classes' => 'btn btn-green btn-l'
),

array(
'title' => __( 'ライトグリーン（小）', THEME_NAME ),
'inline' => 'a',
'classes' => 'btn btn-light-green'
),
array(
'title' => __( 'ライトグリーン（中）', THEME_NAME ),
'inline' => 'a',
'classes' => 'btn btn-light-green btn-m'
),
array(
'title' => __( 'ライトグリーン（大）', THEME_NAME ),
'inline' => 'a',
'classes' => 'btn btn-light-green btn-l'
),

array(
'title' => __( 'ライム（小）', THEME_NAME ),
'inline' => 'a',
'classes' => 'btn btn-lime'
),
array(
'title' => __( 'ライム（中）', THEME_NAME ),
'inline' => 'a',
'classes' => 'btn btn-lime btn-m'
),
array(
'title' => __( 'ライム（大）', THEME_NAME ),
'inline' => 'a',
'classes' => 'btn btn-lime btn-l'
),

array(
'title' => __( 'イエロー（小）', THEME_NAME ),
'inline' => 'a',
'classes' => 'btn btn-yellow'
),
array(
'title' => __( 'イエロー（中）', THEME_NAME ),
'inline' => 'a',
'classes' => 'btn btn-yellow btn-m'
),
array(
'title' => __( 'イエロー（大）', THEME_NAME ),
'inline' => 'a',
'classes' => 'btn btn-yellow btn-l'
),

array(
'title' => __( 'アンバー[琥珀色]（小）', THEME_NAME ),
'inline' => 'a',
'classes' => 'btn btn-amber'
),
array(
'title' => __( 'アンバー[琥珀色]（中）', THEME_NAME ),
'inline' => 'a',
'classes' => 'btn btn-amber btn-m'
),
array(
'title' => __( 'アンバー[琥珀色]（大）', THEME_NAME ),
'inline' => 'a',
'classes' => 'btn btn-amber btn-l'
),

array(
'title' => __( 'オレンジ（小）', THEME_NAME ),
'inline' => 'a',
'classes' => 'btn btn-orange'
),
array(
'title' => __( 'オレンジ（中）', THEME_NAME ),
'inline' => 'a',
'classes' => 'btn btn-orange btn-m'
),
array(
'title' => __( 'オレンジ（大）', THEME_NAME ),
'inline' => 'a',
'classes' => 'btn btn-orange btn-l'
),

array(
'title' => __( 'ディープオレンジ（小）', THEME_NAME ),
'inline' => 'a',
'classes' => 'btn btn-deep-orange'
),
array(
'title' => __( 'ディープオレンジ（中）', THEME_NAME ),
'inline' => 'a',
'classes' => 'btn btn-deep-orange btn-m'
),
array(
'title' => __( 'ディープオレンジ（大）', THEME_NAME ),
'inline' => 'a',
'classes' => 'btn btn-deep-orange btn-l'
),

array(
'title' => __( 'ブラウン（小）', THEME_NAME ),
'inline' => 'a',
'classes' => 'btn btn-brown'
),
array(
'title' => __( 'ブラウン（中）', THEME_NAME ),
'inline' => 'a',
'classes' => 'btn btn-brown btn-m'
),
array(
'title' => __( 'ブラウン（大）', THEME_NAME ),
'inline' => 'a',
'classes' => 'btn btn-brown btn-l'
),

array(
'title' => __( 'グレー（小）', THEME_NAME ),
'inline' => 'a',
'classes' => 'btn btn-grey'
),
array(
'title' => __( 'グレー（中）', THEME_NAME ),
'inline' => 'a',
'classes' => 'btn btn-grey btn-m'
),
array(
'title' => __( 'グレー（大）', THEME_NAME ),
'inline' => 'a',
'classes' => 'btn btn-grey btn-l'
),

),
),
);
$settings[ 'style_formats' ] = json_encode( $style_formats );

//ビジュアルエディターのフォントサイズ変更機能の文字サイズ指定
$settings['fontsize_formats'] = '10px 12px 14px 16px 18px 20px 24px 28px 32px 36px 42px 48px';

return $settings;
}

function.phpのソースが長くなった場合の対処方法

今回のように500行程度もあるソースファイルをfunction.phpに組み込むと、function.phpの管理が面倒になります。

function.phpの肥大化を避ける方法は以下記事が参考になりました。

参考：https://8beat-studio.net/sort-out-wp-functions/

function.phpを分割してincludeする方法が便利で、簡単です。詳細は参考サイトをご覧いただくとして、一番簡単なのは、function.phpのある部分を外部ファイルに分けて、以下の記述をfunction.phpに書いて呼び出すことです。

例：sample.phpを呼び出す場合（.php以前の名前を指定する）

get_template_part( 'sample' );

こうすることで、function.phpがかなりすっきりします。

function.phpの処理が遅い場合の対処

今回のような長いfunction.phpの記述を追加するとWebサイトが表示されるまで時間がかかるようになるかもしれません。

今回function.phpに追加した記述は、管理画面でしか使いませんから、そのような場合のみ読み込むようにすれば、スピードが遅くなりません。

if ( !is_admin() || ($pagenow != 'edit.php') ) {
ここに管理画面だけ必要な処理
}

参考：https://blog.dreamhive.co.jp/yama/13799.html

最新版のCocoon ビジュアルスタイルのファイル

Cocoon内部で呼び出しているビジュアルスタイルの定義ファイルは、
lib/admin-tinymce-qtag.php
というファイルになります。

githubに最新版が公開されているので、Cocoonをインストールしなくても中身を確認することができますし、このファイルを呼び出すだけでTinyMCEにスタイルが追加されます。

#https://github.com/yhira/cocoon/blob/master/lib/admin-tinymce-qtag.php

拡張スタイル用のCSSを追加する

追加した拡張スタイルは、ビジュアルエディタから呼び出すことができるようになりますが、肝心のスタイル定義がなければclassの追加しかしてないので、見た目は変わりません。

それぞれのCSSがどのようになっているかはCocoonのサイトで拡張スタイルの説明ページがあります。それぞれのページで見本が置いてありますので、Chromeなどの検証ツールで使われているCSSを確認して抜き出せばよいと思います。

記事装飾用の拡張スタイル
本文などを装飾するための拡張スタイルの紹介です。 Cocoonでは基本的に、ビジュアルエディターの「スタイル」「タグ」ドロップダウンボックスからクリック操作で利用することが可能です。
wp-cocoon.com

自分の場合は、Cocoonをインストールして、Cocoonのstyle.cssをWordpress管理画面から

外観⇒テーマの編集⇒style.cssを確認

必要な拡張スタイル定義を自分のstyle.cssに追加する方法を取りました。

まとめ

この記事には、CSS部分が無いのでかなり手抜きな記事（コピペですべて適用可能ではない）なのですが、CSS部分はわかるんだけどビジュアルエディタの拡張方法（特に階層付きメニュー）がわからなかったという人にとっては、簡単に導入できる内容ではないかと思います。

スポンサーリンク
この記事を書いた人
ブーン

はるばる日本よりオランダ王国へやってまいりました。
自分の経験が少しでも参考になれば嬉しいです。
お問い合わせは、『こちら』からお願い致します。

＼ブーンをフォロー／
スポンサーリンク
サイト運営
LuxeritasWordpressテーマ
＼シェアお願いします！／
＼ブーンをフォロー／
こんな記事も読まれています

失敗しないレンタルサーバーランキング

mixhost

不正アクセスに強くて使いやすいおススメサーバー
＼本サイトで利用中／
メリット①：自動ウィルス駆除対応
メリット②：サイトの表示速度が速い！
メリット③：転送量の上限が多い！
メリット④：自由にプラン変更ができ、アクセス増にも対応できる！
メリット⑤：バックアップデータが無料で復元できる！
メリット⑥：Wordpressが簡単にインストールできる！
メリット⑦：どのプランでも初期費用が無料！
メリット⑧：10日間の無料お試し期間と30日の返金保証！

公式ページ
Conoha Wing

国内Wordpress最速の最強サーバー
メリット①：圧倒的な表示速度
メリット②：レンタルサーバーと独自ドメインがセットでお得◎
メリット③：プラン変更はすべてのプランで自由自在
メリット④：一か月の利用転送量の制限が緩い（9TB～）
メリット⑤：WordPresサイトの移行が簡単

公式ページ
エックスサーバー

国内シェアNo1の安定性と実績が魅力。ALL SSDで死角なしの万能サーバー。
メリット①：サイトの表示速度が安定して速い！
メリット②：アクセス負荷に強くて安定性が高い！
メリット③：24時間365日の充実サポートで安心！電話サポートもあり！
メリット④：転送量が多い！
メリット⑤：自動バックアップ機能付き！
メリット⑥：WordPressが簡単にインストールできる！
メリット⑦：10日の無料お試し期間がある！

公式ページ
ブーン
目次
  1. 定型文やショートコードを登録し、エディタから呼び出す方法
  2. AddQuicktagプラグインを使いたくない理由
    1. クイックタグの登録が面倒くさい
    2. クイックタグの選択メニューの階層化ができない
    3. タグを大量に登録する場合は登録方法、使い勝手ともに難あり
  3. Wordpressビジュアルエディタ（TinyMCE）の『スタイル』を拡張する
    1. ビジュアルエディタの『スタイル』のカスタマイズのコード
    2. function.phpのソースが長くなった場合の対処方法
    3. function.phpの処理が遅い場合の対処
  4. 最新版のCocoon ビジュアルスタイルのファイル
  5. 拡張スタイル用のCSSを追加する
  6. まとめ
タイトルとURLをコピーしました