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

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

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

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

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

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

sangoカスタマイズヘッダーアイキャッチ画像

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

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

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

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

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

Smart Slider 3ダウンロードページ

Smart Slider 3日本語verのダウンロードページ

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

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

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

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

Smart Slider 3をインストール

■STEP1

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

■STEP2

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

Smart Slider 3インストール

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

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

Smart Slider 3の設定

■STEP1

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

WP管理画面 Smart Slider 3

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

■STEP2

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

Smart Slider 3ダッシュボード

■STEP3

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

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

Smart Slider 3 ポップアップ

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

■STEP4

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

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

Smart Slider 3 画像追加

■STEP5

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

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

Smart Slider 3 画像追加

■STEP6

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

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

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

■STEP7

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

Smart Slider 画像追加後

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

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

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

■STEP1

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

Smart Slider 3 画像編集

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

■STEP2

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

Smart Slider 3 リンク設定

■STEP3

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

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

Smart Slider 3 リンク設定2

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

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

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

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

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

■STEP1

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

Smart Slider 3 phpコード

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

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

■STEP2

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

■STEP3

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

子テーマ編集

■STEP4

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

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

子テーマ編集index.php選択

■STEP5

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

子テーマ編集index.php似追加

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

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

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

■STEP6

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

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

Smart Slider 3で作るスライドショー

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

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

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

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

■STEP1

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

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

SANGOトップページ

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

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

■STEP2

先程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>

Smart Slider 3スライドショーの画像縦横比率維持(途中)

どんな画像を入れてもその画像の縦横比率を維持したまま表示することは技術的に可能なのですが、

ちょっとプラグインをカスタマイズしたりと大変そうなので後日時間を確保して追記していきたいと思います(泣)

以前紹介した方法でやろうと思っているので楽しみにお待ちいただければ幸いです!

CSSで画像の縦横比を維持したまま表示させる方法CSSで画像の縦横比を維持したまま表示させる方法【レスポンシブ対応】

また、プラグインをカスタマイズせずにやりたい場合、てっとり早いのは「スライドショーの画像比率にアップロードする画像比率を合わせて作成すること」です!

SANGOでSmart Slider 3を使用した場合の画像比率は、縦幅 417px / 横幅1001px × 100 = 41.65%。

その縦横比率で画像作成するかもしくは、1001px × 417pxの画像を作成するかがあります!

当ブログのスライドショー画像は後者でやってますので参考までに\(^o^)/

まとめ

いかがでしたでしょうか。

日本のWordPressブロガーでSANGOテーマを使用している方はかなーり多いと思います。

スライドショーを導入することでページ速度が落ちてユーザビリティが下がる可能性はありますが、ブログをイケてる風なイメージにしたい場合にスライドショーは割と相性がいいと思うので気が向いたら挑戦してみて下さいまし!

SANGOカスタマイズ記事まとめ

SANGOカスタマイズに役立つ記事まとめ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です