部分テンプレートとその他のテンプレート

2020.04.03 2020.04.03

TOPICS

翻訳元記事はこちらです。

はじめに

すべてのテンプレートファイルがブラウザによってレンダリングされるコンテンツ全体を生成するわけではありません。
いくつかのテンプレートファイルは、comments.php、header.php、footer.php、sidebar.php、content-{$slug}.phpなどの他のテンプレートファイルに分けられます。
これらのテンプレートファイルの目的と構築方法を理解するために、それぞれのテンプレートファイルを順を追って説明していきます。

Header.php

header.phpファイルはあなたが期待するものを正確に実行します。このファイルには、ブラウザがヘッダーのためにレンダリングするすべてのコードが含まれています。これは部分的なテンプレートファイルであり、別のテンプレートファイルがテンプレートタグであるget_header()を呼び出さない限り、ブラウザはこのファイルの内容をレンダリングしません。

多くのサイトでは、ページや投稿に関係なく同じヘッダーを使用していることが多いです。しかし、サイトによっては、ページによってセカンダリナビゲーションやバナー画像が異なるなど、微妙なバリエーションを持っている場合もあります。あなたの header.php ファイルは、条件付きタグを使用することで、これらのバリエーションに対応することができます。

このファイルの機能性と保守性を考えると、ほとんどのテーマにはheader.phpファイルがあります。

以下は、Twenty fifteenテーマのheader.phpの例です。

<!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js">
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width">
    <link rel="profile" href="http://gmpg.org/xfn/11">
    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
    <!--[if lt IE 9]>
    <script src="<?php echo esc_url( get_template_directory_uri() ); ?>/js/html5.js"></script>
    <![endif]-->
    <?php wp_head(); ?>
</head>
  
<body <?php body_class(); ?>>
    <div id="page" class="hfeed site">
        <a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'twentyfifteen' ); ?></a>
        <div id="sidebar" class="sidebar">
            <header id="masthead" class="site-header" role="banner">
                <div class="site-branding">
                    <?php if ( is_front_page() && is_home() ) : ?>
                    <h1 class="site-title">
                        <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
                    </h1>
                    <?php else : ?>
                    <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
                    <?php endif;
                    $description = get_bloginfo( 'description', 'display' );
                    if ( $description || is_customize_preview() ) :
                        echo $description;
                    endif; ?>
                    <button class="secondary-toggle"><?php _e( 'Menu and widgets', 'twentyfifteen' ); ?></button>
                </div><!-- .site-branding -->
            </header><!-- .site-header -->
            <?php get_sidebar(); ?>
        </div><!-- .sidebar -->
        <div id="content" class="site-content">

最初は少し難解に見えるコードもあるかもしれませんが、分解してみるとシンプルです。
冒頭のコメントの後に、<head>が作成されます。テンプレートタグ wp_head() は、すべてのスタイルと、functions.php ファイルのヘッダーに表示されるスクリプトを取り込みます。

次に、<body>が始まり、HTMLとPHPが混在しています。<div class="site-branding">には、ユーザーが閲覧しているページに基づいて表示されるものを調整するための条件タグがいくつか表示されています。
次に、サイドバーを読み込みます。
最後に、メインのサイト<div id="content" class="site-content">が始まり、このタグはおそらくfooter.phpファイルで閉じられます。

注意すべき重要なテンプレートタグとして、bodyタグにあるbody_class()があります。これは非常に便利なタグで、テンプレートファイルやその他の設定に応じてbody classを与えることで、テーマのスタイリングをより簡単にしてくれます。

Footer.php

header.phpファイルと同様に、footer.phpはほとんどのテーマで利用されているテンプレートファイルです。
footer.phpファイル内のコードは、別のテンプレートファイルがget_footer()テンプレートタグを使ってfooter.phpを読み込まない限り、レンダリングされません。
ヘッダーと同様に、条件タグを使ってフッターのバリエーションを作ることができます。

多くの場合、開発者は、エンドユーザーが簡単に異なるコンテンツタイプをフッターにドロップ＆ドラッグできるように、ウィジェット化された領域をフッターに配置します。

以下は、Twenty Fifteenテーマのfooter.phpの例です。

</div>
  
  
<!-- .site-content -->
  
  
  
<footer id="colophon" class="site-footer" role="contentinfo">
  
  
<div class="site-info">
            <?php /** * Fires before the Twenty Fifteen footer text for footer customization. * * @since Twenty Fifteen 1.0 */ do_action( 'twentyfifteen_credits' ); ?>
            <a href="<?php echo esc_url( __( 'https://wordpress.org/', 'twentyfifteen' ) ); ?>"><?php printf( __( 'Proudly powered by %s', 'twentyfifteen' ), 'WordPress' ); ?></a>
        </div>
  
  
<!-- .site-info -->
    </footer>
  
  
<!-- .site-footer -->
  
</div>
  
  
<!-- .site -->
  
<?php wp_footer(); ?>
  
</body>
</html>

404.php

ユーザーが存在しないページにアクセスしようとすると、404.phpテンプレートを作成していない限り、index.phpページが表示されます。このテンプレートを作成することで、テーマの視覚的な側面を一貫性のあるものに保ち、エンドユーザーに有益な情報を提供することができます。

以下は、Twenty Fifteenテーマの404.phpの例です。

<?php get_header(); ?>
  
  
  
<div id="primary" class="content-area">
        <main id="main" class="site-main" role="main">
  
  
  
<section class="error-404 not-found">
  
  
<header class="page-header">
  
  
<h1 class="page-title"><?php _e( 'Oops! That page can’t be found.', 'twentyfifteen' ); ?></h1>
  
  
                </header>
  
  
<!-- .page-header -->
  
  
  
<div class="page-content">
  
  
<?php _e( 'It looks like nothing was found at this location. Maybe try a search?', 'twentyfifteen' ); ?>
  
  
                    <?php get_search_form(); ?>
                </div>
  
  
<!-- .page-content -->
            </section>
  
  
<!-- .error-404 -->
  
        </main><!-- .site-main -->
    </div>
  
  
<!-- .content-area -->
  
<?php get_footer(); ?>

Comments.php

comments.phpファイルは、あなたが期待するであろうコメントを正確に処理します。これは、ユーザーがページや投稿に残したコメントを表示するために、他のテンプレートファイルで読み込まれる部分テンプレートです。
いくつかの異なるページや投稿でコメントが表示されるので、必要に応じて1つのファイルにまとめておくのは理にかなっています。

コメントの作成に関わるコードについては、コメントテンプレートのページで詳しく説明しています。

Sidebar.php

多くのテーマでは、ウィジェットを表示するためにサイドバーを利用しています。
テーマでサイドバーを使用するためには、サイドバーを登録し、サイドバー用のテンプレートファイルを作成する必要があります。サイドバーの登録については、後の章で詳しく説明します。
サイドバーファイルには条件文と is_active_sidebar( 'sidebar-name' ) 関数が含まれていることが多く、空の HTML がページに不必要に追加されないように、サイドバー内でウィジェットが使用されていることを確認しています。

ここでは、twenty fifteenテーマのサイドバーテンプレートファイルの例を示します。下部のサイドバーが<?php dynamic_sidebar( 'sidebar-1' ); > のコードで読み込まれています。これで、サイドバーに入れられたウィジェットは、このテンプレートを使用しているページに表示されます。

if ( has_nav_menu( 'primary' ) || has_nav_menu( 'social' ) || is_active_sidebar( 'sidebar-1' ) ) : >
   
  
  
  
<div id="secondary" class="secondary"> 
  
    <?php if ( is_active_sidebar( 'sidebar-1' ) ) : >
   
  
  
  
<div id="widget-area" class="widget-area" role="complementary">
            <?php dynamic_sidebar( 'sidebar-1' ); >
        </div>
  
   
    <!-- .widget-area -->
    <?php endif; >
   
</div>
  
   
<!-- .secondary -->
   
<?php endif; >

Content-{$slug}.php

多くのテーマ開発者は、テンプレートファイルを小さく分割しています。
彼らはしばしばラッパーやページアーキテクチャの要素をpage.php、home.php、comments.phpなどのテンプレートファイルに入れますが、それらのページのコンテンツを表示するコードを別のテンプレートファイルに入れます。
content-{$slug}.phpを入力してください：一般的な例としては、content-page.php、content-post.php、content-portfolio.php、content-none.phpなどがあります。これらはWordPressが認識して特定の方法で解釈するファイル名ではなく、特定のタイプのコンテンツを表示するための一般的なアプローチです。

例えば、ブログの記事には、著者名、投稿日、投稿のカテゴリーを表示したいことがよくあります。また、前の記事や次の記事へのリンクも表示したいと思うでしょう。
このような情報は通常のページでは適切ではありません。
同様に、ポートフォリオページでは、ブログの記事やページのアイキャッチ画像を別のレイアウトで表示したいことがあるでしょう。

content-{$slug}.phpファイルを読み込むには、get_template_part() テンプレートタグを使用します。content-page.phpファイルを取り込むには、get_template_part( 'content', 'page' )を呼び出します。

以下はtwenty fifteenテーマの content-page.php のコードです。

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <?php // Post thumbnail. twentyfifteen_post_thumbnail(); ?>
  
  
  
<header class="entry-header">
        <?php the_title( '
  
<h1 class="entry-title">', '</h1>
  
  
' ); ?>
    </header>
  
  
<!-- .entry-header -->
  
  
  
<div class="entry-content">
        <?php the_content(); ?>
        <?php wp_link_pages( array( 'before' => '
  
<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentyfifteen' ) . '</span>',
                'after'       => '</div>
  
  
',
                'link_before' => '<span>',
                'link_after'  => '</span>',
                'pagelink'    => '<span class="screen-reader-text">' . __( 'Page', 'twentyfifteen' ) . ' </span>%',
                'separator'   => '<span class="screen-reader-text">, </span>',
            ) );
        ?>
    </div>
  
  
<!-- .entry-content -->
  
    <?php edit_post_link( __( 'Edit', 'twentyfifteen' ), '
  
<footer class="entry-footer"><span class="edit-link">', '</span></footer>
  
  
<!-- .entry-footer -->' ); ?>
  
</article>
  
  
<!-- #post-## -->