WordPressでカスタム投稿後ウィジェットを追加する方法

WordPressブログの可能性を最大限に引き出したい場合は、投稿後ウィジェットの使用をお勧めします。

ポストウィジェットを使用すると、ブログ投稿やページの最後にさまざまな要素を表示できます。たとえば、ニュースレター登録フォームを追加したり、関連記事を表示したり、最新の記事や人気の商品を表示したりできます。

当社では長年 WPBeginner でこのウィジェットを使用しており、サイト上の他の記事のプロモーションに役立っています。例えば、当社のウェブサイトで人気のあるコンテンツをご覧いただけます。

この記事では、WordPressにカスタム投稿後ウィジェットを簡単に追加して、ユーザーエンゲージメントを高め、ウェブサイトでの滞在時間を長くする方法をご紹介します。

WordPressでカスタム投稿後ウィジェットを追加する理由

多くの人気ウェブサイトで、記事の最後に表示されるコールトゥアクションを見たことがあるかもしれません。

ユーザーが記事の最後までスクロールした場合、すでに惹きつけられており、あなたのオファーにエンゲージする可能性が高いためです。

このスペースは、メールサインアップフォーム、リードジェネレーションフォームの作成、または関連記事、人気記事、その他のコンテンツ発見機能でユーザーエンゲージメントを高めるために活用できます。

同様に、オンラインストアを運営している場合、関連商品を表示したり、割引を提供してセールを宣伝したりしたい場合があります。

これを行うには、いくつかの方法があります。たとえば、人気記事アドオンを備えたMonsterInsightsのようなプラグインを使用できます。これにより、投稿コンテンツの後に人気記事または人気商品を自動的に追加できます。

ブロックエディターを使用して、投稿の作成中にその投稿後コンテンツを手動で追加できます。

これは多くの作業であり、この方法の問題は、何かを変更したい場合、手動で行う必要があるということです。

そこにウィジェットが登場します。

ウェブ開発用語では、ウィジェットは、メインコンテンツエリアとは別に、ウェブサイトのさまざまなエリアに追加できる非コンテンツブロックです。

WordPressには、WordPressテーマが提供するウィジェット対応エリアにいつでも追加できる組み込みウィジェットセットが付属しています。

すべての人気のあるWordPressテーマには、サイドバー、フッター、ヘッダーウィジェットエリアなど、一般的なウィジェット対応エリアが付属しています。しかし、投稿後のウィジェットエリアを備えたWordPressテーマは非常に少ないです。

とはいえ、どの WordPress テーマを使用していても、WordPress に投稿後のウィジェットを簡単に追加する方法を見ていきましょう。

動画チュートリアル

書き言葉での説明をご希望の場合は、そのままお読みください。

方法1. プラグインを使用して投稿コンテンツの後に追加する

この方法は少し限定的ですが、より簡単で、すべての種類のWordPressウィジェットで機能します。スタイリングについてはWordPressテーマに少し依存しますが、ほとんどのユーザーにとってうまく機能するでしょう。

まず、Add Widget After Content プラグインをインストールして有効化する必要があります。詳細については、WordPress プラグインのインストール方法に関するステップバイステップガイドをご覧ください。

有効化したら、外観 » ウィジェットページに移動すると、「コンテンツの後」という新しいウィジェットブロックが表示されます。

コンテンツの後に追加したいウィジェットがあれば、プラス記号をクリックしてください。

例えば、ここではWPFormsを使用して作成した提案フォームウィジェットを追加しました。

通常通り各ウィジェットの設定を編集していただき、変更を更新することを忘れないでください。

完了したら、ウェブサイトにアクセスして、投稿後のコンテンツウィジェットが機能していることを確認できます。これは、デモウェブサイトでの表示例です。

追加しようとしているウィジェットの数やWordPressテーマによっては、ウィジェットのバランスがわずかに崩れる場合があります。

デフォルトでは、プラグインはウィジェットを一つずつ追加するため、横並びに表示したい場合はカスタムCSSを使用する必要があります。また、背景色を変更したり、パディングを追加したり、テキストの色を変更したりすることもできます。

外観 » カスタマイズページにアクセスし、追加CSSタブに切り替えます。

まず、このカスタムCSSを追加して開始点とすることができます。

.awac.widget {
    width: 50%;
    display: inline-block;
    float: left;
    padding: 20px;
    background-color: #fff8e9;
    border: 1px dashed #fde2a9;
    min-height:400px;
} 
 
.awac.widget h4 {
font-size:18px;
color:#666; 
} 
 
.awac.widget li{
font-size:16px;
} 

このカスタム CSS コードでは、ウィジェットの幅を変更して、2 つのウィジェットを横並びに表示するようにしました。背景色とフォントサイズも変更しました。必要に応じて CSS を自由に調整してください。

変更を保存するには、「公開」ボタンをクリックすることを忘れないでください。

これは、デモウェブサイトでの表示方法です。

カスタムCSSを使用したくないですか？ CSS Heroプラグインをお試しください。CSSの知識がなくても、サイトのあらゆる領域をカスタマイズできます。

投稿後ウィジェットの表示/非表示

デフォルトでは、プラグインはすべての投稿とページに投稿後のウィジェットを表示します。また、投稿コンテンツ後のウィジェットを表示したくない場所に非表示にすることもできます。

たとえば、静的ページに投稿後のウィジェットを表示したくない場合があります。

外観 » ウィジェット（コンテンツの後）ページにアクセスしてください。ここから、コンテンツ後ウィジェットを表示しないカテゴリまたは投稿タイプを選択できます。

設定を保存するには、「変更を保存」ボタンをクリックしてください。

個々の投稿やページで、コンテンツ後のウィジェットエリアを非表示にすることもできます。

ウィジェットを投稿後に表示したくない投稿またはページの編集を行い、「投稿後のウィジェット」ボックスまでスクロールして一番下まで移動します。

次に、ウィジェットエリアを非表示にするチェックボックスをオンにしてから、投稿またはページを保存します。これにより、プラグインはその特定の投稿/ページでウィジェットエリアの表示を停止します。

方法2. OptinMonsterを使用して投稿コンテンツの後にコンテンツを追加する

この方法はより洗練されており、より強力ですが、デフォルトのWordPressウィジェットは使用しません。代わりに、美しいデザインとテンプレートから選択して、好きなコンテンツを追加できます。

この方法のもう1つの利点は、多くのターゲティングオプションが得られることです。

例えば、ユーザーごとにパーソナライズされたコンテンツを表示したり、ユーザーが現在表示している内容に基づいてコンテンツを変更したり、より効果を高めるためにサイト内リターゲティングを使用したりできます。

この方法では、OptinMonsterが必要です。これは市場で最高のリード生成およびコンバージョン最適化ソフトウェアであり、ウェブサイト訪問者を購読者や顧客に転換させることができます。

まず、OptinMonsterアカウントにサインアップする必要があります。ウェブサイトにアクセスし、「今すぐOptinMonsterを入手」ボタンをクリックするだけです。

サインアップ後、WordPressサイトに切り替えて、OptinMonster プラグインをインストールして有効化してください。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。

このプラグインは、WordPressウェブサイトとOptinMonsterアカウント間のコネクタとして機能します。

有効化後、OptinMonster » 設定ページにアクセスし、「既存のアカウントを接続」ボタンをクリックする必要があります。

これにより、ログインしてWordPressサイトをOptinMonsterアカウントに接続できるポップアップが表示されます。

WordPressサイトが接続されたので、最初のジオターゲティングキャンペーンを作成する準備ができました。 OptinMonster » Campaigns ページに移動し、「新規追加」ボタンをクリックしてください。

まず、キャンペーンタイプを選択する必要があります。OptinMonsterは、ライトボックスポップアップ、フローティングバー、インラインオプティン、フルスクリーン、スライドイン、ゲーミフィケーションキャンペーンをサポートしています。

このチュートリアルのため、コンテンツの後にキャンペーンを自動的に表示できるインラインキャンペーンを選択します。

その下で、キャンペーンテンプレートをクリックして選択できます。

次に、キャンペーンの名前を入力する必要があります。ここでは任意の名前を入力し、「ビルドを開始」ボタンをクリックします。

これにより、OptinMonsterのキャンペーンビルダーインターフェースが起動し、右側のパネルにキャンペーンのライブプレビューが表示されます。

ドラッグアンドドロップ式のキャンペーンビルダーを使用して、ブロックを追加したり、要素を移動したりできます。

ここから、デフォルトのWordPressウィジェットにはない、より強力な要素を選択できます。例えば、カウントダウンタイマー、ボタン、チャットボット、カラムなどを追加できます。

投稿後のキャンペーンをデザインしたら、「公開」タブに切り替えて、キャンペーンステータスを「公開」に変更します。

その後、保存ボタンをクリックして設定を保存し、キャンペーンビルダーを閉じます。

OptinMonsterは、出力設定ページに移動します。ここで、投稿後コンテンツを表示したい場所を選択できます。

自動を選択するだけで、キャンペーンを投稿コンテンツ内、下、または前に表示するかを選択できます。

このチュートリアルのため、投稿コンテンツの下のオプションを選択します。その後、表示ステータスを公開に変更し、保存ボタンをクリックしてキャンペーンを公開します。

これで、カスタム投稿後ウィジェットが機能しているかウェブサイトを訪問できます。

この記事が、WordPressでカスタム投稿後ウィジェットを追加する方法を学ぶのに役立ったことを願っています。

投稿後のウィジェットとユーザーがどのようにやり取りしているかを確認したいですか？WordPressでユーザーエンゲージメントを追跡する方法に関するチュートリアルを確認し、これらのヒントを試して簡単にウェブサイトのトラフィックをブーストしてください。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。