初心者向けSTINGER8カスタマイズ ヘッダーにスライダーを設置編

STINGER8 ロゴ

ここのところ記事を書いているヒマがあったらテーマのカスタマイズをしたいという何とも本末転倒な状態になっております…しかもこの年の瀬に何やってんのー?って感じですけど。

とりあえずそんなわけで、今日はSTINGER8のヘッダーにスライダーを設置してみたいと思います。やる前はちょっと難しそうな気がしてましたが、スライダーそのものはプラグインをインストールして設定するだけなので、これまでにやったどのカスタマイズよりもむしろ簡単だったような気がしなくもないです。

スポンサーリンク

スライダーの設置に必要な前準備

今回の作業にあたってまずは必要なものを準備します。

  • スライダープラグイン
  • 親テーマからコピーしたheader.php

STINGER8にスライダーを設置するだけならこれでOKです。もちろんスライダーに表示する画像も準備しないといけませんが、今回はサンプルとしてデフォルトで用意されているスライダーをそのまま使用しますので今は無くても問題ありません。スライダーの設置さえ済んでしまえば、後はスライダーの設定画面から出来るのでノープロブレムです。

と言うかスライダーのサイズを決めてからそれに合わせて画像を準備した方が効率が良いと思うんですね。ただ、実際に設置したいサイトでいきなりやっちゃうと画像を入れ替えるまではサンプルが表示されたままになるので、まずはテスト用のサイトで設置までの流れをひと通り確認してみる事をオススメします。

まぁheader.phpに追加した部分を一旦コメントアウトすればいいんですけど。

ヘッダー画像が設定してある場合は非表示に

スライダーとヘッダー画像の両方を表示すると、ホームに遷移した際にそれだけで画面が埋まってしまうので、ヘッダー画像は非表示にしておいた方が良いでしょう。

外観 > カスタマイズ > ヘッダー画像から非表示に出来ます。

カスタマイズを適用したサンプルを用意してみました

スライダープラグインの導入

プラグインは好みで選んでいただいて構いませんが、私はSliderというそのまんまの名前のプラグインを利用しています。

プラグイン > 新規追加 > Sliderで検索すると出てくるこの画像のプラグインです。

Sliderプラグイン 新規追加画面

同じ作者さんのResponsive Sliderというのもありますが、このプラグインでもレスポンシブ対応はされてますし、何よりエフェクトをランダムに設定出来るのが気に入っているので個人的にはコチラをプッシュしたいです。

もし他のプラグインを利用したいという事でしたら、phpに埋め込む為のショートコードを生成してくれるものなら応用は効くと思います。ただし、今回のエントリーではこのSliderを使用する前提での説明になりますので、プラグインの設定に関する部分はそのプラグインに置き換えて作業していただく事になります。

スライダーの基本設定

インストールして有効化するまでは特に迷うところは無いと思いますので詳細は省きます。有効化するとダッシュボードのサイドバー下の方にHuge IT Sliderという項目が追加されるのでまずはそこを開いて、スライダー選択画面に切り替わったらデフォルトで用意されているMy First Sliderをクリックして下さい。

それでは画面右側に表示されているオプションを設定します。

Sliderプラグイン オプション設定画面

スライダーのサイズはひとまずヘッダー画像に推奨されている1060 x 300と同じ数値にしておきます、width 1060、height 300と入力しましょう。

エフェクトの種類が豊富

種類の少ないプラグインだと水平・垂直方向のスライドにフェードくらいしか無いものもありますが、このスライダーは14種類のエフェクトから選択する事が可能です。しかもそれらをランダムで使用してくれるパターンもあるので、単調な動きを延々と繰り返すだけのスライダーと違ってしばらく見ているだけでも面白いです。他にもそういったプラグインはあるかもしれませんが、私がこのプラグインを気に入っているのは主にそこだと言って良いでしょう。

設定の一番下にあるRandomにチェックを入れると画像の表示順もランダムになるので、エフェクトと共にランダムの設定をしておくのがオススメです。

上記以外の項目

それ以外の項目はお好みでどうぞ。時間に関するものは数字が小さいほど処理が速くなりますので、実際に設置したスライダーを見ながら調整してみて下さい。

  • Pause Time 画像の停止している時間(表示時間)
  • Change Speed 画像の切り替えにかかる時間
  • Slider Position 親要素に対しての配置
  • Loading Icon 画像ローディング中のくるくるアイコンを表示するか
  • Navigate By スライダー上部に画像の枚数分だけ●で表示されているアレです
    Dots デフォルトではコレになっています
    Thumbnails スライダーの下にサムネイルが表示されます
    No Navigation ナビゲーション表示を無しに
  • Pause on Hover スライダー上にマウスカーソルがある時は一時停止(次の画像に変わらなくなります)
  • Random 画像の表示順をランダムに(通常は設定順)

※PROと書いてある部分は無料版では利用出来ません

ヘッダーにスライダーを設置

それではオプションよりずっと下の方にあるShortcode for templates/themesに表示されているショートコードをheader.phpにコピペしましょう。その上にあるのは投稿やウィジェット用のショートコードなので間違えないように注意して下さい。

Sliderプラグイン ショートコード画面

既にSTINGER8に何らかのカスタマイズを行っていてheader.phpが子テーマ内にある場合はそこに追記する形になりますが、これが初めてという方は親テーマからheader.phpをコピーしてくる必要があります。

ホームとフロントページだけスライダーを表示

常にスライダーを表示して良い場合はそのままショートコードを貼り付けてOKですが、スライダーを表示するのはあくまでもトップかフロントページだけにしたい、つまりエントリーを開いた時は非表示にしたいという場合には以下のように条件を追加します。

<?php if ( is_home() || is_front_page() ) { ?>
    <?php echo do_shortcode("[huge_it_slider id='1']"); ?>
<?php } ?>

スライダーのショートコードを挿入する場所

header.phpを開いたら、下の方にあるid="gazou-wide"の部分を探して下さい。見つかったらコピーしたショートコードをヘッダーメニューの上か下、どちらでも好きな方に貼り付けるだけです。

</div><!-- /#headbox clearfix -->

<div id="gazou-wide">

    <!-- メニューの上にスライダーを設置したい場合はココ -->

    <?php get_template_part( 'st-header-menu' ); //カスタムヘッダーメニュー ?>

    <!-- メニューの下にスライダーを設置したい場合はココ -->

    <?php if ( (get_header_image()) && (is_front_page()) ) : //カスタムヘッダー ?>
    <div id="st-headerbox">

メニューの上に設置する場合

こんな感じになります。サンプルでは画像のタイトルやディスクリプションが入っていますが、何も設定しなければ画像だけのさっぱりしたスライダーになりますのでご安心を。

STINGER8 スライダーをメニュー上に設置した画面

メニューの下に設置する場合

メニューとスライダーの間に少しだけ空間が出来るので以下のCSSで調整します。

/*media Queries PCサイズ(960px以上)
----------------------------------------------------*/
@media print, screen and (min-width: 960px) {

#st-menubox {
    margin-bottom: 0;
}

/*-- ここまで --*/
}

なぜ960px以上なの?というのは959px以下になるとメニューそのものが表示されなくなるからですね。メニューの下にスライダーを設置した場合はこんな感じになります。

STINGER8 スライダーをメニュー下に設置した画面

今度は本来メニューの下にあったはずの空間が少し詰まった感じになるので、スライダーの下がちょっと狭いかな?と思ったら先ほどのCSSに以下の内容も追記しておいて下さい。

#gazou-wide {
    margin-bottom: 10px;
}

メニューと同様に画面幅いっぱいにしたい場合

スライダーの場合はメニューと違って、ウィンドウ幅と元の画像サイズに差があるほど比率がおかしな事になるので、さすがに同じというわけにはいかないでしょう。

なので、ここで紹介する方法はあくまでも一つの例としてディスプレイの解像度が1280pxの場合に最適な感じになる設定だと思って下さい。何れにしてもウィンドウ幅をどれだけ広げようとメインのコンテナー幅は1060px以上にならないはずですので、これ以上のサイズにしてもかえってバランスが悪くなるだけではないかと思います。

方法そのものは非常に単純です。先ほどスライダーの設定画面でwidth 1060としたところを1280にするだけです。(実際はスクロールバーの分だけ狭くなるので実質的なサイズは1263くらいかと)もちろん数字を変えただけだと画像が横に引っ張られる形になるので、元の画像から作り直しにはなりますけどね?

でも、こんな感じになるので悪くは無いです。

STINGER8 スライダーを画面幅いっぱいに設定した画面

スライダーの画像設定について補足

先ほどはスライダーの設定に関する説明だけだったので、表示する画像の設定についても少しだけ補足しておきたいと思います。

Sliderプラグイン スライダー画像設定画面

画像のサイズはスライダーに合わせる

基本的には設定したいスライダーのサイズに合わせて画像を準備した方が良いです。比率がおかしな事になってもOKならこの限りではありませんが。

そうは言っても横長の画像というのは探してもなかなか無いので、大きめの画像をトリミングするのが一番手っ取り早いのではないかと思います。

タイトルとディスクリプションはちと微妙

この辺りの感じ方は人それぞれなので何とも言えませんが、画像のタイトルやディスクリプション部分がイマイチな感じなので、使わないかカスタマイズした方が良い気がします。

この辺に関するCSSはsliders.phpの中でhuge_it_slideshow_ほにゃらら(ほにゃららってすっごい久しぶりに使った気がする…)にスライダーIDをサフィックス(接尾語ってやつですね)として加えた形で生成されます。

なので、このプラグインで作成するスライダーを全て同じ設定にしたい場合は、sliders.php内に記述されているベースの部分を修正した方が良いですが、ヘッダーに設置したスライダーだけに適用したい場合はhuge_it_slideshow_ほにゃらら_1という感じのセレクタをデベロッパーツール等で確認しながら調べてみて下さい。

Sliderプラグイン CyberfoxでCSSを調整

私の場合はメインのブラウザがCyberfoxなのでこんな感じでいつもやっていますが、そろそろChromeに乗り換えようかなーとか思っているところだったりします。どちらも一長一短あるので常に併用がベストなのかもしれませんけど。

画像ごとにリンクを設定出来ます

それぞれの画像に対してリンクを設定出来るので、特に見て欲しい記事のアイキャッチ画像と内部リンクを設定して「オススメ記事スライダー」的な使い方も出来るのではないかと思います。外部リンクを設定する場合はOpen in new tabにチェックを入れて別タブで開くようにした方が良いでしょう。

順序の変更はドラッグ&ドロップで

ランダム表示にしているとあまり意味が無いかもしれませんが、順番を変えたい場合はマウスカーソルが交差した矢印のような形になる部分を掴んで、移動したい位置までドラッグ&ドロップする事で並び替えが可能です。

あと画像の変更はEdit Imageで、スライダーからの削除はRemove Imageで出来ます。

スライダーがあるとカッコイイですね

あまり調子に乗って使いまくると表示が重くなりますが、やはりスライダーがあるとそれだけでサイトがカッコ良くなったような気がします。あくまでも文章がメインのサイトなら無くても良いのかもしれませんけど、画像やデザインで人の目を引きたいようなサイトには必要不可欠な存在と言ってもいいかもしれませんね。

それでは今日はこの辺で、お疲れ様でした。

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

スポンサーリンク

コメント

  1. satouかほ より:

    参考にさせていただきました!
    ありがとうございます。

    こちらのプラグインを導入したところ、
    スクロールの際に挙動が少しおかしいのですが
    何か対処方法などご存知でしょうか。

    何卒よろしくお願いいたします。

    • ch@os より:

      コメントどうもありがとうございます!
      せっかく参考にしていただいたのに不具合が出たようで
      大変申し訳無いです。 orz

      解決に繋がるような回答が出来るかはわかりかねますが
      出来ればもう少し詳しい情報が欲しいところです。

      ・スクロールというのはトップに戻るボタン等ではなく、手動で送った場合のお話でしょうか?
      ・インストールしたスライダーのプラグインを停止すると正常な状態に戻りますか?
      ・可能であればURLを教えていただいてもよろしいでしょうか?実際に見て確認出来れば何かわかるかもしれません。

      あとは他のプラグインとの競合という事も考えられますので、一時的に他のプラグインを停止出来るならその状態でも試してみていただけると助かります。また、今回の件には無関係かもしれませんが、以前Lazy Loadのせいでスクロール系のプラグインに影響が出た事がありました。

      テストページの方でも色々とイジってみましたがこちらでは再現出来ませんでしたので、お手数ですがよろしくお願いいたします。

      • さとう より:

        ご丁寧にありがとうございます。
        Lazy Loadはインストールしていないので、その他プラグインの影響ですかね…。
        URLを是非とも載せたいのですが、企業サイトでございまして公開されるのが少々怖いところであります。
        直接こちらのコメントに載せるほかにご相談方法などがあれば教えて頂ければ幸いでございます。よろしくお願いいたします。

        • ch@os より:

          なるほど承知いたしました。

          ですが、原因がプラグインの相性という事になりますと
          私ではそれを解決する事は難しいかもしれませんので
          代替案として、ひとまず現在のスライダープラグインを停止して
          Meta Sliderというプラグインで試してはいただけないでしょうか。
          インターフェースも日本語化されていますし
          私がお薦めしたSliderより使いやすいかもしれません。

          私がテストしたパターンでは「Nivo Slider」を選択し
          テーマをデフォルト、ナビゲーションを非表示に設定しました。
          そのスライダーで問題なく動作するようであれば
          お好きな設定にカスタマイズして利用していただければと思います。

          根本的な解決になっていなくて申し訳ありませんが
          まずはSliderを停止していただいて、それで正常な状態に戻れば
          Slider以外のプラグインなら動作する可能性はありますので
          ひとまずMeta Sliderへの差し替えを試してみて下さい。

  2. さとう より:

    Meta Sliderを設定してヘッダーにショートコードで追加したのですが、ホームページ全体のレイアウトが崩れてしまいました。もう少し試行錯誤してみます!
    ご回答頂きましてありがとうございました!

    • ch@os より:

      何だか更に状況が悪化したようで申し訳ありません orz
      もう完全に私の想定外の結果になっているようですので
      お手数ですが追加したスライダーを一旦外して
      カスタマイザーから通常のヘッダー画像に戻した方がよさそうですね。

      先ほど確認の為にテスト用サイトのスライダーを
      SliderからMeta Sliderに差し替えてみましたが
      こちらの環境では問題無く動作していますので
      出来ればもう一度手順を見直していただけますでしょうか。

      本文中と同じサイトですがこんな感じになりました。
      http://wpcustomize.webcrow.jp/

      • さとう より:

        widthのサイズが合って無くてズレていたので、私のミスでした(;_;)!!

        毎回ご丁寧に教えて頂きまして本当にありがとうございます!
        勝手にブックマークさせて頂きましたのでまた何かあればご相談させてください!

        ありがとうございました!

        • ch@os より:

          直ったようで何よりです!
          わざわざ報告ありがとうございました。
          それにしてもwidthが影響してるかもしれないというのは
          可能性としても全く思い当たらなかったので
          私としても勉強になりました。

          まだまだ未熟な割にとりあえずやってみたら出来ました
          というような内容をエントリーにしていますので
          今回のようにズバっと解決出来ない事も多々ありそうですが
          少しづつでも精進していきたいと思ってますので
          ひとつ今後ともよろしくお願いいたします。

トップへ戻る