WordPress BeTheme ブログスライダーの作成

Last Updated: 2024 年 11 月 11 日 5のコメント

BeTheme銀テーマフォレス(Themeforest)から Avada 次に、多く販売されている人気の WordPress テーマの一つです。ビテーマには独自のページビルダーであるBeBuilderが使用されていますが、現在はBeBuilderとともにエレメントビルダーもサポートされています。事前に作成されたウェブサイト(デモ)をロードするときに2つのビルダーから選択するオプションを提供します。

ただし、すべてのデモがエレメントがサポートされているわけではないので、デモを選択するときは、可能な限りエレメントがサポートされるデモを選択してエレメントをビルダーとして選択してください。

BeTheme テーマでエレメントをビルダーとして選択した場合は、いくつかのスライダーウィジェットを使用できます。ブログスライダー(ポストスライダー)が必要な場合 BeThemeで作った Blog Sliderを選択できます。 エレメンプロを一緒に使用する場合は、エレメンタが提供するループカールーセルを使用することも可能です。

参考までに BeThemeは韓国の情緒によく合うテーマで評価する方もいらっしゃいます。このためか韓国でも多く使われています。 BEテーマは多くのデモを提供するので、お気に入りのデモを選択して簡単にサイトを作成できます。

WordPress BeTheme ブログスライダーの作成

BeThemeで提供される Blog sliderを使う

ブログ記事をスライドで表示したい場合 BeTheme テーマで独自に作って提供する Blog スライダー モジュールを使用できます。

ブログスライダーウィジェットを目的の場所にドラッグして、ブログの投稿を表示するスライダーを作成できます。

Options(オプション) セクションでカテゴリを指定し、ソート基準を設定できます。カテゴリは複数を指定できます。

Advanced(詳細) セクションでは、「Read more」ボタンを表示するかどうかを指定し、「スタイル」(Style) と「ナビゲーション」(Navigation) オプションを選択できます。

デフォルト設定を使用している場合は、次のようなスライダーを作成できます。

フラットスタイルを使用すると、スライダースタイルは次のようになります。スライドの上にマウスを置くと、次のように両側にナビゲーションアイコンが表示されます。

ビデオの Blog sliderウィジェットは、ユーザーが制御できるオプションが限られているようです。

Element ProのLoop Carouselを使う

Elementor Proを使うなら Loop Carousel(ループ回転スライド) ウィジェットを使用して洗練されたスライダーを作成できます。

このカルーセルを使用するには、エレメントプロがインストールされ、ライセンスが登録されている必要があります。

Loop Carouselを使用するには、まずテーマビルダーで ループアイテム テンプレートを作成する必要があります。

  1. テーマビルダーでLoop Itemテンプレートを作成します。表示する要素(サムネイル、タイトル、作成者、日付、カテゴリなどのメタ情報、要約文など)を選択できます。 (上記の図では、特性画像のみが表示され、サムネイルをクリックすると該当するブログ記事に移動します。)
  2. ページで Loop Carousel を選択し、表示するスライドの総数、1 画面に表示するスライドの数、表示するポストタイプ (ポスト、ポートフォリオなど) などの詳細な設定が可能です。

Theme Builder で Loop Item テンプレートを編集または新規作成できます。

Loop Carouselウィジェットの クエリー セクションでポストタイプやカテゴリなどを指定できます。

設定 セクションで自動再生、スクロール速度、ハーバー時の一時停止、無限スクロール、スライドの進行方向、オフセットなどの設定ができます。

ナビゲーション セクションでライブラリからナビゲーションアイコンを選択するか、自分で作成したカスタムアイコン(svg形式)をアップロードできます。

ページネーションでは、ページネーションの種類を指定できます。

Element ProのLoop Carouselにはさまざまなオプションが用意されており、細かくスライダーをカスタマイズできます。

最後に、

以上で BeTheme テーマでエレメンタービルダーを使用する場合に利用できるポストスライダーについて調べました。基本的に BeThemeで提供される Blog sliderを使用すると、基本的なスライダーを作成できます。

エレメントプロを使用している場合は、Loop Carousel要素を使用して洗練されたポストスライダーを構成できます。

画像カルーセルが必要な場合は、エレメンタが提供するImage Carouselウィジェットを使用できます。わずかなカスタマイズで機能を拡張できます。

エレメンタプロが提供するPostsウィジェットをスライドにすることも可能です。

参照


5のコメント

コメント

  1. いつもさまざまな情報を提供していただきありがとうございます。もしExternal Link popupの実装は可能でしょうか?

    たとえば、外部リンクの場合、クリックするとポップアップまたは特定のページに移動して外部サイトにリダイレクトされるという通知を受け取り、ユーザーが移動するかどうかを選択する機能です。

    応答