こんにちは
前回はWordPressテーマの構造を理解するために最小のテーマを作りました。
このテーマはページをすべてindex.phpに詰め込んでわずか３ファイルで作られています。
今回は、この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(); ?>