【SANGOカスタマイズ】トップページのヘッダーアイキャッチをスライドショーにする方法

こんにちは、ゆうやです！

当ブログで使用しているWordPress最強テーマ「SANGO」（以下、sango）。

sangoにはたくさんのカスタマイズ機能がデフォルトで用意されていて、その中の１つに「ヘッダーアイキャッチ」があります。

これは、トップページにのみ表示される巨大なアイキャッチ画像のことで、管理画面の「外観」→「カスタマイズ」→「ヘッダーアイキャッチ（トップページ）」→「ヘッダーアイキャッチ画像」で任意の画像をアップロードすることで設定できます。

他にも画像の上に「見出し」や「説明文」、「ボタン」を表示したりすることができとても便利な機能です。

ただし、デフォルトだと画像を1枚しか表示することができませんので、

「トップページはブログの顔だからかっこよくスライドショーにしたい！」

という方はカスタマイズする必要が出てきますね。

そこで本記事では、そんな方のお悩みを解決するためにプラグイン「Smart Slider 3」を使ってsangoのトップページヘッダーアイキャッチをスライドショーにする方法を紹介させていただきます！

Smart Slider 3日本語verのダウンロードページ

SANGOでヘッダーアイキャッチをスライドショーにするならSmart Slider 3！
まとめ
SANGOカスタマイズ記事まとめ

SANGOでヘッダーアイキャッチをスライドショーにするならSmart Slider 3！

SANGOヘッダーアイキャッチスライドショーの完成イメージ

当ブログのトップページがデモとなっておりますので確認したい方はご覧になってください(^o^)

ゆうやの雑記ブログトップページ

Smart Slider 3をインストール

■STEP１

管理画面より「プラグイン」→「新規追加」でプラグイン追加ページへ。

■STEP２

検索窓で「Smart Slider」と検索すると表示されるので「今すぐインストール」をクリック。

インストール完了したら「有効化」をクリック。

MEMO

他にも「MetaSlider」というスライドショープラグインがありますが、今回は触れません。

Smart Slider 3の設定

■STEP１

プラグインの有効化が正常にいくと、管理画面左メニューの下の方に新しく項目が追加されますのでそれをクリック。

表示されない場合は再度リロードしてみてください

■STEP２

プラグインのダッシュボードが開かれますので、緑色の「NEW SLIDER」ブロックをクリック。

■STEP３

Create Sliderというポップアップが表示されます。

「Slider name」に任意の名前を入力して「CREATE」ボタンをクリック。

Slider nameはデフォルトで「Slider」と入っているので変更しなくても特に問題はありません。

■STEP４

スライドショーで表示する画像を追加していく画面が表示されます。

「ADD SLIDE」ボタンをクリック。

■STEP５

Add Slideというブロッグがスライドインされてきます。

その中の緑色の「Image」をクリック。

■STEP６

WordPressのメディアライブラリが表示されます。

既存のアップロード画像から追加する場合はそのまま該当の画像を探して追加してください。

新しく画像をアップロードしたい場合は「ファイルをアップロード」のタブに切り替えて追加してください。

■STEP７

３枚ほど追加して右斜め上の「SAVE」ボタンをクリックして編集内容を保存しましょう。

これでひとまずスライドショーの準備は完了しました！

Smart Slider 3 各画像のリンク先を設定

画像をスライドさせるだけでは物足りないので、各スライド画像に任意のリンク先を設定してあげましょう！

■STEP１

リンクを設定したい画像をクリック。

ホバーすると「EDIT」ボタンが表示されます

■STEP２

画像編集ページが表示されるので「Settings」をクリック。

■STEP３

すぐ下に設定項目ブロックが表示されます。

その中の「Link」欄にリンク先URLを入れて、「SAVE」ボタンクリックで完了です。

MEMO

リンクを新しいタブで開きたい場合は、すぐ右横の「Target window」のセレクトボックスをクリックして、「New」を選択すればOKです。

トップページにスライドショーを表示させる

ここからはテーマファイルを編集していくことになります。

くれぐれもサイトが真っ白にならないように注意してやっていきましょう！

注意

子テーマのindex.phpにコードを追加していきます。子テーマ（sango-theme-child）にindex.phpがない方は、親テーマから丸ごとコピーしてきてくださいまし。

■STEP１

Smart Slider 3の作成したスライドショーページへいき、PHPコードをコピーします。

Smart Slider 3で作る1つめのスライドショーならおそらくみんな同じコードなので、以下コピーでも大丈夫です！

index.php

<?php
echo do_shortcode('[smartslider3 slider=2]');
?>

■STEP２

管理画面の「外観」→「テーマの編集」へ行きます。

■STEP３

右端にある「編集するテーマを選択」で子テーマ（SANGO Child）を選択します。

■STEP４

すぐ下に子テーマのファイル名がリストで表示されます。

今回はindex.phpを編集するのでそちらをクリック。

■STEP５

index.php 2行目の「// アイキャッチを出力」のコード直後にSmart Slider 3表示用のショートコードを貼り付けて「ファイルを更新」クリックして保存しましょう！

いつコードを追加したのかをコメントで入れておくと後で見返した時に分かりやすいのでおすすめです

実際に筆者が３〜４行目に追記したコードはこちら。

index.php

<!-- トップスライドショー 2019年12月11日追加 -->
<?php echo do_shortcode('[smartslider3 slider=2]'); ?>

■STEP６

トップページにアクセスして表示を確認してみましょう！

筆者はこんな感じになりました笑

一旦これで完了です！！！お疲れさまでした(^o^)

ただ、ご覧の通りこのままだと

スライドショーが横幅いっぱいに広がってしまってあまり美しくないのでこの後カスタマイズしていきます！

Smart Slider 3スライドショーの横幅カスタマイズ

■STEP１

まずは横幅いっぱいになっているのをコンテンツ幅に合わせる修正を行います！

「コンテンツ幅に合わせる」というのは要はこういうイメージです↓↓

SANGOデモページのようにヘッダーやメインコンテンツと最大幅を揃えます

イメージがつかめたら「外観」→「テーマ編集」へ行ってコードを追加していきましょう！

■STEP２

先程index.phpに追加したコードをほんの少し以下のように変更します。

index.php

// 変更前
<?php echo do_shortcode('[smartslider3 slider=2]'); ?>

// 変更後
<div class="maximg">
    <?php echo do_shortcode('[smartslider3 slider=2]'); ?>
</div>

ポイントは、divにつけたmaximgクラスです！

このクラスは元からsangoテーマのcssで記述されているスタイルなのでそれを付与するだけでPC表示の際にコンテンツ幅に合わせてくれます(^o^)

「スマホ表示のときもスライドショーをコンテンツ幅に合わせたいです！」

という方は、maximgの代わりに「wrap」クラスを指定してあげればスマホ表示でも合わせてくれますのでそちらも試してみてください(^o^)

スマホでも合わせる場合のコードはこちらです↓↓

index.php

// 変更前
<?php echo do_shortcode('[smartslider3 slider=2]'); ?>

// 変更後
<div class="wrap">
    <?php echo do_shortcode('[smartslider3 slider=2]'); ?>
</div>