Welcart カスタマイズ ブログ

スライドするカスタムヘッダーに、リンクとキャプションを入れる方法

• ツイート
• B! ブックマーク
• Google+
•  Pocket
• Facebook

カスタムヘッダーの画像を利用したスライダーに、リンク・キャプションをつける方法です。Welcart用テーマのトップページのスライダーに実装しました。

demo

通常１枚のカスタムヘッダー画像だけであれば、リンクをつけるには<a>タグで画像を挟めばいいだけですが、画像が次々に変わるスライダーではなかなか難しい。

これまたやりたい人が他にいるかわからないですが、自分用の備忘録に。

今回の方法では、アップロードしたカスタムヘッダー全ての画像が、スライダーとして登場します。

もくじ

1. スライド用jQueryをカスタムヘッダーに適用させる
2. ヘッダー画像の編集画面を開いて、キャプションやリンクを追加
3. ヘッダー画像のキャプションやリンク情報を取得
4. コードのまとめ
5. まとめ

1. スライド用jQueryを、カスタムヘッダーに適用させる

今回は実装の実例として、Flexslider2を利用したスライダーで説明します。スライダーの作り方は他のjQueryでもほぼ同じかと思います。

Flexslider2をテーマに導入する詳しい方法は、過去エントリー「画像をスライドショーで見せる FlexSlider2」の１と２をご覧下さい。

Flexslider2でのスライダー画像の基本的なマークアップ方法は、以下の通りです。

1. 画像を<li>でマークアップ
2. <li>を<ul class=”slides”>でマークアップ
3. 更に<ul>を<div class=”flexslider”>で囲う

<li>で画像をはさめばいいので、複数のカスタムヘッダー画像への適用は、foreachを使って<li>タグを繰り返し出力させればよいことになります。

<div class="flexslider">
    <ul class="slides">
    <?php $headers = get_uploaded_header_images(); ?>
    <?php foreach ($headers as $key => $value): ?>
       <li><img src="<?php echo $value['url']; ?>" alt="*" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>"></li>
    <?php endforeach; ?>
    </ul>
</div>

これだけでもまずは、アップロードした画像が順番に取り込まれ、ベーシックなスライダーとして機能します。

2. ヘッダー画像の編集画面を開いて、キャプションやリンクを追加

ヘッダー画像は「メディア」の一つとしてWordPress上では格納されます。

そこで、［メディア］＞［ライブラリ］＞［メディアの編集］から画像を開いてみると、画像には以下の４つのデータがあり、それぞれ編集できることがわかります。

1. タイトル
2. キャプション
3. 代替テキスト
4. 説明

これらのデータを利用して出力させれば、画像ごとにキャプションをつけたり、URLを持たせたり出来るわけです。

データはget_post()にIDを代入することで取得できます。

関数リファレンス－get_post()（WordPress.org Codex 日本語版）

例えば、ヘッダー画像のIDが10であれば、以下のようにデータを取得できます。

$img_meta = get_post('10'); //データを全て取得
$img_title = $img_meta->post_title; //タイトルを取得
$img_caption = $img_meta->post_excerpt; //キャプションを取得
$img_content = $img_meta->post_content; //説明を取得

ただし、「代替テキスト」はget_post()では取得できず、get_post_meta()を使う必要があります。

（参考）WordPressの画像カスタムフィールドにメディアIDで保存してプレビューする方法（WEBOPIXEL）

今回は、get_post_meta()でしか取得できない代替テキスト以外の３つを利用して、以下のデータを画像情報に持たせて使うことにします。

• タイトル：大きな文字の文言
• キャプション：小さな文字の文言
• 説明：リンクURL

出来上がりイメージはこうです。※今回はCSSまではカバーしてません。

3. ヘッダー画像のキャプションやリンク情報を取得

しかしここで問題が。どうやってヘッダー画像のIDを取得するのか？

・・・画像のURLからIDを取得する関数を作った方が、既にいらっしゃいました。

Get an attachment ID by URL in WordPress (Frankie Jarrett)

<?php
/**
 * Return an ID of an attachment by searching the database with the file URL.
 *
 * First checks to see if the $url is pointing to a file that exists in
 * the wp-content directory. If so, then we search the database for a
 * partial match consisting of the remaining path AFTER the wp-content
 * directory. Finally, if a match is found the attachment ID will be
 * returned.
 *
 * @return {int} $attachment
 */
function fjarrett_get_attachment_id_by_url( $url ) {

	// Split the $url into two parts with the wp-content directory as the separator.
	$parse_url  = explode( parse_url( WP_CONTENT_URL, PHP_URL_PATH ), $url );

	// Get the host of the current site and the host of the $url, ignoring www.
	$this_host = str_ireplace( 'www.', '', parse_url( home_url(), PHP_URL_HOST ) );
	$file_host = str_ireplace( 'www.', '', parse_url( $url, PHP_URL_HOST ) );

	// Return nothing if there aren't any $url parts or if the current host and $url host do not match.
	if ( ! isset( $parse_url[1] ) || empty( $parse_url[1] ) || ( $this_host != $file_host ) ) {
		return;
	}

	// Now we're going to quickly search the DB for any attachment GUID with a partial path match.
	// Example: /uploads/2013/05/test-image.jpg
	global $wpdb;

	$attachment = $wpdb->get_col( $wpdb->prepare( "SELECT ID FROM {$wpdb->prefix}posts WHERE guid RLIKE %s;", $parse_url[1] ) );

	// Returns null if no attachment is found.
	return $attachment[0];
}

上記をfunctions.phpに記載し、

<?php fjarrett_get_attachment_id_by_url( $url ); ?>

で、URLからIDが取得できます。これで準備が整いました。

4. コードのまとめ

1～3までの作業をまとめると、こんな感じです。

1. 画像URLからIDを取得
2. get_post()にIDを代入し、画像のタイトル・キャプション・説明（URLを記載）を取得
3. flexslider2の仕様に合わせてコーディング

一番最初のスライダーのコードに、この３つを導入。コードはこうなりました。

<div class="flexslider">
	<ul class="slides">
		<?php foreach ($headers as $key => $value): ?>
			<?php $img_id = fjarrett_get_attachment_id_by_url($value['url']); ?>
			<?php $img_meta = get_post($img_id); ?>
				<li>
					<a href="<?php echo esc_html($img_meta->post_content); ?>">
						<img src="<?php echo $value['url']; ?>" alt="*" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHTH; ?>">
						<p><?php echo esc_html($img_meta->post_title); ?></p>
						<p><?php echo esc_html($img_meta->post_excerpt); ?></p>
					</a>
				</li>
		<?php endforeach; ?>
	</ul>
</div>

上記コードでは説明をわかりやすくするため、class属性や、（タイトルなどの）値が空だった場合には表示しない等の条件は省いています。この辺は適宜調整し、キャプションのfont-sizeやpositionなどについても任意のスタイルシートでコーディングして下さい。

5. まとめ

面倒くさそうでありながら案外簡単に出来るカスタマイズ方法ですかね。この方法であれば、スライダー系のWordPressプラグインを使わずにリンクやキャプションを追加出来るため、軽いサイト作りに使えるかなーと思います。

カスタムヘッダーの設定画面から画像をアップロードすると、「タイトル」には画像の名称が自動的に入ってしまいます。従って、画像の「タイトル」をキャプションとして出力する場合は、カスタムヘッダーをアップロード後、［メディア］タブへ行って画像情報を編集する必要も出てくるので、その辺は手間かもしれません。

※私が作ったWelcart用テーマのトップページのスライダー出力では、「タイトルにjpgという文言が入っていたら出力しない」条件をつけています（色々な人が使うことが想定されますからね・・・readme.txtにはもちろん説明書きは入れていますが）。

• 商品一覧ページ,テーマ制作
• WordPress, jQuery

• ツイート
• B! ブックマーク
• Google+
•  Pocket
• Facebook