「スライドショーを簡単に挿入できるプラグインSlideshowで画像・テキスト・ビデオスライドショーを作る」という記事で、Slideshowというプラグインを使って簡単に3種類のスライドショーが作れることについて書きました。
今回は最近私の周りでじわじわと人気が高まっているSimplicityというテーマのトップページにスライドショーを貼り付ける方法について書きます。
トップ用のスライドショーを作っておく
「スライドショーを簡単に挿入できるプラグインSlideshowで画像・テキスト・ビデオスライドショーを作る」の手順でトップページ用のスライドショーを作っておきます。
このとき、トップページに貼り付けるので画像の大きさを大きめにしました。横が1060px、縦が200pxだとちょうどいいのですが、元画像が1000pxだったので横は1000pxで作りました。
このぐらいの大きさに揃えました。
Simplicityのトップページにスライドショーを入れる
「トップページだけに表示するウィジェットを作るーSimplicity編」、で書いた方法でSimplicityのトップページにスライドショーを入れてみたいと思います。
今作ったスライドショーをいれるためには
ダッシュボード スライドショー＞スライドショー をクリック
作ったスライドショーの 編集 をクリック
参考情報 のところにある赤枠で囲った部分のコードを使います。
before-main.php というファイルを親テーマのSimplicityから、子テーマにコピーして、中身を
こんな感じに書き換えます。if文は
if (is_front_page()){ // ここにトップページだけで行いたいことを書く }という条件になっています。そこに、赤枠で囲った部分の <?php と ?> を削除して貼り付けます。
貼り付けてみたところ少し下に余裕があった方がいいと思ったので div を使って空きを作りました。
これで表示すると、
こんな感じにスライドショーがトップページに貼り付けられました(^^)/。クリックすればその記事にリンクします。これは～実際にトップページにあったら効果がありそうですね。
幅を狭くしたとき、途中から反応しない問題…と思ったら、まさかの(^_^;
Slideshowの設定で、
レスポンシブを有効にする（ページ幅を縮めたらスライドショーの幅も縮める） を はい にしておけばスライドショー部分も縮まるはずなのですがなぜか
iPadぐらの大きさでは画像が縮まっている、のですが、
それ以上縮めても、iPadぐらいの大きさで縮まった大きさのままそれ以上小さくなってくれません。
スライドショーのせいなのかな？とも思ったのですが twentyfourteen で見てみると、
こんな感じで縮まっています。これは固定ページに表示したものですが同じページをSimplicityで表示すると、
やはり猫が一匹しか…表示されません。
このことについてソースを追いかけたり、だいぶ時間をかけてしまいました…そして、ふと「あ！Simplicityって完全レスポンシブにしなきゃいけないのだよね」ということを思い出しました。
ダッシュボード 外観＞カスタマイズ をクリック
レイアウト(全体・リスト) をクリック
案の定… 完全レスポンシブ にチェックが入ってませんでした(>_<)
完全レスポンシブ にチェックを付けて、 保存して公開 をクリック
無事に猫が二匹！表示されました(^^)/。Simplicityを使うときは 完全レスポンシブ にするのをお忘れなく(私だけかも(^_^;)。
Simplicityならbefore-main.phpに入れるだけで簡単にスライドショーが入れられる
他のテーマではまだ試していませんが、Simplicityの場合、before-main.phpというファイルが用意されていて、そこに入れるだけでいい感じにスライドショーを入れることができました！
この部分はプログラムなので例えば日付を判断して月曜日ならこのスライド、とか12月に入ったらクリスマスバージョンのスライドを表示するとかいろいろ工夫ができそうですね(^^)/
[amazon_searchlink search="WordPressデザイン"]
コメント