共通部分の分離
まずは、ヘッダー、フッターという様々な画面で共通で利用する部分について別ファイルに分離していきましょう。
ヘッダーの分離
まず、header.phpを下記の内容で作成しましょう。(前項で作成したindex.phpの冒頭部分と同様です。)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header>
<h1>zero</h1>
</header>
header.phpが完成したら、index.phpは以下の内容に変更しましょう。
<?php get_header(); ?>
<?php while(have_posts() === true){ ?>
<?php the_post(); ?>
<h2><?php the_title();?></h2>
<p><?php the_content(); ?></p>
<?php } ?>
<footer>
©2018 〇〇. All rights reserved.
</footer>
<?php wp_footer(); ?>
</body>
</html>
header.phpに移し替えた部分は get_header() で読み込むことができています。
フッターの分離
同様に、footer.phpを下記の内容で作成しましょう。
<footer>
©2018 〇〇. All rights reserved.
</footer>
<?php wp_footer(); ?>
</body>
</html>
footer.phpが完成したら、index.phpは以下の内容に変更しましょう。
<?php get_header(); ?>
<?php while(have_posts() === true){ ?>
<?php the_post(); ?>
<h2><?php the_title();?></h2>
<p><?php the_content(); ?></p>
<?php } ?>
<?php get_footer(); ?>
footer.phpに移し替えた部分は get_footer() で読み込むことができています。
共通部分の分離の意味合い
上記のように、どのテンプレートでも同じ内容になる箇所については、共通部分として別ファイルに括り出すことによって
- テンプレート内の記述が減りスッキリする
- 変更を行う際に、共通ファイルのみを変更するだけで全テンプレートに適用される
といったメリットがあります。
共通部分を読み込むためのwordpressで定義済みの関数として
- get_header()
- get_footer()
- get_sidebar()
- get_template_part()
などが挙げられます。
WordPress Codex: テンプレートタグ の一般タグの項を確認しておきましょう。
titleタグの準備
現在はhead要素の中にtitle要素がありません。wordpressでは、テーマサポート機能を利用することでtitleタグを自動で出力させることが可能です。
functions.phpに以下の記述を行いましょう。
add_action('after_setup_theme', function(){
add_theme_support( 'title-tag' );
});
このようにafter_setup_themeアクションフックにおいて、add_theme_support('title-tag')を実行すると、wp_head()の際に自動的にtitleタグが設定されます。