SimplicityにクイックタグのボタンとTinyMCEスタイルを追加する方法【暫定版】

恐らくほとんどの方がそうしているだろうとは思いますが、私がWordPressのエントリーを書く時はまずテキストエディタで下書きをしておいて、それをWordPressに貼り付けて体裁を整えてから公開するという方法をとっています。

その時に便利なのがビジュアルエディタのプルダウンメニューから選べるスタイルや、テキストエディタからボタンをクリックする事で利用出来るクイックタグの機能です。

当サイトで利用させていただいている無料WordPressテーマのSimplicityには、デフォルトでいくつもスタイルやクイックタグが登録されていますが、この中に自分で作成したスタイルも追加したいなーという事で、今日のエントリーではその方法について書いてみたいと思います。

スポンサーリンク

あくまでも【暫定版】という事で

実を言いますと当エントリーは一旦ボツにしようと思っていたものを、例によって「せっかく書いたのにお蔵入りにするのもなぁ…」というもったいない精神から公開したものだったりします。機能的にはちゃんと目的は果たせているんですが、もっとスマートなやり方があるだろうなと書いた後で思った事もあり、正直あまりお薦め出来る方法では無いかな?といった内容になります。

ですので、それでもあえて「やってみなけりゃわからねぇ」というチャレンジャーな方や、何でもいいから色々触ってカスタマイズの練習をしたいという方には良いかもしれませんが、そうでない方はさらっと流して読む程度に留めておいた方が良いかもしれません。

という事をまずお断りしておきますね?

クイックタグとTinyMCEスタイルとは

ちなみにクイックタグのボタンというのは、投稿・固定ページ編集画面のテキストエディタ側にあるこの部分になります。

Simplicity クイックタグ

そしてTinyMCEのスタイルは、ビジュアルエディタ側にあるプルダウンメニューから選択する事が出来ます。

Simplicity TinyMCEスタイル

ビジュアルエディタにこの「スタイル」のプルダウンメニューが表示されていない場合は、「ツールバー切り替え」ボタンをクリックするか、Shift+Alt+Zキーを押す事でひょこっと現れるはずです。

ビジュアルエディタ ツールバー切り替えボタン

余談になりますが、TinyMCE Advancedというプラグインをインストールすると、このボタンやプルダウンメニューの配置を好きなように変更する事が出来ます。

「拡張して拡張します。」ってどんだけ拡張する気なの。

TinyMCE Advancedをインストールした後、プラグイン > TinyMCE Advanced > 設定項目、またはダッシュボードの 設定 > TinyMCE Advanced を開くとエディター設定という画面になります。

TinyMEC Advanced エディター設定画面

この画面でボタンやメニューをドラッグ&ドロップで自由に配置する事が出来ますので、自分が使い易いようにレイアウトを変更しておくとビジュアルエディタの使い勝手が飛躍的に向上します。お薦めと言うか個人的には必須なプラグインの一つですね。

まぁ私の場合コレ使っててもエントリー書くのにすっごい時間かかりますが…

SimplicityにクイックタグとTinyMCEスタイルを追加しよう

本来ならばfunctions.phpに追記するのが正しい方法のようですが、今回は「出来るだけ簡単に」という点を重視したいので、あえてSimplicityの中でクイックタグとTinyMCEのスタイルを追加している部分に便乗させてもらう方向で考えてみました。

いつもならここで親テーマからファイルをコピーしてくる事になりますけど、今回変更を加えようとしているファイルは基本的なテンプレートファイルより1つ下の階層のフォルダにあるので、親テーマと同じ構成で子テーマ内にコピーしても自動では読み込んでくれません。

さて、どうしたものか…

仕方が無いので親テーマを直接修正する事も考えましたが、そうすると今度は親テーマを更新する度に追加した内容が元に戻ってしまいます。幸いそのファイル自体は頻繁に更新される類のものではないので、やはり子テーマの方にコピーして読み込ませるしか無いようです。

そこで今回の作業はこんな感じになるかと。

  • 【親テーマ】qtags.phpをコピー
  • 【子テーマ】コピーしたqtags.phpをアップロード
    ※先にPC上で編集してからアップロードしてもOKです。
  • 【子テーマ】qtags.phpにクイックタグとスタイルを追加
  • 【子テーマ】functions.phpに読み込み部分を追記
  • 【親テーマ】functions.phpの読み込み部分をコメントアウト

functions.phpは一歩間違うとWordPressが真っ白になる事もある危険なファイルですので出来るだけ触りたくないところですが、子テーマ側はコピペのみで親テーマ側は一行コメントアウトするだけですのでたぶん大丈夫…だと思います。

【親テーマ】qtags.phpをコピー

さて、このqtags.phpというファイルは親テーマ内のlibというフォルダにあります。これをFTPかファイルマネージャー、または親テーマのzipファイルから取り出します。

【子テーマ】コピーしたqtags.phpをアップロード

この部分に関してはPHPファイルの修正方法によって順番が前後する事もあるかと思います。ここでは先に子テーマのフォルダ内にアップロードしてWordPressのダッシュボードから修正する場合を想定して書いていますが、PC上でqtags.phpを修正してからアップロードしてもOKです。

修正したqtags.phpをどこにアップロードするかは、親テーマと同じ構成にしても良いですし、子テーマの他のファイルと同じフォルダでも好きにしていただいて結構です。何れにしても場所を指定して読み込ませる必要がありますので。

WordPressにはFTPかファイルマネージャーを使ってアップロードします。もちろん好きな場所と言っても子テーマのフォルダ内にはして下さいね?

【子テーマ】qtags.phpにクイックタグとスタイルを追加

それではまずクイックタグのボタンから追加します。

クイックタグのボタンを追加

qtags.phpを開くと先頭の方にクイックタグの部分があります。

基本的にはこの部分

QTags.addButton('qt-bold','太字','<span class="bold">','</span>');

これと同じような行がいくつも並んでいると思います。どの行でも良いのでそれをコピペで追加したい分だけ増やして、その内容を必要に応じて書き換えるだけです。

挿入する場所は好きにしていただいて構いませんが、頻繁に使うスタイルなら出来るだけ上の方が使い勝手は良いでしょうし、たまにしか使わないのなら一番下でも良いと思います。

クイックタグの一番下にあるこの行がちと気になりますが…

QTags.addButton('qt-bold','','<div class="bold">','</div>');

2つ目の項目(displayにあたる部分)が空ですしどう見ても無効な行に見えますので、削除してしまうかこの行に上書きしても良さそうです、と言うか私はしました。

それではサンプルとして一つ追加してみたいと思います。

QTags.addButton('qt-blackbox','blackbox','<div class="blackbox">','</div>');

クイックタグの追加については以上になります。まだこの時点では反映されませんが、適用後はこんな感じで追加されます。

Simplicity クイックタグ 追加分の反映を確認

TinyMCE用のスタイルを追加

先ほどと同じqtags.phpを編集しますが、今度は下の方にあるので以下のコメントが出てくるまでスクロールします。

//TinyMCE追加用のスタイルを初期化

そのコメント行の下にクイックタグと同様にスタイルの設定部分が並んでいます。以下の内容で1セットなので追加したいスタイルの数だけコピペして内容を書き換えます。

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

こんな感じで追加してみました。

array(
  'title' => 'blackbox',
  'block' => 'div',
  'classes' => 'blackbox'
),

各項目の意味は見れば何となくわかりますが一応。

  • title ビジュアルエディタのプルダウンメニューに表示される見出し
  • block divの場合はブロック要素なのでblock、spanの場合はインライン要素なのでinlineとするようです
  • classes クラスセレクタです
    複数指定は半角スペースを空けて続けて記述します

個人的には最後のarrayも「,」で終わっててええんかいな…と思いますが、現行それで動いているので大丈夫なのだろうと思います。PHPに関してはホントに素人ですから、わからないなりに見よう見まねでやってますのでね…

こちらも反映はまだですが、適用後はこんな感じになります。

Simplicity TinyMCEスタイル 追加部分の反映を確認

【子テーマ】functions.phpに読み込み部分を追記

ここでの作業は一歩間違うとWordPressのダッシュボードすら開けなくなりますので、いつでも元の状態に戻せるよう万全の状態で作業した方が良さそうですよ?

マジメな話、FTPかファイルマネージャーでfunctions.phpをすぐに元の状態に戻せるようスタンバっておいてから作業に入る事を全力で推奨します。

この読み込みに関する部分が今回の作業で一番悩んだところなんですが、どの方法で読み込ませるのが良いのか素人なりに色々と考えてこの形にしてみました。

//クイックタグボタンとTinyMCEのスタイル追加用

//子テーマにサブフォルダ「lib」を作成してその中に入れた場合
require_once( get_stylesheet_directory() . '/lib/qtags.php' );

//子テーマにそのまま入れた場合
require_once( get_stylesheet_directory() . '/qtags.php' );

本当にこの方法で良かったのかどうかはさておき、とりあえずはこれで編集したファイルを読み込んでくれるようになります。

【親テーマ】functions.phpの読み込み部分をコメントアウト

この作業が必要かどうかも正直言って自信がありませんが、要は親テーマ側のファイルを読み込むのがムダになるのでその部分はコメント化しておきたいという事です。

その前に2つのパターンでテストを行ってみました

親テーマのqtags.phpを削除

子テーマで読み込んでいれば親テーマ側ではもう読まないかな?というのを確認する為に親テーマのqtags.phpをこっそり削除してみたら、予想通りWordPressがお逝きになられたのでやはり読み込みには行っているようです。

何回もWordPressの白い画面を出しているとその内に耐性がついてきますので、むしろ慣れておいた方がいざという時に慌てなくて済むかもしれません。

親テーマと子テーマのqtags.phpを違う内容にする

せっかく子テーマで読み込むようにしても親テーマに上書きされては意味がありませんので、それぞれのqtags.phpを違う内容で編集してみましたが、結果を見ると子テーマの内容が反映されていました。

どうもまだWordPressの読み込み順がいまいちよくわかりません…

そんなわけで結果的にはやらなくてもいい事になりますが、どうも腑に落ちないというか気持ちが悪いので、親テーマではこのファイルは読み込まないようにしておきます。

私の場合はカスタマイズの練習という目的もあるので、多少ムダな事でも色々とやっておきたいというところもありますしね?

functions.phpの読み込み部分をコメントアウト

functions.phpを開くと、先頭の方にびっしりとinclude文が並んでいます。その最後の方に

include 'lib/qtags.php';     //クイックタグ関係の関数

という部分がありますのでその行の先頭に「//」をつけて

//include 'lib/qtags.php';     //クイックタグ関係の関数

このようにします。

先ほども書きましたが、結果的にはどこもおかしくなっていないのでこの作業に関してはどうしてもやらなければならないという事は無いですし、親テーマを更新すると毎回元に戻ってしまうので面倒になったら放置してしまっても良いかなと思ってます。

あくまでもタグの追加だけです

今回の作業で出来るようになる事は「編集画面から簡単にスタイルを適用出来るようになる」という事だけですので、そのスタイルの内容と言うかCSSは当然ながら別途作成してやる必要があります。

CSSはカスタマイザーの「追加CSS」の中でもいいですし、style.css(設定によってはmobile.cssやresponsive.cssも)に記述してもOKです。

しつこいようですが【暫定版】という事で

親テーマの更新の度に変更が入るファイルではないと思いますが、それでもこのファイルに変更が無い事を時々は確認した方が良さそうです。

とは言うものの、それもなにげに効率が悪いのでやはり他の方法を考えた方が良さそうな気もするんですよね…という事で改訂版を考えてみたいと思っています。

そんなわけで今回のエントリーでは、Simplicityの中のそのファイルでそういう事をやってるのねーくらいに思っていただいた方がよろしいかもしれません。という何とも煮え切らないオチで申し訳ありませんが、とりあえず今日はそんなところで。

スポンサーリンク
トップへ戻る