hollywis's diary (はりうすブログ)

システム会社:合同会社はりうすの活動日記です

自作Wordpressのテーマモジュールを分割する

f:id:hollywis:20180905101223j:plain

こんにちは

前回はWordpressテーマの構造を理解するために最小のテーマを作りました。 このテーマはページをすべてindex.phpに詰め込んでわずか3ファイルで作られています。

hollywis.hatenablog.com

今回は、このindex.phpを機能毎に分割してより構造的なテンプレートに変えたいと思います。

前回のindex.phpはこちら

<!DOCTYPE html><!--html宣言-->
<html lang="ja"><!--日本語指定-->
<head>
  <meta charset="UTF-8"><!--エンコード:UTF-8指定 -->
  <title><?php wp_title(' | ', true, 'right'); bloginfo('name'); ?></title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0 "><!--スマホ用:viewportの設定-->
  <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>"><!--CSSの呼び出し-->
  <?php wp_head(); ?><!--headの追加コード -->
</head>
<body>

  <header class="site-header">
    <h1><?php bloginfo('name'); ?></h1>
    ヘッダーをここに記述
  </header>
  <div class="container">
    <div class="wrap">
        <!-- このあたりから上の行をheader.phpに切り出すのが一般的 -->
        <div id="primary" class="main">
            メイン部分
          <?php if(is_home()) : ?><!--メインページの時 -->
              <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
              <article class="entry">
                <h2 class="entry-head"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                <div class="entry-body">
                  <?php the_content(); ?>
                </div>
              </article>
              <?php endwhile; endif; ?>
          <?php elseif(is_single()) : ?><!-- 投稿ページの時 -->
            <?php while ( have_posts() ) : the_post(); ?>
            <h1><?php the_title() ?></h1>
            <div>
              <?php the_content(); ?>
            </div>
            <?php endwhile; ?>
          <?php elseif(is_page()) : ?><!-- 固定ページの時 -->
              <?php while ( have_posts() ) : the_post(); ?>
            <h1><?php the_title() ?></h1>
            <div>
              <?php the_content(); ?>
            </div>
            <?php endwhile; ?>
          <?php endif; ?>
          
        </div>
        <aside id="scecondary" class="site-side">
          サイドバーをここに記述
           <!-- (sidebar.phpに切り出すのが一般的)-->
        </aside>
        </div>
  </div>
  <!-- このあたりから下の行をfooter.phpに切り出すのが一般的-->
  <footer class="site-footer">
    フッターをここに記述
  </footer>
  <?php wp_footer(); ?><!--footerの追加コード -->
</body>
</html>

このファイルを分割します。

Wordpressテーマの分割仕方にはセオリーがあります。 ヘッダーやフッター、サイドバーなどサイト全体に共通する部分をモジュールとして分割します。 このような共通する部分はテンプレートファイルではなく、モジュールテンプレートファイルとして 分割して読み込むようにしておくと便利です。

テンプレートファイルを分割する

ヘッダーやフッター、サイドバーWordPressであらかじめこれらを読み込むための命令文が用意されており ファイル名も決められています。

ファイル名は次の通りです。

また、それぞれ読み込むための命令文は次の通りです。

header.php

コンテンツが表示される直前までを全て丸っとheader.phpに切り出しました。

このheader.phpを読み込めばmeta設定や、ナビゲーション、サイトタイトルなどがサクッと設定できる想定です。

<!DOCTYPE html><!--html宣言-->
<html lang="ja"><!--日本語指定-->
<head>
  <meta charset="UTF-8"><!--エンコード:UTF-8指定 -->
  <title><?php wp_title(' | ', true, 'right'); bloginfo('name'); ?></title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0 "><!--スマホ用:viewportの設定-->
  <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>"><!--CSSの呼び出し-->
  <?php wp_head(); ?><!--headの追加コード -->
</head>
<body>

  <header class="site-header">
    <h1><?php bloginfo('name'); ?></h1>
    ヘッダーをここに記述
  </header>
  <div class="container">
    <div class="wrap">

index.php

コンテンツ部分をindex.phpとして切り出しました。

後々、投稿ページsingle.phpや固定ページpage.phpなども、この部分を置き換える形で利用する想定です。

   <?php get_header(); ?>
            <!-- このあたりから上の行をheader.phpに切り出すのが一般的 --> 
        <div id="primary" class="main">
            メイン部分
          <?php if(is_home()) : ?><!--メインページの時 -->
              <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
              <article class="entry">
                <h2 class="entry-head"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                <div class="entry-body">
                  <?php the_content(); ?>
                </div>
              </article>
              <?php endwhile; endif; ?>
          <?php elseif(is_single()) : ?><!-- 投稿ページの時 -->
            <?php while ( have_posts() ) : the_post(); ?>
            <h1><?php the_title() ?></h1>
            <div>
              <?php the_content(); ?>
            </div>
            <?php endwhile; ?>
          <?php elseif(is_page()) : ?><!-- 固定ページの時 -->
              <?php while ( have_posts() ) : the_post(); ?>
            <h1><?php the_title() ?></h1>
            <div>
              <?php the_content(); ?>
            </div>
            <?php endwhile; ?>
          <?php endif; ?>
          
        </div>
        <?php get_sidebar(); ?>
     </div>
  </div>
  <!-- このあたりから下の行をfooter.phpに切り出すのが一般的-->
  <?php get_footer(); ?>

sidebar.php

サイドバーのタグをそのまま切り出しています。

<aside id="scecondary" class="site-side">
          サイドバーをここに記述
           <!-- (sidebar.phpに切り出すのが一般的)-->
        </aside>

footer.php

タグから下を丸っと切り出しています。

  <footer class="site-footer">
    フッターをここに記述
  </footer>
  <?php wp_footer(); ?><!--footerの追加コード -->
</body>
</html>

このように4つのファイルに分割しました。 それぞれ、index.phpの上側を<?php get_header(); ?>に置き換え、 index.php<?php get_footer(); ?>に置き換え、 index.phpのサイドバー部分を<?php get_sidebar(); ?>で置き換えています。

wp_head()とwp_footer()について

header.phpにはwp_head()が、footer.phpにはwp_footer()が記述されているかと思います。 これは、WordPressプラグインがこのタグを利用して、様々なコードを出力します。 この記述がないとプラグインが正常に稼働しなくなりますので、忘れずに記述しましょう。

wp_head()記述例

<?php wp_head(); ?>

wp_footer()記述例

<?php wp_footer(); ?>