こんにちは!
今回は、別サイトでヘッダーアイキャッチ画像をスライドショーみたいにしたいなと思ってやってみたのでやり方をご紹介します!
[box class=”box27″ title=”注意”]この記事はりーむがやりたいカスタマイズがあって調べて組み合わせたりして、たまたまできたようなカスタマイズです。
もっとちゃんとしたやり方があるかもしれないし、不具合が出るかもしれないので、自己責任でお願いします。責任は一切取れません。
[/box]トップページのヘッダーアイキャッチをスライドショーにしたい!!
別サイトで画像の最大横幅に制限を設けずにヘッダーアイキャッチを設定していたのですが、ふとスライドにしてみたいなーと思って調べると、このような記事がでてきました↓
[sanko href=”https://tekito-aqua.com/sango-customize-headerslider/” title=”【SANGOカスタマイズ】ヘッダー下に画像スライドショーを挿入する方法” site=”てきとうアクア”]早速この方法を試したのですが、これはトップページをそのままにしている人のみで、トップページを固定ページにしているとできない!ということがわかりました。
※フロントページの表示を固定ページに変更している場合は、「index.php」内にコードを貼り付けてもスライドショーは表示されません。これには、テンプレート階層が関係しています。
やり方
色々調べた結果、できました!やり方をご紹介します。(詳しい理由とかはカットします)
①プラグインでスライドを作る
WordPressには色々なスライドを作成するプラグインがあります。PHPコードを作成できるプラグインなら基本OKだと思います。自分はSmart Slider 3というプラグインを使いました。
スライドの作り方は割愛しますがこちらのサイトがとてもわかりやすいので参考にPHPコードというのをコピーしましょう。
↓PHPコードとはこんなやつです(黄色い部分)
②トップページ用のテンプレートを親テーマから子テーマにコピペする
ほとんどの人は子テーマでカスタマイズをしていると思うのですが、このカスタマイズには「トップページ用 1カラム(タイトルなど出力無し) 固定ページテンプレート」というファイルを親テーマから子テーマにコピペする必要があります。
FTPソフトを使って(使わなくてもできるかも?)親テーマフォルダーにpage-forfront.phpというファイルがあります。このファイルを子テーマ内に中身もファイル名も全く同じに複製します。
FTPソフトの使い方はサルワカさんの記事がとてもわかりやすいです。
[sanko href=”https://saruwakakun.com/html-css/wordpress/filezilla” title=”【FileZillaの使い方】WordPressでFTPソフトを使おう” site=”サルワカ”]③トップページに設定している投稿IDを調べる
固定ページの投稿IDを調べます。
④カスタマイズ
複製できたら、get_header(); ?>の直下に①で作った投稿IDとPHPコードとコピペしましょう!!
↓こんな感じです
[codebox title=”PHP”]
get_header(); ?> <?php if ( is_page(30) ) : ?> <?php echo do_shortcode('[smartslider3 slider=2]'); ?> <?php endif; ?>
[/codebox]
<?php if ( is_page(ここに投稿ID) ) : ?>が投稿IDの部分で、<?php echo do_shortcode(‘[smartslider3 slider=2]’); ?>がスライドのPHPコードです。
完成!!
これで、ヘッダーアイキャッチがスライドになってると思います。
実際自分が作ったのはこちらからみれます
以上です!