SANGOでトップページのヘッダーアイキャッチをスライドショーに変える方法~50歳でもできた!

  

トップページのヘッダーアイキャッチにスライドショーを入れてみたいなぁ・・・
どうやってやるのかしら
難しそうだしあきらめるしかないかしら

  

この記事ではこのようなお悩みをお持ちの方に向けて、実際に私がスライドショーを作成してトップページにのせた方法をお伝えします。

 

画像を使って詳しく説明していきますので初めてスライドショーを作る方でも途中で挫折しないで済むはずです。

 

50歳の私でもできました。
スライドショーをどうしても入れたいという気持ちがあればどなたでもできると思いますのでがんばってみてください。 

  

プロローグ

 

早くやり方が知りたいのだ!という方はここは飛ばしてください。

 

私は写真を撮るのも観るのも大好きで写真に関することは寝食忘れて没頭してしまうほどです。
今回せっかく自分のブログを作ったのでトップページにスライドショーをのせたいと心底思っていました。

 

どうしてものせたくて片っ端から調べていると、どうやらPHPをいじらないといけなそうな予感が・・・(PHPがなんなのかもよくわかっていない)

 

もうあきらめようと半分泣きべそ状態でしたがどうしてもスライドショーを入れたくて頑張った結果とうとう入れることに成功しました!

 

私が格闘した時間をシェアしますのでぜひトライしてみてくださいね!  

 

スライドショーをのせるステップ

 

ざっくり言うとトップページにスライドショーを表示するステップは

  • スライドショーを作る
  • 作ったスライドショーをトップページに貼る

になります。

 

スライドショーを作るにはプラグインが必要になりますのでインストールしましょう。
スライダープラグインはたくさんありますが私はSmartSlider3を使ってみました。
では詳しく説明していきます。

 

スライダープラグインをインストールする

 

プラグインの新規追加画面でsliderで検索するとたくさんでてきます。

 

私はこちらのSmart Slider 3をインストールしました。

 

もちろん他のものでも大丈夫です。
スライドショーの作り方はWordPressの設定よりは簡単ですし、感覚的にできるのでどれでもお好きなプラグインをインストールしてください。

 

スライドショーを作る

 

スマートスライダーをインストールして有効化すると管理画面のメニューの下の方に Smart Slider と表示されます。

 

ここをクリックするとこんな画面になり編集できるようになります。
英語しか書かれていませんが大丈夫です。

 

この画面で NEW SLIDER をクリックします。

 

Create Slider という小さな画面が開くので、作成するスライダーの名前を適当に入力してタイプはDefaultのままで一番下のCREATEボタンをクリックします。

 

すると入力したスライダーの名前が上の方に表示されます。
ADD SLIDE をクリックして次の画面に移ります。

 

一番左の Image をクリックするとWordPress のメディアライブラリが開くのでスライダーに入れる画像を選んでいきます。
スライダーに入れる画像はあらかじめメディアライブラリに取り込んでおきましょう。

 

画像を選択すると Smart Slider の画面に戻って下の方に選んだ画像が並びます。
右上の SAVE をクリックしてスライダーを保存しましょう。

 

これでスライダーが完成しました。
Smart Slider の画面を下の方にスクロールしていくと設定エリアになっていて仕様を細かく設定できるようになっています。
画面の左上の方の PREVIEW をクリックするといつでもプレビューが確認できます。

 

プレビューを見るとわかりますが、最初は画像をクリックすると左右にスライドするような設定になっています。

 

設定は実際にいろいろいじりながらプレビューで確認するのが一番早いしどうなるかわかりやすいです。
ぜひいろいろと試してみてください。

 

参考までに私のブログでのせているスライドショーの設定はこちらになります。

 

一番左の PUBLISH はあとで使います。
その隣の GENERAL の設定はこんな感じです。

 

その隣の SIZE はこんな感じ。

 

残りの AUTOPLAY から DEVELOPER までは一気にこんな感じ。

 

下に進んで一番左の ARROWS は一番左の何もなしを選択。

残りの BULLETS から SHADOWS までも同じように何もなしを選択しています。

 

細かい設定は以上です。
好きなように設定したら保存するのをお忘れなく!

 

作ったスライドショーをトップページに貼る

 

ではいよいよスライドショーをトップページに貼ります。
スライドショーを作ること自体は楽しかったのですが、この貼る方法がわからなくて挫折しそうでした。

 

私は SANGO の子テーマ PORIPU を使っているのでそれで説明します。
テーマの編集になるのでくれぐれも自己責任でお願いします。

 

WordPress の管理画面の外観からテーマエデイターを選びます。

 

テーマの編集の画面になります。
①で子テーマを選択して、②でトップページの index.php を選び、③の位置に PHP coad を貼ります。

 

この③で貼るコードが Smart Slider の PUBLISH で表示されているコードになります。
この PHP coad をコピーして③に貼ります。

 ③を拡大するとこうです。

 

最後にテーマ編集画面のファイルの更新をします。

 

トップページにヘッダーアイキャッチを表示させている場合は

メニューの外観 → カスタマイズ → ヘッダーアイキャッチ → ヘッダーアイキャッチ画像 → ヘッダーアイキャッチ画像を表示のチェックをはずす

をしてください。

 

表示させているとアイキャッチ画像が優先になってスライドショーが表示されません。
チェックをはずすとトップページのアイキャッチがスライドショーになっていると思います。

 

以上で完成となります。
少しでもお役に立てればうれしく思います。

 

コメントを残す

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