WordPress TwrntyTwentyテーマにサイドバーを追加

画面の横にペインがないと何となく落ち着かない。

2020年現在最新のテーマTwentyTwentyにサイドバーを追加した。

C:\xampp\htdocs\wordpress\wp-content\themes\<テーマ名>\functions.php に以下を追加

function my_theme_widgets_init() {
    register_sidebar( array(
        'name'          => 'Main Sidebar',
        'id'            => 'main-sidebar',
    ) );
}
add_action( 'widgets_init', 'my_theme_widgets_init' );

index.phpに以下を追加

<?php get_sidebar(); ?>

sidebar.phpを以下で作成

<div id="primary-sidebar" class="primary-sidebar widget-area" role="complementary">
  <?php dynamic_sidebar( 'main-sidebar' ); ?>
</div><!-- #primary-sidebar -->

外観－カスタマイズで追加CSSに以下を追加。

/* サイドバーを左に表示 */
#primary-sidebar {
	float: left;
	padding-top: 0rem;
	padding-right:1rem;
	width:30%;
	min-width: 140px;
}

なぜか見出しの文字が大きすぎるのでサイズを指定した。

/* 投稿の見出し文字の大きさ */
.entry-title {
	font-size: 3.2rem;
}
/* サイドバーの見出し文字の大きさ */
.widgettitle {
	font-size: 2.5rem;
}

ついでにカレンダーに特定の日付にハイライトを付ける。

/* カレンダーの日付の色 */
.widget_calendar #today {
	margin-bottom: 0;
	background-color: #689F38;
}
.widget_calendar a {
	font-weight: bold;
}