今回は、WordPressのウィジェット機能を使用して、サイトのサイドバーに、独自コンテンツを表示させる方法を説明します。
【WordPress】独自コンテンツをカスタムHTMLを使用してサイドバーに表示する方法
WordPressには、ウィジェットというドラッグ＆ドロップのみで、サイドバーやヘッダー、フッターにコンテンツを表示できる機能があります。※使用しているテーマによって、設定できるウィジェット項目に違いがあります。
このウィジェット機能を使う事で、サイドバーにこのサイトのような「姉妹サイト」や、「運営者情報」などのコンテンツを表示させることができます。
では早速、ウィジェット機能でカスタムHTMLを設定してみましょう。
ウィジェット機能でカスタムHTMLを使用＋サイトに反映させる
ウィジェット設定画面は、WordPressの管理画面で、左メニューの「外観」→「ウィジェット」で移動することができます。
画面の左側が未使用のウィジェット、画面の右側がウィジェットを設定できる箇所の一覧になります。表示したいウィジェットの項目（今回はカスタムHTML）を左側から右側にドラッグ&ドロップし、内容を入力してウィジェット右下の「保存」をクリックすることで、サイトに反映させることができます。
※上図のように、カスタムHTMLの「タイトル」部分が、サイトのh2になり、「内容」部分にHTMLを入力します。
これで、サイトのサイドバーにカスタムHTMLを使用したコンテンツの表示が完了します。
姉妹サイトを表示させる場合のHTML・CSSの記述
姉妹サイトをサイドバーに表示させる場合は、こちらのサイトと同じものは下記の記述で設定できます。
コピーして、カラーを変更するなどして使用して頂ければ大丈夫です。
<a class="site" href="#">姉妹サイト①</a>
<a class="site" href="#">姉妹サイト②</a>CSSは、外部CSSまたは「カスタマイズ」内の「追加CSS」などに追加してください。
.textwidget .site {
display: block;
width: 100%;
text-align: center;
color:#aaa;
border: 2px solid #aaa;
font-size: 14px;
margin-bottom: 10px;
padding: 5px 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.textwidget .site:hover {
color:#329fff;
border:2px solid #329fff;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}まとめ
今回は、WordPressのウィジェット機能を使用して、サイトのサイドバーに、独自コンテンツを表示させる方法を説明しました。
カスタムHTMLは、自身でHTML・CSSを入力してコンテンツを作成できる便利なウィジェットなので、是非利用してみてください。
前へ
