この記事を読むのに必要な時間は約 5 分です。
(専門用語などにはポップアップする説明をつけているので時間が長く表示されることがあります。
ツールチップの機能については、こちら)

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

 

Stinger8の標準での状態

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

 

ヘッダーについて

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

 

プラグイン

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

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

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

header.phpカスタマイズ

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

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

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

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

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

出来上がりまとめ

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

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

 

]]>