STINGER

STINGER PLUS2のヘッダー下にMetaSliderでカルーセルスライダーを設置する方法

投稿日: 更新日: 2017年11月20日

ボンジュール!でででーさん(@d3_dayo) です!カルーセルとは「回転木馬」のことです(^^)/

 
ここ最近はこのブログでお馴染みになっているSTINGER PLUS2カスタマイズシリーズですが、前回の記事はこれまでのシリーズよりも消すのがちょっと難しくなった?STINGER PLUS2の「Powered by STINGER」表記を消す方法を紹介しています。
 
【簡単】STINGER PLUS2の「Powered by STINGER」をCSSとPHPへの追記だけで消す方法 | カキタクナッタラ
今回はこのブログでもやっている、ヘッダー下にオススメ記事などをカルーセルスライダーで表示するための手順をSTINGER PLUS2仕様で紹介したいと思います。冒頭の吹き出しでも書きましたが、カルーセルというのは「回転木馬」のことで、カルーセルスライダーというのは複数枚のスライドがぐるぐる回っているようなスライドデザインのことを言います。
 
ちなみに、このブログではbxSliderというものを使っていますが、今回の記事で紹介するのは恐らくもっと簡単な設置手順で済むWordPressプラグインのMetaSliderを使ったカルーセル設置手順を紹介していきます。
 
 

スポンサーリンク

STINGER PLUS2

ダウンロード及び規約
STINGER PLUS2は上記のリンクからダウンロードすることができます。
 
 

完成図

今回紹介するカスタマイズを実際にテスト環境で施してみたので、まずは完成図としてスクリーンショットをお見せしたいと思います。
 
・PCの表示

 
・スマホの表示(アニメーション表示しています)

 
PCでは画面幅に合わせて3列や4列で画像配置、スマホでは1枚の画像配置になり、自動でスライドします。
 

MetaSlider

MetaSlider
無料版でも様々なモードのスライダーを設置することができる手軽で便利なスライダープラグインです。もちろん、今回紹介する手順も無料版の機能だけでヘッダー下にカルーセルスライダーを設置します。
 
 

プラグインのインストール

ここでは手順紹介のサンプルとして「WP Maintenance Mode」という別のプラグイン導入時のスクリーンショットなどを例にしていますが、導入の手順に変わりはありません。
 
上記リンクのプラグイン紹介ページからプラグインのデータをダウンロードして…
 
f:id:d3dayo:20170916171458p:plain
 
自身のWordPress管理画面のサイドメニューからプラグイン→新規追加でダウンロードしたファイルをアップロードする方法でインストールが可能です
 
f:id:d3dayo:20170916171805p:plain
 
或いは、WordPress管理画面のサイドメニューからプラグイン→新規追加で表示したページにある検索欄に「MetaSlider」と入力して検索して、そこからインストールをすることも可能です。
 
f:id:d3dayo:20170916172039p:plain
 
 

MetaSliderでスライドショーの設定

まず最初に事前準備としてWordPressの管理画面からMetaSliderにアクセスし、カルーセルスライダーの設定をしていきます。
 
MetaSliderの設定に入ったら最初のスライドショーを作成→「スライドを追加」からスライドショー表示したい画像を追加していきます。
 

 
 
この時、アップロードした画像の横に表示されている枠内でスライドごとに表示するタイトルやリンク先も設定することができるので設定します。
 

 
 
ひと通りスライドショーとして表示するスライドの設定が終わったら、画面右側にある設定を調整していきます。まずこの記事用に設定している今回のスライドショーで使っている画像は、全て16:9の比率なので、右側にある設定からスライドの幅を450px、高さを250pxに設定してみました。
 

 
この設定はスライドショーに表示する画像の比率と、そして、よく閲覧されているディスプレイのサイズなども踏まえて調整していくと良いかと思います。ちなみに以前よく使われているディスプレイの解像度に関する記事を書きました。
 
解像度が気になって...このブログにアクセスしてくる解像度のランキングを洗い出してみた | カキタクナッタラ
こういった情報も画像サイズ設定に際して、もしかしたら参考になるかもしれないので貼っておきます。
 
 
次に「高度な設定」を展開して、以下の項目を設定します。
 
・引き延ばす→チェック入れる
・中央揃え→チェック入れる
・カルーセル・モード→チェック入れる
・カルーセルマージン→0に指定

 

 
その他の設定についてはデフォルトのままで問題ないです。上記を設定したらページ上の「保存」をクリックして、ページ下に表示されているショートコードの「テンプレートに含める」で生成されたコードをコピーしておきます(あとで使います)
 

 
 

header.phpにショートコードを追記する

上記のMetaSliderでのスライドショー設定が終わったら、実際にヘッダー下にスライドショーを表示するために先ほどコピーしたショートコードをheader.phpに追記します(作業の前には念のためバックアップをとっておくことを強くオススメします!)
 
header.phpへのアクセスは、WordPressの管理画面から外観→テーマの編集です。アクセスしたら以下のコードをショートコード部分だけご自身がコピーしたものに書き換えてheader.php内に貼り付けてください。

なお、貼り付ける場所はheader.phpの下の方の行にこのようなコードがあるので、このコードの一行下に貼り付けます。

上記のコードを追記し編集を反映させてからページを確認すると、ヘッダー下に先ほど設定したスライドショーが表示されていると思います。
 
 

スライドショー整形用のCSS

これは実際に設定してみたスライドショーをみた上で、必要と感じればお好みで適用する感じでOKです!(必須のやることではありません)主にスライドタイトル周りのデザインを調整して、スライドごとに異なるタイトルの長さでもレイアウトが崩れないようにしています。

重ねて書いておきますが、これを適用しなくてもスライドショーの動作に影響はありません!
 
 

おわりに

以上がWordPressプラグイン「MetaSlider」をSTINGER PLUS2のヘッダー下に表示させるための全手順です。
 
多少重くなるのが難点ではありますが個性は出ますよね。あと、オススメ記事をスライドショー表示しておけば多少の回遊率向上に繋がる可能性もあるかも…??
 
ちなみに、設置したカルーセルスライダーの両端に微かな角丸ができるのが気になる場合は、以下の方法でMetaSlider自体のCSSを調整してみてください!
 
Meta Sliderで表示しているスライダーの端にできる微妙な丸みをなくす方法 | カキタクナッタラ
導入手順自体は決して難しくないので、特定のコンテンツを目立たせたい方や個性を出したい方、それから…とにかく動くものが好きな方にオススメしたいカスタマイズです。
 
 
以下の記事ではこれまでにブログで紹介したSTINGER PLUS2カスタマイズ記事をまとめています!今回の記事で紹介したカスタマイズ以外にもいろいろと弄れる部分はありますので、こちらもどうぞご覧ください!
 
【誰でも簡単】これまでに書いたSTINGER PLUS2のカスタマイズ記事まとめ | カキタクナッタラ

でででーさん

2017年2月21日はてなブログでカキタクナッタラ開設。2017年10月22日にWordPressへ移行しました。基本的に毎日更新。ウェブ・スマホなどIT関連のネタをメインにラーメンのことや雑談記事など幅広く書きます。たまに変なイラストを描いたりウェブ制作をすることもあります。

あなたにオススメ