Xeoryカスタマイズ|ヘッダーをスライダーに(フルワイドにもできるよ)

だいぶ前に、Xeoryのヘッダー部をフルワイドのスライダーにするという記事を書いたんですが

Xeoryをカスタマイズしてみよう!ヘッダー編(追記アリ)

2015.02.13
情報が古く、コードなども適当なので、もう一度書きたいと思います。

まず、ヘッダーに普通に画像を入れたいときはこちらの記事をご覧ください。

Xeoryをカスタマイズしてみよう|ヘッダー編その2

2015.11.10


で、子テーマを使ってる場合、header.phpを書き換えるので親テーマに切り替えてheader.phpを編集するか
header.phpをダウンロードして編集してください。
phpなので、どうせ更新してもこの部分はスタイルシートのようにカスタマイズ部分だけを残すことができないので、親テーマの方でやってもいいかと思います。

 

Master Sliderで簡単にスライダー追加

まず、Master Sliderというプラグインを入れます。

Master Sliderの編集画面を開いてCreate New Sliderというボタンをクリック。

 

すると、スライダーの種類を選ぶ画面になるので、好きなのを選びます。
フルワイドがよければFullwidth Sliderを選ぶか横にサムネイルを並べたかったらFullwidth Slider with Thumbnailsを選びます。
もちろん、コンテンツの幅とそろえることもできます。

 

PROバージョンだと有料になります。

選んだら、一番下のCREATEというボタンをクリックします。

ずらっとサンプル画像が並んでるので、ゴミ箱に入れ、Add Slideで画像を追加していきます。
画像を設定したら、一番下のSave Changesで保存してください。

 

この保存ボタンの上に、ショートコードが表示されてます。
Master Sliderの偉いところは、ショートコードとPHP用のコードを用意してくれるところです。

 

固定ページや投稿ページにスライダーを設置するときは、ショートコードを貼りたい位置に貼ります。
phpのファイルに設置するときは、PHP functionのコードを貼りたい位置に貼ります。

 

今回はheader.phpに貼るので、PHP functionのコードを貼ります。
位置はここです。画像のコードの代わりにこのコードを貼ります。
 

コンテンツ幅とそろえたいときは、Custom Sliderというのがあるので、それをクリックし
幅を1200にして作成してください。サンプルのものはちょっと幅が狭いので、変な感じになってしまいます。

 

ヘッダーがフルワイドの表示

 

 

 

 

 

ヘッダーがコンテンツ幅の表示

1 個のコメント

  • コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

    ABOUTこの記事をかいた人

    りりちこです。福岡在住の主婦で、2児の母です♪ webデザインやネットビジネスでお小遣い稼ぎをしており、稼ぎたい方のサポートもしてます。 詳しいプロフィールはこちらから!