Love2Labo

日常の些細なことやどうでもいいことをあなたに。たまに Wordpress カスタマイズ。

STINGER

[STINGER5]ヘッダー画像をMetaSliderで自動的に切り替えるテクニック

投稿日:2014/09/07 更新日:

今回は前回に引き続きヘッダー画像のお話です。

今回は一歩踏み込んでヘッダー画像をスライドショーで切り替えられるように変更します。スライドショーは『Meta Slider』というプラグインで行います。

※ヘッダー画像のランダム表示はSTINGER5で標準装備されています。ランダム表示は[外観] - [カスタマイズ] - [ヘッダー画像]で登録できます。

 

目標:ヘッダー画像を自動で切り換わるようにする

完成予定図

stinger5_header_slider_00

 

Meta Slider のインストール

今回はプラグインを使います。使用するプラグインは『Meta Slider』です。

[プラグイン] - [新規追加]をクリックします。

stinger5_header_slider

 

プラグインの検索欄に『Meta Slider』と入力しENTERキーを押します。

stinger5_header_slider_02

 

[いますぐインストール]をクリックします。(2014/09/06現在、WordPress4.0でテストはされていないませんが、動作はしています。)

stinger5_header_slider_03

 

[プラグインを有効化]をクリックします。

stinger5_header_slider_04

 

これでインストールは完了です。次はスライドを設定しましょう。

 

Meta Slider の設定

プラグインを有効にすると、左のメニューに[Meta Slider]が追加されます。[Meta Slider]をクリックし、スライド名を決めます。このスライド名は自分が識別するためのものです。閲覧者からは見えないので自分にとってわかりやすい名前を適当に決めてOKです。

stinger5_header_slider_05

 

好きな画像を[スライドを追加]ボタンで追加します。設定部分は適当にいじってみてください。設定が終わったら右上の[保存]を押します。

stinger5_header_slider_06

 

そして、今回一番大事なのは右下の[使い方]の部分です。[テンプレートに含める]タブを選び、タグをコピーします。

stinger5_header_slider_07

 

header.phpの修正

今回はガッツリPHPファイルを削除してしまいます。バックアップをしっかり取るか、子テーマでのカスタマイズをオススメします。

削除する部分は<div id="gazou">と</div>で囲まれている部分です。ver20140902の場合は99行目~102行目になります。

 

前回の記事で触ったヘッダー画像を表示する部分です。これを削除し、先ほどコピーしたMetaSliderのコードを挿入します。「id=**」の部分はそれぞれ変わるのでご注意ください。

 

修正後はこうなります。

 

折角なので、前回の記事と組み合わせてみます。

 

これでトップページのみスライダーでヘッダー画像が表示されるようになりました。

 

おまけ:Meta Sliderで作ったスライドを投稿記事に表示する方法

せっかくなのでスライドを投稿記事に表示する方法もご紹介します。

Meta Sliderを有効化すると記事編集画面の上部に[スライダーを追加]ボタンが表示されるようになるのでクリックします。

stinger5_header_slider_08

 

挿入したいスライド名を選択し、[Insert Slideshow]をクリックすればOKです。

stinger5_header_slider_09

 

スライダーを使うと動きが出てちょっと出来る人な感じがしませんか?上手に活用してオシャレなサイトを作っちゃいましょう。

最後までお読みいただきありがとうございました。

-STINGER
-,

Copyright© Love2Labo , 2016 AllRights Reserved Powered by AFFINGER4.