ちょっとづつ学ぶWordPressテーマの作り方 3 -ヘッダー-

ステップ別にちょっとづつWordPressテーマの作り方を学ぶ本シリーズ。第三回はサイトのヘッダー部分を作る。

Contents

1 WordPressテーマ作りの概要
2 WordPressテーマにするBootstrapサイトをおさらい
3 ヘッダーを作る

WordPressテーマ作りの概要

WordPressテーマにするBootstrapサイトをおさらい

まずは本シリーズでテーマ化するサイトのおさらい。Bootstrapを使ったベーシックなブログだ。

少し長いけれど（把握しなくてOK）、HTMLはこのようになっている。説明に必要のない部分は削っている。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>Blog Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="../../dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="blog.css" rel="stylesheet">
  </head>

  <body>

    <div class="blog-masthead">
      <div class="container">
        <nav class="blog-nav">
          <a class="blog-nav-item active" href="#">Home</a>
          <a class="blog-nav-item" href="#">New features</a>
          <a class="blog-nav-item" href="#">Press</a>
          <a class="blog-nav-item" href="#">New hires</a>
          <a class="blog-nav-item" href="#">About</a>
        </nav>
      </div>
    </div>

    <div class="container">

      <div class="blog-header">
        <h1 class="blog-title">The Bootstrap Blog</h1>
        <p class="lead blog-description">The official example template of creating a blog with Bootstrap.</p>
      </div>

      <div class="row">

        <div class="col-sm-8 blog-main">

          <div class="blog-post">
            <h2 class="blog-post-title">Sample blog post</h2>
            <p class="blog-post-meta">January 1, 2014 by <a href="#">Mark</a></p>

            <p>This blog post shows a few different types of content that's supported and styled with Bootstrap. Basic typography, images, and code are all supported.</p>
            <hr>
            <p>Cum sociis natoque penatibus et magnis <a href="#">dis parturient montes</a>, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.</p>
            <blockquote>
              <p>Curabitur blandit tempus porttitor. <strong>Nullam quis risus eget urna mollis</strong> ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
            </blockquote>
            <p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
            <h2>Heading</h2>
            <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
            <h3>Sub-heading</h3>
            <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
            <pre><code>Example code block</code></pre>
            <p>Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.</p>
          </div><!-- /.blog-post -->

          <div class="blog-post">
            <h2 class="blog-post-title">Another blog post</h2>
            <p class="blog-post-meta">December 23, 2013 by <a href="#">Jacob</a></p>

            <p>Cum sociis natoque penatibus et magnis <a href="#">dis parturient montes</a>, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.</p>
            <blockquote>
              <p>Curabitur blandit tempus porttitor. <strong>Nullam quis risus eget urna mollis</strong> ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
            </blockquote>
            <p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
            <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
          </div><!-- /.blog-post -->

          <nav>
            <ul class="pager">
              <li><a href="#">Previous</a></li>
              <li><a href="#">Next</a></li>
            </ul>
          </nav>

        </div><!-- /.blog-main -->

        <div class="col-sm-3 col-sm-offset-1 blog-sidebar">
          <div class="sidebar-module sidebar-module-inset">
            <h4>About</h4>
            <p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
          </div>
          <div class="sidebar-module">
            <h4>Archives</h4>
            <ol class="list-unstyled">
              <li><a href="#">March 2014</a></li>
              <li><a href="#">February 2014</a></li>
              <li><a href="#">January 2014</a></li>
              <li><a href="#">December 2013</a></li>
              <li><a href="#">November 2013</a></li>
              <li><a href="#">October 2013</a></li>
              <li><a href="#">September 2013</a></li>
              <li><a href="#">August 2013</a></li>
              <li><a href="#">July 2013</a></li>
              <li><a href="#">June 2013</a></li>
              <li><a href="#">May 2013</a></li>
              <li><a href="#">April 2013</a></li>
            </ol>
          </div>
          <div class="sidebar-module">
            <h4>Elsewhere</h4>
            <ol class="list-unstyled">
              <li><a href="#">GitHub</a></li>
              <li><a href="#">Twitter</a></li>
              <li><a href="#">Facebook</a></li>
            </ol>
          </div>
        </div><!-- /.blog-sidebar -->

      </div><!-- /.row -->

    </div><!-- /.container -->

    <footer class="blog-footer">
      <p>Blog template built for <a href="http://getbootstrap.com">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p>
      <p>
        <a href="#">Back to top</a>
      </p>
    </footer>


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="../../dist/js/bootstrap.min.js"></script>
  </body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

<!DOCTYPE html>

<head>

<title>Blog Template for Bootstrap</title>

</head>

<body>

<a class="blog-nav-item" href="#">New features</a>

<a class="blog-nav-item" href="#">Press</a>

<a class="blog-nav-item" href="#">New hires</a>

<a class="blog-nav-item" href="#">About</a>

</nav>

</div>

<h1 class="blog-title">The Bootstrap Blog</h1>

<p class="lead blog-description">The official example template of creating a blog with Bootstrap.</p>

</div>

<h2 class="blog-post-title">Sample blog post</h2>

<p class="blog-post-meta">January 1, 2014 by <a href="#">Mark</a></p>

<p>This blog post shows a few different types of content that's supported and styled with Bootstrap. Basic typography, images, and code are all supported.</p>

<hr>

<p>Cum sociis natoque penatibus et magnis <a href="#">dis parturient montes</a>, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.</p>

<p>Curabitur blandit tempus porttitor. <strong>Nullam quis risus eget urna mollis</strong> ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

</blockquote>

<p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>

<h2>Heading</h2>

<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>

<h3>Sub-heading</h3>

<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>

<pre><code>Example code block</code></pre>

<p>Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.</p>

</div>

<h2 class="blog-post-title">Another blog post</h2>

<p class="blog-post-meta">December 23, 2013 by <a href="#">Jacob</a></p>

<p>Curabitur blandit tempus porttitor. <strong>Nullam quis risus eget urna mollis</strong> ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

</blockquote>

<p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>

</div>

<nav>

<li><a href="#">Previous</a></li>

</ul>

</nav>

</div>

<h4>About</h4>

<p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>

</div>

<h4>Archives</h4>

<li><a href="#">March 2014</a></li>

<li><a href="#">February 2014</a></li>

<li><a href="#">January 2014</a></li>

<li><a href="#">December 2013</a></li>

<li><a href="#">November 2013</a></li>

<li><a href="#">October 2013</a></li>

<li><a href="#">September 2013</a></li>

<li><a href="#">August 2013</a></li>

<li><a href="#">April 2013</a></li>

</ol>

</div>

<h4>Elsewhere</h4>

<li><a href="#">GitHub</a></li>

<li><a href="#">Twitter</a></li>

<li><a href="#">Facebook</a></li>

</ol>

</div>

</div>

</div>

</div>

<p>Blog template built for <a href="http://getbootstrap.com">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p>

<p>

</p>

</footer>

<!-- Bootstrap core JavaScript

================================================== -->

</body>

</html>

これをヘッダー、記事、サイドバー、フッターに分解してテーマにする。前回作成したテーマの雛形はこうだ。

ヘッダーを作る

ヘッダー部分をindex.htmlからheader.phpへ移す

まずは上の画像でheaderと書いてあるところを分解する。HTMLのhead要素と、body内のヘッダー部分をheader.phpへ移そう。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>Blog Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="../../dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="blog.css" rel="stylesheet">
  </head>

  <body>

    <div class="blog-masthead">
      <div class="container">
        <nav class="blog-nav">
          <a class="blog-nav-item active" href="#">Home</a>
          <a class="blog-nav-item" href="#">New features</a>
          <a class="blog-nav-item" href="#">Press</a>
          <a class="blog-nav-item" href="#">New hires</a>
          <a class="blog-nav-item" href="#">About</a>
        </nav>
      </div>
    </div>

    <div class="container">

<!DOCTYPE html>

<head>

<title>Blog Template for Bootstrap</title>

</head>

<body>

<a class="blog-nav-item" href="#">New features</a>

<a class="blog-nav-item" href="#">Press</a>

<a class="blog-nav-item" href="#">New hires</a>

<a class="blog-nav-item" href="#">About</a>

</nav>

</div>

html要素のlang属性の指定

WordPressが用意しているlanguage_attributesを使うことで、html要素のlang属性を言語設定に合わせられる。html要素内部をこのように書き換えよう。

<html <?php language_attributes(); ?>>

1	<html <?php language_attributes(); ?>>

ページタイトル

ページのタイトル（home | web-site みたいなやつ）を設定する。

まずはheader.phpのtitle要素を消し、functions.phpにadd_theme_support(‘title-tag’);を記述する。

<?php
if (!function_exists('exampletheme_setup')):
/**
 * Setup Example Theme.
 * @since Example Theme 1.0
 */
function exampletheme_setup() {
 add_theme_support('title-tag');
}
endif;

add_action('after_setup_theme', 'exampletheme_setup');

?>

<?php

if (!function_exists('exampletheme_setup')):

/**

* Setup Example Theme.

* @since Example Theme 1.0

function exampletheme_setup() {

add_theme_support('title-tag');

}

endif;

add_action('after_setup_theme', 'exampletheme_setup');

何やら、add_theme_support以外に色々な登場人物がいる。

まずadd_theme_supportを抱えるexampletheme_setup。これはセットアップ処理をまとめるために独自に作った関数で、テーマの初期化が終わった後に呼ばれるようadd_actionで指示している。もちろん、add_theme_supportをadd_actionに直接登録したっていい。

更にこの関数を括るif文は、子テーマでのカスタマイズを見越している。子テーマで同名の関数が定義された場合に、親テーマのセットアップ処理が走らないようにしているわけだ。

CSSの読み込み

テーマのCSSを読み込む

テーマのCSSファイルを読み込むため、head要素内のCSS用のlink要素を消し、functions.phpにwp_enqueue_styleを記述する。これはページにCSSを適用する関数だ。

まずはheader.phpから、テーマCSS読み込み用のこのlink要素を消す。

<!-- Custom styles for this template -->
<link href="blog.css" rel="stylesheet">

1 2	<!-- Custom styles for this template --> <link href="blog.css" rel="stylesheet">

functions.phpを開き、CSS読み込み処理を記述しよう。title要素を設定した時に書いた登録処理に続いて記述する。

function exampletheme_scripts() {
  wp_enqueue_style('exampletheme-style', get_stylesheet_uri());
}

add_action('wp_enqueue_scripts', 'exampletheme_scripts');

function exampletheme_scripts() {

wp_enqueue_style('exampletheme-style', get_stylesheet_uri());

}

add_action('wp_enqueue_scripts', 'exampletheme_scripts');

get_stylesheet_uriでテーマのCSSファイル（style.css）のURIを取得し、wp_enqueue_styleにexampletheme-styleで読み込みを指示している。第一引数に指定している『exampletheme-style』はこのCSSのハンドル名だ。あるCSSが他のCSSに依存するとき、この名前を使って依存先を指定することもできる。

ちなみにこの処理は子テーマによる上書きを期待していないため、title要素の時にやったような関数の存在判定はしない。

さて、WordPressテーマにスタイルを適用する設定はできたから、style.cssの中身を書けばここは一段落。シリーズ第二回でダウンロードしたBootstrapサイトのCSSを移し、先頭にテーマ名などの記述をする。この記述が無ければテーマのアップロードに失敗するから重要だ。

/*
 Theme Name: Example Theme
 Theme URI: https://clickan.click/
 Description: This is example theme.
 Version: 1.0
 Author: Yuki
 Author URI: https://clickan.click/
*/

/*
 * Globals
 */

body {
  font-family: Georgia, "Times New Roman", Times, serif;
  color: #555;
}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
  margin-top: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: normal;
  color: #333;
}


/*
 * Override Bootstrap's default container.
 */

@media (min-width: 1200px) {
  .container {
    width: 970px;
  }
}


/*
 * Masthead for nav
 */

.blog-masthead {
  background-color: #428bca;
  -webkit-box-shadow: inset 0 -2px 5px rgba(0,0,0,.1);
          box-shadow: inset 0 -2px 5px rgba(0,0,0,.1);
}

/* Nav links */
.blog-nav-item {
  position: relative;
  display: inline-block;
  padding: 10px;
  font-weight: 500;
  color: #cdddeb;
}
.blog-nav-item:hover,
.blog-nav-item:focus {
  color: #fff;
  text-decoration: none;
}

/* Active state gets a caret at the bottom */
.blog-nav .active {
  color: #fff;
}
.blog-nav .active:after {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 0;
  margin-left: -5px;
  vertical-align: middle;
  content: " ";
  border-right: 5px solid transparent;
  border-bottom: 5px solid;
  border-left: 5px solid transparent;
}


/*
 * Blog name and description
 */

.blog-header {
  padding-top: 20px;
  padding-bottom: 20px;
}
.blog-title {
  margin-top: 30px;
  margin-bottom: 0;
  font-size: 60px;
  font-weight: normal;
}
.blog-description {
  font-size: 20px;
  color: #999;
}


/*
 * Main column and sidebar layout
 */

.blog-main {
  font-size: 18px;
  line-height: 1.5;
}

/* Sidebar modules for boxing content */
.sidebar-module {
  padding: 15px;
  margin: 0 -15px 15px;
}
.sidebar-module-inset {
  padding: 15px;
  background-color: #f5f5f5;
  border-radius: 4px;
}
.sidebar-module-inset p:last-child,
.sidebar-module-inset ul:last-child,
.sidebar-module-inset ol:last-child {
  margin-bottom: 0;
}


/* Pagination */
.pager {
  margin-bottom: 60px;
  text-align: left;
}
.pager > li > a {
  width: 140px;
  padding: 10px 20px;
  text-align: center;
  border-radius: 30px;
}


/*
 * Blog posts
 */

.blog-post {
  margin-bottom: 60px;
}
.blog-post-title {
  margin-bottom: 5px;
  font-size: 40px;
}
.blog-post-meta {
  margin-bottom: 20px;
  color: #999;
}


/*
 * Footer
 */

.blog-footer {
  padding: 40px 0;
  color: #999;
  text-align: center;
  background-color: #f9f9f9;
  border-top: 1px solid #e5e5e5;
}
.blog-footer p:last-child {
  margin-bottom: 0;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

Theme Name: Example Theme

Theme URI: https://clickan.click/

Description: This is example theme.

Version: 1.0

Author: Yuki

Author URI: https://clickan.click/

* Globals

body {

font-family: Georgia, "Times New Roman", Times, serif;

color: #555;

}

h1, .h1,

h2, .h2,

h3, .h3,

h4, .h4,

h5, .h5,

h6, .h6 {

margin-top: 0;

font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

font-weight: normal;

color: #333;

}

* Override Bootstrap's default container.

@media (min-width: 1200px) {

.container {

width: 970px;

}

* Masthead for nav

.blog-masthead {

background-color: #428bca;

-webkit-box-shadow: inset 0 -2px 5px rgba(0,0,0,.1);

box-shadow: inset 0 -2px 5px rgba(0,0,0,.1);

}

/* Nav links */

.blog-nav-item {

position: relative;

display: inline-block;

padding: 10px;

font-weight: 500;

color: #cdddeb;

}

.blog-nav-item:hover,

.blog-nav-item:focus {

color: #fff;

text-decoration: none;

}

/* Active state gets a caret at the bottom */

.blog-nav .active {

color: #fff;

}

.blog-nav .active:after {

position: absolute;

bottom: 0;

left: 50%;

width: 0;

height: 0;

margin-left: -5px;

vertical-align: middle;

content: " ";

border-right: 5px solid transparent;

border-bottom: 5px solid;

border-left: 5px solid transparent;

}

* Blog name and description

.blog-header {

padding-top: 20px;

padding-bottom: 20px;

}

.blog-title {

margin-top: 30px;

margin-bottom: 0;

font-size: 60px;

font-weight: normal;

}

.blog-description {

font-size: 20px;

color: #999;

}

* Main column and sidebar layout

.blog-main {

font-size: 18px;

line-height: 1.5;

}

/* Sidebar modules for boxing content */

.sidebar-module {

padding: 15px;

margin: 0 -15px 15px;

}

.sidebar-module-inset {

padding: 15px;

background-color: #f5f5f5;

border-radius: 4px;

}

.sidebar-module-inset p:last-child,

.sidebar-module-inset ul:last-child,

.sidebar-module-inset ol:last-child {

margin-bottom: 0;

}

/* Pagination */

.pager {

margin-bottom: 60px;

text-align: left;

}

.pager > li > a {

width: 140px;

padding: 10px 20px;

text-align: center;

border-radius: 30px;

}

* Blog posts

.blog-post {

margin-bottom: 60px;

}

.blog-post-title {

margin-bottom: 5px;

font-size: 40px;

}

.blog-post-meta {

margin-bottom: 20px;

color: #999;

}

* Footer

.blog-footer {

padding: 40px 0;

color: #999;

text-align: center;

background-color: #f9f9f9;

border-top: 1px solid #e5e5e5;

}

.blog-footer p:last-child {

margin-bottom: 0;

}

テーマCSS以外のCSSを読み込む

場合によっては、style.css以外にも必要なCSSファイルがある。今回はBootstrapを下敷きにしているため、当然BootstrapのCSSを読まないといけない。

まずは、テーマのCSSを読み込んだ時と同じようにfunctions.phpを開き、exampletheme_scriptsに追記する。

function exampletheme_scripts() {
  // Bootstrap CSS 
  wp_enqueue_style( 'bootstrap-css', get_template_directory_uri() . '/css/bootstrap.min.css');

  // Theme CSS
  wp_enqueue_style('exampletheme-style', get_stylesheet_uri());
}

add_action('wp_enqueue_scripts', 'exampletheme_scripts');

function exampletheme_scripts() {

// Bootstrap CSS

wp_enqueue_style( 'bootstrap-css', get_template_directory_uri() . '/css/bootstrap.min.css');

// Theme CSS

wp_enqueue_style('exampletheme-style', get_stylesheet_uri());

}

add_action('wp_enqueue_scripts', 'exampletheme_scripts');

二つ目のwp_enqueue_styleでbootstrap用のCSSの読み込みを指示している。get_template_directory_uriでテーマディレクトリのURIが取れるので、そこから更に下へ潜って目的のCSSファイルを指している。このパスにCSSファイルを置こう。

この場合も、header.phpからCSS読み込み用のlink要素を消すのをお忘れなく。

favicon

ブラウザのタブ部分などに表示されるサイトのアイコン。これはWordPressのダッシュボードから変えられるので、あえて削っておく。header.phpでfaviconを読み込んでいる箇所を削除しよう。

<link rel="icon" href="../../favicon.ico">

1	<link rel="icon" href="../../favicon.ico">

wp_headアクション

テーマやプラグインがhead要素内で実行したい処理を呼び出すwp_headを</head>の直前に書く。

<!DOCTYPE html>
<html lang="en">
  <head>
~~ 省略 ~~

    <?php wp_head(); ?>

  </head>

<!DOCTYPE html>

<head>

~~ 省略 ~~

<?php wp_head(); ?>

</head>

bodyのclass指定

お次はbody_classの出番。この関数をbody要素内に書けば、ページに応じたclassがbodyに付与されるため、ページ毎に見栄えを変えたい時に役立つ。

<body <?php body_class(); ?>>

~~ 省略 ~~

~~ 省略 ~~

この関数を付けることで、例えば今回作成するページならhomeなるclassが付けられる。どのclassが付くかはページによって違うのだけれど、一部を抜き出すとこのようになる。

フロントページ – home
ブログ記事の一覧ページ – blog
単体記事ページ – sigle postid-(id), sigle-paged-(page number)

ページ毎のデザインを変えたい場合、わざわざ自分でclassを付けずとも、これら出来合いのclassを使うことができる便利設計となっている。body_classで追加されるclassはこちらに書いてあるから、適宜活用したい。

ナビゲーションメニュー

header.phpのコーディングもクライマックス。ここまで長かったけれど、あと一押し。ここでは、カスタムメニューを使ったナビゲーションメニューを作ってみよう。

カスタムメニューのHTMLのつくりは、div要素（あるいはnav要素）にulのリストが内包されたものだ。例えばこんな感じ。

<div>
  <ul>
    <li><a>メニューアイテム1</a></li>
    <li><a>メニューアイテム2</a></li>
  </ul>
</div>

<div>

<ul>

<li><a>メニューアイテム1</a></li>

<li><a>メニューアイテム2</a></li>

</ul>

</div>

次に、今回WordPressテーマ化するページのメニュー部分を見てみよう。

<nav class="blog-nav">
  <a class="blog-nav-item active" href="#">Home</a>
  <a class="blog-nav-item" href="#">New features</a>
  <a class="blog-nav-item" href="#">Press</a>
  <a class="blog-nav-item" href="#">New hires</a>
  <a class="blog-nav-item" href="#">About</a>
</nav>

<a class="blog-nav-item" href="#">New features</a>

<a class="blog-nav-item" href="#">Press</a>

<a class="blog-nav-item" href="#">New hires</a>

<a class="blog-nav-item" href="#">About</a>

</nav>

これをカスタムメニューに落としこむには、メニューを挿入する関数wp_nav_menuをオプション付きで呼び出せばいい。wp_nav_menuに渡す引数によってclassを付与できたり、メニューの作りを変えたり出来る。

header.phpのメニュー部分をこのように書き換えよう。

<div class="blog-masthead">
  <div class="container">
    <?php wp_nav_menu(array(
      'theme_location' => 'header-menu',
      'container' => 'nav',
      'container_class' => 'blog-nav')); ?>
  </div>
</div>

<?php wp_nav_menu(array(

'theme_location' => 'header-menu',

'container' => 'nav',

'container_class' => 'blog-nav')); ?>

</div>

今回は、メニューをnav要素で囲うためにcontainerにnavを指定するのと、そのnav要素に元あったclassを付けた。他にも色々といじれるから、困ったら先のレファレンスを見て欲しい。また、theme_locationで、header-menuなるメニューを使うようにしている。

次に、元のメニューと同じ見た目、動作になるよう、style.cssを修正しよう。

最後に、functions.phpのexampletheme_setup内に、カスタムメニューを有効化する処理を書く。wp_nav_menuで使用したメニュー名をregister_nav_menusに渡そう。これで、WordPressのダッシュボードからHeader Menuに対して変更を掛ければ自動的にヘッダー部のメニューが更新されるようになる。

register_nav_menus(array('header-menu' => 'Header Menu'));

1	register_nav_menus(array('header-menu' => 'Header Menu'));

header.php出来！

最終的にはこのようなheader.phpが完成した。

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">

    <?php wp_head(); ?>
  </head>

  <body <?php body_class(); ?>>

    <div class="blog-masthead">
      <div class="container">
        <?php wp_nav_menu(array(
          'theme_location' => 'header-menu',
          'container' => 'nav',
          'container_class' => 'blog-nav')); ?>
      </div>
    </div>

    <div class="container">

<!DOCTYPE html>

<head>

<?php wp_head(); ?>

</head>

<?php wp_nav_menu(array(

'theme_location' => 'header-menu',

'container' => 'nav',

'container_class' => 'blog-nav')); ?>

</div>

header.phpの作成はここまで。次回はサイドバーにあたるsidebar.phpを作る。

WordPressテーマで儲けちゃいますか？他にはあまりない、テーマ販売についての書籍

ちょっとづつ学ぶWordPressテーマの作り方 3 -ヘッダー-

WordPressテーマ作りの概要

WordPressテーマにするBootstrapサイトをおさらい

ヘッダーを作る

ヘッダー部分をindex.htmlからheader.phpへ移す

html要素のlang属性の指定

ページタイトル

CSSの読み込み

テーマのCSSを読み込む

テーマCSS以外のCSSを読み込む

favicon

wp_headアクション

bodyのclass指定

ナビゲーションメニュー

header.php出来！

Similar Posts

[最新版] All in One SEO Packの設定方法

ちょっとづつ学ぶWordPressテーマの作り方 4 -サイドバー、フッター-

ちょっとづつ学ぶWordPressテーマの作り方 2 -テーマの雛形作り-

wordpress on herokuでContact Form 7を使おうとして困った話。

お手軽！WordPressでAMPを使う方法と注意点

AWS EC2へWordPressを移行する方法。

More Posts

バットマン vs スーパーマンジャスティスの誕生日本公開まで八ヶ月だけれどネタバレしちゃう。

Visual Studio CodeのES6用拡張機能で爆速ES6コーディング

芸術の秋京都観光はギャラリーめぐりでアートを楽しんで

集客や会計に役立つ、フリーランスの美容師にオススメなツール6つ

Visual Studio Codeの拡張機能をTypeScriptで作る方法

ゆっくり楽しめるひとり飲み・ご飯にオススメな京都のお店 16選

Out of C#6. Swiftに近づくC#7

絶対に見た方がイイ名作アニメ映画 / OVAのおすすめ42選！第伍話

Visual Studio Codeのコマンドパレットでリスト(Quick Pick)を出す方法

Visual Studio Code 拡張機能を使ってASP.NET 5によるWebアプリを作ってみる。