Thematic ThemeでThemeを変えてみました

ネタはいろいろあれど放置しっぱなしのこのブログでしたが、また年末になりちょっと焦って心を入れ替えてなんとかしないとーというわけで、(いつものように)まずは形から!と思っていたところに、おでさんのイチオシ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したりなどしてます。
あまりにもエイヤーでやってしまったのでまだまだ見づらい部分などがあるのですが、これからちょいちょい直して直していこうと思ってます。

9件のコメント

  1. はじめまして、現在、WP「Thematic Theme Framework」
    にて、ブログを作成しているのですが、
    横サイズ、600以上の写真の投稿を行いたいのですが、
    サイドバーの位置が内側すぎてうまくできません。

    スタイルシートなどを変更して、サイドバーを初期値より
    右に変更することは可能なものなのでしょうか。。

    突然で申し訳ございませんが、
    ご存知であれば、アドバイスを頂けると助かります。

  2. はじめまして。
    現在勉強中の若輩者ですが、とても参考にさせていただきました!!

    もしご存知でしたらお伺いしたいのですが、
    add_filter(‘thematic_xxxx’,’新しい関数名’);
    で関数の置き換えを行えるのは
    }//end xxxx
    で括られているもののみなのでしょうか?

    thematic_index_loop()を置き換えたいのですが、
    どうも効かないようなので
    結局thematicテーマの方のlibrary内のファイルを置き換えています…。

    お気づきでしたらアドバイスいただけると幸いです。

コメントは受け付けていません。