前回の続きです。

####ウィジェットの有効化

サイドバーを利用するには、WordPressに搭載されているウィジェットという機能を有効化する必要があります。

まず、functions.phpにコードを追加します。

functions.php

function widgetarea_init() {
    register_sidebar(array(
        'name'=>'サイドバー',
        'id' => 'side-widget',
        'before_widget'=>'<div id="%1$s" class="%2$s sidebar-wrapper">',
        'after_widget'=>'</div>',
        'before_title' => '<h4 class="sidebar-title">',
        'after_title' => '</h4>'
    ));
}
add_action( 'widgets_init', 'widgetarea_init' );

これで管理画面でウィジェットが設定できるようになりました。左側のメニューから外観＞ウィジェットを選択し、サイドバーを作成していきます。

上の画面と同じようにサイドバーに項目を追加してください。

次にsidebar.phpにコードを追加し、ウィジェットが表示されるようにします。

sidebar.php

<aside id="sidebar" class="sidebar">
    <div class="sidebar-inner">
        <?php dynamic_sidebar( 'side-widget' ); ?> //追記
    </div>
</aside>

ブラウザを確認すると、サイドバーがきちんと表示されているのがわかります。

次はデザインを整えていきます。

####デザインの調整

最初に、レイアウト確認用に記述した部分を削除します。

style.css

.contents, #sidebar { //#sidebarだけ削除
  height: 800px;
}
#sidebar {
  background-color: #ffa5a5;
}

style.cssに以下のコードを記述します。

style.css

.sidebar-wrapper {
  margin-bottom: 2rem;
}
.sidebar-title {
  font-size: 1.1rem;
  box-sizing: border-box;
  margin: 0 0 1.2rem;
  padding: .5rem;
  color: #000;
  border-bottom: 4px solid #03162f;
}

ブラウザを更新します。（更新しても変化がない場合は、デベロッパーツールを開いた状態でリロードボタンを右クリックし、「キャッシュの消去とハード再読み込み」をクリックしてください）

サイドバーの各項目がくっついてしまわないように余白を追加しました。

さらにウィジェットの体裁を整えていきます。

style.css

/*デフォルトウィジェット*/
.widget_recent_entries ul,
.widget_meta ul,
.widget_recent_comments ul,
.widget_pages ul,
.widget_meta ul,
.widget_categories ul,
.widget_archive ul,
.widget_nav_menu ul,
.calendar_wrap,
.tagcloud {
  list-style: none;
}
.widget_recent_entries li,
.widget_meta li,
.widget_recent_comments li,
.widget_pages li,
.widget_meta li,
.widget_archive li,
.widget_nav_menu li {
  position: relative;
  margin-bottom: .5rem;
}
.widget_recent_entries a,
.widget_meta a,
.widget_recent_comments a,
.widget_pages a,
.widget_meta a,
.widget_categories a,
.widget_archive a,
.widget_nav_menu a {
  text-decoration: none;
  color: #333;
}
.sidebar-wrapper a:hover {
  opacity: .6;
}

/*カテゴリウィジェット*/
.widget_categories li {
  display: block;
  margin-bottom: .5rem;
}
.widget_categories li a {
  font-size: .95rem;
  position: relative;
  display: block;
  padding: .9rem .6rem .9rem 2rem;
  color: #fff;
  background-color: #03162f;
}
.widget_categories li a::before {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  position: absolute;
  top: 50%;
  left: .6rem;
  content: '\f02b';
  transform: translateY(-50%);
  color: #fff;
}
.widget_categories .children {
  margin-bottom: .5rem;
  padding: 0;
  padding-left: 1rem;
  background-color: #415671;
}
.widget_categories .children li {
  margin-bottom: 0;
}
.widget_categories .children li a {
  font-size: .9rem;
  background-color: transparent;
}
.widget_categories .children li a::before {
  position: absolute;
  top: 50%;
  left: .6rem;
  content: '∟';
  transform: translateY(-50%);
  color: #fff;
}

/*カテゴリウィジェットとアーカイブウィジェットのドロップダウン表示*/
.widget_categories .screen-reader-text {
  display: none;
}
.widget_archive .screen-reader-text {
  position: relative;
  display: block;
  height: 0;
  text-indent: -9999999px;
}
.widget_categories form {
  position: relative;
}
.widget_categories form::after {
  position: absolute;
  top: 50%;
  right: 1rem;
  content: '▼';
  transform: translateY(-50%);
  pointer-events: none;
}
.widget_categories .postform,
.widget_archive select {
  font-size: .95rem;
  width: 100%;
  padding: 4px 10px;
  cursor: pointer;
  border: 1px solid #e0e3ef;
  border-radius: 0;
  background-color: #f4f5f9;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.widget_archive label::after {
  position: absolute;
  top: .5rem;
  right: 1rem;
  content: '▼';
  text-indent: 0;
  pointer-events: none;
}

/*タグウィジェット*/
.tagcloud a {
  font-size: .9rem !important;
  line-height: 1;
  position: relative;
  display: inline-block;
  margin-bottom: .5rem;
  padding: .2rem .5rem;
  text-decoration: none;
  color: #03162f;
  border: 1px solid #000;
  background-color: #fff;
}

/*メニューウィジェット*/
.widget_nav_menu li a {
  font-size: 1rem;
  font-weight: bold;
  position: relative;
  padding-left: 1.3rem;
  color: #333;
}
.widget_nav_menu li a::before {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  position: absolute;
  top: 50%;
  left: 0;
  content: '\f105';
  transform: translateY(-50%);
  color: #03162f;
}

/*最近の投稿*/
.widget_recent_entries li {
  padding-bottom: .5rem;
  border-bottom: 1px solid #ddd;
}
.widget_recent_entries li a:before {
  font-family: 'Font Awesome 5 Free';
  font-weight: bold;
  font-weight: 900;
  position: absolute;
  left: 5px;
  content: '\f303';
  color: #000;
}
.widget_recent_entries li a {
  display: block;
  margin-bottom: .3rem;
  padding-left: 1.6rem;
}
.widget_recent_entries .post-date {
  font-size: .8rem;
  display: block;
}

/*カレンダーウィジェット*/
.calendar_wrap {
  padding: 1rem;
  border: 1px solid #ddd;
}
.calendar_wrap table {
  width: 100%;
}
.calendar_wrap tbody {
  text-align: center;
}
.calendar_wrap caption {
  font-weight: bold;
  margin-bottom: 1rem;
}
.calendar_wrap td {
  padding: .3rem 0;
}
.calendar_wrap tfoot td {
  padding-top: .7rem;
}
.calendar_wrap tfoot td:last-child {
  text-align: right;
}

ブラウザを更新して、サイドバーのCSSが崩れていないかどうか確認してみてください。

以上でサイドバーの作成は完了です。

次回は記事一覧を表示できるようにします。

WordPressでオリジナルテーマを作ろう #7: 記事一覧ページの作成