以前公開した、「ローカル環境にて、ソースコードからWordPressテーマを学ぶことを目的とした、テーマを学ぶ為のテーマ - ManabiTheme(学びテーマ)」の続きを公開します。前回公開したのはEntry Level(初級編)ですが、今回はIntermediate Level(中級編)です。
ダウンロード:ManabiTheme – IntermediateLeve ver.0.9
ManabiThemeを作成した経緯と、その特徴は、初級編の記事を参照してください。デザインの変更もありません。
中級編に追加したテンプレートファイルは以下の5つ。
テーマの機能としては、サイドバーのウィジェットに対応しています。
初級編と同様に、解説をコメントで説明していますが、初級編で書かれていたコメントは一部を除いて全て削除しています。分からない箇所があれば、初級編のテンプレートファイルをもう一度参照して下さい。もちろん、中級編にて新たに追加したテンプレートタグや、逆に削除したテンプレートタグは、初級編のように解説をコメントで説明しています。
[… Read More]
WordCamp Fukuoka 2010の2次会@APIカフェにて紹介させていただいた、「テーマを学ぶ為のテーマ」、名付けてManabiTheme、を公開します!
このManabiTheme(学びテーマ)は、「テーマを学ぶ為のテーマ」として作成しました。外部に公開するWordPressブログ用のテーマとしても使用可能ですが、それよりは、ローカル環境(XAMPP等)にてWordPressテーマを学ぶ為に使用されることを主たる目的として作成しています。
去年の秋頃だったと思うんですが、@khoshinoさんが、とあるWordPressの勉強会にてこんな趣旨のつぶやきをされました。
「テーマを学ぶ為のオススメのテキストやサイトは?」
このつぶやきに反応して、僕を含めて何人かの方がオススメしたのを纏めると。
「一番良いテキストブックは良いテーマ。」
僕はWordPressのテーマを1.5系からいじっているのですが、ある程度基礎的な事が分かると、あとはダウンロードしてきたテーマのコードを読んで学びました。XHTMLとCSSも、「これは!」と思うサイトのソースを読んでましたね。
で、@khoshinoさんに「ではどのテーマが良いですか?」と聞かれて改めて気がついたのですが、最近は「勉強するならこれがいいですよっ」と1つ進められるテーマがないんですよねぇ。WordPressが多機能になるにつれ、テーマの中身が複雑化しました。例えばサイドバーのウィジット化やコメントのスレッド化です。そして、公式レポジトリにアップされるテーマの数が多くなるにつれ、テーマ作者は競うように高機能化を進めていく。例えば、管理画面から各種設定が行えたり、様々な種類のレイアウトからお好みのを選択できたり。悪くはもちろんないんですが、テーマを独学する為の教材としては敷居が高くなってしまった感は否めませんね。
ならば、それに適したテーマを作ってみよう、と思って作成したのがこのManabiThemeです。他人のソースコードを(良い意味で)盗み、学ぶのは、スキルアップに不可欠だと個人的には思います。このManabiThemeがその入り口となってもらったり、きっかけの1つになってもらったら幸いです。
幾つか特徴をご紹介いたします。
このブログで使っているテーマ(スクラッチから作成した自作テーマ)を3カ所変更しました。
ファビコンを変更。
ページ上部の2色の線は、主に十二単のかさねいろを参考にしてます。今回は秋のかさねいろから朽葉を使いました。
the_date関数からthe_time関数というのは、WPループを使ってこのように最新の記事やコメントリストを表示させた場合、the_date関数だと同じ日に投稿された記事の内ループの最初の記事しか日付が表示されないのです。修正前のスクリーンショットを見てください。

WordCamp Kyoto 2009 – Photo#3と#4の記事は、同じ10月25日に投稿されています。なので、the_date関数だと、ループで先にでてきた#3の方にしか日付が表示されません。これを解決するには、the_date関数をthe_time関数に置き換えます。そうすると、同じ日付でもきちんと投稿日が表示されます。
僕がテーマを作成したり編集・カスタマイズしたりし始めた頃に2~3度ハマったところです。皆さん、気をつけてください!(僕は今回すっかり忘れてしまってました…汗)
ちなみに、日本語版のCodexにもちゃんと書かれていますね。
ブログのデザインをちょこっと変えました。これで少しすっきりしたかと。右側の黄色を取っ払おうかどうか考えましたが、結局は以前よりもちょっとだけ細くして、メインコンテンツとの間のホワイト・スペースを増やしました。

その他には、コメントやコメント周りや…
[… Read More]
訪問者が利用しているブラウザを判別するには幾つか方法があります。WordPressテーマの場合、PHPを使える事ができるので、PHPで実装している場合が多いと思います。そして判別した結果を、echoで返す。
これを、WP2.8から新たに加えられたテンプレート・タグbody_classに、add_filterを使って表示してやると、たとえばこんな風に:
<body class="home blog logged-in safari">
表示されて、すごくすっきりします。と、言うティップスをHow to detect the visitor browser within WordPressにて発見。やり方は、元記事にあるコードをfunctions.phpに記述するだけ。簡単です。いまさらns4の判別が必要なのかはともかく、iphoneも判別対象になっていますね。ここらへんは日本仕様に合わせて変更できるかも。