サムネイル画像もreflectしてみた

ただいまお気に入りのテーマ『shiword』。
実は、エントリーのサムネイル画像(アイキャッチ画像)に対応している。

テーマに同梱のデフォルト画像がリフレクト効果を施したモノなので、フロントページではアイキャッチ画像がちゃっちく見えてしまう。

そんなわけで、何とかしてみようと思って探してみました。
Reflect jQuery | jQuery Plugins

おいらは、子テーマ[1]を使って運用しているので、今回もその手法で何とかならんか挑んでみました。

子テーマのフォルダは本来、何でもいいのですがw
reflectのスクリプトファイルをロードする際に、子テーマのurl位置を取得する方法が判らなかったので苦肉の策で『shiword_ch』にしました。
なぜ?かは、テーマのurl位置を取得するテーマファンクションにbloginfo(‘template_url’);と言うモノがあります。
これを使うと例えばおいらのところだと『http://www.gdgd.ebiplan.com/wp-content/themes/shiword』までを返してくれます。
なので、単純にbloginfo(‘template_url’);の後に『_ch』をくっつけてあげて、子テーマのフォルダ名にでっち上げたと言う顛末です。
もしかしたら、子テーマのurl位置を取得するファンクションがあるかもしれません。
突っ込みをお待ちしております<(_ _)>

さて、ではいよいよカスタムテーマの作成と参りましょう。
用意するのはheader.phpとindex.phpです。
そして、最初にダウンロードしたリフレクト用のjQuery用のプラグイン。
必要なのはjquery.reflect.jsだけです。
あー、style.cssも必要ですが、今回は作成済みなので割愛します(ヲイ)

まず、リフレクト効果を付加するためのスクリプトをロードさせなきゃいけませんね。
で、ロードしたついでに実行させます。
header.phpを書き換えました。

    <?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
<?php wp_head(); ?>

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>_ch/jquery.reflect.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('img.reflect').reflect({height: 0.2, opacity: 0.1});
});
</script>
</head>

28行目から33行目までを付け足しました。
31行目のheightでリフレクト効果の高さ、opacityで透明度を設定します。
小数点以下の数値でなければならないみたいです。注意してくださいね。
ちなみに、opacityは0.1か0.2くらいがちょうどいいみたいです(デフォルトの画像と比較して)。

次はindex.phpです。

            // Post thumbnail
if( $shiword_opt['shiword_pthumb'] ==1 ) {
if( has_post_thumbnail() ) {
the_post_thumbnail( array( 120,120 ), array( 'class' => 'alignleft reflect' ) );
} else {
echo '<img class="alignleft wp-post-image" alt="thumb" src="' . get_template_directory_uri() . '/images/thumb_120.png" />';
}
}

ここは、部分的な追記です。
33行目のarray内のclassの値に『 reflect』を追記します。
実は、このclassの値のところに『rheight30 ropacity60』と言う風に追記してあげても効果を付けられるようなのですが、なぜか、これ以外の値を設定しても反映されません。
どこかでコンフリクトでもしているのかもしれませんね。

これで、フロントページに表示されるサムネイル(キャッチアップ)画像と、デフォルトのアイコンで統一感が少し生まれます。
まあ、左に寄ってしまうのが何ともいけていないのですが…とりあえず、今回はここまでで満足と言うことで。

 

追記(2011/05/25):
Shiwordテーマがバージョンアップしました。子テーマのままでは正しく表示されないと言うことが判明しましたので、一時、オリジナルでの表示に切り替えています。近日中にカスタマイズを施すつもりです。

  1. [1]子テーマ – WordPress Codex 日本語版

Comments are closed.