WordPressのカスタムヘッダーを利用してスライダー(画像リンクあり)を実装する方法

2018.02.28 2018.03.26WordPress

WordPressには、ヘッダー画像を設定するためのカスタムヘッダーという機能が標準で備わっています。

ヘッダー画像はメインビジュアルとかキービジュアルなどとも言われ、一般的にウェブサイトの中でもっとも目立つ画像です。

このヘッダー画像にスライダーを設置して複数の画像が表示されるようになっているウェブサイトも多いですが、WordPressのカスタムヘッダー機能では、残念ながらそこまではできません。

ということで、今回はWordPressのカスタムヘッダー機能とスライダー系プラグインとしては代表的な『slick.js』を利用して、ヘッダー画像にスライダーを設置、さらに各画像にリンクを挿入する方法をご紹介します。

1 jQueryプラグイン『slick.js』の設置
2 カスタムヘッダー機能の有効化
3 ヘッダー画像のURLからIDを取得する
4 画像IDから値を取得してスライダーを表示
5 slick.jsを動かすスクリプトを記述
6 まとめ

jQueryプラグイン『slick.js』の設置

まずはじめに、下準備としてslick.jsを設置しておきましょう。

slick.jsの公式サイトから、プラグインのファイル一式をダウンロードします。

ダウンロードしたZIPファイルを解凍して、中にある「slick」というフォルダを丸ごとサーバーにアップロードします。

今回はテーマ内の「js」フォルダの中に「slick」フォルダをアップロードしたとして話を進めます。

アップロードできたら、header.phpからslick.jsのJSとCSSを読み込みます。

<link href="<?php bloginfo('template_url'); ?>/js/slick/slick.css" rel="stylesheet" />
<script src="<?php bloginfo('template_url'); ?>/js/slick/slick.min.js" type="text/javascript"></script>

テーマ内に上記のように書き込んでもいいですが、wp_enqueue_style関数とwp_enqueue_script関数を使ってfinctions.phpから読み込むようにしておくと管理がラクです。

カスタムヘッダー機能の有効化

WordPressでカスタムヘッダー機能を利用するには、テーマから有効化する必要があります。

functions.phpに下記のように追記してください。

/* カスタムヘッダー
---------------------------------------------------------- */
$custom_header_defaults = array(
'default-image' => get_bloginfo('template_url').'/images/hero.png', //デフォルトの画像
'width'         => 1920, //ヘッダー画像の幅
'height'        => 600, //ヘッダー画像の高さ
);
add_theme_support( 'custom-header', $custom_header_defaults );

もっと細かく設定したい場合は、WordPress Codexを参照してください。

ヘッダー画像のURLからIDを取得する

カスタムヘッダーに追加した画像を表示するだけであればheader_image()という関数を使えばいいですが、今回は各画像にリンクを挿入できるようにしたいので、もう少し工夫する必要があります。

WordPressのメディアライブラリを見てもらうと分かりますが、WordPressにアップロードした画像には

URL
タイトル
キャプション
代替テキスト
説明

といった情報が設定できます。

今回は各画像にリンクを設置したいので、これらの値を活用していきます。

ここでは画像の「説明」にURLを入力することで、そのURLへのリンクを挿入できるようにしたいと思います。

そのためには、カスタムヘッダーに追加した画像から情報を取り出す仕組みを作らなければいけません。ここでは、画像URLからIDを取得し、さらに画像IDから各種情報を取り出す仕組みを作っていきます。

まず、画像URLからIDを取得する関数を作成します。functions.phpに下記を追記します。

//ヘッダー画像のIDを取得
function custom_header_get_attachment_id_by_url( $url ) {
$parse_url  = explode( parse_url( WP_CONTENT_URL, PHP_URL_PATH ), $url );
$this_host = str_ireplace( 'www.', '', parse_url( home_url(), PHP_URL_HOST ) );
$file_host = str_ireplace( 'www.', '', parse_url( $url, PHP_URL_HOST ) );
if ( ! isset( $parse_url[1] ) || empty( $parse_url[1] ) || ( $this_host != $file_host ) ) {
return;
}
global $wpdb;
$attachment = $wpdb->get_col( $wpdb->prepare( "SELECT ID FROM {$wpdb->prefix}posts WHERE guid RLIKE %s;", $parse_url[1] ) );
return $attachment[0];
}

画像IDから値を取得してスライダーを表示

上で作成したcustom_header_get_attachment_id_by_url関数を使用して画像IDを取得、そこからリンクURLや画像タイトルなどの情報を取り出してスライダーのHTMLソースを生成します。

テンプレートファイルのスライダーを設置したい箇所に下記のように記述してください。

<div id="hero" class="clearfix">
<ul class="slider">
<?php $header_images = get_uploaded_header_images(); ?>
<?php foreach ($header_images as $key => $value): ?>
<?php $img_id = custom_header_get_attachment_id_by_url($value['url']); ?>
<?php $img_meta = get_post($img_id); ?>
<li>
<?php if($img_meta->post_content): ?>
<a href="<?php echo esc_html($img_meta->post_content); ?>">
<?php endif; ?>
<img src="<?php echo $value['url']; ?>" alt="<?php echo esc_html($img_meta->post_title); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" />
<?php if($img_meta->post_content): ?>
</a>
<?php endif; ?>
</li>
<?php endforeach; ?>
</ul>
</div><!-- #hero -->

slick.jsを動かすスクリプトを記述

最後に、slick.jsを動かすスクリプトをテンプレートファイルに記述します。

jQuery(window).load(function(){
jQuery('#hero .slider').slick({});
});

slick.jsではオプションを設定することで、カスタマイズが可能です。

オプションについてはslick.js公式サイトの「settings」で紹介されています。日本語だとこちらのページが分かりやすいです。

まとめ

以上、WordPressのカスタムヘッダーを利用して画像リンクありのスライダーを設置する方法でした。

画像URLからIDを取得してそこからURLを取得して……　みたいな感じで、ちょっと内容的にややこしい部分もありますが、そのままコピペで使えるように書いたつもりですので、よかったら試してみてください。

WordPressテーマ『HIGHLAND』公開しました

WordPressテーマ『HIGHLAND』を公開しました

このブログで紹介しているカスタマイズを、これでもかと盛り込んだ高性能なテーマになっております。商用・非商用問わず無料、是非ご利用ください。

HIGHLANDデモサイト

ブログ集客メール講座登録フォーム

「売上が不安定で、月末になるといつも不安……」
「営業が苦手で新規開拓がうまくいかない……」
「Webが苦手でブログをうまく活用できない……」

個人起業家・フリーランスのあなた、こんなお悩みはありませんか？

実は僕も、独立して最初に直面したのが「集客」の壁でした。

しかし今は、1年の大半をベトナムで過ごしながら、フリーランスのWebディベロッパーとして生計を立てています。

僕がなぜ、時間・場所・人間関係に縛られずに暮らせるようになったのか？

その答えは「ブログ」にあります。

今なら、「初心者の人が成果を上げるため」のブログ集客ノウハウを、メール講座限定でお伝えします。

興味のある人は、今すぐ以下から登録【無料】を！

Follow @bambooooooo0116

この記事を気に入ったら
いいね！&フォローしよう最新情報をお届けします

柴田竹思

日本＆ベトナム二拠点生活中のWeb系フリーランス。最近は育児６：仕事４のバランスで生活してます。これでもかってくらい奥さんの尻に敷かれてる座布団系男子です。

プロフィールはこちら

WordPressでカスタム投稿タイプの個別記事に関連記事一...

WordPressでプラグインを使わずに関連記事一覧を表示す...