Stinger8のヘッダー画像をスライダーに変更する
この記事を読むのに必要な時間は約 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のヘッダー画像表示タグの部分を先ほどコピーしたスライダーのショートコードに差しかえします。
|
1 2 3 |
<div id="st-header"> <span style="color: #ff0000;"><img src="<?php header_image(); ?>" height="<?php echo get_custom_header()->height; ?>" width="<?php echo get_custom_header()->width; ?>" alt="" /></span> </div> |
赤字の部分にショートコードをコピペして上書きします。
|
1 2 3 |
<div id="st-header"> <span style="color: #0000ff;"><?php echo do_shortcode('[metaslider id="47"]'); ?></span> </div> |
このままでは、トップページだけでスライダー表示となります。すべてのページで表示させるためには、変更が必要です。
|
1 2 3 4 5 6 |
<span style="color: #ff0000;"><?php if ( (get_header_image()) && (is_front_page()) ) : //カスタムヘッダー ?></span> <div id="st-headerbox"> <div id="st-header"> <?php echo do_shortcode('[metaslider id="47"]'); ?> </div> </div> |
すべてのページで表示させるには、フロントページだけで表示するという[simple_tooltip content='WordPressは、オープンソースのブログソフトウェアである。PHPで開発されており、データベース管理システムとしてMySQLを利用している。単なるブログではなくコンテンツ管理システム としてもしばしば利用されている。']WordPress[/simple_tooltip]の関数が入っているのでその部分を削除してください。
|
1 2 3 4 5 6 |
<span style="color: #0000ff;"><?php if ( (get_header_image()) : //カスタムヘッダー ?></span> <div id="st-headerbox"> <div id="st-header"> <?php echo do_shortcode('[metaslider id="47"]'); ?> </div> </div> |
上書きしたら常に文字コードがUTF-8になっていることを確認してFTPソフト でアップロードします。
出来上がりまとめ
スライダーうまく表示されましたでしょうか？
下記にあるYouTube動画 と合わせて確認していただくとわかりやすいかもしれません。
スライダーは、トップページだけで他の投稿や固定ページなどではヘッダー画像を表示させる方法もあります。
WEBのことならくまはちＬＡＢにお任せください。
 |
 |
 |
Evernoteに保存