ブロックエディタ(Gutenberg)でスライダーを設置できるようになるWordPressプラグイン「WordPress Slider Block Gutenslider」

ブロックエディタ(Gutenberg)でスライダーを設置できるようになるWordPressプラグイン「WordPress Slider Block Gutenslider」

ブロックエディタ(Gutenberg)でスライダーを設置できるようになるWordPressプラグイン「WordPress Slider Block Gutenslider」

WordPress Slider Block Gutensliderは、スライダーを作成するためのブロックを追加してくれるWordPressプラグインです。

ブロックのみで完結するスライダーなので、JavaScriptなどの知識は不要です。

WordPress Slider Block Gutensliderのインストール

インストール手順は以下の通りです。

  1. WordPress Slider Block Gutensliderをダウンロードします。
  2. ダウンロードしたファイルを展開し wp-content/plugins にアップロードします。
  3. 管理画面の[プラグイン]ページで、Gutensliderを有効化します。

WordPress Slider Block Gutensliderの使い方

スライダーの設置と設定

投稿編集画面を開きます。一般ブロックに「Gutenslider」というブロックが実装されているので、Gutensliderブロックを追加します。

Gutenslider

右ペインにブロックの設定が表示されるので、スライダーの各種設定を行います。

スライダーの設定
Slider Settings スライド切り替えのアニメーション
Slider Height スライダーの高さ
Autoplay スライドの自動再生
Show Arrows 矢印の表示
Show Dots ドットの表示
Loop 繰り返し
Fullscreen Background Slider フルスクリーンの背景スライダー
Autoplay Settings マウスホバー時に自動再生を停止
Arrow Settings 矢印の大きさ
Dot Settings ドットの大きさ
Spacing 上下左右の余白

ちなみに、Slider Settingsで「Fixed Content」を選択すると、スライドの上に重ねたテキストなどのコンテンツは固定され、スライドのみが切り替わります。「Changing Content」を選択すると、各スライド毎にテキストを重ねたりリンク先を設定したりできるようになります。

メディアライブラリから画像を選択するか、スライダー用の画像を新たにアップロードします。

スライド画像の追加

各スライドの設定

画像を選択した時点でスライダーは出来上がりですが、各スライドの設定を行います。[Edit Slide Content]ボタンをクリックすると、各スライド画像が展開されます。

各スライドの設定

編集したいスライドを選択すると、右ペインでリンク先などを設定できます。

スライドの設定
Focal Point 基点とする位置
Display 画像のトリミング方法
Slide Link スライドのリンク先

また、「Add slide content here…」の部分にはテキストなどを入力でき、スライドの上にコンテンツを重ねられます。

スライドに文字を重ねる

スライドの順番変更

スライドの順番を変更したい場合は、[Edit Slides]をクリックします。

スライドの順番変更

「ギャラリーを編集」という画面が開き、ドラッグ&ドロップでスライドの順番を入れ替えたり、新しい画像を追加したりできます。

あとがき

ブロックで簡単にスライダーが設置できちゃいますね。素晴らしいです!

なお、スライダーにはSlickが使われているようです。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です