WordPressページまたは投稿タイプのコンテンツ対応サイドバーを表示する方法

公開: 2017-06-23

さて、コンテンツ対応のサイドバーについて話しましょう。ただし、その前に、まずサイドバー全般について説明する必要があります。

典型的なサイドバーは、Webデザインと多くのWordPressテーマの定番です。お問い合わせフォーム、最新または最も人気のあるブログ投稿、広告、またはサイトの主な魅力ではないその他の情報などの追加情報を表示するのに適した場所です。近年、サイドバーのない1ページのデザインに向かう傾向がありますが、それらは依然として人気のある要素です。

ほとんどの場合、Webサイトのサイドバーには、どのページを表示していても同じコンテンツが表示されます。ただし、それが常に最適な方法であるとは限りません。実際、付随するコンテンツを認識しているさまざまなページや投稿にカスタムサイドバーを表示する理由はたくさんあります。

そのため、この記事では、このトピックについて詳しく説明します。最初に、コンテンツ対応サイドバーのユースケースを示します。このように、あなたはそれらがあなたにとって意味があるかどうかを理解するでしょう。その後、WordPressWebサイトにこのタイプのサイドバーを実装する方法を説明します。

行く準備はできましたか？それでは、ひびを入れましょう。

コンテンツ対応サイドバーのポイントは何ですか？

何よりもまず、横に表示されるコンテンツに応じてサイドバーをカスタマイズする必要がある理由について説明しましょう。結局のところ、静的サイドバーは何年も前から存在していて、今でもうまくいくようです。なぜ動作中のシステムを台無しにするのですか？

結局のところ、コンテンツ対応のサイドバーを使用することが理にかなっているユースケースはたくさんあります。

オンボーディング—初めての訪問者は、通常とは異なるコンテンツを必要とする場合があります。たとえば、ログインしているユーザーは、ユーザーをサイトやメーリングリストに参加させるための「サインアップ」の召喚状を見る必要はありません。
カスタマイズされた情報—一部の情報は他のページよりも一部のページで意味があります。例としては、連絡先ページの追加の連絡先情報、ブログページの最高または最新の記事、ショップページの特別オファーなどがあります。要点を理解できます。
SEOの改善—主要な要素ではありませんが、サイドバーのコンテンツは検索エンジン最適化にとって重要です（特にウィジェットのタイトルが見出しタグで適切にラップされている場合）。したがって、コンテンツ対応サイドバーを使用して、ページをさらにターゲットにすることができます。
召喚状—このタイプのサイドバーを使用して、Webサイトのさまざまな場所の召喚状をカスタマイズすることもできます。
言語—サイトのさまざまな言語バージョンのサイドバーを作成し、さまざまな市場をターゲットにすることもできます。

ご覧のとおり、コンテンツ対応サイドバーを使用する理由はいくつかあり、このリストは完全ではありません。ただし、次に、それらを実装する方法に焦点を当てましょう。

WordPressでコンテンツ対応サイドバーを実装する方法

投稿とページのカスタムサイドバーを設定するには、主に3つの方法があります。それらすべてに共通しているのは、サイドバーのコンテンツは、それが表示されているページまたは投稿に応じて変更されるということです。条件には、WordPressタグ、カテゴリ、ページ名、またはユーザーがログインしているかどうかなどの他の属性が含まれます。

その後、サイドバーは通常、次の3つの方法のいずれかで変更されます。

ウィジェットのフィルター— 1つのサイドバーはウィジェットで埋められ、バックグラウンドのある種のロジックが、どのウィジェットをどの場所に表示し、どのウィジェットを非表示にするかを決定します
サイドバー全体を設定する—別の方法は、異なる条件が満たされたときに同じ場所に表示される完全に別個のサイドバーを作成することです。個々のウィジェット構成を含めることができます。
テーマにハードコーディング—もちろん、コーディングチョップがある場合は、テーマファイルにカスタムサイドバーを追加することもできます

個人的には、2番目の方法が最も整然としたユーザーインターフェイスをもたらす方法だと思います。ただし、以下では、それぞれの方法について詳しく説明し、自分で判断できるようにします。その後、WordPressサイトにカスタムサイドバーを実装するためのいくつかのオプションをリストします。

Jetpackウィジェットの可視性を使用してウィジェットをフィルタリングする

サイトのウィジェットの外観をフィルタリングする最も簡単な方法は、Jetpackに含まれている適切な名前のWidgetVisibilityモジュールです。サイトにプラグインが既にある場合、カスタムサイドバーの作成は、モジュールをアクティブ化するのと同じくらい簡単です（デフォルトでまだアクティブ化されていない場合）。または、このスタンドアロンバージョンを使用することもできます。

あなたがウィジェットメニューに移動したら、あなたはすべてのあなたのウィジェットに新しい可視性のボタンがあります。それをクリックすると、ドロップダウンメニューを介してウィジェットに必要な表示ロジックを簡単に実装できます。

ジェットパックウィジェットの可視性

可視性の条件は次のとおりです。

カテゴリ—ウィジェットは特定のカテゴリページまたはそのすべてに表示できます
著者—すべての著者ページに表示されるか、特定のユーザーに限定されます
ユーザー—ユーザーがログインしているかどうかを確認します
役割—ユーザーの役割に応じてウィジェットを制御します
タグ—カテゴリページのように機能しますが、タグ用です
日付—アーカイブウィジェットを表示する日付を制御します
ページ—フロントページ、投稿ページ、アーカイブページ、404エラーページ、投稿タイプ、投稿タイプアーカイブ、静的ページのウィジェットの可視性を設定します

オプションごとに、ウィジェットを表示するか非表示にするかを定義できます。ルールは個別に入力する必要があります。つまり、一度に複数のページを入力することはできません。ただし、この方法は、他のソリューションで必要に応じてページIDを手動で入力するよりもさらに便利です（詳細は以下を参照）。すべての条件が有効な場合にのみウィジェットを表示するように強制する[すべての条件に一致]チェックボックスもあります。

コンテンツ対応サイドバーを使用すると、カスタムサイドバーを設定できます

私たちが話したい2番目の解決策は、Content AwareSidebarsプラグインです。前述のように、このプラグインを使用すると、サイドバー全体を設定して、ウィジェットを入力し、投稿やページに割り当てることができます。使い方はとても簡単です。

インストール後、WordPressメニューにサイドバーと呼ばれる新しいメニュー項目があります。

コンテンツ対応サイドバーメニュー

ここで[新規追加]を選択すると、次の画面が表示されます。

コンテンツ対応サイドバープラグインで新しいサイドバーを追加する

ここで、最初に行うことは、サイドバーに名前を付けることです。その後、それを表示するための条件を設定する時が来ました。使用可能なオプションはJetpackに似ています。

静的ページ—静的ページを選択して、フロントページ、検索結果、404エラーページなどのサイドバーを表示します
投稿—上記と同じオプションですが、投稿用です
ページ—サイドバーを表示するサイトのページを選択します
メディア—サイドバーが表示されるメディアページを決定します
作成者—表示を作成者ページに制限します
ページテンプレート—サイドバーを表示するページテンプレートを選択します
カテゴリ—特定のカテゴリまたはすべてのカテゴリアーカイブを選択します
タグ—同じオプションですが、タグ用です
フォーマット—繰り返しますが、フォーマットアーカイブの同じ設定
日付—そしてもう一度日付アーカイブ
URL （Proバージョンのみ）—サイドバーの表示を特定のURLに制限します

追加の設定：

スケジュール—サイドバー表示のタイミングを設定します。丸一日に制限されている無料バージョンでは、Proバージョンはよりきめ細かいタイムスロットを提供します。
デザイン—サイドバー、ウィジェット、ウィジェットタイトルにカスタムCSSクラスを追加して、それらを操作します
詳細—サイドバーの順序を設定します（複数ある場合）

それに加えて、サイドバーを相互にマージし、それらを置き換え、ウィジェット領域として設定し、ログインしたユーザー（Proで使用可能なユーザーロール）の表示を制御することもできます。

構成が完了すると、新しいサイドバーが通常のウィジェットメニューに表示され、データの入力、アクティブ化、非アクティブ化が可能になり、過去のリビジョンを確認することもできます。きちんと簡単。

カスタムサイドバーを手動で作成する

最後に、コーディングを介してカスタムサイドバーを作成することもできます。 WordPressにはそのためのオプションがたくさん用意されているので、すぐにプロセスを確認します。

カスタムサイドバーを作成するために最初に行うことは、新しいウィジェット化された領域を登録することです。そのためには、（子）テーマのfunctions.phpに次のコードを入力するだけです。

function custom_sidebar_init() {
	register_sidebar( array(
		'name'          => 'New Custom Sidebar',
		'id'            => 'custom_sidebar_1',
		'description'   => 'Add widgets here to appear for single posts.',
		'before_widget' => '<section id="%1$s" class="widget %2$s">',
		'after_widget'  => '</section>',
		'before_title'  => '<h2 class="widget-title">',
		'after_title'   => '</h2>',
	) );
}
add_action( 'widgets_init', 'custom_sidebar_init' );
[/php
Of course, you can change the name and other elements to your liking. After saving and uploading to your server, it will now appear in your widget menu where you can add widgets to it as usual.

<img class="with-border aligncenter wp-image-53962 size-full" src="https://www.elegantthemes.com/blog/wp-content/uploads/2017/06/new-widget-area.jpg" alt="new widget area" width="672" height="445" />

However, so far the sidebar doesn't show up anywhere on your site. To change that, you need to add it to the template file(s) of where you want them to show up.

In our example, we want the new sidebar to appear for single posts, so we would input it inside <em>single.php</em> of our theme. In the case of the <em>Twenty Seventeen</em> theme, that means we would exchange this:

<?php get_sidebar(); ?>

これとともに：

<?php if ( is_active_sidebar( 'custom_sidebar_1' ) ) : ?>
	<aside id="secondary" class="widget-area" role="complementary">
		<?php dynamic_sidebar( 'custom_sidebar_1' ); ?>
	</aside><!-- #primary-sidebar -->
<?php endif; ?>

その後、それがフロントエンドの最終結果です。

動作中の新しいウィジェット領域

もちろん、さらに開発のチョップがある場合は、ログインしたユーザーにのみサイドバーを表示するなどの条件を追加することができます。 WordPressテンプレート階層を使用して、表示する場所をより細かく設定することもできます。これは最も動的なソリューションではないかもしれませんが、それはトリックを実行し、追加のプラグインをインストールする必要なしにバックグラウンドで完全に機能することができます。

コンテンツ対応サイドバーを実装するための追加の方法

上記のオプションの他に、同様の機能を持つプラグインがいくつかあります。

ウィジェットロジック

コンテンツ対応サイドバー用のウィジェットロジックプラグイン

このプラグインはJetpackソリューションと同様に機能しますが、ドロップダウンメニューの代わりに、WordPress条件付きタグを手動で入力する必要があります。このようにして、必要な数のルールに応じてウィジェットが表示される場所を決定できます。

ただし、そのためには、ページのIDを知る必要があり、全体として、上記で見たものよりも少し技術的です。それはそれが機能せず、強力なプラグインではないという意味ではありませんが、技術者が少ない方が何か他のものを使ったほうがいいかもしれません。

カスタムサイドバー

カスタムサイドバーワードプレスプラグイン

WPMU DEVによって作成された、任意のウィジェット領域で機能するコンテンツ対応サイドバーを設定するための別のソリューションがあります。プラグインを使用すると、任意の投稿、ページ、カテゴリアーカイブ、投稿タイプなどにウィジェットを動的に表示できます。さらに、非常に強力で使いやすいユーザーインターフェイスですべてを実行します。完全な紹介については、TomEwerのWebサイトの記事を確認してください。

シンプルなページサイドバー

カスタムサイドバーを作成するための最終的なソリューションは、簡単にするために作成されています。サイドバーを割り当てたり、ページエディタから直接一括で変更を加えたりすることができます。これを行った後、ウィジェットメニューで通常どおりにそれらを設定できます。

残念ながら、より高度なカスタマイズオプションがありません。ただし、ページに異なるサイドバーのみを使用したい場合は、これが探しているソリューションである可能性があります。

一言で言えばコンテンツ対応サイドバー

サイトでカスタムメイドのサイドバーを使用する理由はたくさんあります。すべてのコンテンツがその横に表示されるために同じ情報を必要とするわけではありません。コンテンツ対応サイドバーを使用すると、1つの標準サイドバーを使用する代わりに、意味のあるものを表示できます。

このチュートリアルでは、カスタマイズされたサイドバーを作成するいくつかの方法を学びました。ウィジェットのフィルタリングから、まったく新しいサイドバーの作成、テーマへのコーディングまで、すべてが揃っています。

この情報を利用して、ユーザーの操作とサービスを向上させるために必要なサイドバーコンテンツだけを視聴者に提供できるようになりました。試してみる！

コンテンツ対応サイドバーの使用経験は何ですか？ 以下のコメントセクションでお知らせください！

Kit8.net/shutterstock.comによる記事のサムネイル画像