» WordPressのカスタムフィールドを使って画像を反映させる方法と、その画像にjQueryプラグインによるツールチップを実装する方法

WordPressのカスタムフィールドを使って画像を反映させる方法と、その画像にjQueryプラグインによるツールチップを実装する方法

カテゴリ » WordPress, カスタマイズ

題名長くて済みません。他のサイトで
行ったカスタマイズを覚書します。
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) 」のように()内は順に

1. ‘カスタムフィールドでimageと指定した名’
2. 画像の横幅px
3. 画像の縦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;
}
}

?>

サムネイルにマウスオーバーすると、大きな画像（アップロードした実際の大きさの画像）が浮かび上がる仕組みがこれで出来上がりました。

最後にWPテーマ内にタグを加えます。

STEP:5 / テーマファイルにタグを追加

先程のjQueryのプラグインを実装させます。

<a href="画像のリンク先" class="screenshot" rel="<?php image_screenshot('image'); ?>" title="ツールチップ内のテキスト"><?php image_attachment('image', 162, 118); ?></a>

上記のタグをサムネイルを表示させたい箇所に挿入してファイルをアップロードします。以下のように実装されます。

以上です。説明下手で済みません。

---

• 頂いたコメント
• トラックバック
• お読み下さい

【WordPressのカスタムフィールドを使って画像を反映させる方法と、その画像にjQueryプラグインによるツールチップを実装する方法】へのコメント 3

トラックバック

1. Tweets that mention WordPressのカスタムフィールドを使って画像を反映させる方法と、その画像にjQueryプラグインによるツールチップを実装する方法 - かちびと.net -- Topsy.com
2. WordPressのカスタムフィールドを使って画像を反映させる方法と、その画像にjQueryプラグインによるツールチップを実装する方法 – かちびと.net « とっても！　ちゅどん（雑記帳）
3. 今週の管理人Bookmark (11/1-11/8) - ElectricBrain Standard

• かちびと.netにリンクの無いトラックバックは受付けてないです。
• コメントされる前にガイドラインをご覧下さい

この記事のトラックバックとURL

URL:
TRB:

お気軽にコメントして下さい

*は必須です

お名前*     :

メール*     :

Webサイト:

以下にコメントをどうぞ。いくつかのHTMLタグも使えます。

コメント欄に画像を表示できます。 ココをクリックして画像のURLを入力してください。

サイト内検索

Twitter Counter

ads

(C)かちびと.net All Rights Reserved.