Simplicityでクイックタグを追加しようとしたらちょっと手間取った（訂正）

WordPressのこと
2017.07.01

 

2017.7.20訂正
上書きされる原因がわかりましたので記事を訂正しました

WordPressでの記事作成に便利なクイックタグの機能。
テキストエディタを使う場合にワンクリックでタグ挿入ができるので、よく使うスタイルをclassに設定したhtmlタグをクイックタグに設定しておくと記事の装飾がとても速く行えます。

前々からこの機能は知っていたのですがようやく重い腰を上げてfunctions.phpに必要なコードを記述。しかしなぜか私が使っている無料のWordpressテンプレート「Simplicity2」では追加はできたもののテンプレートに最初から設定されていたタグが消えてしまいました。

親テーマで設定されたクイックタグは子テーマで上書きされる

素晴らしいテンプレートSimplicity2では最初からいくつかオリジナルのスタイルをクイックタグとして設定されていたのですが、子テーマで追加するとそれらが上書きされてしまうようです。

親テーマのクイックタグが上書きされたのは、クイックタグを追加する方法を検索でしらべてそのままコピーしたからでした。

クイックタグを追加するためには関数を新たに作りますが、親テーマで使っている関数と同じ関数名だったため内容が上書きされたのでした。

対応策

親テーマとは違う関数名で追加分を子テーマのfunctions.phpに

simplicity親テーマのlibディレクトリにあるqtags.phpのクイックタグに関する記述をまるまる子テーマのfunctions.phpにコピーし、そこへオリジナルのクイックタグを追記しました。

simplicityの場合「add_quicktags_to_text_editor()」という関数が使われているので、これとは違う名前の関数で追加分のコードをfunctions.phpに記述していきます。

if ( !function_exists( 'new_add_quicktags_to_text_editor' ) ){
function new_add_quicktags_to_text_editor() {
  //スクリプトキューにquicktagsが保存されているかチェック
  if (wp_script_is('quicktags')){?>
    <script>
      QTags.addButton('任意で一意のID','ラベル','開始タグ','終了タグ');
    </script>
  <?php
  }
}
}
add_action( 'admin_print_footer_scripts', 'new_add_quicktags_to_text_editor' );

simplicityのqtags.phpより流用して、関数名の最初にnew_とつけることで上書きを回避しました。

この方法によるメリットは、似たような内容のタグを追加したいときにコピペで対応できるところですね。spanタグやdivタグそのままクラスだけ変えたいときはこっちのほうが手っ取り早いかなと思います。

プラグイン「AddQuicktag」を使う

クイックタグを簡単に追加するプラグインAddQuicktagを使用すると親テーマのクイックタグを引き継いだままオリジナルのクイックタグを追加して使用できます。

AddQuicktagを使うメリットはテーマのアップデートでもしクイックタグに修正があった場合でも問題なくテーマのクイックタグを使えること。めったになさそうですが・・・。
そしてテーマを変更してもプラグインの場合は設定を引き継ぎますがどっちにしても手直しは必要になるのだから他の設定もろともfunctions.phpをコピペのほうが楽な気がします。

投稿・固定ページその他エディタによって表示非表示の設定が簡単にできるのもいいのですが、functions.phpでもできることなのでメリットかなあ？

デメリットは追加はともかく削除が煩わしい点ですね。

おまけ

追記したのはこんなかんじです

functions.php

if ( !function_exists( 'new_add_quicktags_to_text_editor' ) ){
function new_add_quicktags_to_text_editor() {
  //スクリプトキューにquicktagsが保存されているかチェック
  if (wp_script_is('quicktags')){?>
    <script>
      QTags.addButton('qt-link-w-red','[ RED ]','<span class="link-w link-red">','</span>');
      QTags.addButton('qt-link-w-blue','[ BLUE ]','<span class="link-w link-blue">','</span>');
      QTags.addButton('qt-link-w-orenge','[ ORENGE ]','<span class="link-w link-orenge">','</span>');
      QTags.addButton('qt-link-w-green','[ GREEN ]','<span class="link-w link-green">','</span>');
      QTags.addButton('qt-link-m-red','[R]','<span class="link-m link-red">','</span>');
      QTags.addButton('qt-link-m-blue','[B]','<span class="link-m link-blue">','</span>');
      QTags.addButton('qt-link-m-orenge','[O]','<span class="link-m link-orenge">','</span>');
      QTags.addButton('qt-link-m-green','[G]','<span class="link-m link-green">','</span>');
    </script>
  <?php
  }
}
}
add_action( 'admin_print_footer_scripts', 'new_add_quicktags_to_text_editor' );

style.css

.link-m a{
display:inline-block;
text-align:center;
border-radius:5px;
text-decoration:none;
margin:0.5em;
font-size:16px;
padding:5px;
box-shadow:2px 2px #999;
text-shadow:1px 1px #222;
}
.link-w a{
display:block;
text-align:center;
border-radius:5px;
text-decoration:none;
margin:1em;
font-weight:bold;
font-size:18px;
padding:5px 10px;
box-shadow:4px 4px #ccc;
text-shadow:2px 2px #222;
}

.link-red a{
color:white;
background:#900;
}

.link-red a:hover,
.link-red a:active{
background:#C33;
}

.link-blue a{
color:white;
background:#009;
}

.link-blue a:hover,
.link-blue a:active{
background:#33C;
}

.link-green a{
color:white;
background:#090;
}

.link-green a:hover,
.link-green a:active{
background:#3C3;
}

.link-orenge a{
color:white;
background:#F80;
}

.link-orenge a:hover,
.link-orenge a:active{
background:#FC6;
}

サンプル

<span class="link-w link-red"><a href="#">SampleText1</a></span>
<span class="link-m link-orenge"><a href="#">SampleText2</a></span>

SampleText1
SampleText2

横幅いっぱいのボタンと、インラインのボタンです。aタグを囲って使います。

コメント

タイトルとURLをコピーしました