WordPress オリジナルテーマを作ってみよう：③ header.php と sidebar.php と footer.php

③では、header.php、 sidebar.php、footer.php の設定を行います。

header.php の設定

現在記述されているコードの修正や追加、削除を行います。

文字コード部分の変更

<meta charset="UTF-8">
↓
<meta charset="<?php bloginfo( 'charset' ); ?>">

レスポンシブに対応させるためのコードを追加

文字コードを指定した次の行に下記を追加。

<meta name="viewport" content="width=device-width, initial-scale=1">

タイトル部分を削除

<title></title>
↓
消して、function.phpにコードを書く

スタイルシート部分を削除

<link rel="stylesheet" href="style.css" type="text/css">
↓
消して、function.phpにコードを書く

</head>の前にコードを追加

WordPressの header.php には必ず入れます。

<?php wp_head(); ?>

ブログのタイトルを追加する

header を消してタイトルを読み込み、タイトルにリンクを張ります。

<div class="header">
 <a href="<?php bloginfo('url'); ?>">
 <?php bloginfo('name'); ?>
 </a>
</div>

sidebar.php の設定

side を消して、カテゴリーを表示するためのコードを追記します。

<div class="side">
 <?php wp_list_categories('orderby=name&show_count=1'); ?>
</div>

wp_list_categories という関数を使い、名前順で投稿数を表示します。

footer.php の設定

footer にサイト情報を追加する

&copy; とすることで、©と表示されます

<div class="footer">
 &copy; 2023 サイト名
</div>

リンクを張りたい場合は、<a>～</a>で囲みます。

<div class="footer">
 <a href="<?php bloginfo('url'); ?>">
 &copy; 2023 サイト名
 </a>
</div>

</body>の前にコードを追加

WordPressの footer.php には必ず入れます。

<?php wp_footer(); ?>

まとめ

以上で header.php 、sidebar.php、footer.php の設定は終わりです。

• 文字コード部分の変更
• レスポンシブに対応させるためのコードを追加
• タイトル部分を削除
• スタイルシート部分を削除
• </head>の前にコードを追加
• </body>の前にコードを追加

PHPのコードが出てくるので意味がわからない部分もあると思いますが、順を追って追加・記述をしてみてください。

次は functions.php の作成です。