Wordpressテーマ作成《連載2》header.php、sidebar.php、footer.phpを用意

IVORYフレームワークを使って作る、シンプルで軽量なWordpressテーマを作成「連載2」

index.phpなど各ファイルのコンポーネントとなる3つのファイル（header.php、sidebar.php、footer.php）を作成します。
「header.php」に記載する内容は必須の項目をメインにできる限りミニマムで作ってみます。
header.phpのhead部分

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<!-- wordpress -->
<?php wp_head(); ?>
</head>

「lang」と「charset」は指定しておきます。
「viewport」はスマホ対応用の記述です。
「title」は（仮）です。
「php wp_head」は必須です。

参考までに
「lang」と「charset」は通常のテーマでは下記のように書かれています。
通常のlangとcharset部分

<!doctype html>
<html <?php language_attributes() ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />

日本語サイトの場合、出力される内容はほぼ決まっているので、本テーマではシンプルにhtmlのみで書いています。
header.phpのheader部分

<body <?php body_class(); ?>>
<header id="header">
<div class="grid">
<div class="row">
<div class="c6">
<h1 class="title"><a href="<?php echo home_url(); ?>"><?php bloginfo('name') ?></a></h1>
<p class="description"><?php bloginfo('description'); ?></p>
</div><!-- end c6 left -->
<div class="c6">
<!-- widget -->
<?php if ( is_active_sidebar( 'header-widget' ) ) : ?>
<?php dynamic_sidebar( 'header-widget' ); ?>
<?php else : ?>
<p class="alert"><?php _e("Please activate some Widgets"); ?>.</p>
<?php endif; ?>
</div><!-- end c6 right -->
</div><!-- end row -->
<div class="row">
<!-- navigation menu -->
<div class="c12">
<nav id="menu">
<?php wp_nav_menu(array( 'container_class' => 'global', 'theme_location' => 'primary',)); ?>
</nav>
</div><!-- end c12 -->
</div><!-- end row -->
</div><!-- end grid -->
</header>
<!-- main contents wrapper -->
<div class="grid">
<div class="row">

「body_class」は残しておきます。
左のカラムに「タイトルと説明」を表示させる仕様です。
右のカラムは自由に使えるようにウィジェットを埋め込みました。
ヘッダーのメニューは「primary」です。
headerの下の「grid」と「row」はメインエリアとサイドバーエリアを囲む（ラップする）コードです。

header.phpの全文

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<!-- wordpress -->
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header id="header">
<div class="grid">
<div class="row">
<div class="c6">
<h1 class="title"><a href="<?php echo home_url(); ?>"><?php bloginfo('name') ?></a></h1>
<p class="description"><?php bloginfo('description'); ?></p>
</div><!-- end c6 left -->
<div class="c6">
<!-- widget -->
<?php if ( is_active_sidebar( 'header-widget' ) ) : ?>
<?php dynamic_sidebar( 'header-widget' ); ?>
<?php else : ?>
<p class="alert"><?php _e("Please activate some Widgets"); ?>.</p>
<?php endif; ?>
</div><!-- end c6 right -->
</div><!-- end row -->
<div class="row">
<!-- navigation menu -->
<div class="c12">
<nav id="menu">
<?php wp_nav_menu(array( 'container_class' => 'global', 'theme_location' => 'primary',)); ?>
</nav>
</div><!-- end c12 -->
</div><!-- end row -->
</div><!-- end grid -->
</header>
<div class="grid">
<div class="row">

「sidebar.php」に記載する内容はシンプルです。
できる限りウィジェット化することが推奨されていますので、サイドバー用のウィジェットを1つ記載することとします。
sidebar.php

<div id="sidebar" class="c3">
<?php if ( is_active_sidebar( 'side-widget' ) ) : ?>
<?php dynamic_sidebar( 'side-widget' ); ?>
<?php else : ?>
<p class="alert"><?php _e("Please activate some Widgets"); ?>.</p>
<?php endif; ?>
</div>

IVORYのグリッド、「c3」のクラスを設定しておきます。
ウィジェットの設定は、最後にfunction.phpに書き込みます。

「footer.php」もウィジェットをメインにシンプルにコードを書きていきます。
footer.php

</div><!-- end row -->
</div><!-- end grid -->
<footer id="footer">
<div class="grid">
<!-- widget -->
<div class="row">
<?php if ( is_active_sidebar( 'footer-widget' ) ) : ?>
<?php dynamic_sidebar( 'footer-widget' ); ?>
<?php else : ?>
<p class="alert"><?php _e("Please activate some Widgets"); ?>.</p>
<?php endif; ?>
</div><!-- end row -->
<!-- copyright -->
<div class="row">
<div class="c12">
<p class="copyright"><?php bloginfo( 'name' ); ?> © 2016.<br>All rights reserved.</p>
</div>
</div><!-- end row -->
</div><!-- end grid -->
</footer>
<!-- wordpress -->
<?php wp_footer(); ?>
</body>
</html>

最初の2つの「/div」は「row」と「container」を閉じるタグです。
続いて「footer」内に、ウィジェットとコピーライト用の記述をします。
ウィジェットは左・中央・右と3つ使う仕様です。
「php wp_footer」は必須です。
最後に、bodyとhtmlを閉じます。