WordPress テンプレートファイルに分割

  Code Tips minimum Theme

 

Code Tips minimum Theme」では極力シンプルに作成してきたので、最低限のファイル【style.css】と【index.php】と【functions.php】の3つのファイルで作ってきました。

 

この中の【index.php】が持つ機能が増えてきたので、表示する条件に合わせてファイルを出しわけるように「テンプレートファイル」に分割してみます。

WordPress テンプレートファイルとテンプレート階層

 

【index.php】を分割

まず、前回までの【index.php】を

  • 【header.php】
  • 【index.php】
  • 【footer.php】

の3つのファイルに分割してみます。

 

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
  <meta charset="<?php bloginfo( 'charset' ); ?>">
  <title><?php wp_title('|', true, 'right'); ?><?php bloginfo('name'); ?></title>
  <?php wp_head(); ?>
</head>
<body>
  <h1><a href="<?php bloginfo('url'); ?>/"><?php bloginfo('name'); ?></a></h1>
  <!-- ここで分割します -->
  <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
  <?php echo get_the_date(); ?>
 
  <?php if (is_single()) : ?>
  <?php the_title( '<h2>', '</h2>' ); ?>
  <?php the_content(); ?>
  <?php previous_post_link('%link','← Older'); ?> | <?php next_post_link('%link','Newer →'); ?>
  
  <?php elseif (is_home()) : ?>
  <?php the_title( '<h2><a href="' . esc_url( get_permalink() ) . '">', '</a></h2>' ); ?>
  <?php the_content('続きを読む…'); ?>
  
  <?php else : ?>
  <?php the_title( '<h2><a href="' . esc_url( get_permalink() ) . '">', '</a></h2>' ); ?>
  <?php endif; ?>

  <?php endwhile; ?>
  <?php
    $pagination_param = array(
      'mid_size' => 2,
      'prev_text' => '&lt;',
      'next_text' => '&gt;',
      'screen_reader_text' => 'Page Navigation'
    );
    the_posts_pagination($pagination_param);
  ?>
  <?php endif; ?>
<!-- ここで分割します -->
</body>
</html>

 

header.php

新規にphpファイルを作り、【header.php】として保存します。
【index.php】の <!DOCTYPE html> から </h1> までをコピーして【header.php】に貼付けます。

</head> の前に wp_head() があることを確認します。

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
  <meta charset="<?php bloginfo( 'charset' ); ?>">
  <title><?php wp_title('|', true, 'right'); ?><?php bloginfo('name'); ?></title>
  <?php wp_head(); ?>
</head>
<body>
  <h1><a href="<?php bloginfo('url'); ?>/"><?php bloginfo('name'); ?></a></h1>

 

footer.php

次に【footer.php】も同じように新規にphpファイルを作り、【footer.php】として保存します。
</body></html> を書きます。
</body> の前に <?php wp_footer(); ?> を記述します。

<?php wp_footer(); ?>
</body>
</html>

 

wp_head() と wp_footer()

wp_head()wp_footer() はそれぞれ「アクションフック」をスタートさせるために必要になるので必ず入れておきます。

 

index.php : get_header() と get_footer()

最後に【index.php】を修正します。
header部分とfooter部分を削除して【header.php】と【footer.php】を読み込むテンプレートタグ get_header() と  get_footer() を追加します。

 

get_header()

現在のテーマディレクトリの header.php テンプレートファイルを読み込みます。名前(name)を指定すると、指定したヘッダー header-{name}.php を読み込みます。
header.php ファイルがテーマに含まれていない場合は、デフォルトテーマの wp-includes/theme-compat/header.php を読み込みます。

WordPress Codex : 関数リファレンス/get header

get_header( $name )

 

パラメータ
引数 説明
$name
文字列
オプション
header-name.php を読み込む
初期値: なし

 

get_footer()

現在のテーマディレクトリの footer.php テンプレートファイルを 読み込みます 。 名前 (name) を指定すると、指定した footer-{name}.php を読み込みます。
footer.php ファイルがテーマに含まれていない場合は、デフォルトテーマの wp-includes/theme-compat/footer.php を読み込みます。

WordPress Codex : 関数リファレンス/get footer

get_footer( $name )

 

パラメータ
引数 説明
$name
文字列
オプション
footer-name.php を読み込む
初期値: なし

 

<?php get_header(); ?>
  <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
・・・略 ・・・
  <?php endif; ?>
<?php get_footer(); ?>

 

これで【header.php】・【index.php】・【footer.php】の3つのファイルに分割できました。

 

条件分岐している箇所の分割

次に、【index.php】の中で条件分岐している部分もテンプレートファイルに分割してみます。

分割するファイルは

  • 【index.php】
  • 【home.php】
  • 【single.php】

の3つのファイルになります。

<?php get_header(); ?>
  <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
  <?php echo get_the_date(); ?>
 
  <?php if (is_single()) : ?><!-- ここを分割します -->
  <?php the_title( '<h2>', '</h2>' ); ?>
  <?php the_content(); ?>
  <?php previous_post_link('%link','← Older'); ?> | <?php next_post_link('%link','Newer →'); ?>
  
  <?php elseif (is_home()) : ?><!-- ここを分割します -->
  <?php the_title( '<h2><a href="' . esc_url( get_permalink() ) . '">', '</a></h2>' ); ?>
  <?php the_content('続きを読む…'); ?>
  
  <?php else : ?>
  <?php the_title( '<h2><a href="' . esc_url( get_permalink() ) . '">', '</a></h2>' ); ?>
  <?php endif; ?>

  <?php endwhile; ?>
  <?php
    $pagination_param = array(
      'mid_size' => 2,
      'prev_text' => '&lt;',
      'next_text' => '&gt;',
      'screen_reader_text' => 'Page Navigation'
    );
    the_posts_pagination($pagination_param);
  ?>
  <?php endif; ?>
<?php get_footer(); ?>

 

single.php

次に【index.php】のループ内で条件分岐している is_single() の部分を【single.php】に分割してみます。

個別の投稿を表示するテンプレートファイルになります。

【index.php】のコピーを【single.php】として保存します。
【single.php】のなかで、条件分岐してある部分の is_single() のブロック以外を削除します。
アーカイブページ用のページネーション the_posts_pagination() も必要ないので削除します。
タイトルの後に投稿日がくるように get_the_date() を移動します。

<?php get_header(); ?>
  <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
 
  <?php the_title( '<h2>', '</h2>' ); ?>
  <?php echo get_the_date(); ?>
  <?php the_content(); ?>
  <?php previous_post_link('%link','&lt; PREVIOUS'); ?> | <?php next_post_link('%link','NEXT &gt;'); ?>

  <?php endwhile; ?>
  <?php endif; ?>
<?php get_footer(); ?>

 

home.php

次に【index.php】のループ内で条件分岐している is_home() の部分を【home.php】に分割してみます。

サイトのフロントページ(トップページ・インデックスページ)を表示するテンプレートファイルになります。

【index.php】のコピーを【home.php】として保存します。
【home.php】のなかで、条件分岐してある部分の is_home() のブロック以外を削除します。

the_content('続きを読む…') の後に投稿日がくるように get_the_date() を移動します。

<?php get_header(); ?>
  <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

  <?php the_title( '<h2><a href="' . esc_url( get_permalink() ) . '">', '</a></h2>' ); ?>
  <?php the_content('続きを読む…'); ?>
  <?php echo get_the_date(); ?>
  <?php endwhile; ?>
  <?php
    $pagination_param = array(
      'mid_size' => 2,
      'prev_text' => '&lt;',
      'next_text' => '&gt;',
      'screen_reader_text' => 'Page Navigation'
    );
    the_posts_pagination($pagination_param);
  ?>
  <?php endif; ?>
<?php get_footer(); ?>

 

index.php

【index.php】から条件分岐していた部分を削除します。

タイトルの後に投稿日がくるように get_the_date() を移動します。

<?php get_header(); ?>
  <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

  <?php the_title( '<h2><a href="' . esc_url( get_permalink() ) . '">', '</a></h2>' ); ?>
  <?php echo get_the_date(); ?>

  <?php endwhile; ?>
  <?php
    $pagination_param = array(
      'mid_size' => 2,
      'prev_text' => '&lt;',
      'next_text' => '&gt;',
      'screen_reader_text' => 'Page Navigation'
    );
    the_posts_pagination($pagination_param);
  ?>
  <?php endif; ?>
 
  <?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
  <?php dynamic_sidebar( 'sidebar-1' ); ?>
  <?php endif; ?>
<?php get_footer(); ?>

 

以上で「テンプレートファイル」の分割は完了です。

 

Code Tips minimum Theme

【header.php】

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
  <meta charset="<?php bloginfo( 'charset' ); ?>">
  <title><?php wp_title('|', true, 'right'); ?><?php bloginfo('name'); ?></title>
  <?php wp_head(); ?>
</head>
<body>
  <h1><a href="<?php bloginfo('url'); ?>/"><?php bloginfo('name'); ?></a></h1>

 

【index.php】

<?php get_header(); ?>
  <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

  <?php the_title( '<h2><a href="' . esc_url( get_permalink() ) . '">', '</a></h2>' ); ?>
  <?php echo get_the_date(); ?>

  <?php endwhile; ?>
  <?php
    $pagination_param = array(
      'mid_size' => 2,
      'prev_text' => '&lt;',
      'next_text' => '&gt;',
      'screen_reader_text' => 'Page Navigation'
    );
    the_posts_pagination($pagination_param);
  ?>
  <?php endif; ?>
 
  <?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
  <?php dynamic_sidebar( 'sidebar-1' ); ?>
  <?php endif; ?>
<?php get_footer(); ?>

 

【footer.php】

<?php wp_footer(); ?>
</body>
</html>

 

【home.php】

<?php get_header(); ?>
  <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

  <?php the_title( '<h2><a href="' . esc_url( get_permalink() ) . '">', '</a></h2>' ); ?>
  <?php echo get_the_date(); ?>
  <?php the_content('続きを読む…'); ?>

  <?php endwhile; ?>
  <?php
    $pagination_param = array(
      'mid_size' => 2,
      'prev_text' => '&lt;',
      'next_text' => '&gt;',
      'screen_reader_text' => 'Page Navigation'
    );
    the_posts_pagination($pagination_param);
  ?>
  <?php endif; ?>
<?php get_footer(); ?>

 

【single.php】

<?php get_header(); ?>
  <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
 
  <?php the_title( '<h2>', '</h2>' ); ?>
  <?php echo get_the_date(); ?>
  <?php the_content(); ?>
  <?php previous_post_link('%link','&lt; PREVIOUS'); ?> | <?php next_post_link('%link','NEXT &gt;'); ?>

  <?php endwhile; ?>
  <?php endif; ?>
<?php get_footer(); ?>