ch@osWordPressから無料系にPC関連までお役立ち情報を満載!なブログを目指しています。無料サービス恐らくほとんどの方がそうしているだろうとは思いますが、私がWordPressのエントリーを書く時はまずテキストエディタで下書きをしておいて、それをWordPressに貼り付けて体裁を整えてから公開するという方法をとっています。その時に便利なのがビジュアルエディタのプルダウンメニューから選べるスタイルや、テキストエディタからボタンをクリックする事で利用出来るクイックタグの機能です。当サイトで利用させていただいている無料WordPressテーマのSimplicityには、デフォルトでいくつもスタイルやクイックタグが登録されていますが、この中に自分で作成したスタイルも追加したいなーという事で、今日のエントリーではその方法について書いてみたいと思います。親テーマと子テーマのqtags.phpを違う内容にするfunctions.phpの読み込み部分をコメントアウトあくまでもタグの追加だけですしつこいようですが【暫定版】という事であくまでも【暫定版】という事で実を言いますと当エントリーは一旦ボツにしようと思っていたものを、例によって「せっかく書いたのにお蔵入りにするのもなぁ...」というもったいない精神から公開したものだったりします。機能的にはちゃんと目的は果たせているんですが、もっとスマートなやり方があるだろうなと書いた後で思った事もあり、正直あまりお薦め出来る方法では無いかな?といった内容になります。それでもあえて「やってみなけりゃわからねぇ」というチャレンジャーな方や、何でもいいから色々触ってカスタマイズの練習をしたいという方には良いかもしれませんが、そうでない方はさらっと流して読む程度に留めておいた方が良いかもしれません。いう事をまずお断りしておきますね?クイックタグとTinyMCEスタイルとはちなみにクイックタグのボタンというのは、投稿・固定ページ編集画面のテキストエディタ側にあるこの部分になります。TinyMCEのスタイルは、ビジュアルエディタ側にあるプルダウンメニューから選択する事が出来ます。ビジュアルエディタにこの「スタイル」のプルダウンメニューが表示されていない場合は、「ツールバー切り替え」ボタンをクリックするか、Shift+Alt+Zキーを押す事でひょこっと現れるはずです。Advancedというプラグインをインストールすると、このボタンやプルダウンメニューの配置を好きなように変更する事が出来ます。「拡張して拡張します。」ってどんだけ拡張する気なの。開くとエディター設定という画面になります。この画面でボタンやメニューをドラッグ&ドロップで自由に配置する事が出来ますので、自分が使い易いようにレイアウトを変更しておくとビジュアルエディタの使い勝手が飛躍的に向上します。お薦めと言うか個人的には必須なプラグインの一つですね。私の場合コレ使っててもエントリー書くのにすっごい時間かかりますが...SimplicityにクイックタグとTinyMCEスタイルを追加しよう本来ならばfunctions.phpに追記するのが正しい方法のようですが、今回は「出来るだけ簡単に」という点を重視したいので、あえてSimplicityの中でクイックタグとTinyMCEのスタイルを追加している部分に便乗させてもらう方向で考えてみました。いつもならここで親テーマからファイルをコピーしてくる事になりますけど、今回変更を加えようとしているファイルは基本的なテンプレートファイルより1つ下の階層のフォルダにあるので、親テーマと同じ構成で子テーマ内にコピーしても自動では読み込んでくれません。したものか...仕方が無いので親テーマを直接修正する事も考えましたが、そうすると今度は親テーマを更新する度に追加した内容が元に戻ってしまいます。そのファイル自体は頻繁に更新される類のものではないので、やはり子テーマの方にコピーして読み込ませるしか無いようです。そこで今回の作業はこんな感じになるかと。【子テーマ】コピーしたqtags.phpをアップロード※先にPC上で編集してからアップロードしてもOKです。【親テーマ】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を開くと先頭の方にクイックタグの部分があります。class="bold">','</span>');これと同じような行がいくつも並んでいると思います。どの行でも良いのでそれをコピペで追加したい分だけ増やして、その内容を必要に応じて書き換えるだけです。挿入する場所は好きにしていただいて構いませんが、頻繁に使うスタイルなら出来るだけ上の方が使い勝手は良いでしょうし、たまにしか使わないのなら一番下でも良いと思います。class="bold">','</div>');2つ目の項目(displayにあたる部分)が空ですしどう見ても無効な行に見えますので、削除してしまうかこの行に上書きしても良さそうです、と言うか私はしました。それではサンプルとして一つ追加してみたいと思います。class="blackbox">','</div>');クイックタグの追加については以上になります。この時点では反映されませんが、適用後はこんな感じで追加されます。先ほどと同じqtags.phpを編集しますが、今度は下の方にあるので以下のコメントが出てくるまでスクロールします。//TinyMCE追加用のスタイルを初期化そのコメント行の下にクイックタグと同様にスタイルの設定部分が並んでいます。以下の内容で1セットなので追加したいスタイルの数だけコピペして内容を書き換えます。'bold'),こんな感じで追加してみました。'blackbox'),各項目の意味は見れば何となくわかりますが一応。クラスセレクタです複数指定は半角スペースを空けて続けて記述します個人的には最後のarrayも「,」で終わっててええんかいな...と思いますが、現行それで動いているので大丈夫なのだろうと思います。PHPに関してはホントに素人ですから、わからないなりに見よう見まねでやってますのでね...こちらも反映はまだですが、適用後はこんな感じになります。【子テーマ】functions.phpに読み込み部分を追記ここでの作業は一歩間違うとWordPressのダッシュボードすら開けなくなりますので、いつでも元の状態に戻せるよう万全の状態で作業した方が良さそうですよ?マジメな話、FTPかファイルマネージャーでfunctions.phpをすぐに元の状態に戻せるようスタンバっておいてから作業に入る事を全力で推奨します。この読み込みに関する部分が今回の作業で一番悩んだところなんですが、どの方法で読み込ませるのが良いのか素人なりに色々と考えてこの形にしてみました。);本当にこの方法で良かったのかどうかはさておき、とりあえずはこれで編集したファイルを読み込んでくれるようになります。【親テーマ】functions.phpの読み込み部分をコメントアウトこの作業が必要かどうかも正直言って自信がありませんが、要は親テーマ側のファイルを読み込むのがムダになるのでその部分はコメント化しておきたいという事です。子テーマで読み込んでいれば親テーマ側ではもう読まないかな?というのを確認する為に親テーマのqtags.phpをこっそり削除してみたら、予想通りWordPressがお逝きになられたのでやはり読み込みには行っているようです。何回もWordPressの白い画面を出しているとその内に耐性がついてきますので、むしろ慣れておいた方がいざという時に慌てなくて済むかもしれません。親テーマと子テーマのqtags.phpを違う内容にするせっかく子テーマで読み込むようにしても親テーマに上書きされては意味がありませんので、それぞれのqtags.phpを違う内容で編集してみましたが、結果を見ると子テーマの内容が反映されていました。WordPressの読み込み順がいまいちよくわかりません...そんなわけで結果的にはやらなくてもいい事になりますが、どうも腑に落ちないというか気持ちが悪いので、親テーマではこのファイルは読み込まないようにしておきます。私の場合はカスタマイズの練習という目的もあるので、多少ムダな事でも色々とやっておきたいというところもありますしね?functions.phpの読み込み部分をコメントアウトfunctions.phpを開くと、先頭の方にびっしりとinclude文が並んでいます。//クイックタグ関係の関数このようにします。先ほども書きましたが、結果的にはどこもおかしくなっていないのでこの作業に関してはどうしてもやらなければならないという事は無いですし、親テーマを更新すると毎回元に戻ってしまうので面倒になったら放置してしまっても良いかなと思ってます。タグの追加だけです今回の作業で出来るようになる事は「編集画面から簡単にスタイルを適用出来るようになる」という事だけですので、そのスタイルの内容と言うかCSSは当然ながら別途作成してやる必要があります。CSSはカスタマイザーの「追加CSS」の中でもいいですし、style.css(設定によってはmobile.cssやresponsive.cssも)に記述してもOKです。しつこいようですが【暫定版】という事で親テーマの更新の度に変更が入るファイルではないと思いますが、それでもこのファイルに変更が無い事を時々は確認した方が良さそうです。言うものの、それもなにげに効率が悪いのでやはり他の方法を考えた方が良さそうな気もするんですよね...という事で改訂版を考えてみたいと思っています。そんなわけで今回のエントリーでは、Simplicityの中のそのファイルでそういう事をやってるのねーくらいに思っていただいた方がよろしいかもしれません。いう何とも煮え切らないオチで申し訳ありませんが、とりあえず今日はそんなところで。@unlimitedxchaos関連記事.htaccessをカスタマイズしてサイトの読み込み速度を向上しよう前回のエントリーではサイトの読み込み速度を測定してみました。最近エントリーのタイトルが長くなりがちで自分でもそれってどうなの?とは思いますが、あまり字数を気にしすぎて内容が伝わらなくても意味が...記事を読む「STINGER8」にSTINGER管理の機能を自分で追加してみよう先日お試しでインストールして「乗り換えは見送りかな?」と判断したSTINGER8ですが、ちょっと見方を変えてみる事にしました。Spotifyを始めてみる洋楽が好きな方なら名前くらいは聞いた事があるのではないでしょうか。最強は伊達じゃない?無料WordPressテーマSentryがなにげにスゴイ※結果は別ウィンドウで表示されます。元汎用系SE、現在は家業の手伝いの傍らWEB活動に勤しんでます。仕事を辞めて実家に戻ったものの地元ではコレといった仕事が無く、ある意味オワコンと化したオッサンです。一日中PCに向かっていても苦にならない体質?を活かして、何とかこの先これでやっていける方法を激しく模索中のエヴリディです。