sidebar.phpを作る / WordPressのテーマを自作する

2019年7月30日 02:17 カテゴリー: Wordpress

今回はサイドバーを作っていきます。カスタマイズするには多少の知識・・・というか調べる力が必要ですが、わりと簡単に自由度高く編集できる部分です。

しっかりお勉強して、戦略的、個性的、はたまた独創的にカスタマイズしていきましょう(?)。

コード

まずは恒例!コードを見てみましょう。

<!--サイドバーのボックス-->
<div class="sidebar">
	
		<!--カテゴリーの見出し-->
		<h2>
			カテゴリー
		</h2>
		
		<!--ナビゲーションメニューの意味-->
		<nav>
			
			<!--リストの始まり-->
			<ul class="category-list">
				
				<!--カテゴリー一覧をリストで表示する-->
				<?php wp_list_categories('title_li='); ?>
				
			</ul>
		</nav>
</div>

解説!

解説をしていきます。

<div class="sidebar">

</div>

サイドバーのボックスです。

class=”sidebar” このボックスにsidebarという名前を付けています。後でデザインをするときに必要になっていきます。

		<h2>
			カテゴリー
		</h2>

見出しです。h1~数字が大きくなるほど優先順位が下がっていきます。h1は記事のタイトルに使いましょう!

真ん中のカテゴリーの文字を変更すると見出しの文字が変わります。

		<nav>
			
		</nav>

ナビゲーションメニューの場所に使います。

			<ul class="category-list">

			</ul>

ulはリストに順番がない場合に使います。順番がある場合はolを使います。特に必要ない場合はulを使うといいと思います。classで名前をcategory-listにしています。

<?php wp_list_categories('title_li='); ?>

カテゴリーをリンク付きリストで表示します。ここを変更すると様々な物を表示する事が出来ます。

説明は以上です。

その他の機能の作り方

カテゴリー以外の機能も付けたい方向けに紹介します。

アーカイブ

h2~navの終わりまでをコピーして、見出しの文字とカテゴリーを表示するPHPを下記に変えるだけ。

<?php wp_get_archive(); ?>

タグ一覧表示

アーカイブと一緒で見出しの文字とPHP下記に変更。よく使われるタグが大きく表示されます。簡単でいいですね。

<?php wp_tag_cloud(); ?>

ただし、スタイルシートで見た目を調節した方がいいかもしれないですね。

まとめ

今回は変更しやすく、変更したい方が多い部分の説明でした。

次の記事

WordPressのテーマを作るまとめ