はじめに

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

Header.php

  2. 多くのサイトは、ページや投稿に関係なく同じヘッダーを持っています。しかし、一部のサイトでは、ページに応じてセカンダリナビゲーションや異なるバナー画像などのわずかなバリエーションがあります。あなたの`````header.php`````ファイルは、[条件付きタグ](/read/wordpress/27ca28664440fcc0.md)を使用すれば、これらのすべてのバリエーションを処理できます。  
  4. ほとんどのテーマには`````header.php`````ファイルがあり、このファイルの機能性と保守性はその作成をほぼ要求します。  
  6. 以下は、twenty fifteenテーマに見られるheader.phpの例です。  
  9. ``````bash
  10. <!DOCTYPE html>
  11. <html <?php language_attributes(); ?> class="no-js">
  12. <head>
  13.    <meta charset="<?php bloginfo( 'charset' ); ?>">
  14.    <meta name="viewport" content="width=device-width">
  15.    <link rel="profile" href="http://gmpg.org/xfn/11">
  16.    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
  17.    <!--[if lt IE 9]>
  18.    <script src="<?php echo esc_url( get_template_directory_uri() ); ?>/js/html5.js"></script>
  19.    <![endif]-->
  20.    <?php wp_head(); ?>
  21. </head>
  23. <body <?php body_class(); ?>>
  24.    <div id="page" class="hfeed site">
  25.    <a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'twentyfifteen' ); ?></a>
  26.    <div id="sidebar" class="sidebar">
  27.    <header id="masthead" class="site-header" role="banner">
  28.    <div class="site-branding">
  29.    <?php if ( is_front_page() && is_home() ) : ?>
  30.    <h1 class="site-title">
  31.    <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
  32.    </h1>
  33.    <?php else : ?>
  34.    <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
  35.    <?php endif;
  36.    $description = get_bloginfo( 'description', 'display' );
  37.    if ( $description || is_customize_preview() ) :
  38.    echo $description;
  39.    endif; ?>
  40.    <button class="secondary-toggle"><?php _e( 'Menu and widgets', 'twentyfifteen' ); ?></button>
  41.    </div><!-- .site-branding -->
  42.    </header><!-- .site-header -->
  43.    <?php get_sidebar(); ?>
  44.    </div><!-- .sidebar -->
  45.    <div id="content" class="site-content">
  46. `

最初はコードが少し daunting に見えるかもしれませんが、分解すると十分にシンプルになります。オープニングコメントの後、headが作成されます。テンプレートタグwp_head()は、私たちのスタイルと、functions.phpファイルでキューに入れたフッターではなくヘッダーに表示されるスクリプトをすべて引き込みます。

次に、bodyが開かれ、HTMLとPHPの混合が存在します。サイトブランディングのdiv内にあるいくつかの条件付きタグは、ユーザーがいるページに基づいて表示される内容を少し調整します。次に、サイトナビゲーションが引き込まれます。最後に、メインサイトコンテンツのdivが開かれ、footer.phpファイルで閉じられる可能性が高いです。

重要なテンプレートタグの一つは、body_class()で、bodyタグのオープニングに見られます。これは、テンプレートファイルや使用されている他の設定に応じてボディクラスを提供することで、テーマのスタイリングを非常に簡単にする便利なタグです。

  2. 多くの場合、開発者は[ウィジェットエリア](/read/wordpress/04cc9481108cdfdf.md)をフッターに配置し、エンドユーザーが異なるコンテンツタイプをフッターに簡単にドラッグアンドドロップできるようにします。  
  4. 以下は、Twenty Fifteenテーマの`````footer.php`````ファイルの例です。  
  7. ``````bash
  8. </div><!-- .site-content -->
  10. <footer id="colophon" class="site-footer" role="contentinfo">
  12.     <div class="site-info">
  14.         <?php
  15.         /**
  16.          * Fires before the Twenty Fifteen footer text for footer customization.
  17.          *
  18.          * @since Twenty Fifteen 1.0
  19.          */
  20.         do_action( 'twentyfifteen_credits' );
  21.         ?>
  22.         <a href="<?php echo esc_url( __( 'https://wordpress.org/', 'twentyfifteen' ) ); ?>"><?php printf( __( 'Proudly powered by %s', 'twentyfifteen' ), 'WordPress' ); ?></a>
  24.     </div><!-- .site-info -->
  26. </footer><!-- .site-footer -->
  28. </div><!-- .site -->
  30. <?php wp_footer(); ?>
  32. </body>
  33. </html>
  34. `

404.php

ユーザーが存在しないページを訪れようとすると、404.phpテンプレートを作成していない限り、index.phpページにリダイレクトされます。ページが見つからないか、もはや利用できないことを説明するメッセージを持つことは良いアイデアです。このテンプレートを作成することで、テーマの視覚的な側面を一貫性のあるものに保ち、エンドユーザーに役立つ情報を提供します。

以下は、twenty fifteenテーマの404.phpテンプレートファイルの例です。 

  1. <?php get_header(); ?>
  3. <div id="primary" class="content-area">
  5.     <main id="main" class="site-main" role="main">
  7.         <section class="error-404 not-found">
  9.             <header class="page-header">
  10.             <h1 class="page-title"><?php _e( 'Oops! That page can’t be found.', 'twentyfifteen' ); ?></h1>
  11.             </header><!-- .page-header -->
  13.             <div class="page-content">
  14.             <?php _e( 'It looks like nothing was found at this location. Maybe try a search?', 'twentyfifteen' ); ?>
  15.             <?php get_search_form(); ?>
  16.             </div><!-- .page-content -->
  18.         </section><!-- .error-404 -->
  20.     </main><!-- .site-main -->
  22. </div><!-- .content-area -->
  24. <?php get_footer(); ?>

Comments.php

  2. コメントを作成する際に関与するコードについては、[コメントテンプレートページ](https://developer.wordpress.org/themes/template-files-section/partial-and-miscellaneous-template-files/comments/)で詳しく説明されています。  
  3.  <a name="sidebar-php"></a>
  5. ## Sidebar.php
  7. 多くのテーマは、ウィジェットを表示するためにサイドバーを利用します。テーマでサイドバーが機能するためには、登録され、その後サイドバー用のテンプレートファイルが作成される必要があります。[サイドバーの登録](/read/wordpress/fc464b1c9c7a76ef.md)については、後の章で詳しく学びます。サイドバーファイルには、条件付きステートメントや`````is_active_sidebar( 'sidebar-name' )`````関数が含まれており、ウィジェットがサイドバー内で使用されていることを確認し、不要に空のHTMLがページに追加されないようにします。  
  9. 以下は、twenty fifteenテーマのサイドバーテンプレートファイルの例です。下部に、`````<?php dynamic_sidebar( 'sidebar-1' ); >`````を使用してサイドバーが引き込まれていることに注意してください。これにより、そのサイドバーに配置されたウィジェットが、このテンプレートを引き込んでいるページに表示されます。  
  12. ``````bash
  13. <?php if ( has_nav_menu( 'primary' ) || has_nav_menu( 'social' ) || is_active_sidebar( 'sidebar-1' ) ) : ?>
  15.     <div id="secondary" class="secondary">
  17.         <?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
  18.             <div id="widget-area" class="widget-area" role="complementary">
  19.             <?php dynamic_sidebar( 'sidebar-1' ); ?>
  20.             </div><!-- .widget-area -->
  21.         <?php endif; ?>
  23.     </div><!-- .secondary -->
  25. <?php endif; ?>
  26. `

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が特定の方法で認識し解釈するファイル名ではなく、特定のタイプのコンテンツを表示するための一般的なアプローチです。

たとえば、ブログ投稿では、著者の名前、投稿の日付、おそらく投稿のカテゴリを表示したいことがよくあります。また、前の投稿や次の投稿へのリンクもあるでしょう。その情報は通常のページには適切ではありません。同様に、ポートフォリオページでは、ブログ投稿やページのフィーチャー画像とは異なる方法で表示したいフィーチャー画像やギャラリーがあるでしょう。

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

以下は、twenty fifteenのcontent-page.phpテンプレートファイルの例です。 

  1. <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
  3.     <header class="entry-header">
  4.         <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
  5.     </header><!-- .entry-header -->
  7.     <div class="entry-content">
  8.         <?php the_content(); ?>
  9.         <?php
  10.         wp_link_pages( array(
  11.             'before'      => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentyfifteen' ) . '</span>',
  12.             'after'       => '</div>',
  13.             'link_before' => '<span>',
  14.             'link_after'  => '</span>',
  15.             'pagelink'    => '<span class="screen-reader-text">' . __( 'Page', 'twentyfifteen' ) . ' </span>%',
  16.             'separator'   => '<span class="screen-reader-text">, </span>',
  17.         ) );
  18.         ?>
  19.     </div><!-- .entry-content -->
  21.     <?php edit_post_link( __( 'Edit', 'twentyfifteen' ), '<footer class="entry-footer"><span class="edit-link">', '</span></footer><!-- .entry-footer -->' ); ?>
  23. </article><!-- #post-## -->