wordpressのデザインを調整してみる

wordpressでのデザインがイケてないのなら、テーマ（theme）を丸ごと変えてしまうという方法もあります。しかし、これでは気に入らないたびにwordpressのウィジェットなどの設定を見直さなければなりません。考え方によっては簡単なのかも知れませんが、面倒と言えば面倒です。そこでwordpressのデザインを簡単にカスタマイズしてしまう方法をいくつか考えてみました。

一つ目はwordpressの「style.css」をいじる方法。最もメジャーなやりかたかも知れません。文字色や装飾、背景色、ボックスの大きさなどのデザインでしたらこれで十分かも知れませんね。二つ目は、wordpressの各テンプレートを直接編集してみる。三つめはプラグインか「functions.php」一本で全てを管理してしまう、といったあたりでしょうか。いずれも良い点、悪い点があります。

「style.css」をいじる

cssの知識が少しあれば誰でもできます。ただ、他人が作ったwordpressテーマのスタイルシートに手を加える場合、「id」や「class」など、該当する部分を直接変えてしまうと、あとでデザインをデフォルトへ戻そうとしても、どこをどう弄ったのか分からなくなります。特に数値などはそうですね。その部分にコメントを入れ、直下に上書きするコードを追記してもいいのですが、これも結構、管理しにくいです。

そのため、wordpressの「style.css」を弄る時は、そのファイルの最後尾に変更したいコードをまとめて追記し、デフォルトの設定を読込み時に上書きするというやりかたが、後からみても分かりやすいです。慣れてくるとついつい先頭のほうへ加えがちですが、cssの構造によっては追加したはずのものがデフォルトのデザインによって上書きされてしまうこともあるので注意が必要となります。ただ、このやりかただと柔軟性がないのも欠点といえます。

あと、スタイルシートやjavascriptなどは圧縮していることもあり、圧縮してしまうと可読性が落ち、編集しにくくなってしまいます。そういった点からもちょこちょこデザインのカスタマイズをする場合は不向きかもしれません。自分でwordpress用の圧縮プラグインを作れるのなら、そんな心配もないですけれど。自分で好きなものを自由に圧縮できるからです。

テンプレートに直書き

wordpressはテンプレート内を直接変更することで、デザインを変えることができます。思い立ったらすぐに実行できるという点が長所といえます。これにはwordpressのスタイルシートだけでなく、HTMLやphpの編集も含まれます。簡単に言えば、そのwordpressテーマを開発した人と同等の立ち位置で、様々な部分に手を加えることができます。

しかし、このやりかたでデザインなどを変えてしまうと、スタイルシートを弄るより、更にwordpressの管理が面倒になります。ファイルも一つだけとは限りませんので、ちょっとぐらい良いだろうと安易に考えてデザインなどの改造を続けていくと、だんだんどこで何をいじったのか分からなくなります。デフォルトに戻そうとしても、この部分の変更は残しておきたいなどと考えることも多いので、基本的に改造しすぎるとデフォルトにも戻せないというジレンマに陥ります。

自分で作ったファイルを、wordpressのディレクトリから引っ張り出して利用している人も多いのではないでしょうか。管理画面から編集できるように改造しているケースもあるかもしれませんね。

「functions.php」で統一

このやり方が最もwordpressを管理しやすい気がします。functionsファイルは各themeに同梱されており、これがないとwordpressはきちんと動作しません。子テーマで運用している場合は、親との依存関係もありますが。基本的には通常のwordpressプラグインと同じようなことができます。しかし、他のthemeに変更すると使えませんので、その都度、必要な記述をし直さなければなりません。これを回避するには自分でwordpressプラグインを作ります。ただ、wordpressのthemeは一度使いだすと、それほど変えることはありません。その場合、functions一本で管理してしまうほうが得策となります。ソース量が多すぎると欠点となりますが。

あと、このファイルでコードにエラーがあると、wordpressから編集ができなくなったり、ブログが表示されなくなったりします。そのため、コードを弄る時はFTPなどで最新状態のものを予めダウンロードしておきます。挙動がおかしくなったら、迷わずそれをアップロードして下さい。このやりかたでの最大の難点は、コードを間違えたらwordpressから操作ができなくなる事があるという点です。間違えると必ず操作できなくなるという訳ではありませんが、いつでもアップロードや更新できる状態にしておく必要があります。

wordpressで作成したブログが表示されないなんてことになったら、デザインどころではありません。ただ、あらゆるテンプレートを弄ってデザインなどを調整するよりは、原因が特定できるため、安心です。直書きで、しかもタブを幾つか開いている状態で色々やってると、どの部分がおかしいのか分からなくなってしまいます。

「the_content」フックを利用

通常、wordpressのスタイルシートはHEADタグ内で読みこまれますが、BODYの閉じタグ付近で読み込まれている時は、上書きされることがあるかも知れません。また、add_filterは、wordpress独自の関数で、add_actionの別名です。それぞれフィルターフックやアクションフックと言いますが、基本的には同じ動作をします。単にフックとも。フックとはwordpress本体にプラグインを引っ張り込むための仕組みのことです。「functions.php」にも様々なフックがつかわれています。

以下のフック側で呼び出しているTheCユーザ関数内では、ヒアドキュメントを使ってstyleタグとその中の文字列を$strに代入しています。また、EOMで挟まれたところには、通常のHTMLタグが使えます。使わない場合の文字列はそのままブラウザで表示されます。EOMは、ABCでもなんでも構いませんが、閉じ位置に同じものを入れます。$strは$the_contentに結合していますので、$the_contentの末尾に$strが追加される形となります。

この方法では、wordpressブログのソースコードから変更したいボックスなどの「id」や「class」を確認します。例えば「ptag」というclassであれば「.ptag{font-size:18px;color:red;}」といった形でstyleタグ内へ記述し、文字装飾などのデザインを調整します。

ちなみに、ファンクションファイルの内容ははワードプレスの管理画面でも読み込まれます。ケースによってはデザインを崩すこともあるため、「if(!is_admin()){}」で判定すると回避できます。

うえと見比べて下さい。関数名や変数名を変えています。要は対になるようにすれば、自由に名前を設定できるということです。以下は、最初に現れたH2の上部に広告などを表示するコードです。

上のやりかたを応用すると、例えば四番目のH2の上部に広告などを出力する力業ができます。preg_replace関数の第四引数で一旦、目印となる他の文字や記号に置換し、更に読み込んで最初に出てくるH2の上側に広告を入れ、再度読み込んで最初に置換した文字や記号を元にもどしています。下の例では第四引数の3を4にすると五番目のH2の上に出てきます。これでワードプレス上の好きな位置に何かを表示したりデザインを調えたりすることが簡単にできます。

上の力業をワードプレスのプログラムらしく、四番目のH2の上部に広告などを表示させると下の様になります。「$count == 4」のところを3にすると三番目の上に出力します。上述したコードと異なり、数値をずらす必要はありません。ただ、冗長というか、少しコードがながくなっています。

専用のテンプレートをfunctionsファイル以外から読み込む場合は下の様にします。ob_startを使って、「calc」というテンプレートを読込んでます。階層を指定する場合は、get_template_partの引数にスラッシュを付記します。たとえば、「get_template_part('ワードプレス/calc');」といった感じで相対パスで指定します。この関数はワードプレス独自のものです。ob_starttはphpのビルトイン。

プラグイン

他人が作ったワードプレスのプラグインでデザインをカスタマイズできるものがあるかも知れません。最近のワードプレスプラグインはほとんど利用していないので分かりませんけれど。ただ、他人が作ったものは放置されることがあります。無料であるため、どこにも文句を言えません。

ワープレは初心者でも興味を持ってもらいやすく、もっぱら使いやすいCMSの代表格といえます。多くの人が遣っているため、ワープレ用のthemeやPluginを無料で開発してくれる人も多いでしょう。これらは数えることができないほど存在しているのですが、その分、放置されることも非常に多くなっています。大抵、ワープレかphpのバージョンアップ時に慌てます。デザインどころか、ワープレのブログそのものが表示されなくなる可能性もあります。

一方、ワープレのことをデザインも含めて自分でほとんどやれるようになると、そんな心配はあまり必要ありません。２個か３個のワープレ用プラグインは誰でもインストールしていると思いますが、こういったものはメジャーなものなので、あまり心配ないです。

まとめ

ワープレにおけるデザインのカスタマイズ、いかがでしたでしょうか。これを言ってしまうと元も子もないのですが、上に述べたワープレにおけるデザインのカスタマイズは、主に他人が作ったものが対象となります。というのは、自分で作ったものだと、どこでも自由自在に弄ることができるためです。ただまあ、管理しやすいやり方というのは、人それぞれ異なるかも知れませんが。あくまで参考例ですので、自分のやりやすいようにカスタマイズしてください。