ブログ型トップページから、サイト型トップページへと大きく変えていくプロジェクトを進めています。その第一弾として、Cocoonの機能を活用し、トップページ上に「カルーセルでサイトに動き」を取り入れました。動きのあるトップページへの第一歩です。
続く第二弾では、Cocoonの機能を使って「背景固定アピールエリア設定」を導入。上下にスクロールしても背景画像が動かない仕組みを加えることで、視覚的に印象的な演出が可能になりました。
そして本日は第三弾。いよいよスライドショーの導入です。Cocoonの標準機能（アピールエリア設定）では、背景画像を「1枚」固定で表示することしかできません。残念ながら、複数の画像を自動で切り替える「スライドショー」機能は用意されていないのです。
そこでプラグインの出番です。
スライダー系プラグインを導入し、トップページにスライドショーを組み込みました。そのために、前回と前々回の記事では、カテゴリーごとにスライドショー用の画像を４つ、Canvaで作成しておきました。準備万端です。
プラグインとしては MetaSlider と Smart Slider 3 が有名どころ。高速性ではMetaSliderに軍配が上がるようなのですが、最終的に選んだのは Smart Slider 3。理由は、評価が高く、無料版でも多機能。そして何より、デザイン性・柔軟性・使いやすさのバランスが優れているからです。
今回は、この Smart Slider 3 を使って、実際にスライドショーを導入してみました。
参考にしたのは TCD WordPress Theme「Smart Slider 3の使い方：自由度の高いスライダープラグイン」 という記事。この手順をもとに、まずは「Toppage」という名前で新しくスライダーを作成しました：
そこに、事前に用意しておいた４枚の画像を読み込み、固定ページ（トップページ）に組み込んでみたのがこちらです。ひとまずのテスト導入ですが、サイトに動きが出て印象も大きく変わりました。：
スライドショーを設置したところ、表示位置は「アピールエリア → おすすめカード → カルーセル」の下になりました。
今回のウェブサイト構築では、CSS＊は最低限に留め、PHPコード＊は編集せずに仕上げる方針なので、スライドショーを一番上に持ってくるためには、これまで作ってきた「アピールエリア」「おすすめカード」「カルーセル」を非表示にするしか方法はなさそうです。
Cocoonのスキンを利用している場合、Cocoon単体では「アピールエリアのスライドショー」は実現できませんでした。しかし、プラグインを導入するだけでスライド画像を自動で入れ替えるスライドショーが出来るようになったのは大きな前進。これはこれで“良し”とします。
明日以降、この位置での見栄えや表示バランスを確認しながら、少しずつ調整していく予定です。
＊CSS：カスケーディングスタイルシートの略。テーマを更新する必要があっても、そのまま残ります。
＊PHPコード：WordPressのテーマファイル（〜.php）を直接編集してしまうと、テーマを更新したときに上書きされて消えてしまうのが大きなデメリットです。これを避けるために通常「子テーマ」を作って、そちらにカスタマイズをまとめる方法が推奨されますが、.phpファイルの編集は正直なところ、素人にはお勧めできません。
