ネタはいろいろあれど放置しっぱなしのこのブログでしたが、また年末になりちょっと焦って心を入れ替えてなんとかしないとーというわけで、(いつものように)まずは形から!と思っていたところに、おでさんのイチオシThemeであったThematicを触ってみようと思い立ち、いつものごとく突貫工事でガガーっとやってしまいました。
そのフィードバック的Postです。
まずはThematicをダウンロードしたあと、thematicフォルダ内のthematicsamplechildthemeをthematicフォルダの外に出します。
その後、任意のフォルダ名に変えるなどし、style.css内の一番上のコメントアウトしている部分の「Theme Name〜」等をフォルダと同様の名前にするなどわかりやすいものに書き替えます。
それからアップして・・・とはいかないで、まずはローカル環境でそれを反映させます。
ローカル環境はMacならMAMP、WindowsならXAMPPで作るとよいでしょう。
そして/wp-content/theme/内にthematicフォルダと元thematicsamplechildthemeであるところの任意の名前のフォルダを入れ、ダッシュボードからその新themeのほうをアクティブにします。
まずはこれでなにもカスタマイズしていない状態のThematicになります。
ここからCSSを修正していきます。
手っ取り早いところでレイアウトですが、Thmaticでは予め数種類のレイアウト用のcssが用意してあるため、style.css内でレイアウト用cssを読み込んで要る部分を書き替えます。
/* Apply a basic layout */
@import url('../thematic/library/layouts/3c-r-fixed-primary.css');
ここからはfirebugなどを使い、変えたい部分のスタイルを見つけ、上書きするようにstyle.css、あるいは別ファイルを用意した場合はそのファイルにスタイルを記述していきます。
で、html部分はどうしたらよいかというと同ファイル内にあるfunction.phpで実現していくことになりますが、これがちょっと理解するのが難しい。
ごく簡単な方法を以下に書いてみます。
まず該当部分をthematic/extensions/内のphpファイルから見つけ出します。
それなりな名前がつけてあるのでファイルを見つける事自体はそんなに探すのは難しくないはず。これかなというファイルが見つかったところで、該当部分のid名などでコードを検索します。
見つけたら、以下の部分をざっくりとコピーし、function.phpへペーストします。
<!-- wp:paragraph -->
<p><code>//xxxx(関数の説明など)<br>
function thematic_xxxxx(){</code></p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>[ここにはコードの内容が]</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p><code>}//end xxxx</code></p>
<!-- /wp:paragraph -->
function.phpのペーストしたものの「function_xxxx」のxxxx(関数名)を任意のものに変更していきます。
元の関数名はあとで使うのでどこかにメモするなどしてとっておきます。
そのコード内に同関数名があれば全部同様に変更していきます。
その後、自分のしたかったhtmlに変更していきます。ここはちょっと難しいけどなんとか頑張るだけです・・・。phpの知識がちょっと必要かも。
最後に function thematic_xxxxx(){
より前に
add_filter('thematic_xxxx','新しい関数名');
と記述します。
これでthmatic_xxxx
じゃなくて新しい方を読みに行くんだよっていう命令になるはずです。
で、反映されれば成功!なのですが、まずページが表示されないとか、そもそも変更が反映されないなど、があった場合はphp記述が間違っているか関数名の変更が足らないとか、どこかがおかしいので見つけて直していきます。
今回は日付の部分をいわゆる「date badge」にしてみるカスタマイズ方法を公開されている方がいたので参考にさせていただきました。
こちら(A Date Badge for Thematic Theme)です。
こちらを参考にie6にはuniversal-ie6-cssのスタイルが適用されるようにするというのをしてみました。
それから今回ちょこちょことcss3を仕込んでみました。
ロゴがweb-fontだったりtext-shadow使ってたり。
あとdate badgeのところをborder-radiusしたりbox-shadowしたりなどしてます。
あまりにもエイヤーでやってしまったのでまだまだ見づらい部分などがあるのですが、これからちょいちょい直して直していこうと思ってます。