2013-10-01

WordPressテーマ付属のスライドショー/イメージヘッダーのプチカスタマイズ方法

Minimal WPのスライドショー付きWordPressテーマは、
トップページに3枚の写真が自動で切り替わるようになってるんですが、
これを枚数を減らしたり増やしたり、または1枚の固定画像にしたり、
スライドショー部分丸ごと削除したり、別プラグインに置き換えたりする方法です。

最初から1枚固定画像のイメージヘッダータイプのテーマはこちらをどうぞ。
Q&A：WordPressのイメージヘッダー（１枚固定画像）自体を削除することはできますか？＞

スライドショーのコードがある場所

ダッシュボード＞外観＞テーマファイルエディターで、下のファイルを開きます。

テーマ	ファイル
Holiday Ⅱ	header.php
Flora deux Ⅱ・Pantomime Ⅱ・Slauson Ⅱ	index.php

<!-- スライドショー で始まるコメントを探すと、こんな感じのことが書いてあります。（Holiday Ⅱの場合）

<div class="swiper" id="top-slide-max">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="<?php echo esc_url( get_option('slideshow1') ? get_option('slideshow1') : get_template_directory_uri() . '/images/main_01.jpg' ); ?>" alt="<?php bloginfo('name'); ?>" />
</div>
<div class="swiper-slide">
<img src="<?php echo esc_url( get_option('slideshow2') ? get_option('slideshow2') : get_template_directory_uri() . '/images/main_02.jpg' ); ?>" alt="<?php bloginfo('name'); ?>" />
</div>
<div class="swiper-slide">
<img src="<?php echo esc_url( get_option('slideshow3') ? get_option('slideshow3') : get_template_directory_uri() . '/images/main_03.jpg' ); ?>" alt="<?php bloginfo('name'); ?>" />
</div>
</div>

ややこしく見えますが、画像が3枚、順番に並んでいるだけです。
1枚ずつ <div class="swiper-slide"> 〜 </div> で囲まれています。

スライドショーの画像の枚数を増やす

ダッシュボード＞メディア＞新規追加から画像をアップロードして、画像のURLをコピーします。
3枚目の <div class="swiper-slide"> 〜 </div> のすぐ下に、こんな感じで1枚分を追加します。

<div class="swiper-slide">
<img src="https://example.com/wp-content/uploads/main_04.jpg" alt="" />
</div>

URLのところを、コピーした画像のURLに変えてください。
これで何枚でも増やせます。
ただ増やしすぎると重くなるし10枚あっても誰も見ないので5枚くらいが限度です。

スライドショーの画像の枚数を減らす

いらない分だけ、<div class="swiper-slide"> 〜 </div> を1枚分ずつ削除すればOKです。

スライドショーを止めて1枚の固定画像にする

上の枚数を減らす要領で、1枚目だけ残してすべて削除します。
1枚だけになると切り替わらないので、これだけでOKです。

切り替わる速さや動きを変える

切り替えの設定は functions.php に書いてあります。
ダッシュボード＞外観＞テーマファイルエディター＞functions.php を開いて、new Swiper を探します。

effect: "fade",
fadeEffect: { crossFade: true },
loop: true,
autoplay: { delay: 4000, disableOnInteraction: false },
speed: 600

delay: 4000：次の画像に切り替わるまでの時間（ミリ秒）。6秒にしたいなら 6000
speed: 600：切り替わりにかかる時間（ミリ秒）
effect: "fade"：フェードで切り替わる設定。"slide" にすると横にスライドします

functions.php は書き間違えるとサイトが表示されなくなることがあるので、必ずバックアップを取ってから、数字だけを変えるようにしてください。

スライドショーをテンプレートから丸々削除する

 までのコードを全部削除すればOKです。
テーマによっては余白のバランスが変わる場合があるので、
もし気になればCSSで微調整してください。

別のスライダープラグインに置き換える

 までのコードを、
利用したいプラグインで指定されるコードに置き換えればOKです。

ショートコードタイプのプラグインなら、こんな感じで書けばテンプレートの中でも使えます。

<?php echo do_shortcode('[ここにプラグインのショートコード]'); ?>

Minimal WPカスタムの管理画面（スライドショー画像のURLを入れる画面）は、増やした分には対応しません。
4枚目以降は、上のようにテーマファイルに画像のURLを直接書いてください。

旧型のテーマ（名前にⅡがつかないもの）の場合

旧型のテーマは、スライドショーの仕組みが違うので、書いてあるコードも違います。
コードがある場所（ファイル）は同じで、 を探すとこんな感じのことが書いてあります。（Holidayの場合）

<div id="top-slide-max" class="cycle-slideshow"
data-cycle-fx="fade"
data-cycle-pause-on-hover="false"
data-cycle-speed="600">
<img src="<?php echo (get_option('slideshow1')) ? get_option('slideshow1') : get_template_directory_uri() . '/images/main_01.jpg' ?>" alt="<?php bloginfo('name'); ?>" />
<img src="<?php echo (get_option('slideshow2')) ? get_option('slideshow2') : get_template_directory_uri() . '/images/main_02.jpg' ?>" alt="<?php bloginfo('name'); ?>" />
<img src="<?php echo (get_option('slideshow3')) ? get_option('slideshow3') : get_template_directory_uri() . '/images/main_03.jpg' ?>" alt="<?php bloginfo('name'); ?>" />
</div>

Ⅱと違って、画像が <img> の1行ずつで並んでいるだけです。

増やす：3枚目の <img> の下に、<img src="画像のURL" alt="" /> を1行追加
減らす・1枚にする：いらない <img> の行を削除（1枚だけ残せば切り替わらなくなります）
切り替わる間隔を変える：data-cycle-speed="600" の下に data-cycle-timeout="6000" のように1行足す（ミリ秒。何も書かないと4秒）
横にスライドさせる：data-cycle-fx="fade" を data-cycle-fx="scrollHorz" に変える