DiviにWordPressのウィジェットを挿入する方法
こんにちは、ナオミです！
WordPressの典型的なテーマだと、最新の投稿やカレンダーなど、サイドバーにウィジェットとして挿入できますよね。
このサイトも右側にサイドバーがあります。
もし、これらのウィジェットをサイトのサイドバーだけではなく、サイトのどこにでも挿入できるとしたらどうでしょう？
Diviを使うと、こんな感じでページ内にWordPressのウィジェットを挿入できてしまうんです。
それではどうやるのかこの記事では説明していきます。
DiviにWordPressのウィジェットを挿入する方法を動画でご覧になりたい方はこちらからどうぞ！
1. WordPressのウィジェットエリアを作る
これだけ聞くと難しく聞こえるかもしれませんね。普通のテーマではウィジェットエリアを追加することはコード無しでは不可能です。
ですがDiviは、コードを一切書きません
ウィジェットの設定画面にいきます。WordPressのダッシュボードから『外観→ウィジェット』です。
この画面です。
ウィジェット作成フォーム
このページの中に上のようなウィジェット作成フォームがあります。
そこに、好きな名前のウィジェット名を入力して、作成を押してください。
豆腐ウィジェットエリア ウィジェットエリアが作成されています。ページを更新して、すべてのエリアを表示すると、さらに多くのエリアを作成できます。
WordPressからのメッセージ
こんな感じのメッセージが出たら、ページをリフレッシュします。
ウィジェットの追加
画像のような新しいウィジェットエリアが追加されます。
そこに色々なウィジェットを追加してみましょう。
追加したいウィジェットを選んでクリックすると、下の画像のようにウィジェットエリアが表示されます。
この例では『最近の投稿』を追加しました。
追加されたウィジェットはウィジェットの名前の下に表示されます。
これで準備は整いました。
2. Diviの『サイドバーモジュール』を挿入
そうなんです。名前がサイドバーモジュールとなってるせいで自分も気づきませんでしたが、サイドバーモジュールは実はウィジェットを好きなように挿入できるモジュールだったんです。
サイドバーモジュールを挿入
まずはDiviのビジュアルビルダーを使い、サイドバーモジュールを挿入してみましょう。
そして先ほど設定したウィジェットを選んでみます。
そうすると最近の投稿のリストが表示されます。
ウィジェットを全幅にする
この画像では背景画像を使ってわかりやすくしてますが、このようにモジュールは全幅じゃないんです。
全幅にするためには、詳細のカスタムCSSにいき、ウィジェットという項目にmin-width: 100%;と記入します。
これでサイドバーモジュールは全幅になります。
動画もあります。
ぜひ参考にしてください。
このように、サイドバーモジュールを使えば好きな所にWordPressの通常のウィジェットを挿入することが出来ます。
是非試してみてください。
Diviのことをもっと深く知りたい方は、Diviの使い方完全ガイドをご覧ください。
Diviの最新情報を知りたいなら、このノーコードでWEBサイト制作を支援するサロン『TOFUラボ』に参加しませんか？
私が運営してるノーコードでWEBサイト制作を支援するのコミュニティです。
最新情報だけではなく技術的な質問も飛び交っています。
また、デザインやSEOなどWEBサイト制作に関する様々な勉強会も開催されています。
『TOFUラボ』の紹介はこちらです
興味があれば、是非参加してくださいね。
入会してから７日間は無料で合わないなと思えばいつでもキャンセル可能です。
