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

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

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

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

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

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

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

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

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

この画面です。

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

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

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

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

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

ウィジェットの追加

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

---

動画もあります。

---

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

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

Diviのことをもっと深く知りたい方は、Diviの使い方完全ガイドをご覧ください。