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

2018.02.28 2024.03.10 WordPress

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

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

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

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

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

slick.js

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

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

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

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

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

header.php

<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>

テーマ内に上記のように書き込んでもいいですが、下記の関連記事の方法でfinctions.phpから読み込むようにしておくと管理がラクです。

WordPressテーマのCSSとJSをfunctions.phpで読み込む方法

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

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

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

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
タイトル
キャプション
代替テキスト
説明

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

WordPress 添付ファイルの詳細

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

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

そのためには、カスタムヘッダーに追加した画像から情報を取り出す仕組みを作らなければいけません。

ここでは、画像URLからIDを取得し、さらに画像IDから各種情報を取り出す仕組みを作っていきます。

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

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ソースを生成します。

テンプレートファイル（front-page.phpなど）のスライダーを設置したい箇所に下記のように記述してください。

front-page.php

<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を動かすスクリプトをテンプレートファイルに記述します。

JavaScript

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

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

オプションについては下記の参考ページをご確認ください。

参考

まとめ

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

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

【WordPress】single.phpのレイアウトを投...

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

Bamboo Works（バンブーワークス）

Blog ブログ