StingerにMetaSliderで記事外にスライドショー作成


 

ここでは、アフィリエイトをはじめ、ブログやビジネスホームページなどでもよく使われるWordpressの無料の人気テーマSTRINGERでメニューバー直下にスライドショー画面を表示する手順を記載します。

 

■BEFORE 何もしていない状態
スクリーンショット 2016-06-14 11.22.13

 

 

■AFTER 設定完了後のイメージ
完成画面

 

今回は、単純にスライドを追加するだけでなく、上図の様にメニューバーとスライド画面を横幅100%にしたいと思います。

 

■環境
Wordpress バージョン 4.5.2

親テーマ STINGER Plus ver20160612(
Stringer Plus

 

子テーマ STINGER Plus+子テーマβ ver20160525 (適用状態)
Stringer plus child

 

設置手順概略

以下に概略手順を記載します。

1.Meta Sliderで作成したスライドのショートコードを控えておく

2.親テーマのファイルを子テーマにコピーする

3.header.phpにショートコードを埋め込む

4.レイアウトを調整する

それでは詳細に移っていきましょう。

 

設置手順詳細

1.Meta Sliderで作成したスライドのショートコードを控えておく

ショートコード(テンプレート用)

Meta Sliderでスライド画面を作成後にショートコードを控えておきます。

手順はStingerplusにMeta Silderでスライドショーを作るを参照してください。

 

2.親テーマのファイルを子テーマにコピーする

 

FTPソフトを利用して、親テーマ「stringerplus」のheader.phpを子テーマ「stringerplus-child」にコピー(移動ではない)します。

header.phpをコピー

 

これで子テーマのheader.phpファイルの内容が適用されるようになります。

ただし、この状態でアクセスすると下記の様なエラーが表示されました。

Stingerplusエラー画面

 

「st-font.php」と「analyticstracking.php」ファイルが存在しない(パスが通っていない)というメッセージのようです。

どうやらheader.php内の記述で上記ファイルを相対パスで指定しているようですが、子テーマには該当ファイルが存在しないためエラーが起きているようです。

 

そこでheader.phpをコピーした手順と同様に、親テーマ「stringerplus」内にある「st-font.php」と「analyticstracking.php」ファイルもコピーします。

該当ファイルをコピー

 

何もしていない状態に戻りました。

何もしていない状態

 

 

3.header.phpにショートコードを埋め込む

子テーマ「Stingerplus child」にコピーしたheader.phpファイルを編集します。

一番下の行に1.で控えておいたMeta Sliderのショートコードを埋め込みます。

ショートコード埋め込み

 

スライド画面が表示されました。

スライド画像

 

3.レイアウトを調整する

ここのままでも良いですが、今回はメニューバーとスライド画面を横幅いっぱいで表示したいと思います。

同じくheader.phpファイル内の<div id=”wrapper”…>の内部が狭い幅で指定されているので、これを先ほど貼り付けたショートコードの下に移動します。

header.php

header.php

 

メニューバーとスライド画面が横幅いっぱいになりました。

トップ画像

 

最後にメニューバーとスライド画像の間に少し余白があるのでこれをcssファイルで微調整します(加えて今回はスライド画面の下にも少し余白をつけます)。

微妙な余白

 

今回はスライド画面(.metaslider)の下の余白が20px、メニューバーの下(#gazou-wide)の上の余白が0になるように、子テーマ「stringer plus child」のstyle.cssに記述します。

 

問題がないことを完了して確認して完了です。

完成画面

 

■完成イメージ

おまけ

ホーム画面だけスライド画像を表示したい場合もあると思います。

その場合は、先ほどheader.phpファイルに追記したショートコードをIF文(<?php if ( is_home() ) : ?><?php endif; ?>)でくくるとホーム画面のみスライド画像を表示させることができます。

 

if文でくくる

 

ホーム画面

HOME画面

 

固定ページ(プロフィール))

プロフィールページ

 

 

 

 

こちらの記事もおすすめです


mail無料メルマガ

メルマガを受け取る女性

読者限定の情報やイベント情報を先行配信

読者限定のお得なモニター価格情報やHP作成・運用や独立・副業を考えている人向けにイベントの先行配信しています!登録・解除は自由です!ぜひご登録ください!