【WordPress】運営者情報などの独自コンテンツをサイドバーに表示する方法

【WordPress】運営者情報などの独自コンテンツをサイドバーに表示する方法

今回は、WordPressのウィジェット機能を使用して、サイトのサイドバーに、独自コンテンツを表示させる方法を説明します。

Advertisement

【WordPress】独自コンテンツをカスタムHTMLを使用してサイドバーに表示する方法

WordPressには、ウィジェットというドラッグ&ドロップのみで、サイドバーやヘッダー、フッターにコンテンツを表示できる機能があります。※使用しているテーマによって、設定できるウィジェット項目に違いがあります。
 
WordPressウィジェット機能
 
このウィジェット機能を使う事で、サイドバーにこのサイトのような「姉妹サイト」や、「運営者情報」などのコンテンツを表示させることができます。
では早速、ウィジェット機能でカスタムHTMLを設定してみましょう。

ウィジェット機能でカスタムHTMLを使用+サイトに反映させる

ウィジェット設定画面は、WordPressの管理画面で、左メニューの「外観」→「ウィジェット」で移動することができます。
画面の左側が未使用のウィジェット、画面の右側がウィジェットを設定できる箇所の一覧になります。表示したいウィジェットの項目(今回はカスタムHTML)を左側から右側にドラッグ&ドロップし、内容を入力してウィジェット右下の「保存」をクリックすることで、サイトに反映させることができます。
 
WordPressカスタムHTML
 
※上図のように、カスタムHTMLの「タイトル」部分が、サイトのh2になり、「内容」部分にHTMLを入力します。
これで、サイトのサイドバーにカスタムHTMLを使用したコンテンツの表示が完了します。

姉妹サイトを表示させる場合のHTML・CSSの記述

姉妹サイトをサイドバーに表示させる場合は、こちらのサイトと同じものは下記の記述で設定できます。
コピーして、カラーを変更するなどして使用して頂ければ大丈夫です。
 
〇HTML

<a class="site" href="#">姉妹サイト①</a>
<a class="site" href="#">姉妹サイト②</a>

〇CSS
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を入力してコンテンツを作成できる便利なウィジェットなので、是非利用してみてください。

WordPressカテゴリの最新記事