③header/saidebar/footerに分割する[wp_head][wp_enqueue_style]
投稿日：2020年12月16日
テーマを一から作成する 第3回目
前回はindex.phpとstyle.cssに具体的にコードを記述したので、今回はindex.phpテンプレートをヘッダー（header）/サイドバー（sidebar）/フッター（footer）に分割していきます。またCSSをリンクさせる際にテンプレートに記述する方法ではなく、functions.phpに記述する方法を説明します。
以下はこれから分割していくindex.phpのコードです。
index.php
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title><?php bloginfo('name'); ?></title>
<meta name="description" content="<?php bloginfo('description'); ?>" />
<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>">
</head>
<body>
<header>
<h1><?php bloginfo('name'); ?></h1>
</header>
<main>
メインコンテンツ
</main>
<aside>
サイドバー
</aside>
<footer>
フッター
</footer>
</body>
</html>index.phpは実際にページを見てみると、以下のように表示されます。
一般的なサイトの多くはheaderやsidebarなどに分割することができ、それを別々のテンプレートで作成しておけばWordPressでの作業も効率的になります。これから具体的な作業に入ります。
まずは新たに header.php/sidebar.php/footer.php の3つのテンプレートファイルを用意して、index.phpのあるテーマディレクトリ（/wp-content/themes/sample/以下）にアップロードして下さい。これらのテンプレートは、モジュールテンプレートと呼びます。外観＞テーマの編集で見てみるとテーマフッターやテーマヘッダーのように認識されていることが分かります。
次にindex.phpに記述されているコードのheader/sidebar/footer部分をコピーして、それぞれ header.php/sidebar.php/footer.php にペーストしていきます。
header.php
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title><?php bloginfo('name'); ?></title>
<meta name="description" content="<?php bloginfo('description'); ?>" />
<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>">
</head>
<body>
<header>
<h1><?php bloginfo('name'); ?></h1>
</header>sidebar.php
<aside>
サイドバー
</aside>footer.php
<footer>
フッター
</footer>
</body>
</html>次にindex.phpにおいて header.php/sidebar.php/footer.php のそれぞれのテンプレートを読み込むようにします。
呼び出すテンプレートタグ
呼び出すテンプレートタグは
<?php get_header(); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
になります。下記のindex.phpに記述する
<?php get_header(); ?>
<main>
メインコンテンツ
</main>
<?php get_sidebar(); ?>
<?php get_footer(); ?>これで3つのファイルをindex.phpに取り込む込むことができましたが、header.phpとfooter.phpにはそれぞれ以下の関数を必ず記述しなくてはいけません。以下の関数を記述することによって、WordPress内のJavaScript等が実行されるようになります。
wp_head()
wp_footer()wp_head()はheader.phpの</head>の前の部分
<?php wp_head(); ?>
</head>wp_footer()はfooter.phpの</body>の前の部分に記述します。
<?php wp_footer(); ?>
</body>
</html>wp_head及びwp_footer関数を読み込むと、ログイン状態において画面の上部にツールバーが表示されるようになります。
ツールバーは各ユーザの編集画面において、ツールバーのチェックを外せば非表示にすることが可能です。
