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

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

Contents [hide]

1 WordPressテーマ作りの概要
2 WordPressテーマにするBootstrapサイトをおさらい
3 サイドバーを作る
- 3.1 サイドバーの登録
- 3.2 サイドバーの呼び出し
4 フッターを作る
- 4.1 JavaScriptを読み込む

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>

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

サイドバーを作る

header.phpを作りながら、「WordPressテーマ作るのめんどくさい」と思った人はいないだろうか？確かに、ヘッダーは他の部品（サイドバーやフッター）と比べてやることが多い。それは逆に、ヘッダーさえこなしてしまえば後はお茶の子サイサイってことでもある。というわけで、サイドバーはサクッと終わらせちゃおう。

まずは元のサイドバーの構造を確認する。

<div class="col-sm-3 col-sm-offset-1 blog-sidebar">
  <div class="sidebar-module sidebar-module-inset">
    <h4>ウィジェット1のタイトル</h4>
    ~~ ウィジェット1の内容 省略 ~~
  </div>
  <div class="sidebar-module">
    <h4>ウィジェット2のタイトル</h4>
    ~~ ウィジェット2の内容 省略~~
  </div>
  <div class="sidebar-module">
    <h4>ウィジェット3のタイトル</h4>
    ~~ ウィジェット3の内容 省略~~
  </div>
</div>

<h4>ウィジェット1のタイトル</h4>

~~ ウィジェット1の内容省略 ~~

</div>

<h4>ウィジェット2のタイトル</h4>

~~ ウィジェット2の内容省略~~

</div>

<h4>ウィジェット3のタイトル</h4>

~~ ウィジェット3の内容省略~~

</div>

divの下に、各ウィジェットがdivで区切られて配置されているのが分かる。このレイアウトを守りつつ、各ウィジェットをWordPressのダッシュボードから動的に決められるよう、register_sidebarとis_active_sidebar、それからdynamic_sidebarを使う。

サイドバーの登録

まずはfunctions.phpにて、register_sidebarによるサイドバーの登録を行う。header.phpを作成した時に使ったfunctions.php内のセットアップ処理とは別に、ウィジェットの初期化処理（exampletheme_widgets_init）を用意しよう。

function exampletheme_widgets_init() {
  register_sidebar(array(
    'name' => 'Sidebar',
    'id' => 'sidebar-1',
    'description' => 'This is right side bar.',
    'before_widget' => '<div id="%1$s" class="sidebar-module %2$s">',
    'after_widget' => '</div>',
    'before_title' => '<h4>',
    'after_title' => '</h4>'
  ));
}

add_action('widgets_init', 'exampletheme_widgets_init');

function exampletheme_widgets_init() {

register_sidebar(array(

'name' => 'Sidebar',

'id' => 'sidebar-1',

'description' => 'This is right side bar.',

'before_widget' => '<div id="%1$s" class="sidebar-module %2$s">',

'after_widget' => '</div>',

'before_title' => '<h4>',

'after_title' => '</h4>'

));

}

add_action('widgets_init', 'exampletheme_widgets_init');

register_sidebarに渡している、name、id、それからdescriptionはそのままサイドバーの名前、ID、説明を表している。元のサイドバーの構造にするために重要なのがbefore_widget以降の引数だ。before_widgetとafter_widgetでウィジェットを囲む要素を指定し、before_titleとafter_titleとでウィジェットのタイトル部分をデザインしている。

before_widgetに渡している%1$sと%2$sによって、各ウィジェットに固有のidとclassを付与できる。元のサイドバーで、最も上のウィジェットだけは白枠が付いているけれど、特定のウィジェットだけを修飾したいときに活用しよう。

サイドバーの呼び出し

こうして登録したサイドバーはdynamic_sidebarなる関数で呼び出せるけれど、その前にis_active_sidebarで有効かどうかを確認することが推奨されている。

先ほど登録したサイドバー『sidebar-1』を呼び出すのを例に取るとこのように使う。

<aside class="col-sm-3 col-sm-offset-1 blog-sidebar">
 <?php if (is_active_sidebar('sidebar-1')): ?>
  <?php dynamic_sidebar('sidebar-1'); ?>
 <?php endif; ?>
</aside>

<?php if (is_active_sidebar('sidebar-1')): ?>

<?php dynamic_sidebar('sidebar-1'); ?>

<?php endif; ?>

</aside>

フッターを作る

今回はもう一つ、フッターを作るところまでやってみよう。

まずはページのフッター部分（今回の例で言えばfooter要素１つ上のdivから下）をfooter.phpへ移す。

    </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>

</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>

JavaScriptを読み込む

今回取り上げたBootstrap公式サンプルでは、JavaScriptをページの最後で読み込んでいる。これはサイト高速化テクニックの１つで、JavaScriptの読み込みでレンダリングが遅れることを防いでいる。

今回読み込んでいるのはjQueryとBootstrapの２つ。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>

1 2	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="../../dist/js/bootstrap.min.js"></script>

このうち、jQueryはWordPressが自動で読み込む（場所はheader.phpのwp_headを記述したところ）。そのため、今回はBootstrapの読み込みを指定するだけでいい。

まずはこのscript要素を消し、本シリーズのヘッダー編で作成した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());

   // Bootstrap JS
   wp_enqueue_script(
    'bootstrap-js',
    get_template_directory_uri() . '/js/bootstrap.min.js',
    array('jquery'),
    '',
    true);
}

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());

// Bootstrap JS

wp_enqueue_script(

'bootstrap-js',

get_template_directory_uri() . '/js/bootstrap.min.js',

array('jquery'),

'',

true);

}

add_action('wp_enqueue_scripts', 'exampletheme_scripts');

wp_enqueue_scriptでJavaScriptを読み込める。

第一引数はJavaScriptファイルのハンドル名（WordPress内で扱うための名前）、第二引数はファイルパスとなっている。

注目したいのは三番目。jQueryに依存することを示している（WordPress内ではjqueryというハンドル名で扱える）。これで、jQueryの読み込み完了後にBootstrapが読み込まれる。

最後にtrueとしているのは、このJavaScriptをフッター内で読み込むという指示だ（wp_footerを記述した場所で読み込まれる）。

footer.phpのscript要素の削除、functions.phpでの読み込み処理の追加が終わったら、WordPressテーマのjsフォルダにbootstrap.min.jsを追加しよう。

次回はトップページを作り、WordPressテーマを完成させる。

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

Webデザイナーのための WordPressテーマストアの作り方: なぜ海外のWebデザイナーはテーマを作り続けるのか？

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

WordPressテーマ作りの概要

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

サイドバーを作る

サイドバーの登録

サイドバーの呼び出し

フッターを作る

JavaScriptを読み込む

Similar Posts

WordPressで記事のアイキャッチ(サムネイル)画像一覧を出す方法

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

集客力アップ！All in One SEO Packでブログ記事のSEO対策

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

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

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

More Posts

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

Web集客でインスタグラムを使う際におすすめなハッシュタグ

[C# LINQ] SelectとSelectManyの使い分けとforeachでインデックスを使う方法。

Hello LINQ world. 野暮ったいC#コードから卒業したいアナタへ。LINQ 基本の4つ。

クレジットカードが使える飲食店には外国人が集まる！Square(スクエア)でカード決済を導入しよう。

悩めるAirbnbホストへ。これさえ守れば予約される。良きホストになるための4つのルール

[C#]イマイチ分かりにくいIDisposableの実装方法をまとめる。

[C#] 数値を列挙型(enum)へ変換する方法

[永久保存版] C#のイマドキな開発環境はこれなのですぞ。

[C# LINQ] Whereの使い方から注意点まで