WordPressのテーマ作りに挑戦

佐野

佐野 2014年10月10日

当技術ブログを改装する事になったので、テーマの改造に着手していました。

元々テーマも、既存の物から少し改造を入れただけなので、
ほとんど原型をとどめているテーマを改造する必要が出てきました。

しかし、テーマの作り自体も、
思ったよりも複雑な作りをしており、必須部分を壊さないように、
慎重に削ってはカスタマイズをしていこうと思ったのですが、複雑なコードを見ているだけで疲れてきて、
改造するのがめんどくさくなってしまったので、いっその事、最初から作ってしまおうと思いました。

とにかく、多機能は求めていないので、記事などを出して、
それをCSSで整えていく方法を考えます。
今後のメンテナンスの事も考え、
構造もなるべく必要最小限のシンプルなものにしようと考えました。

取り入れたい要素は、アイキャッチ画像を出し、
記事を途中で切り、「続きを読む」の単一記事のリンクを配置といったものです。

テーマ制作には、こちらのサイトを参考にさせていただきました。
WordPressのオリジナルテーマ作成フロー・基本マニュアル

テーマはWordPress上からでも編集できますが、Aptanaなどのエディタで行ったほうが、より簡単です。
特に新規ファイルを作成する場合、WordPress上では既存のファイルの編集しか出来ず、
新規ファイルの作成が不可能なので、どのみちFTPでファイル転送を行う事にはなります。
AptanaならFTP転送も可能なので、編集結果を直接サーバーに送る事も可能です。
ただし、編集を行っている間にもお客さんが訪問する可能性もあるので、
XAMPPでPC上に仮想のサーバーを構築して、そこで行うなどの配慮も必要でしょう。
また、Aptanaではコードの記述が間違っていれば、ファイルの種類に応じてプログラム言語を識別し、
間違い箇所をある程度教えてくれます。

まずは、テーマの大本となる「index.php」「header.php」「footer.php」「sidebar.php」ファイルを作成し、
これを起点に、色々拡張していきます。
これらはファイルの中でも最低限必要なファイルで、必要な物は随時追加していくといいです。

ひとつの要素に必要な物は、ごくわずかなものです。
そこにある全ての情報を使っていくのではなく、今必要な最小限の情報を見極める事が大切です。

WordPressはご存知の通り、PHPというプログラムで出来ています。
紹介されているタグをコピペするだけでも、基本的な形は作れますが、
PHPの基本的な記述ぐらいは学習したほうが、より有利に作れるでしょう。

私もじつは、PHPは苦手でありJavaScriptばかりをやっていたのですが、
変数の定義方法や関数名、文字列の連結の仕方など、違う部分はありますが、
基本的な概念としては、ほぼ同じようなもので、最近PHPにも慣れはじめました。

最初からテーマを作っていき、現在、記事やアイキャッチの出力、
記事の文字数制限ありの出力まで出来、少しCSSで整えた結果、以下の所までこぎつけました。

20141009200521

とにかく、見た目はどうあれ記事の出力方法さえわかってしまえば、
後はHTMLタグを付与し、CSSで整えるだけです。
各要素が、何をどのように出力するのかさえわかれば、こっちのモノです。