WordPressウィジェットを使用すると、ユーザーはコードを一行も書かずに、投稿やページにさまざまな機能を追加できます。最近の投稿、ソーシャルメディアフィード、カスタムHTMLの表示など、ウィジェットをコンテンツに追加することで、よりダイナミックでインタラクティブなサイトを作成できます。
WPBeginnerでは、サイドバーやフッターに様々なウィジェットを使用して、重要な情報の共有、人気のガイドの強調表示、追加リソースの提供を行っています。これらのエリアを最大限に活用することで、サイトを視覚的に魅力的で機能的に保ちながら、ユーザーエクスペリエンスを向上させる追加コンテンツを提供することができます。
この記事では、WordPressのウィジェットを投稿や固定ページのコンテンツに簡単に追加する方法をご紹介します。
WordPressの投稿やページにウィジェットを追加する理由
WordPressウィジェットは、通常、サイドバー、ヘッダー、フッター、その他の領域に追加するコンテンツのブロックです。これにより、WordPressサイトのレイアウトにさまざまな機能や特徴を追加する柔軟性が得られます。
たとえば、最新の投稿を表示したり、ウィジェットブロックを使用してお問い合わせフォームを追加したりできます。最も良い点は、コードを編集せずにそれらを追加できることです。
以前は、WordPressウィジェットはサイドバー、ヘッダー、フッターなどのウィジェット領域にのみ追加できました。しかし、WordPressブロックエディターを使用すると、ブログの投稿やページにウィジェットを簡単に追加できるようになりました。
デフォルトでは、WordPressはアーカイブ、カレンダー、カテゴリ、カスタムHTML、ショートコード、最新コメント、最近の投稿、RSS、検索機能、ソーシャルアイコンなどのさまざまな種類のウィジェットを提供しています。多くのWordPressプラグインやテーマも独自のWordPressウィジェットを提供しています。
それでは、WordPressウィジェットを投稿やページに追加する方法を見ていきましょう。
WordPressウィジェットを投稿やページコンテンツに追加する
まず、既存のWordPress投稿/ページを編集するか、新しい投稿を追加する必要があります。
WordPressコンテンツエディターに入ったら、「ブロックを追加」（+）ボタンをクリックして新しいウィジェットを追加します。
次に、ウィジェットセクションまでスクロールダウンし、追加したいウィジェットブロックをコンテンツにドラッグアンドドロップします。
例えば、コンテンツ内に最新のWordPressブログ投稿を表示してエンゲージメントを高めたいとしましょう。
それを行うには、最新の投稿ウィジェットをクリックするだけで、最近の記事がコンテンツに表示されます。
右側のブロックパネルに、ウィジェットオプションを編集およびカスタマイズするための設定がさらに表示されます。
ウィジェットブロックを使用すると、コードを書かずにショートコードやカスタムHTMLをコンテンツに追加することもできます。これにより、高度なカスタマイズを簡単に追加し、サイトの外観をより細かく制御できるようになります。
カスタムウィジェットをページ/投稿に追加したい場合は、WordPressでカスタムウィジェットを作成する方法に関するチュートリアルを参照してください。
同様に、ウェブサイトで使用しているWordPressプラグインのウィジェットブロックも使用できます。
たとえば、WPFormsを使用している場合、WPFormsブロックを使用してフォームをコンテンツに追加できます。
投稿やページコンテンツにWPFormsブロックを追加したら、ブロック自体のドロップダウンメニューからフォームを選択するだけです。
完了したら、WordPressウェブサイトでブログ投稿またはページを発行してください。
ボーナス：あなたのサイトに便利なウィジェット
これで、ページや投稿にウィジェットを追加する方法がわかりました。選択したウィジェットのみを追加することも忘れないでください。不要なウィジェットを追加すると、ページが乱雑に見え、ユーザーエクスペリエンスが悪化する可能性があります。
たとえば、WP Call Buttonをインストールしてアクティブ化できます。その後、プラグインの設定を構成してから、連絡先ページにそのウィジェットを追加して、今すぐ電話ボタンを追加できます。
詳細については、WordPressでクリックして電話するボタンを追加する方法に関するチュートリアルを参照してください。
同様に、RafflePressウィジェットを追加してプレゼントを追加したり、Compact Archiveウィジェットを追加してアーカイブを表示したり、WP Simple Payウィジェットを追加して支払いフォームを追加したり、Social Countウィジェットを追加してソーシャルメディアのフォロワーを表示したりできます。
これらすべてのオプションは、エンゲージメントを高め、リードを生成し、サイトのコンバージョンを向上させるのに役立ちます。詳細については、最も役立つWordPressウィジェットの専門家による選択をご覧ください。
この記事が、WordPressウィジェットを投稿やページコンテンツに追加する方法を学ぶのに役立ったことを願っています。また、WordPressでカスタムダッシュボードウィジェットを追加する方法に関するチュートリアルや、WordPress投稿リビジョンを簡単にするための初心者向けガイドも参照してください。
この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。
ホーヴ
私には機能しません：「ウィジェットはどのサイドバーにもありません」。
WPBeginnerサポート
追加しようとしているウィジェットが通常のウィジェットエリアで機能することを確認する必要があります。
管理者
ミック・ホームズ
素晴らしい！ありがとうございます！
WPBeginnerサポート
You’re welcome
管理者
パット・ウォルター
amrショートコードとウィジェットを本当にありがとうございます。 他のショートコードを機能させようと何度も試しましたが、できませんでした。 しかし、あなたのプラグインは本当に私を助けてくれました。 もう一度感謝します。
WPBeginnerサポート
Not our plugin but glad our recommendation could help you
管理者
ハンナ
こんにちは、
プラグインを使わずにこれを行う方法を教えていただけますか？お知らせください、ありがとうございます。
敬具、
Hannah
WPBeginnerサポート
We will be sure to add that to our tutorials where it would make sense but writing out the code for a custom plugin would act the same as if you were installing a plugin to handle this.
管理者
エドゥ・ホフマン
共有ありがとうございます！
このヒントは非常に役立ち、私の時間を大幅に節約してくれました。
WPBeginnerサポート
Glad our guide could be helpful
管理者
クリス・ベラー
こんにちは。ブロックエディターでこれを試しましたが、サイドバーがブログページに表示されるような、投稿の右側にウィジェットブロックを表示する方法が見つかりません。どうすればよいですか？
WPBeginnerサポート
サイドウィジェットエリアにウィジェットを配置したいということであれば、投稿やページ用のウィジェットエリアがテーマに用意されているかどうか、テーマのサポートに問い合わせる必要があります。
管理者
ダニー
ありがとうございます。
Jetpack の「トップ投稿＆ページウィジェット」の名前は何になりますか？
WPBeginnerサポート
その名前を使用する必要があります。そうでない場合は、プラグインのサポートに連絡してください。彼らが対応してくれるはずです。
管理者
ダニー
わかりました。
もう一つ:
サイドバーでテストしてみたところ、「表示するものがありません」（新しい投稿がないという意味だと思っていました）というようなメッセージが表示されました。
投稿された日付に関係なく、最も人気のある投稿を表示する方法はありますか？
WPBeginnerサポート
使用している人気の投稿ウィジェットのサポートに、投稿を表示するために何を使用しているか問い合わせる必要があります。
エリック
素晴らしいツールで、よく機能します。インストールやセットアップに手間はかかりませんでした。ありがとうございます。
ティボン
こんにちは、
アイコンをもう1つ追加できないようです。ボタンをクリックしても何も起こりません。
カラン
クリッパーでは動作しません
アンドレス
投稿ページ（ブログ）にウィジェットを追加するにはどうすればよいですか？
よ
そのためには、amrウィジェットプラグインを追加する必要があります。ただし、簡単です。
シディッカ・パタン
完璧です！チュートリアルを本当にありがとうございました！
ピート
素晴らしい！ – 本当にありがとうございます。もう髪の毛を抜かずに済みました。
マーシャ
みんな…助けて…
WordPress Download Manager と Easy Digital Downloads をネイティブの WordPress 投稿で動作させるにはどうすればいいですか？プラグインの投稿ではなく、ネイティブの WordPress 投稿に何かを投稿したいのです。どうすればいいですか？？？
そうすれば、この両方のプラグインの価値あるものをネイティブの WordPress だけで得られます。
助けてください
カリン
こんにちは、これらのコードやHTMLのことはまったく理解できません。アーカイブカテゴリページにカテゴリウィジェットを追加したいです。同じアーカイブページに月別アーカイブウィジェットも追加したいのですが、どうすればいいですか？本当に困っています。
ショナ
素晴らしい – 完璧に機能しました。この役立つチュートリアルをありがとうございます！
WPBeginnerサポート
お役に立てて嬉しいです。ぜひFacebookでフォローしてください。
管理者
キャロル
魔法のようにうまくいきました、本当にありがとうございます!!!
WPBeginnerサポート
キャロルさん、お役に立てて嬉しいです。より多くのWordPressのヒントやコツを得るために、Twitterでフォローしてくださいね。
管理者
Palla Sridhar
こんにちは。
実は、別の要件があります。
同じカテゴリのすべての投稿の投稿コンテンツに、テキストとHTMLリンクを追加したいのです。別のカテゴリの場合は、異なるテキストとHTMLリンクを含めたいです。ご理解いただければ幸いです。助けてください。
イナム・U・カーン
投稿やページ内にウィジェットを使用したい人にとって、役立つ投稿です。
ラフル
こんにちは、投稿でテキストウィジェットを使用するにはどうすればよいですか？ [do_widget text]というコードを使用しましたが、機能しません。テキストウィジェットに画像スライダーを挿入したいのですが、この方法または他の方法で助けてください。ありがとう
シャニング
これは正常に機能していません。
プラグインをインストールし、コードをページの最下部に貼り付けました。プレビューを押すと、ウィジェットは指定した場所ではなくヘッダーとして表示されてしまいます。
JB
これはCustomizrテーマで機能するはずですか？ウィジェットは左と右のサイドバーでは機能するようですが、コンテンツ内では機能しません。[do_widget ]ショートコードに適切なIDを含めることができるように、ウィジェットIDを提供するプラグインをインストールしました。
これをどうやって修正できますか？
ジェフリー・ベッカーズ
こんにちは、
あなたのプラグインを使用して、最近のトピックのウィジェットを表示しています。しかし、ウィジェットにショートコードが生成されていません。
ゴーピ
これは素晴らしいプラグインです。プラグインのデザインを変更する方法はありますか？
ルイ
こんにちは、これは素晴らしいプラグインです。ありがとうございます。
AMR内のウィジェットのスタイルを、サイトの他の部分のウィジェットに影響を与えずに変更する方法はありますか？主に、私のページでコンテンツを不 awkwardly に中央揃えする20％のパディングが心配です。`.widget` CSSで0％に変更すると見栄えは良くなりますが、他のページのウィジェットはすべて台無しになります。AMRコンテンツに他のウィジェットに影響を与えずに個別のCSSを適用する方法はありますか？
Mackenzie
これ、ありがとうございます。私のページのコンテンツではうまく機能しています。しかし、ホームページでは機能しないようです。ホームページの編集エリアは、個別のページではなく、テーマオプション>外観に移動する必要があるため、異なります。WordPressではテキストを追加する場所しか提供されませんが、他のものにはHTMLを使用しており、それはうまく機能しているようです。ショートコードを「ホーム」編集ページにも追加してみましたが、うまくいきませんでした。
このサイトの別のページでは、子テーマのfunctions.phpに以下を追加するように書かれていました：
add_filter(‘widget_text’, ‘do_shortcode’);
しかし、それを追加するだけでは何も解決しません。ホームページの設定でこれが許可されない何かがあるはずです。何かアイデアはありますか？ありがとう
WPBeginnerサポート
テーマでカスタムテンプレートが使用されている可能性があります。テーマのサポートにお問い合わせください。
管理者
コーチ マリア
これを各投稿の末尾にコンテンツを配置するために使用できますか？（購読フォームのようなもの？）
Sudhakar Goverdhanam
うまくいきました、ありがとう
Zaheer Abbas
ありがとう…ニュースレタープラグインが、右サイドバーでのみ機能していたのが、ページや投稿でも機能するようになりました。
gmanob
このプラグインをダウンロードして有効化しましたが、外観 – ウィジェットにショートコードが見つかりません。何かアイデアはありますか？よろしくお願いします！
アンドレア・ヴァルゴイ
こんにちは、この問題があります。特定のページにあるウィジェット（正常に動作しています）が、スクロールダウンするとメニューに重なります。
解決策のアイデアはありますか？
ユーリ
素晴らしい！ありがとうございます！素晴らしいプラグインです！私の期待を完全に満たしています！
アサド・イクバル
このプラグインを使えて嬉しいです。とても良いアプローチです。
ありがとう。
トム
ありがとうございます！うまくいきました。
ニコール＠ザ・ピクセルブティック
Thank you! Just what I needed to make a separate page for Jetpack subscription signup. Great plugin I’ll use often.
アーナンド・クマール
PHP/テキストウィジェットのショートコードをどうやって取得しますか。
このプラグインは何も表示されません。
ジェシー
このプラグインは完璧です！ただ質問があります。ウィジェットを投稿の左側に配置し、テキストをその周りに折り返すにはどうすればよいですか？使用する必要がある正確なCSSコードは何ですか？
ショーンダ
ウィジェットは素晴らしいです。しかし、異なるデータを使用して複数の投稿で利用できるようにウィジェットを編集するにはどうすればよいですか？たとえば、私が使用しているウィジェットは、表示したいカテゴリと、そのカテゴリの投稿数を尋ねます。
現状では、ショートコード領域でウィジェットを編集してから、1つのページに配置する必要があります。今度は、異なるカテゴリと投稿数で、さらに2つのページにウィジェットを追加したいと考えています。よろしくお願いします。
WPBeginnerサポート
ウィジェット画面のショートコードサイドバーにドラッグし、ウィジェットIDを使用して投稿に表示することで、複数のウィジェットを追加できます。
管理者
ポール
このプラグイン、本当にありがとうございます!! 私も同じウィジェットを異なるページに投稿したいのですが、ウィジェットIDはどこで見つけられますか？
サミール・ヴェルマ
こんにちは、
ウィジェットIDをすべての投稿に表示する方法はありますか？すべての種類の投稿の下にウィジェットを表示したいです。
実際、このサイトをすべての投稿とページの下に共有する必要があります。
どうすればできますか？
リアンヌ
こんにちは！ウィジェットページでメインのサイドバーにウィジェットを追加し、コードをページに貼り付けました。ウィジェットが表示されているのは非常に素晴らしいのですが、このメッセージも表示されます。
サイドバーのショートコード (sidebarid: Shortcodes) が空か未定義です。
ウィジェット dooodl! は、ID "Shortcodes" および名前 "Shortcodes" のサイドバーにありません。
それをどうやって削除できますか？そして、なぜそこにあるのですか？
ありがとう！よろしくお願いいたします
WPBeginnerサポート
ページに表示したいウィジェットは、まずそのウィジェットをショートコードサイドバーにドラッグアンドドロップする必要があります。その後、ページでショートコードを使用してウィジェットを表示します。
管理者
クリシュナ・ヴェーニ
こんにちは、
すべての投稿にウィジェットIDを表示する方法はありますか？投稿タイトルの下にウィジェットをすべての投稿に表示したいです。
敬具
クリシュナ・ヴェーニ
シンディ・タッカー
ヘルプ！各投稿の下に購読ウィジェットを配置したいのですが、コードは何も知りません。どうすればいいですか？
コーリー・S
ショートコードウィジェットにウィジェットを追加し、テンプレート内の任意の場所に配置したい場所にショートコードを呼び出すことができます。
wpbeginner の他の役立つ投稿はこちらをご覧ください：https://www.wpbeginner.com/wp-themes/how-to-use-shortcodes-in-your-wordpress-themes/
フレイム・デニース
MW ウィジェットを「Our Services」というタイトルのテキストにするのはどうですか？
これらのショートコードはすべて機能しません：
[do_widget Text: 私たちのサービス]
[do_widget Text:私たちのサービス]
[do_widget “Text: 私たちのサービス”]
アレクサンダー・ブラッドリー
ライターがなぜ返信しなかったのか分かりません。私も同じ問題がありましたが、ウィジェットのタイトルは単に「テキスト」と呼ばれることが分かりました。それを試してみてください。複数の「テキスト」という名前のウィジェットがある場合にどうなるかは分かりませんが、すぐに分かると思います。
ダニエル・ニールセン
こんにちは
同じウィジェットを1つのページで複数回使用したい場合、何と呼びますか？
[do_widget count down]
&
[do_widget count down]
アシシュ
例えば
[do_widget “recent posts”] これです
特定の高さと幅で表示されるように、どのように配置できますか？
投稿の右側、または投稿の中央に配置し、テキストが周囲を囲むようにするにはどうすればよいですか？
可能ですか？
WPBeginnerサポート
CSSを使用して配置を調整できます。
管理者
サラ
手順が抜けていますか？デバッグを試しましたが、うまくいきません。デバッグすると、ウィジェットの「text-4」という非常に一般的な名前が表示されます。
ウィジェットIDを手動で設定する方法はありますか？
amrショートコードウィジェットプラグインに問題がありますか？例えば、2013年8月現在、これを使用するプラグインはまだこれですか？
アイスティス
プラグインが更新されたか、このチュートリアルが最初から間違っていたかのどちらかです。
[do_widget id=recent-posts-2] または [do_widget “Recently in news”] を使用します
WPBeginnerサポート
チュートリアルは正しいです。確認したところ、チュートリアルで示した通りに実行されています。
管理者
プラシャント・ガイ
これは素晴らしいヒントです。私のブログはシングルカラムのテーマなので、まさに私が求めていたものです。本当にありがとうございます。