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

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

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

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

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

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

DiviにWordPressのウィジェットを挿入する方法を動画でご覧になりたい方はこちらからどうぞ!

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

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

ですがDiviは、コードを一切書きません

ウィジェットの設定画面にいきます。WordPressのダッシュボードから『外観→ウィジェット』です。

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

この画面です。

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

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

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

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

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

WordPressからのメッセージ

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

ウィジェットの追加

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

画像のような新しいウィジェットエリアが追加されます。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


動画もあります。

ぜひ参考にしてください。


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

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

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

Diviの最新情報を知りたいなら、このノーコードでWEBサイト制作を支援するサロン『TOFUラボ』に参加しませんか?
私が運営してるノーコードでWEBサイト制作を支援するのコミュニティです。

最新情報だけではなく技術的な質問も飛び交っています。

また、デザインやSEOなどWEBサイト制作に関する様々な勉強会も開催されています。

『TOFUラボ』の紹介はこちらです

https://tofulab.app/join/

興味があれば、是非参加してくださいね。
入会してから7日間は無料で合わないなと思えばいつでもキャンセル可能です。

Naomi Suzuki

このサイトを運営してるナオミです。エンジニア歴13年、海外在住歴20年。
WordPressの情報やハッキングを防ぐ脆弱性の情報と自分の海外での生活の一部を無料のメルマガで配信しています。

目次

コメントする

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

WordPressの最新情報が
毎週届く無料メールマガジン

DiviやElementorの情報だけでなく、脆弱性が見つかったプラグインやテーマのリストも毎週届きます。セキュリティの強化につながります。 

管理人のナオミが書くメルマガ
海外でエンジニア歴10年以上
DiviとElementorに精通