らいさわブログのトップページにのみ、Wordpressのプラグイン「Metaslider」無料版にて、スライドショーを付けてみました。
ブログのトップページにスライドショーがあると、デザイン的にかっこよくなるかな～？と思ったからです。
メモを取ったので、Wordpress、Cocoonテーマを使っている方向けにどんな設定をしたのか簡単にお伝えします。
- WordPress＆Cocoonで作ったブログのトップページにスライドショーを設置してみたい
- WordPressプラグイン「Metaslider」に興味がある
- HTML、Wordpressを多少なりと理解している
プラグイン「Metaslider」をインストール
プラグインをインストールする前に
プラグインをインストール＆有効化すると、Wordpress、利用中のテーマ、他のプラグインのコードとコンフリクト（エラー）を起こす可能性があります。
プラグインを試す前にデータのバックアップを取ることをおすすめします。
* らいさわの書いてある通りにやったら画面が真っ黒になった！などのコメントは受付かねますので以降のステップを踏む際はご自身の責任でお願いします。
\ らいさわが使ってるエックスサーバーは14日間の自動バックアップ付き/
さあプラグインをインストールしてみよう
WordPressプラグイン「Metaslider」を使用しました。
WordPressのダッシュボードでプラグインを「新規追加」で検索。
「MetaSlider」ファミリーがあるので間違いやすいですが、
評価が一番高く（2021年10月現在）、「Slider, Gallery, Carousel」と書かれたプラグインをインストールして、エラーがないことを確認し、その後、有効化します。
WordPressのダッシュボードに「MetaSlider」が表示されるようになります。
「MetaSlider」でスライドショーを作成
WordPressのダッシュボードで「MetaSlider」にカーソルを合わせると、
サブメニューが右側に表示されます。
使うのは一番上の「MetaSlider」です。
ここでスライドショーを作成・編集していきます。
MetasliderのSetting/設定では、初期設定ができる
人によっては、最初に「Setting/設定」で初期設定をしておくと楽かもしれません。
ここで設定した内容が「初期設定」となり、これから新しく作るスライドショーの初期タイトル、初期サイズになります。
自分のブログに合わせてスライドショーの設定
「Metaslider」（Wordpressのダッシュボード）＞「Metaslider」（サブメニュー）を選択すると、このような画面が出ます。
自分のブログのデザイン・好みに合わせて詳細を設定していきましょう。
プラグインのコンフリクトが起こったため、スライダーの選択肢が減った
実は、既に入れてあるWordpressのプラグイン、Cocoonテーマの何かのコードとのコンフリクトが発生しました。
問題追及はしていません。
具体的には、「Flex Slider」だとスライドショーがうまく表示されませんでした。
「R slides」なら問題ありませんでしたので、あとは「テーマ（Theme）:Highway」を選び、保存しました。
参考までに、「らいさわブログ」トップページ用に設定していたのはこちらです▼
- スライダーは 「R slides」
- スライドショーのサイズは「1280px x 340 px」に設定
- テーマ(Theme) は「Highway」
スライダーに写真とキャプションを入れる
WordPressのメディアライブラリーに保存してある情報をつかうこともできますが、
私の場合は、タイピングスピードもそんなに遅くないので、マニュアルで打ち込みました。
メタスライダーのアドバンス設定
「Metaslider」の右下に、初期設定ではアコーディオンで非表示にされている「アドバンス設定」があり、ここで、スライダーの詳細変更ができます（無料プランでは変更できない設定もあり）。
わたしはこのように設定していました▼
- 100% width ースライドショー用のHTML”Container”に対する幅の割合（…だと思う）
- Hover Pause ー読者がカーソルを合わせるとスライドショーは一時停止する
- Slide Delay & Animation Speed （例3000ms = 3秒）
今見ると、ちょっと適当に設定した感がありますね・・・。
自分でお好きなように設定してください。
スライドショーが完成したら、ショートコードをコピペする
スライドショーができたら、右下のショートコード（Shortcode）をコピーします。
右下にある「Copy all」を押すと、phpコードもすべてコピーされますので、これを押すと早いです。
テーマエディターにコピーしたショートコードをペーストする
コピーしたそのショートコードを、貼りつけ／ペーストするのですが、
その前に！！ 冒頭にも書きましたが、エラーが起きても困らないよう、
バックアップとるのを忘れないようにしてくださいね。
この時ではないけれど、エラーのせいで、Wordpressのログイン画面にさえも辿り着けない状況に陥ったこともあります、、あれは焦りました
コピーしたショートコードをペーストするファイルは、
WordPressのダッシュボードのメニューの「外観（Appearance) ＞ テーマエディター(Theme Editor)」を選択。
さらに、
Cocoon の子テーマ > temp-user > main-before.php
にペーストして保存します。
この辺りは、HTML、CSS、Wordpressのファイルの成り方の基本をわかってないと難しいです。コードの扱いには、本当に気をつけましょう
まとめ
「Metaslider」無料版で、スライドショーを付けたあとも、Page Speeds Insights での点数はそんなに変わった印象はありませんでした。
追記：2021年11月以降、スライドショーは外しています。
なぜ外したかと言うと、矢印の形やフォントなど、微妙にデザインが気に入らないところがあったんです。
その辺をいじりはじめたら、わたしそっちに夢中になってしまいがちなわたしは、「ブロガー」としてはただでさえ記事投稿が遅く、記事数が少ないので、そっちに気を使いすぎてもいけないと反省しまして、きっぱり諦めました。
⁎ 本記事に載せてある記事の内容・情報は、今後は状況により予告なく変更になる可能性があります。最新情報・詳細は必ず各自でご確認ください。All information on this web site is subject to change without notice. Reasonable efforts are taken to ensure the accuracy and integrity of all information provided here, but the author/administrator of this website is not responsible for misprints, out-of-date information, or errors.
コメント