題名長くて済みません。他のサイトで行ったカスタマイズを覚書します。WordPressのカスタムフィールドで画像をブログに反映させて、その画像にマウスオーバーすると元画像がツールチップとして実装されるようにする為のチュートリアル。プラグインは使わず、functions.phpで関数を追加します。
ちょっと分かり難いですけど、カスタムフィールドで画像を指定してブログに反映させてその画像をサムネイルで表示、マウスオーバーすると大元の大き目の画像がツールチップで実装されるようにする方法です。
面倒だからプラグインよこせ！という方はGet Custom Field Valuesをお試し頂いては如何でしょう。僕は触った事が無いのでなんとも言えませんが・・
方法
方法です。functions.php（テーマ関数ファイル）とjQueryを利用します。お使いのテーマで利用していない場合はWordPressのドキュメントをご覧下さい。functions.phpはWPのテーマ独自の関数を加えられるので凄く便利です。ただ、僕の方法よりも最適な方法があるかもしれませんので参考程度に。。。
STEP:1 / カスタムフィールドで画像を指定して実装
テーマにカスタムフィールドで指定した画像をブログ内に実装させます。functions.php内に以下を追記。
<?php
function image_custom($key, $width, $height) {
global $post;
$custom_field = get_post_meta($post->ID, $key, true);
if($custom_field) { //if the user set a custom field
echo '<img class="好みのclass名" src="'.$custom_field.'" alt="" width="'.$width.'" height="'.$height.'" />';
}
else { //else, return
return;
}
}
?>
オレンジの部分がブログに反映される部分です。class名やalt属性ははお好みで。これでそのテーマだけの関数（image_custom($key, $width, $height)の事）が加わりました。
次にこの関数を使ってブログに画像を表示させます。
STEP:2 / ブログに画像を表示
ブログに画像を表示させます。この際、記事を投稿する際にカスタムフィールドには以下のように記述するようにします。
ここで指定した画像を反映させる為に、お使いのWordPressテーマの表示させたい場所に以下のようなタグを挿入します。
<?php image_custom('image', 162, 118); ?>
先程、function.phpに追記した「function image_custom($key, $width, $height) 」のように()内は順に
- ‘カスタムフィールドでimageと指定した名’
- 画像の横幅px
- 画像の縦px
となります。画像の大きさはサイトに合わせて頂くといいと思います。上記の場合は横幅162px、縦118pxのサムネイル画像がブログに表示されるようになります。実際にアップロードした画像はもっと大きいもので、ここはサムネイルを出すようにします。
これで画像をカスタムフィールドでブログに反映させる事が出来ました。
次にWPテーマにjsファイルを加えます。
STEP:3 / マウスオーバーで使うJS
表示されるようになった画像にマウスオーバーすると拡大画像をツールチップで出すようにしました。使ったのはjQueryと画像を表示させるプラグインファイルのExample 3です。お使いのWPテーマにjsフォルダ等を作ってアップロードしてください。cssはテーマのcssに加えてもいいですし、お好みで。
jQueryとプラグインのjsファイルのURLをhead内に加えるのもお忘れなくいようお気をつけ下さい。以下のような記述をhead内に加えてアップロードします。
<script type='text/javascript' src='jsファイルのURL'></script>
次にマウスオーバーでツールチップで実装される画像を呼び出す様にします。
STEP:4 / ツールチップ内に実装する画像を取得する
jQueryで実装するツールチップ内の画像をfunctions.phpで呼び出せるように以下を追加します。
<?php
function image_screenshot($key) {
global $post;
$custom_field = get_post_meta($post->ID, $key, true);
if($custom_field) { //if the user set a custom field
echo ''.$custom_field.'';
}
else { //else, return
return;
}
}
?>
[note]手順が分かりやすいようにSTEP1の記述とは別々にしましたが、一緒にしてしまっても問題ないです[/note]
これでimage_screenshot()を使うことでカスタムフィールドでimageという名で使った画像を呼び出します。STEP:1で追加した関数はimgタグを呼び出すもので、STEP:4ではアップロードした画像のURLそのものを取得するようにします。
サムネイルにマウスオーバーすると、大きな画像（アップロードした実際の大きさの画像）が浮かび上がる仕組みがこれで出来上がりました。
最後にWPテーマ内にタグを加えます。
STEP:5 / テーマファイルにタグを追加
先程のjQueryのプラグインを実装させます。
<a href="画像のリンク先" class="screenshot" rel="<?php image_screenshot('image'); ?>" title="ツールチップ内のテキスト"><?php image_attachment('image', 162, 118); ?></a>
上記のタグをサムネイルを表示させたい箇所に挿入してファイルをアップロードします。以下のように実装されます。
以上です。説明下手で済みません。
