WordPressのカスタマイズ方法やプラグインレビューを中心に、パソコン/動物/植物のことなどを紹介するホームページです
[Ha-Basic] How to make the header image of the top page "enlarge and fade switch" & how to use it in other themes

トップページのヘッダー画像を「拡大&フェード切り替え」にする方法【ha-Basic&その他テーマ】

公開日: ha-Basicテーマ

以前に紹介した、【ha-Basic】テーマのトップページにあるヘッダー画像を3Dスライダーへ変更する方法

今回はもう1歩進んで、

  • 表示されている画像が徐々に拡大されていく
  • 一定時間経つと自動で次の画像に切り替わる
  • 切り替え後の画像が徐々に拡大されていく
  • ・・・繰り返し・・・

という形で表現する方法を紹介します。

最初に【ha-Basic】での適用方法を紹介しますが、後編ではいろいろなテーマで汎用的に適用する方法&仕組みなどについても紹介していますので、「これええなぁ・・(なぜか関西弁)」と思われた方はぜひ自身のサイトでも採用してみてください。

なお、冒頭で紹介した

では「slick.js」というスクリプトを使いましたが、今回は「swiper.js」というのを使用しています。今回の設定方法は文末にある参考ページを基に、【ha-Basic】テーマへ簡単に組み込めるようにしたもので、「swiper.js」については私自身とても使いこなせるレベルではありませんので、設置後詳しく知りたい方は公式サイトを見ていただくか、「swiper」でググっていろいろなページを読んで参考にしてください。

【ha-Basic】テーマでトップページのヘッダー視差画像を「拡大する写真&自動切換え」にする方法

パッケージファイルのダウンロード

から今回のスライダーに必要なものをパッケージ化したファイルをダウンロードします
※直リンク防止のため、「Booth」という外部サイトで配布しています(Boothへの登録、本ファイルのダウンロードは無料です)

ダウンロードしたファイルは圧縮されていますので、パソコン上で解凍してください

パッケージファイルの解凍とアップロード

解凍したパッケージは

swiper
-swiper.min.css
-swiper.min.js
-swiper-header.css
-swiper-header.js
-swiper-header-content.php

という構造になっていますので、FTPなどを使って「swiper」フォルダを丸ごと以下の場所へアップロードします。

サイトが収容されているフォルダ
→wp-content
→themes
→ha-basic

※最後の「ha-basic」を開いたところ(ha-basicフォルダの中)へアップロードしてください

画像の準備とアップロード

スライダーに表示させる画像を準備します。画像の拡大・縮小はされますが、できればサイト幅もしくは画面幅に合わせたものを用意してください。

画像の高さは自動的に500pxに、画像の中央から上下250pxずつの範囲が表示されますから、中央に表示したいものが入っている画像を用意するか、高さ500pxに整えてください。

画像数は何枚でもスライド表示可能ですがすべての画像を読み込む必要があるため、容量の大きい画像をたくさん使用すると表示に時間がかかるようになりますのでご注意ください。

画像の最適化はオンラインイメージ最適化ツールが便利です。

準備できたら

サイトが収容されているフォルダ
→wp-content
→themes
→ha-basic
→images

※最後の「images」を開いたところ(imagesフォルダの中)へアップロードしてください

画像読み込みの設定

外観テーマエディタを開いて右側のリンク一覧にある「swiper」というフォルダを開き、「swiper-header-content.php」を開きます。

以下のようなコードが表示されますので

<div class="swiper-container">
<div class="swiper-wrapper">
<!-- 背景画像1 -->
<div class="swiper-slide">
<div class="slide-img" style="background-image: url('<?php echo get_template_directory_uri() ?>/images/画像のファイル名と拡張子');"></div>
</div>
<!-- 背景画像2 -->
<div class="swiper-slide">
<div class="slide-img" style="background-image: url('<?php echo get_template_directory_uri() ?>/images/画像のファイル名と拡張子');"></div>
</div>
<!-- 背景画像3 -->
<div class="swiper-slide">
<div class="slide-img" style="background-image: url('<?php echo get_template_directory_uri() ?>/images/画像のファイル名と拡張子');"></div>
</div>
</div>
<!-- 丸いページネーション -->
<div class="swiper-pagination"></div>

<!-- 左右のページ送り -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>

「画像のファイル名と拡張子」と書かれている部分をアップロードした画像のファイル+拡張子に変更してください

コードは3枚分の画像が表示できるようにしています。追加したい場合は

<!-- 丸いページネーション -->

の上に

<!-- 背景画像 -->
<div class="swiper-slide">
<div class="slide-img" style="background-image: url('<?php echo get_template_directory_uri() ?>/images/画像のファイル名と拡張子');"></div>
</div>
</div>

を追加して「画像のファイル名と拡張子」を設定してください。

a-insert-header.phpへコードを追加

外観テーマエディタを開き、a-insert-headerをクリックして最終行へ以下をコピペしてください。

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/swiper/swiper.min.css">
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/swiper/swiper-header.css">

a-insert-footer.phpへコードを追加

外観テーマエディタを開き、a-insert-footerをクリックして最終行へ以下をコピペしてください。

<script src="<?php echo get_template_directory_uri(); ?>/swiper/swiper.min.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/swiper/swiper-header.js"></script>

header.phpの記述内容を変更

変更前

<!--ヘッダ画像(フロントページかつパソコン表示のみ)-->
<?php if(wp_is_mobile()): ?>
<?php else: ?>
<?php if(is_front_page()): ?>
<!--ヘッダ画像(視差効果)-->
<aside id="site-top-image" class="box" style="background-image: url(<?php echo get_template_directory_uri() ?>/images/header.png); "></aside>
<?php else: ?>
<?php endif; ?>
<?php endif; ?>

変更後

<!--ヘッダ画像(フロントページかつパソコン表示のみ)-->
<?php if(wp_is_mobile()): ?>
<?php else: ?>
<?php if(is_front_page()): ?>
<?php get_template_part('swiper/swiper-header-content');//Swiper スライダー?>
<?php else: ?>
<?php endif; ?>
<?php endif; ?>

基本的には設置手順通りに行えば

のように画像が拡大される→次の画像が表示される・・・というスライダーがパソコン表示時のトップページへ表示されるようになります。

細かい調整については文末の「動作やデザインの調整」を参照ください

一般的なテーマのヘッダーへ「拡大する写真&自動切換え」スライダーを設置する方法

基本的な流れは【ha-Basic】テーマへ組み込む場合と同じです。
※親テーマでの設定を前提に説明しますので、子テーマで設定する場合には自身で調べてください(基本的にはコード中のテーマファイルの参照先を変更すれば済むと思いますが検証はしていません)。

設置の手順

パッケージファイルをダウンロードします

から今回のスライダーに必要なものをパッケージ化したファイルをダウンロードします
※直リンク防止のため、「Booth」という外部サイトで配布しています(Boothへの登録、本ファイルのダウンロードは無料です)

スライド表示させる画像の準備します

スライダーに表示させる画像を準備します。画像の拡大・縮小はされますが、できればサイト幅もしくは画面幅に合わせたものを用意してください。

画像の高さは自動的に500pxに、画像の中央から上下250pxずつの範囲が表示されますから、中央に表示したいものが入っている画像を用意するか、高さ500pxに整えてください。

画像数は何枚でもスライド表示可能ですがすべての画像を読み込む必要があるため、容量の大きい画像をたくさん使用すると表示に時間がかかるようになりますのでご注意ください。

画像の最適化はオンラインイメージ最適化ツールが便利です。

画像はすべて「images」というフォルダの中に入れておきましょう

ダウンロードしたファイルを解凍します

先程ダウンロードしたパッケージファイルをパソコン上で解凍します。

解凍したパッケージは

swiper
-swiper.min.css
-swiper.min.js
-swiper-header.css
-swiper-header.js
-swiper-header-content.php

という構造になっています

画像フォルダとパッケージをアップロードします

先程作成した「images」というフォルダと「swiper」フォルダを、現在使用しているテーマのフォルダ内へアップロードします

※テーマによっては既に「images」「swiper」と同名のフォルダが存在する場合がありますから、上書きしないようにしてください(今回アップロードするフォルダ名を変更して適用できますが、ご自身にスキルがない場合には今回の方法は断念したほうがいいと思います)。

※きちんとアップロードできているかは外観テーマエディタを開いて右側のリンク一覧に「swiper」というフォルダがあるかどうかで判断できます。もしもない場合にはアップロード先が間違っていますので再確認してください。

外観テーマエディタを開いて右側のリンク一覧にある「swiper」というフォルダを開き、「swiper-header-content.php」を開きます。

以下のようなコードが表示されますので

 <div class="swiper-container">
<div class="swiper-wrapper">
<!-- 背景画像1 -->
<div class="swiper-slide">
<div class="slide-img" style="background-image: url('<?php echo get_template_directory_uri() ?>/images/画像のファイル名と拡張子');"></div>
</div>
<!-- 背景画像2 -->
<div class="swiper-slide">
<div class="slide-img" style="background-image: url('<?php echo get_template_directory_uri() ?>/images/画像のファイル名と拡張子');"></div>
</div>
<!-- 背景画像3 -->
<div class="swiper-slide">
<div class="slide-img" style="background-image: url('<?php echo get_template_directory_uri() ?>/images/画像のファイル名と拡張子');"></div>
</div>
</div>
<!-- 丸いページネーション -->
<div class="swiper-pagination"></div>

<!-- 左右のページ送り -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>

「画像のファイル名と拡張子」と書かれている部分をアップロードした画像のファイル+拡張子に変更してください

コードは3枚分の画像が表示できるようにしています。追加したい場合は

<!-- 丸いページネーション -->

の上に

<!-- 背景画像 -->
<div class="swiper-slide">
<div class="slide-img" style="background-image: url('<?php echo get_template_directory_uri() ?>/images/画像のファイル名と拡張子');"></div>
</div>
</div>

を追加して「画像のファイル名と拡張子」を設定してください。

テーマ内へスライダーを読み込ませるコードを挿入します

外観テーマエディタを開き、「header.php」を開きます。

コード中の</head>の直前に以下のコードを追記します

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/swiper/swiper.min.css">
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/swiper/swiper-header.css">

同じように外観テーマエディタから「footer.php」を開きます。

</body>の直前に以下のコードを追記します

<script src="<?php echo get_template_directory_uri(); ?>/swiper/swiper.min.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/swiper/swiper-header.js"></script>

同じように外観テーマエディタから再度「header.php」を開きます。

いろいろとコードが書かれていますが、<body…>と書かれているところから下が実際に表示される部分になっていますので、実際の表示と見比べながらここだ!!と思う場所へ

<p>ここにスライダーが表示されるハズ・・・</p>

をひとまず挿入して保存→ページの再表示をしてみてください。思った場所に「ここにスライダーが表示されるハズ・・・」という文字が表示されるようでしたら位置は確定ですから

<p>ここにスライダーが表示されるハズ・・・</p>

の代わりに

<?php get_template_part('swiper/swiper-header-content');//Swiper スライダー?>

を挿入すればOKです。

※【ha-Basic】テーマのようにパソコン表示時のトップページだけにスライダーを表示したい!場合は

<?php get_template_part('swiper/swiper-header-content');//Swiper スライダー?>

の代わりに

<!--ヘッダ画像(フロントページかつパソコン表示のみ)-->
<?php if(wp_is_mobile()): ?>
<?php else: ?>
<?php if(is_front_page()): ?>
<?php get_template_part('swiper/swiper-header-content');//Swiper スライダー?>
<?php else: ?>
<?php endif; ?>
<?php endif; ?>

を挿入します。

※通常のテーマではすべてのページに共通するページ先頭の部分(ヘッダー)は、上の説明のように「header.php」に書かれていますが、テーマによっては「single.php」「page.php」「frontpage.php」「home.php」などに書かれていることもありますので、適宜読み替えてください。

以上で指定位置に画像スライダーが表示されます(表示されない場合には手順のチェックをする、ブラウザのキャッシュをクリアする等の措置をしてみてください)。

動作やデザインの調整

デザインの設定は「swiper」フォルダの中の「swiper-header.css」の中に書かれていますので、そちらでカスタマイズしてください

動作(表示時間や遷移させる時間など)の調整は「swiper」フォルダの中の「swiper-header.js」の中に書かれていますので、そちらで調整してください

参考にさせていただいたページ

背景画像をズームアップしながらフェードで切り替えるスライダー – Swiperで実装する方法

WordPressのカスタマイズ・不具合対応などご相談ください

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。