SANGOのヘッダーアイキャッチをトップを固定ページにしててもスライドに変える方法

SANGOのヘッダーアイキャッチをトップを固定ページにしててもスライドに変える方法
2019年6月17日
WordPress
スポンサーリンク

こんにちは!

今回は、別サイトでヘッダーアイキャッチ画像をスライドショーみたいにしたいなと思ってやってみたのでやり方をご紹介します!

[box class=”box27″ title=”注意”]

この記事はりーむがやりたいカスタマイズがあって調べて組み合わせたりして、たまたまできたようなカスタマイズです。

もっとちゃんとしたやり方があるかもしれないし、不具合が出るかもしれないので、自己責任でお願いします。責任は一切取れません。

[/box]

トップページのヘッダーアイキャッチをスライドショーにしたい!!

別サイトで画像の最大横幅に制限を設けにヘッダーアイキャッチを設定していたのですが、ふとスライドにしてみたいなーと思って調べると、このような記事がでてきました↓

[sanko href=”https://tekito-aqua.com/sango-customize-headerslider/” title=”【SANGOカスタマイズ】ヘッダー下に画像スライドショーを挿入する方法” site=”てきとうアクア”]

早速この方法を試したのですが、これはトップページをそのままにしている人のみで、トップページを固定ページにしているとできない!ということがわかりました。

フロントページの表示を固定ページに変更している場合は、「index.php」内にコードを貼り付けてもスライドショーは表示されません。これには、テンプレート階層が関係しています。

出典:画像のスライドショー(スライダー)を作成・表示できるプラグイン|WordPress超初心者講座

やり方

色々調べた結果、できました!やり方をご紹介します。(詳しい理由とかはカットします)

①プラグインでスライドを作る

WordPressには色々なスライドを作成するプラグインがあります。PHPコードを作成できるプラグインなら基本OKだと思います。自分はSmart Slider 3というプラグインを使いました。

スライドの作り方は割愛しますがこちらのサイトがとてもわかりやすいので参考にPHPコードというのをコピーしましょう。

↓PHPコードとはこんなやつです(黄色い部分

[sanko href=”https://gimmicklog.com/wordpress/715/” title=”Smart Slider 3 – 手軽にスライドショーが実装できるWordPressプラグイン” site=”Gimmick log”]

②トップページ用のテンプレートを親テーマから子テーマにコピペする

ほとんどの人は子テーマでカスタマイズをしていると思うのですが、このカスタマイズには「トップページ用 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コードです。

完成!!

これで、ヘッダーアイキャッチがスライドになってると思います。

実際自分が作ったのはこちらからみれます

以上です!

0