【Cocoonカスタマイズ】MetaSliderを使ってスタイリッシュなブログをデザインする

テーマ

(このページは2022年1月7日に更新しました)

本記事の内容

「Cocoonでスライダーを使いたい」

「Cocoonのカルーセルでは物足りない」

「MetaSliderの使い方が分からない」

  

 

今回はそんなお悩みを解決します。

 

当サイトは無料テーマのCocconを使っていますが、スキンを使用せずにカスタマイズしています。

 

その中で、モバイル表示にした際に、トップページのみスライダーが表示される様にカスタマイズしていますので、その方法をご案内したいと思います。

 

デスクトップ表示では、カルーセルが表示されるようになっていますので、スライダー無いじゃん!?って思った方は、ブラウザの幅を狭めてみてください。

 

それでは見ていきましょう。

  

MetaSliderプラグインを追加

 

まずは、プラグインのMetaSliderを追加します。

 

 

「プラグイン」の設定画面で「新規追加」を選び、MetaSliderを検索し、ダウンロード。

 

そのまま、有効化します。

 

Sliderの作成

 

Sliderのメニューを開きます。

 

 

『+New』を押し、新規スライドショーを任意のスライドショー名に設定します。

 

その後、『+スライドを追加』で写真を追加していきます。

 

 

写真にキャプションが付いていれば自動で表示することも出来ますし、EnterManuallyから直接編集することも出来ます。

下の欄へ、リンク先を入力します。

スライダーに必要な数、『+スライドを追加』を繰り返します。

  

完了したら、右下のショートコードをコピーします。 

 

 

ヘッダーへ挿入する方法

 

CocoonでヘッダーへSliderを挿入するには、テーマエディターを使います。

 

[metaslider id=”**”]は、ショートコードですので、使いたいところに使えますが、今回はヘッダーに追加してみます。

 

 

テーマエディター内の『main-before.php』を開きます。

開いたら、先ほどのショートコードを挿入すると出来上がりです。

<?php if(is_front_page() ): ?>
    <?php echo do_shortcode; ?> ←ここに貼り付ける
<?php endif; ?>

 

当サイトでは当初、ヘッダーに組み込んでいましたが、トップページをカスタムトップページに変更しましたので、カスタムページの一番上にショートコードを貼り付けて実装しています。

 

まとめ

 

以上が、Sliderの挿入方法になります。

 

今回は挿入場所はヘッダーでしたが、任意の場所に設定することが出来ます。

また、当サイトではCSSでSlider↔カルーセルの表示を切り替えています。

 

CSSでのカスタマイズに関する関連記事はこちら

 

質問等ありましたら、コメント欄へコメントお願いします。

最後まで読んで頂きありがとうございました。

 

 

 

コメント

You cannot copy content of this page

タイトルとURLをコピーしました