【BusinessPressカスタマイズ】Smart Slider 3使用・ホームページヘッダーをスライドショーに変更する方法(ヘッダースライダー埋め込み)

【BusinessPressカスタマイズ】Smart Slider 3使用・ホームページヘッダーをスライドショーに変更する方法(ヘッダースライダー埋め込み)

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」標準の固定の背景では物足りない方は、トップページをスライドショーにすると変化も出ますのでお勧めです。

関連記事 Related Articles