WordPressテーマ『tanzaku』のカスタマイズで学ぶWPの仕組みⅡ
参考例から学ぶ
最近、カスタマイズした例があるので、以下をご覧ください。
http://bloom87.com/wordpress/
※現在、このサイトは存在しません。
まだ、本実装には至っておりませんが、ほぼ完成しております。
今回は、こちらのサイトを例にどのようにカスタマイズしたのかを説明します。
ページ構成
- TOPページ
home.php – header-2.php – sidebar.php – footer.php - Galleryページ
index.php – header.php – sidebar.php – footer.php - その他のページ
page.php – header-3.php – sidebar.php – footer.php
メイン部分は三つのphpを使い、ヘッダーは各ページによって分けました。
スクリプトとか、色々な関係上、その方が早かったからです。
ページの内容としては、以下の目的になります。
- TOPページ
スライドショー。お店紹介に使います。はったりもなかなかききます。『tanzaku』の影響は全部掃ってあります。 - Galleryページ
ほぼ、このページの為だけの『tanzaku』です。各画像をクリックで拡大にしてあります。サムネイルでも楽しめます。はったりもききます。 - その他のページ
『tanzaku』の固定ページや記事ページに当たる部分ですが、下のグリッドは外してあります。特に『tanzaku』である必要もないページです。
では、次は各ページの細かい説明から行きましょう。
TOPページ home.php
まず、ワードプレスの便利なところとして、home.phpを作製してアップロードするだけで、その瞬間からTOPページがindex.phpではなく、home.phpの影響下に置かれます。
この法則、覚えておいた方が良いです。これ一つだけで、物凄く自由度が上がりますので。
このhome.phpはindex.phpを複製し、名前を変更して作製してあります。
その後、ヘッダーとサイドバーと、フッターの呼び出し記述以外は削除し、ほぼまっさらな状態にしました。
そして追加したのが画像ギャラリーの『Diapo』 です。
ダウンロードは以下より。
Diapo | a free jQuery slideshow by Pixedelic
これを設置するのに、ヘッダーを別にしといたほうがいいのでは、と思いこのページにだけheader-2.phpを呼び出すようにしてあります。
あとはCSSで調整すれば、それなりになるというわけです。
Galleryページ index.php
Galleryページがindex.phpとはこれ如何に。
とも思えますが、先ほど書いたようにTOPページ、本来のindexの部分は、home.phpが支配しているので、こちらがindex.phpでも、TOPページはあちらが表示されるわけです。
わかりづらいですね。
しかし、優先順位はindexよりもhomeの方が高いと思っておけば、大丈夫なわけです。
で、このページは特にいじることもなく。
ほぼ、CSSで片づけてあります。
ただ、重要なのが、本来はクリックしたらページが遷移するわけです。
ここを、一ついじると、たんなる画像クリックで拡大に変わります。
↓trueをfalseに $flg_img_forcelink = true; // add/overwrite a link which links to a single post (permalink).
これで、完全にギャラリーとして使えます。
ここのtrueをfalseにというところに気付くまでに物凄く時間がかかりました。
誰かが解説してくれてれば、と思いますが、仕方なかったというしかありません。
その他のページ page.php
こちらも、多少はいじってあります。
下部のグリッドを外したり。
『tanzaku』特有のふわっとした表示の仕方はGalleryページ以外必要なかったわけですが、一応残しました。
表示されるまでちょっと時間がかかってしまうので、無くても良いんでしょうけどね。
こんなところです。
総括
物凄く雑にやりましたが、理解頂けましたでしょうか。
『tanzaku』の使い道でみられるのが、今回のようなギャラリーページが欲しい場合と、戯れ問答のような、TOPページをぐわんぐわんさせて、目立たせたい場合の二つです。
これ以上のカスタマイズとなると、ほとんどがCSSで叶うので、説明の必要もないでしょう。
あとは恐れずに触る事です。
失敗したら、テーマをインストールし直してリセットすればいいのですから。
テーマのカスタマイズの面白さは、慣れてからだとおもうわけです。
それでは。