【The THOR】固定ページにメインビジュアル風スライドショー設置

ワードプレスの有料テーマ「THE THOR」の固定ページのヘッダーについてです。トップページはメインビジュアル設定で画像が動画、スライドショーから一つ選んでヘッダー部分に使えますが固定ページや投稿ページまでは反映されません。

投稿ページはアイキャッチでそれなりに綺麗に見えますが、固定ページはアイキャッチが単なる画像として表示されるだけで見栄えが良くないので固定ページに画面幅いっぱいにメインビジュアル風のスライドショーを表示させるカスタマイズを行います（コピペで可能・THE THOR スタイル04使用）。

完成図と設定方法

先に私のサンプルサイトを使用しての完成図はコチラです。

the thor 固定ページをメインビジュアル風設定
固定ページ

表示されたスライドショーの部分はここです。

固定ぺージ

スライドショーはヘッダー（ロゴとメニューのある部分）の下と記事タイトルの上の部分に表示されます。
スライドショーとヘッダーの間の灰色の部分は「ヘッダーお知らせ表示」も設定でONにすると表示されます。
※ヘッダーお知らせ表示は「外観⇒カスタマイズ⇒共通エリア[THE]⇒ヘッダーボトムエリア設定[検索窓・お知らせ]」で表示か非表示を選択出来ます。

カスタマイズと設定方法

では順番にカスタマイズする方法をお伝えしますが、表示させるスライドショーは「Smart Slider 3」という無料プラグインを使用して自分の好きなスライドショーを作る必要がありますので、このブラグインを新規追加して有効化した後に使いたいスライドショーを作成しておいてください。

THE THOR スライドショー
「Smart Slider 3」
使い方は簡単ですので分からなければググって下さい。

1. 設定変更

まずトップページ（ホームページ）のメインビジュアルを非表示にします。もしメインビジュアルを表示設定にしているとそのすぐ下に今回のスライドショーが表示されます。トップページはメインビジュアルの代わりにこのスライドショーを表示させる形にし、それが固定ページにも反映されるという感じです。
※トップページのメインビジュアルの非表示設定は「外観⇒カスタマイズ⇒TOPページ設定[THE]⇒メインビジュアル設定⇒”メインビジュアルを表示するか選択”」で非表示（default）を選択します

2. テーマの編集（親テーマ）

次にテーマの編集を行います。このスライドショー表示は子テーマへの編集では表示出来ませんので親テーマに追記します。

「外観⇒テーマエディター」の画面に行き、右上あたりにある「編集するテーマを選択」で”THE THOR”を選び、テーマヘッダー（header.php）をクリックし表示させて下さい。※親テーマ内のファイルに追記しますのでバックアップを取って既にそこに記述しているコードを消したり変えたりしないで下さい。

テーマヘッダー（header.php）の一番下に下のコードを追記します。

  <!--l-headerBottom TOPページと固定ページのヘッダーにスライドショー追加-->
<?php 
echo do_shortcode('[smartslider3 slider=1]');
?>

表示させたいスライダーは先程のプラグイン「Smart Slider 3」で作成したスライダーですのでそのショートコード[smartslider3 slider=数字]を入れます。数字は使用するスライダーの個別IDとなります。追記が終わったら下にある「ファイルの更新」をクリックします。

そうするとトップページと固定ページに設定したスライドショーが表示されるようになります。ただスライドショーと「ヘッダーお知らせ表示」の間に隙間が出来ますのでこれを修正します。

the thor カスタマイズ

3. テーマの編集（子テーマ）

隙間があると少し見栄えが良くないですので編集します。「外観⇒テーマエディター」で今度は子テーマ”THE THOR CHILD”を選択します。

その画面の右の”style-user.css”に下のコードを追記します。

/* TOPページと固定ページのヘッダースライドショーのスペースを編集*/
html {
    line-height: 0;
}

これで先ほどの隙間はなくなり完成です。

トップページ

トップページ（ホームページ）に関してですが、ここまではメインビジュアルを非表示にしてお伝えしましたが、トップページでメインビジュアル下の注目エリアを表示させたい場合もあると思います。

the thor メインビジュアル下の注目エリア

この場合はメインビジュアルを非表示から表示に変えて、メインビジュアルの表示モードから「静止画(default)」を選択します。普通はここで表示させる画像を「静止画時の設定」で任意の画像を選択しますが、何も選択しない状態にして下さい。そうすると今回設置したスライドショーのすぐ下にメインビジュアル下の注目エリアが表示されます。
※メインビジュアル下の注目エリアは「外観⇒カスタマイズ⇒TOPページ設定[THE]⇒メインビジュアル下お知らせ設定⇒”メインビジュアル下の注目エリア設定”」で表示非表示が選択出来ます。

まとめ

固定ページのヘッダーが寂しいのでトップページのメインビジュアル風のスライドショーを設置する方法をお伝えました。これで表示されるスライドショーはプラグイン「Smart Slider 3」で作成したものですので、表示画像の枚数や速度やデザイン、サイズなどほとんど制限なくプラグイン内で自由に作成できます。

ただ親テーマやワードプレスのバージョンを自動更新にしている場合は注意して下さい。（私は一度ダウンロードしたテーマやワードプレスの更新は不具合報告が多いので特別な理由がない限りしません。）

トップへ戻る