Stinger8のヘッダー画像をスライダーに変更する

この記事を読むのに必要な時間は約 5 分です。

Stinger8には、スライダーがないというのはご存知の通りですが、スライダーに変更することは可能です。
上級者のみができることでなく初心者の方でもちょっとやり方を覚えてもらうと変更できます。
各スライダーにリンクを設定することができてPHPファイルにも挿入できるというプラグインを紹介します。

 

目 次

Stinger8の標準での状態

Stinger8 標準のヘッダー
Stinger8  の標準では、上記画像のようになりトップページ以外ではヘッダー画像表示はありません。くまはちLABのStinger8  のサンプルページ  では、かなりカスタマイズしていますが・・・

 

ヘッダーについて

ヘッダー画像
個人的な主観ですが、トップページではスライダーあっていいのですがトップページ以外では普通にヘッダー画像でいいのではと思いますが、今回はスライダーに変更してみます。

 

プラグイン

Meta Slider
今回のカスタマイズでは、初心者でも簡単にできるように[simple_tooltip content='WordPressの機能を拡張してくれるプログラムのこと']プラグイン[/simple_tooltip]を使います。
今回使うのは、Meta Slider  です。
わかりやすく操作も簡単かつレスポンシブ対応ということでStinger8  には必須かもしれません。

スライダー作成
Meta Slider  をインストールしたらまずは、スライダーを作成します。
最初にスライダーの幅をStinger8  のヘッダー画像の幅1060pxに合わせます。高さは、300pxです。
画像を追加してリンクさせるアドレスを入れておきます。固定ページのサービスやランディングページなどにリンクさせることも可能です。無料版では画像やリンク以外について制限があります。

ショートコード追加
スライダーが完成したらショートコードが生成されます。最初に表示されているのは、左ですが右上の角のアイコンをクリックするとPHPファイルに挿入できる右側のコードに変わりますのでこれをheader.phpにコピペします。

header.phpカスタマイズ

header.php ヘッダー画像部分
ヘッダー画像をスライダーに変更するためにheader.phpのヘッダー画像表示タグの部分を先ほどコピーしたスライダーのショートコードに差しかえします。

赤字の部分にショートコードをコピペして上書きします。

このままでは、トップページだけでスライダー表示となります。すべてのページで表示させるためには、変更が必要です。

すべてのページで表示させるには、フロントページだけで表示するという[simple_tooltip content='WordPressは、オープンソースのブログソフトウェアである。PHPで開発されており、データベース管理システムとしてMySQLを利用している。単なるブログではなくコンテンツ管理システム としてもしばしば利用されている。']WordPress[/simple_tooltip]の関数が入っているのでその部分を削除してください。

上書きしたら常に文字コードがUTF-8になっていることを確認してFTPソフト  でアップロードします。

出来上がりまとめ

Stinger8サンプルサイト
スライダーうまく表示されましたでしょうか?
下記にあるYouTube動画  と合わせて確認していただくとわかりやすいかもしれません。

スライダーは、トップページだけで他の投稿や固定ページなどではヘッダー画像を表示させる方法もあります。

 

YouTubeチャンネル

WEBのことならくまはちLABにお任せください。

サービス 制作事例
お問い合わせ
]]>

くまはちLABのご利用ありがとうございます!くまはちLABの最新情報をフォローしてゲットしてください!