本ページはプロモーションが含まれています

スライドショープラグインSmart Slider 3

スポンサーリンク
カメラと手帖Wordpress

ブロックエディタで記事内でスライドショーを挿入・プレビューや公開した所、表示が真っ白でしか表示されない現象が発生したので、原因と対処方法とプラグインでの対応を紹介。

スポンサーリンク
スポンサーリンク

現象と原因

筆者の現象はテーマがCocoonとプラグインJetpackの環境下での現象記載してます。
他環境で再現できるかは分かりませんが参考になればと思います。

ブロックエディタ内メディアのスライドショー

ブロックエディタ内に画像の様に有る「スライドショー」を使ってる場合にテーマCocoonの設定で表示されない現象が起きます。

上記の「スライドショー」は初めから入ってる訳でなくプラグインのJetpackの追加拡張機能です、様々な機能があるJetpackですが、このスライドショーの設定を生かすためにはCocoon設定の高速化をOFFにする必要があります。

Cocoonの高速化の設定とスライドショーを表示するブロックが合わないので表示されません、具体的には「JavaScriptを縮小化する」をOFFにすると表示はされますが、PageSpeed Insights(表示スピード)のスコアが悪くなる事になります。「縮小化」をOFFにしないでJetpackのスライドショーを使う事はプラグインとCocoon設定の問題ですのでサポートなどは難しい事だと思います。

スライドショーは専用のプラグインで対処した方が精神的にもPageSpeed Insightsスコア的にも安心します 。

以下に自分が設定したプラグインを紹介。

プラグインの紹介【Smart Slider 3】

スライドショーのプラグインはmart Slider3です。
画像やスライドショーなどではWordPressユーザーから高評価なプラグインです。

プラグイン名称Smart Slider 3
作者Nextend
有効インストール数800,000+
評価★★★★★(955)
2021年8月時点


有料の機能もありますが、無料でも十分な機能があります。

無料でも高機能ですので変更出来るポイントが多くまた英語表記なので難しく感じますが、簡単なスライドショーならスグ覚えられます、少しずつ覚えて機能を覚えて最終的には企業案件でも使える程のデザインが出来るプラグインです。

インストール

プラグイン追加から検索窓に「Smart Slider 3」と入力します、この時スペースが空いてないと検索に出てこない事がありますので出ない場合は上記表記をコピーして貼り付けて下さい。

プラグインインストールSmart Slider 3

2021年8月現在で使用中の WordPress バージョンで未検証となってますが使えていますので問題無いでしょう。

プラグインを【今すぐインストール】【有効化】をします、きちんとインストールや有効化がされていればサイドバーか上部にメニューが出来上がります。

動作はどちらも同じですので開始するにはどちらかをクリックします

使い方

多機能で何を触ればいいのか分かりにくいので、誰でも取り合えずスライドショーを作れる手順を解説、ポイントさえ押さえれば簡単なスライドショーが出来ます、私も出来たので誰でも出来るでしょう。

Smart Sliderメニュー画面

プラグインをきちんとインストールや有効化をすれば画面の様な【Smart Slider】が表示されます、上下どちらも同じ事ですので、どちらでも構いません。
上部メニューが目障りで消したい時はSmart SliderのSETINGSから≪Show in WordPress admin bar≫のチェックを外したら消えますので参考にして下さい。

新規に作る場合は【NEW PROJECT】をクリックします。

新規作成かテンプレートでの作成選択

新規で自分で作成するのか?テンプレートを使って写真を入れ替えて使うのか問われます。
今回は新規で作成で説明します。【NEW Project】をクリック

NEW Project設定

新規の名前と大きさを設定します、名前は表示されませんので、のちに自分で分かる様になってればいいです。大きさなどを設定しましたら【CREATE】をクリックします。

写真追加画面

青枠に入れたい画像をドラックする事で追加も出来ますので一つ一つ追加する必要も無いです。順番も該当写真をドラックして移動するだけで簡単に入れ替える事が出来ます。

写真追加後の画面

ALTの属性は検索エンジンは画像を検索出来ませんので、画像が何を説明してるのかを検索エンジンに伝える役割の説明です、画像が表示されない時にもAltに記載した文章が表示されますので、SEO的にも必ず入れましょう。

画像詳細設定
【EDIT】で詳細設定
画像詳細記入
STYLE下部にAlt

追加した画像の詳細を記入します、そのままですとAlt属性が記入されていない状態ですので、記入しましょう、【EDIT】から【STYLE】でimage Altを記入します。

設定が終わりましたら、【SAVE】して保存します。

SAVEをクリック

保存が終わりましたら下記画面のショートコードで追加できます、ショートコードを使わなくても投稿に張り付ける事が出来ますので、【SAVE】で保存出来てれば大丈夫です。

ショートコード

投稿に張り付けするには、投稿したい場所でブロック画面に【Smart Slider 3】が追加されてますので、先ほど作成したスライドショーを追加します。

ブロック追加画面Smart Slider 3
セレクト画面

先ほど作成したスライドショーが一覧にありますので、クリックして【INSERT】追加しますと完了します。

コメント