WordPressの無料テーマ「BusinessPress」のトップページにホームページヘッダーの代わって、スライドショーに変更する方法をご紹介いたします。
「BusinessPress」には、標準で固定の背景画像にタイトル、文章、ボタンを配置できる、ホームページヘッダーがありますが、これをスライドショーに変更したいと思います。
Contents
Smart Slider 3でスライドショーの作成
「Smart Slider 3」は、無料で使える豊富な機能がある優秀なスライダー系プラグインです。
「Smart Slider 3」のインストールと使い方はこちらの記事を参考にしてください。
表示するスライドショーのサイズですが、ここでは、横1920px×縦850pxに設定してあります。
お勧めは、横1920pxで縦600px～850pxくらいです。
画面幅一杯のスライドショーにしたい場合は、「Smart Slider 3」の設定「Size」の項目で、LayoutをFull widthに設定してください。
スライドショーが完成したら、「General」の項目で、PHPコードをコピーします。下の赤枠で囲んだ部分です。
ホームページヘッダーを有効化
次にホームページヘッダーを有効の状態にしておきます。「外観」＞「カスタマイズ」で、ホームページヘッダーをクリックして、「ホームページヘッダーを有効にする」にチェックをいれて、「公開」をクリックします。実際には、ホームページヘッダーは表示しないので、有効化以外の項目は設定しないで大丈夫です。
header.phpの編集
今度は、「外観」＞「テーマエディタ―」で、header.phpの編集をします。
phpファイルの編集は自己責任でお願いいたします。子テーマ化するかバックアップを取っておくことをお勧めします。
上記の56行目、
<?php get_template_part( 'template-parts/content', 'home-header' ); ?>を削除して、先ほどのSmart Slider 3のPHPコードを貼り付けます。
<?php echo do_shortcode('ショートコード'); ?>そうすると以下のようなコードになります。
これでホームページを表示してみて、「BusinessPress」標準のホームページヘッダーから「Smart Slider 3」で設定したスライドショーに代わっていたら成功です。
まとめ
今回、「BusinessPress」での設定方法をご紹介いたしましたが、他のWordPressテーマでも同様のカスタマイズが可能だと思いますので、お試しいただければと思います。
header.phpを編集するのは少し心配という場合には、トップページの編集画面で本文内にショートコードを貼り付けるという方法もありますが、こちらの方がスッキリするし、やってみるとそんなに難しくはないです。
「BusinessPress」標準の固定の背景では物足りない方は、トップページをスライドショーにすると変化も出ますのでお勧めです。
