Simplicityユーザーさんに
SimplicityからCocoonに乗り換えました。機能が充実してますよ＾＾
スポンサーリンク

WordPress投稿画面クイックタグのカスタマイズ！記事にタグ追加が超簡単：Simplicity

Simplicity2では簡単に記事のスタイルを追加できるよう、ビジュアル・テキストエディタからHTMLタグを追加するTinyMce機能が付いた仕様です。

便利な機能なのでカスタマイズで自分仕様に変更すれば、かなり効率的に記事の装飾作業が進みます。

プラグインアドクイックタグと似ていて、2つを使い分けすればWordPressのエディタで記事を書いても装飾がはかどるので、カスタマイズ方法と使い分けポイントをチェックしてくださいね。

Simplicityビジュアル・テキスト画面：クイックタグのカスタマイズ

スポンサーリンク
スポンサーリンク

プラグイン、アドクイックタグと併用する場合

ビジュアルエディタでタグを追加するだけなら、Simplicityのクイックタグだけで十分活用できます。

  • 使うタグ（装飾）が多く、アドクイックタグと併用した場合
    • ビジュアル画面でSimplicityタグと使いワケができる
      • プラグインは定型文・囲み枠
      • Simplicityは文字装飾のみなど
      • 結果。探しやすくて便利！
    • プラグインは、テキスト画面で不要なビジュアル用タグまで入る欠点も

定型文を使いたい場合プラグイン：アドクイックタグを併用すれば便利ですが、テキスト画面の表示順がテーマが上、プラグインが下に表示されます。

WordPressテキストエディタ：テーマとプラグインのタグの位置関係

  • テキストエディタでしか使えないタグ
    • HTMLタグ内に埋め込む属性 rel="nofollow"など

<a href="アドレス" target="_blank" rel="nofollow">ビバ★りずむの検索結果</a>

タグ内に埋め込むコード（属性）は『テキスト画面からHTMLタグを追加する』ので、下の方にタグを集めていると便利です。

プラグインを使用しない場合、Simplicityの『テキスト専用クイックタグ』で順番を変更すれば、かなり使い勝手がよくなるので、チェックしてください。

テキストエディタのクイックタグのカスタマイズ：Simplicity2

Simplicity付属のクイックタグは2種類あります。ビジュアル・テキストのエディタにそれぞれタグが付けられます。

テキストエディタでできる事は、タグ・定型文を追加、つける順番の指定が可能です。

Simplicity2: qtags.php (lib/qtags.php)にコードがあり、子テーマfunctions.phpで上書きができるので、テキスト画面で使わない既存のタグを削除する方法・独自のタグを追加する方法を順にチェックしてください。

Simplicity既存のテキスト上部にあるタグを減らす

テキストエディタで使わないタグを減らし、スッキリさせると探す手間が減るので、全く使わないタグを確認してください。

テキストエディタ用、クイックタグで使用しないものをチェック

ビジュアルでしか使用しないタグを含め、pre・打ち消し線・補足情報(!)のみを残して、他は削除してみます。

親テーマのqtags.php (lib/qtags.php)ファイルにある下記が元の記載です。

//テキストがエディタにクイックタグボタン追加
//http://webtukuru.com/web/wordpress-quicktag/
//https://wpdocs.osdn.jp/%E3%82%AF%E3%82%A4%E3%83%83%E3%82%AF%E3%82%BF%E3%82%B0API
if ( !function_exists( 'add_quicktags_to_text_editor' ) ):
function add_quicktags_to_text_editor() {
  //スクリプトキューにquicktagsが保存されているかチェック
  if (wp_script_is('quicktags')){?>
    <script>
      QTags.addButton('qt-pre','pre','<pre>','</pre>');
      QTags.addButton('qt-bold','<?php _e( '太字', 'simplicity2' ) ?>','<span class="bold">','</span>');
      QTags.addButton('qt-red','<?php _e( '赤字', 'simplicity2' ); ?>','<span class="red">','</span>');
      QTags.addButton('qt-bold-red','<?php _e( '太い赤字', 'simplicity2' ); ?>','<span class="bold-red">','</span>');
      QTags.addButton('qt-red-under','<?php _e( '赤アンダーライン', 'simplicity2' ); ?>','<span class="red-under">','</span>');
      QTags.addButton('qt-marker','<?php _e( '黄色マーカー', 'simplicity2' ); ?>','<span class="marker">','</span>');
      QTags.addButton('qt-marker-under','<?php _e( '黄色アンダーラインマーカー', 'simplicity2' ); ?>','<span class="marker-under">','</span>');
      QTags.addButton('qt-strike','<?php _e( '打ち消し線', 'simplicity2' ); ?>','<span class="strike">','</span>');
      QTags.addButton('qt-ref','<?php _e( 'バッジ', 'simplicity2' ); ?>','<span class="ref">','</span>');
      QTags.addButton('qt-keyboard-key','<?php _e( 'キーボード', 'simplicity2' ); ?>','<span class="keyboard-key">','</span>');
      QTags.addButton('qt-information','<?php _e( '補足情報(i)', 'simplicity2' ); ?>','<div class="information">','</div>');
      QTags.addButton('qt-question','<?php _e( '補足情報(?)', 'simplicity2' ); ?>','<div class="question">','</div>');
      QTags.addButton('qt-alert','<?php _e( '補足情報(!)', 'simplicity2' ); ?>','<div class="alert">','</div>');
      QTags.addButton('qt-sp-primary','<?php _e( 'primary', 'simplicity2' ); ?>','<div class="sp-primary">','</div>');
      QTags.addButton('qt-sp-success','<?php _e( 'success', 'simplicity2' ); ?>','<div class="sp-success">','</div>');
      QTags.addButton('qt-sp-info','info','<div class="sp-info">','</div>');
      QTags.addButton('qt-sp-warning','<?php _e( 'warning', 'simplicity2' ); ?>','<div class="sp-warning">','</div>');
      QTags.addButton('qt-sp-danger','<?php _e( 'danger', 'simplicity2' ); ?>','<div class="sp-danger">','</div>');
    </script>
  <?php
  }
}
endif;
//管理画面のウィジェットページでは表示しない
if ( is_admin() && (($pagenow != 'widgets.php') && ($pagenow != 'customize.php')) ) {
  add_action( 'admin_print_footer_scripts', 'add_quicktags_to_text_editor' );
}

スクリプトに囲まれた9～26行目でpre・打ち消し線・補足情報(!)以外、不要な記載を丸ごと1行削除します。下記のように編集してください。

//テキストがエディタにクイックタグボタン追加
//http://webtukuru.com/web/wordpress-quicktag/
//https://wpdocs.osdn.jp/%E3%82%AF%E3%82%A4%E3%83%83%E3%82%AF%E3%82%BF%E3%82%B0API
if ( !function_exists( 'add_quicktags_to_text_editor' ) ):
function add_quicktags_to_text_editor() {
  //スクリプトキューにquicktagsが保存されているかチェック
  if (wp_script_is('quicktags')){?>
    <script>
      QTags.addButton('qt-pre','pre','<pre>','</pre>');
      QTags.addButton('qt-strike','<?php _e( '打ち消し線', 'simplicity2' ); ?>','<span class="strike">','</span>');
      QTags.addButton('qt-alert','<?php _e( '補足情報(!)', 'simplicity2' ); ?>','<div class="alert">','</div>');
    </script>
  <?php
  }
}
endif;
//管理画面のウィジェットページでは表示しない
if ( is_admin() && (($pagenow != 'widgets.php') && ($pagenow != 'customize.php')) ) {
  add_action( 'admin_print_footer_scripts', 'add_quicktags_to_text_editor' );
}

テキスト画面だけで使うタグが残り、スッキリしました。

スッキリしたテキストエディタのクイックタグに

ポイント

編集は、WordPressのテストサイトやローカル環境でテストしてから、子テーマfunctions.phpに貼り付けてください。

テキストで独自のクイックタグを追加するカスタマイズ

独自のタグ・定型文を追加したい時、スクリプトタグの間（下記コードの場合5行目）に追記します。

    <script>
      QTags.addButton('qt-pre','pre','<pre>','</pre>');
      QTags.addButton('qt-strike','<?php _e( '打ち消し線', 'simplicity2' ); ?>','<span class="strike">','</span>');
      QTags.addButton('qt-alert','<?php _e( '補足情報(!)', 'simplicity2' ); ?>','<div class="alert">','</div>');

    </script>

コードの書き方は、下記の通り。

QTags.addButton( ‘ID‘, ‘ボタン名‘, ‘開始タグ‘, ‘終了タグ‘, ‘アクセスキー‘, ‘タイトル‘, ‘優先度, ‘インスタンス‘ );

  • ID：ローマ字を使って他の名前とかぶらないよう指定
  • ボタン名：テキストエディタに表示される文字列
  • 開始タグ：HTMLに表示される文字列やタグ
  • 終了タグ：テキスト（画像）を囲む閉じタグ
  • アクセスキー：表示順序：適当な数字

アクセスキーについてはAddQuicktagの使い方と設定の『アドクイックタグのアクセスキーの順番の使い方』をチェックしてください。

ですが、『タイトル・優先度・インスタンス』は使わないので、以下のとおり。

QTags.addButton( ‘ID‘, ‘ボタン名‘, ‘開始タグ‘, ‘終了タグ‘, ‘アクセスキー‘ );

改行をしたい時は\nで改行が出来ましたよ。テキストエディタはHTMLを表示するので、自分で改行や段落に変換するのも良いかもしれませんね＾＾

クイックタグ ジェネレーターを使ってコードを作成してもらう

( ‘ID‘, ‘ボタン名‘, ‘開始タグ‘, ‘終了タグ‘, ‘アクセスキー‘ )と値を上述通りに変更するだけですが、苦手な人もいるのでクイックタグを作成できるジェネレーターでコードの作成方法をご紹介！

LINKWordPress Snippet Generator

WordPressでテキストエディタに追加するクイックタグ作成ジェネレーターにアクセスして、IDなどの値を入力します。

クイックタグのジェネレーターに値を入力

このようにIDなど値を入力するだけ。上部にある『#1』から『#6』まで各クイックタグを作成できるので、1度に6個まで作れます。

出来たら下にスクロールすればコードが完成しているので、Copy to Clipboadをクリックしてコードをコピー。

ジェネレーターで作成されたコード

ピンク色のスクリプト内コードの、数字のあと値の入っていない最後の, ''のみ削除すればキチンと反映します。※削除しなくてもエラーは出ない。けど、反映しないので。

QTags.addButton( ‘nofollow’, ‘nofollow’, ‘ rel=”nofollow”‘, ”, ’50’, ” );

上記コードの赤文字のみ削除して、下記のようにする。

QTags.addButton( ‘nofollow’, ‘nofollow’, ‘ rel=”nofollow”‘, ”, ’50’ );

参考まで、変更したコードは以下のコード。最後の『50』は数字が大きいものがテキストエディタのタグ欄の1番後ろに来る感じです。『20』でも『30』でもOK！

        QTags.addButton( 'ruby', 'ルビ', '<span class="ruby-block"><ruby>漢字<rp>(</rp><rt>かんじ</rt><rp>)</rp></ruby></span>', '', '49' );
        QTags.addButton( 'img_link', '画像にリンク', '<a href="リンク先のURL">', '</a>', '49' );
        QTags.addButton( 'center', 'センター寄せ', '<div class="center">', '</div>', '49' );
        QTags.addButton( 'th_col', 'セルの融合', '<th class="col" colspan="4">4融合', '</th>', '50' );
        QTags.addButton( 'ol_reset', 'olリスト2の続きは3', '<ol style="counter-reset: li 3">', '', '50' );
        QTags.addButton( 'nofollow', 'nofollow', ' rel="nofollow"', '', '50' );
        QTags.addButton( 'dl-dt-dd', 'dl定義リスト dt用語 dd説明', '<dl>\n<dt>用語</dt>\n <dd>説明</dd>\n</dl>', '', '49' );

子テーマのfunctions.phpのテキストエディタ用スクリプト内に追記してください。

Simplicity子テーマの任意の場所に貼り付けた例

追加したタグ

タグを追加しました。

※ですが、アクセスキーは反映されてませんね…。文字列順に並ばない・順番の変更はできない事もあるようです。

ビジュアルエディタのクイックタグ（TinyMce）のカスタマイズ

ビジュアルエディタ用のクイックタグは、Simplicityではスタイルを開くと以下のように表示されます。

Simplicityビジュアル専用クイックタグのカスタマイズ

装飾でよく使うタグを上部に置くと、かなり便利なのでオススメですよ。参考まで❦

Simplicityビジュアルのクイックタグを減らす

クイックタグには既にCSSで装飾済みなので、削除する必要は特にありませんが、一切使ってないタグを削除したい場合、減らすことも可能です。

Simplicity2: qtags.php (lib/qtags.php)のビジュアルエディタ用タグのコードは、40～141行目。

//TinyMCE追加用のスタイルを初期化
//http://com4tis.net/tinymce-advanced-post-custom/
if ( !function_exists( 'initialize_tinymce_styles' ) ):
function initialize_tinymce_styles($init_array) {
  //追加するスタイルの配列を作成
  $style_formats = array(
    array(
      'title' => __( '太字', 'simplicity2' ),
      'inline' => 'span',
      'classes' => 'bold'
    ),
    array(
      'title' => __( '赤字', 'simplicity2' ),
      'inline' => 'span',
      'classes' => 'red'
    ),
    array(
      'title' => __( '太い赤字', 'simplicity2' ),
      'inline' => 'span',
      'classes' => 'bold-red'
    ),
    array(
      'title' => __( '赤アンダーライン', 'simplicity2' ),
      'inline' => 'span',
      'classes' => 'red-under'
    ),
    array(
      'title' => __( '黄色マーカー', 'simplicity2' ),
      'inline' => 'span',
      'classes' => 'marker'
    ),
    array(
      'title' => __( '黄色アンダーラインマーカー', 'simplicity2' ),
      'inline' => 'span',
      'classes' => 'marker-under'
    ),
    array(
      'title' => __( '打ち消し線', 'simplicity2' ),
      'inline' => 'span',
      'classes' => 'strike'
    ),
    array(
      'title' => __( 'バッジ', 'simplicity2' ),
      'inline' => 'span',
      'classes' => 'ref'
    ),
    array(
      'title' => __( 'キーボードキー', 'simplicity2' ),
      'inline' => 'span',
      'classes' => 'keyboard-key'
    ),
    array(
      'title' => __( '補足情報(i)', 'simplicity2' ),
      'block' => 'div',
      'classes' => 'information'
    ),
    array(
      'title' => __( '補足情報(?)', 'simplicity2' ),
      'block' => 'div',
      'classes' => 'question'
    ),
    array(
      'title' => __( '補足情報(!)', 'simplicity2' ),
      'block' => 'div',
      'classes' => 'alert'
    ),
    array(
      'title' => __( 'primaryボックス', 'simplicity2' ),
      'block' => 'div',
      'classes' => 'sp-primary'
    ),
    array(
      'title' => __( 'successボックス', 'simplicity2' ),
      'block' => 'div',
      'classes' => 'sp-success'
    ),
    array(
      'title' => __( 'infoボックス', 'simplicity2' ),
      'block' => 'div',
      'classes' => 'sp-info'
    ),
    array(
      'title' => __( 'warningボックス', 'simplicity2' ),
      'block' => 'div',
      'classes' => 'sp-warning'
    ),
    array(
      'title' => __( 'dangerボックス', 'simplicity2' ),
      'block' => 'div',
      'classes' => 'sp-danger'
    ),
  );
  //JSONに変換
  $init_array['style_formats'] = json_encode($style_formats);

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

  return $init_array;
}
endif;
add_filter('tiny_mce_before_init', 'initialize_tinymce_styles', 10000);

これを子テーマのfunctions.phpに貼り付けます。

ポイント

エラー防止のため、ローカル環境BitNami・InstantWordPressまたは、テスト環境のサブドメインのSimplicity2子テーマでまずは試してください。

一度も使った事がないタグは削除します。例えば『dangerボックス』は使用しない場合、下記のコードだけ削除。

    array(
      'title' => __( 'dangerボックス', 'simplicity2' ),
      'block' => 'div',
      'classes' => 'sp-danger'
    ),

この5行が『dangerボックス』タグになります。

  • 『5行がセット』だと覚えて削除や追加してください。
//TinyMCE追加用のスタイルを初期化
//http://com4tis.net/tinymce-advanced-post-custom/
if ( !function_exists( 'initialize_tinymce_styles' ) ):
function initialize_tinymce_styles($init_array) {
  //追加するスタイルの配列を作成
  $style_formats = array(
    array(
      'title' => __( '太字', 'simplicity2' ),
      'inline' => 'span',
      'classes' => 'bold'
    ),
    array(
      'title' => __( '赤字', 'simplicity2' ),
      'inline' => 'span',
      'classes' => 'red'
    ),
    array(
      'title' => __( '太い赤字', 'simplicity2' ),
      'inline' => 'span',
      'classes' => 'bold-red'
    ),
    array(
      'title' => __( '赤アンダーライン', 'simplicity2' ),
      'inline' => 'span',
      'classes' => 'red-under'
    ),
    array(
      'title' => __( '黄色マーカー', 'simplicity2' ),
      'inline' => 'span',
      'classes' => 'marker'
    ),
    array(
      'title' => __( '黄色アンダーラインマーカー', 'simplicity2' ),
      'inline' => 'span',
      'classes' => 'marker-under'
    ),
    array(
      'title' => __( '打ち消し線', 'simplicity2' ),
      'inline' => 'span',
      'classes' => 'strike'
    ),
    array(
      'title' => __( 'バッジ', 'simplicity2' ),
      'inline' => 'span',
      'classes' => 'ref'
    ),
    array(
      'title' => __( 'キーボードキー', 'simplicity2' ),
      'inline' => 'span',
      'classes' => 'keyboard-key'
    ),
    array(
      'title' => __( '補足情報(i)', 'simplicity2' ),
      'block' => 'div',
      'classes' => 'information'
    ),
    array(
      'title' => __( '補足情報(?)', 'simplicity2' ),
      'block' => 'div',
      'classes' => 'question'
    ),
    array(
      'title' => __( '補足情報(!)', 'simplicity2' ),
      'block' => 'div',
      'classes' => 'alert'
    ),

  );
  //JSONに変換
  $init_array['style_formats'] = json_encode($style_formats);

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

  return $init_array;
}
endif;
add_filter('tiny_mce_before_init', 'initialize_tinymce_styles', 10000);

7～66行目、上述『5行のセット』を自由に削除してください。

ビジュアル画面で独自のクイックタグを追加

ビジュアルで独自のタグをSimplicityのクイックタ（TinyMce）に追加したい場合。

  • 文中で使う改行を必要としないspanタグ
  • 改行が必須となるdiv・pタグ

二通りがあります。もっとしっかり知りたい場合、下記をどうぞ。

LINKHTMLのdivとspanの違いは、ブロックレベルとインライン要素★入れ子にしたカスタマイズ例：初心者向け

その時コードの書きかたをチェックして追加してくださいね。

文中で使う（改行を必須としない）spanを追加する時のコード

改行が必須でない：文中の文字を装飾するときの『spanタグ』を使ったときのコードを紹介します。

    array(
      'title' => __( '太字', 'simplicity2' ),
      'inline' => 'span',
      'classes' => 'bold'
    ),

‘title’ => __( ‘太字‘, ‘simplicity2’ ),
‘inline‘ => ‘span‘,
‘classes’ => ‘bold‘

  • タイトルは、ビジュアルのクイックタグに表示する名前
    • 太字
  • 改行を必要しないspanはinline：文中で使うから
    • 'inline' => 'span',
  • class名を入力
    • bold’

この場合タイトルは太字と表示され、追加するtagは<span class="bold">　</span>

上記コード、ピンク色の部分を変更します。

定型文として：表示名とタグ欄に表示。追加するコードは、<span class="class名"></span>でこのようなコードの場合

‘title’ => __( ‘表示名‘, ‘simplicity2’ ),
‘inline‘ => ‘span‘,
‘classes’ => ‘class名‘

例として：表示名はピンクの字、入力したいタグは、<span class="pink"></span>の場合。

    array(
      'title' => __( 'ピンクの字', 'simplicity2' ),
      'inline' => 'span',
      'classes' => 'pink'
    ),

CSS（style.css・editor-style.css）にはピンクの文字になるコードを追加してくださいね。

.pink {
	color: #ff77ff; /*ピンクの文字に*/
}

ちなみに：<span class="class名">テキスト</span>とテキストが入る定型文になると、文字列：テキストは表示されません。

  • 定型文を入れる場合

ビジュアル画面で操作ができるアドクイックタグを導入するか、上述テキスト画面でのカスタマイズをしてください。

タグを置く順番を変更する

ビジュアルでは置いた順番に表示される仕組みになっているので、よく使うタグは上部に頻度が少ないものは下部に変更してください。

下記『キーボード』タグを1番上に持ってきたい場合。

//クイックタグ関係の関数
//TinyMCE追加用のスタイルを初期化
if ( !function_exists( 'initialize_tinymce_styles' ) ):
function initialize_tinymce_styles($init_array) {
  //追加するスタイルの配列を作成
  $style_formats = array(
    array(
      'title' => __( '太字', 'simplicity2' ),
      'inline' => 'span',
      'classes' => 'bold'
    ),
    array(
      'title' => __( 'code', 'simplicity2' ),
      'inline' => 'code',
      'classes' => ''
    ),
    array(
      'title' => __( 'ピンク', 'simplicity2' ),
      'inline' => 'span',
      'classes' => 'pink'
    ),
    array(
      'title' => __( '赤字', 'simplicity2' ),
      'inline' => 'span',
      'classes' => 'red'
    ),
    array(
      'title' => __( 'キーボードキー', 'simplicity2' ),
      'inline' => 'span',
      'classes' => 'keyboard-key'
    ),
  );
  //JSONに変換
  $init_array['style_formats'] = json_encode($style_formats);

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

  return $init_array;
}
endif;
add_filter('tiny_mce_before_init', 'initialize_tinymce_styles', 10000);

キーボードは5番目にある状態

27～31行目を切り取り、1番上に持ってくる為7行目に貼り付ける

//クイックタグ関係の関数
//TinyMCE追加用のスタイルを初期化
if ( !function_exists( 'initialize_tinymce_styles' ) ):
function initialize_tinymce_styles($init_array) {
  //追加するスタイルの配列を作成
  $style_formats = array(
    array(
      'title' => __( 'キーボードキー', 'simplicity2' ),
      'inline' => 'span',
      'classes' => 'keyboard-key'
    ),
    array(
      'title' => __( '太字', 'simplicity2' ),
      'inline' => 'span',
      'classes' => 'bold'
    ),
    array(
      'title' => __( 'code', 'simplicity2' ),
      'inline' => 'code',
      'classes' => ''
    ),
    array(
      'title' => __( 'ピンク', 'simplicity2' ),
      'inline' => 'span',
      'classes' => 'pink'
    ),
    array(
      'title' => __( '赤字', 'simplicity2' ),
      'inline' => 'span',
      'classes' => 'red'
    ),

  );
  //JSONに変換
  $init_array['style_formats'] = json_encode($style_formats);

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

  return $init_array;
}
endif;
add_filter('tiny_mce_before_init', 'initialize_tinymce_styles', 10000);

並び順を変更すれば1番上にくる

ポイント

使用頻度の高いものを上に置くと、相当便利で効率が良い！

枠・段落（改行が必須）div・pタグを追加するコード

段落や枠など、文中で使わない（改行が必要な）タグを追加する場合は、以下のコードを追加してください。

例：タイトルをピンクBOXにし、追加したいタグを<div class="pink_box">　</div>とします。この場合は下記。

    array(
      'title' => __( 'ピンクBOX', 'simplicity2' ),
      'block' => 'div',
      'classes' => 'pink_box'
    ),

CSS（style.css・editor-style.css）で.pink_boxと指定し、装飾をいれると完了です＾＾

.pink_box {
	box-shadow: 0 0 0 1px #FFAFD8; /*濃いめピンク*/
	background-color: #FFDFEF; /*薄めピンク*/
}

このように表示名・タグ・class名と入れるだけでビジュアルで装飾をあてることが可能です。

ポイント

ローカル環境BitNami・InstantWordPress、テスト環境のサブドメインのSimplicity2子テーマfunctions.phpで成功したら、本番環境にコピペし更新！

style.css・editor-style.cssが反映しないときは、キャッシュを削除！ビジュアル画面上でもスタイルの確認が出来て便利です＾＾

Simplicity以外のテーマにも導入したい場合、下記を参考に導入してくださいね。

LINKWordPressのビジュアルエディター（TinyMCE）に独自タグ挿入用のスタイル選択ボックスを追加するカスタマイズ｜寝ログ

ビジュアル画面で装飾する方法は、下記をご覧ください＾＾

ビジュアル画面からアドクイックタグの使い方

さいごに

このカスタマイズをしたキッカケは、アドクイックタグの登録タグが増え探す手間がかかるからです。Simplicityのクイックタグ（Tiny Mce）を活用したら、探すのに手間取るストレスが解消しました。

特にテキスト画面のcodeタグを、ビジュアル画面に持ってくることで、ビックリするほど便利で使い分けは大事と思ったからです。

初めにタグの取捨選択を行うだけで便利になるので、オススメします＾＾

それでは、かうたっくでした❦

Comments

個人情報の取り扱いについてはリンク先をご確認ください。

ご了承・ご理解いただいた上でコメントお待ちしております?

「ビバ★りずむ」ポリシー
トップへ戻る
タイトルとURLをコピーしました