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

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

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

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

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

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

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

柴田 竹思

柴田 竹思

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

プロフィールはこちら

RELATED POSTS