twenty sixteenの改良

twenty sixteenのトップページのタイトルを消すは下記参照。

Twenty Sixteen-トップページタイトル削除

続きを見る

トップページの下にカテゴリーを表示する。

content-page.phpのthe_content();の上に下記を入れる。

$categories = get_categories( array(
  'orderby' => 'name',
  'order' => 'ASC'
));
		
  echo '<div class=' . '"grid2"'.'>';		
foreach( $categories as $category ) {
  echo '<div class=' . '"item2"'.'><a href=' . get_category_link( $category->term_id ) . '>' . $category->name. '</a></div>';
};
  echo '</div>';

子テーマのStylesheetに下記を入れる。

.grid2 {
  display: grid; /* グリッドレイアウト */
  gap: 10px; /* 隙間は10px */
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); /* 最小400px */
  margin-bottom: 30px;
}

.item2 {
  text-align: center;
  border-radius: 5px;
  border: 2px solid #808080; /* ボタンに枠線を設定 */
  text-decoration: none; /* 下線を非表示 */
}

.item2 a{
  display: grid; /* リンク要素をグリッドコンテナとして設定 */
  grid-column: 1 / -1; /* リンク要素を親要素の全体に広げる */

  text-decoration: none; /* 下線を非表示 */
  padding-top: 10px; /* 上側のpadding */
  padding-bottom: 10px; /* 下側のpadding */
	
  --btn-color:#808080;/*ボタンの色*/
  border-color: var(--btn-color);
  color: var(--btn-color);
  transition: all 0.3s ease; /* ホバー時の変化をなめらかに */
}

.item2 a:hover{
  color: white;
  background-color: var(--btn-color);
}