DiviにWordPressのウィジェットを挿入する方法

WordPressウィジェットをDiviのページに追加する方法

こんにちは、ナオミです!
WordPressの典型的なテーマだと、最新の投稿やカレンダーなど、サイドバーにウィジェットとして挿入できますよね。
このサイトも右側にサイドバーがあります。

もし、これらのウィジェットをサイトのサイドバーだけではなく、サイトのどこにでも挿入できるとしたらどうでしょう?

Diviを使うと、こんな感じでページ内にWordPressのウィジェットを挿入できてしまうんです。

それではどうやるのかこの記事では説明していきます。

1. WordPressのウィジェットエリアを作る

これだけ聞くと難しく聞こえるかもしれませんね。普通のテーマではウィジェットエリアを追加することは不可能です。

Diviですから、コードは一切書きません

ウィジェットの設定画面にいきます。『外観→ウィジェット』です。

Diviでウィジェットを使う方法、設定画面に行く

この画面です。

ウィジェット作成フォーム

Diviでウィジェットエリアを作る

このページの中に上のようなウィジェット作成フォームがあります。

そこに、好きな名前のウィジェット名を入力して、作成を押してください。

豆腐ウィジェットエリア ウィジェットエリアが作成されています。ページを更新して、すべてのエリアを表示すると、さらに多くのエリアを作成できます。

こんな感じのメッセージが出たら、ページをリフレッシュします。

ウィジェットの追加

Diviのサイドバーモジュールのウィジェット

こういう風な新しいウィジェットエリアが追加されます。

そこに色々なウィジェットを追加してみましょう。

追加したいウィジェットを選んでクリックすると、下の画像のようにウィジェットエリアが表示されます。

Diviのサイドバーに追加
Diviのサイドバーに最近の投稿を追加

この例では『最近の投稿』を追加しました。
追加されたウィジェットはウィジェットの名前の下に表示されます。

これで準備は整いました。

2. Diviの『サイドバーモジュール』を挿入

そうなんです。名前がサイドバーモジュールとなってるせいで自分も気づきませんでしたが、サイドバーモジュールは実はウィジェットを好きなように挿入できるモジュールだったんです。

サイドバーモジュールを挿入

まずはDiviのビジュアルビルダーを使い、サイドバーモジュールを挿入してみましょう。

Diviのサイドバーモジュールを挿入

そして先ほど設定したウィジェットを選んでみます。

Diviのサイドバーのウィジェットの設定

そうすると最近の投稿のリストが表示されます。

ウィジェットを全幅にする

Diviのサイドバーモジュールは幅が小さい

この画像では背景画像を使ってわかりやすくしてますが、このようにモジュールは全幅じゃないんです。

全幅にするためには、詳細のカスタムCSSにいき、ウィジェットという項目にmin-width: 100%;と挿入します。

DiviのサイドバーモジュールのカスタムCSSの設定
Diviのサイドバーモジュールを全幅にする

これでサイドバーモジュールは全幅になります。


動画もあります。


このように、サイドバーモジュールを使えば好きな所にWordPressの通常のウィジェットを挿入することが出来ます。

是非試してみてください。

コメントする

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