今回はWordPressのテーマ作成に必要なheader.php（ヘッダーパーツ）の作成を行います。
WordPress（PHP）の最大の特徴であるパーツ化の恩恵を最も強く受ける要素で、尚SEOに重要な部分なので、ここをしっかりと作れば総合的に見てに良い感じなサイトになるのでしっかりとマスターしましょう。
header.phpの階層は以下となります。またWPテーマ作成に必須なファイルです。
themes
┗original Thema
┗header.php
index.php
・
・
ファイルの構成に関しては以下のページを参考にして下さい。
まずは基本
まずはHTMLに必要以下のHTMLをheader.phpの最上部に記述しましょう。
（これは必ず必要です。）
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
<meta http-equiv="X-UA-Compatible" content="IE=edge">他にGoogleアナリティクスのトラッキングコードや、サーチコンソールの埋め込みコード、その他metaタグはここに記載していきます。
クロール制御
全体のページでクロールされるべきで無いページに対してnoindexタグを記述しましょう。
具体的には検索ページと404ページは特定の単体ページが存在しないページなのでクロールされると重複コンテンツとみなされSEOでのペナルティを受ける可能性があるのでnoindexタグを入れてクロールを制御しましょう。
noindexを入れる場合は一部のページのみなので以下のようにif文を使用して条件分枝させましょう。
<?php if (is_search()): ?>
<meta name="robots" content="noindex">
<?php elseif (is_404()): ?>
<meta name="robots" content="noindex">
<?php endif; ?>タイトルタグの設定
タイトルタグの設定は簡単に済ます場合は以下の記述で良いと思います。これはサイト名（bloginfo）と投稿で付けたタイトル（the_title）を組み合わせているだけのタイトルです。
<title><?php the_title(); ?>｜<?php bloginfo( 'name' ); ?></title>1ページずつタイトルを細かく変えたい場合は全てのテンプレートファイルに対して条件分枝を適応させれば可能です。
詳しくは以下のページを参照下さい。
headタグ内に必要な要素を入れる
次に全ページ共通でheadタグに入れるべき以下のような要素をがっぽり入れ込みましょう。
良くある例では、デジスクリプション、OGP設定、ファビコン設定などがheadタグに共通で入れ込みます。
いずれもWPのテンプレートタグを利用して汎用的に使用出来る様にするのが通例処理です。
<!-- ディスクリプション -->
<?php if (is_front_page()): ?>
<meta name="description" content="ここにディスクリプションを入れる">
<?php else: ?>
<meta name="description" content="<?php echo get_the_excerpt(); ?>">
<?php endif; ?>
<!-- OGP -->
<meta property="og:url" content="<?php echo get_the_permalink();?>" />
<meta property="og:type" content="artcle" />
<meta property="og:title" content="<?php the_title(); ?>｜<?php bloginfo( 'name' ); ?>" />
<meta property="og:description" content="<?php echo get_the_excerpt(); ?>" />
<meta property="og:site_name" content="<?php the_title(); ?>｜<?php bloginfo( 'name' ); ?>" />
<meta property="og:image" content="<?php the_post_thumbnail_url(); ?>" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="Twitterのユーザー名" />
<meta name="twitter:player" content="Twitterのユーザー名" />
<meta property="fb:admins" content="Facebookのユーザー名" />
<!-- ファビコン -->
<link rel="icon" href="<?php echo get_template_directory_uri(); ?>/favicon/favicon@514.png">
<link rel="apple-touch-icon-precomposed" href="<?php echo get_template_directory_uri(); ?>/favicon/favicon@180.png" sizes="180x180">
<link rel="icon" type="image/png" href="<?php echo get_template_directory_uri(); ?>/favicon/favicon@192.png" sizes="192x192">CSSを読み込む
続いてはサイト内で使用しているCSSを読み込んでいきます。
CSSの読み込みは膨大となりがちなのでページ毎に振り分け処理をすることをおすすめします。
function.phpで振り分ける事を推奨しているサイトもありますが、headタグで振り分けでも問題ありません。
以下はその一例です。
<!-- css -->
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/drawer.min.css">
<?php if (is_front_page()): ?>
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/plugin/slick/slick.css">
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/plugin/slick/slick-theme.css">
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/styles.min.css">
<?php elseif (is_single()): ?>
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/article.min.css">
<?php elseif (is_page()): ?>
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/page.min.css">
<?php else: ?>
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/archive.min.css">
<?php endif; ?>jQueryを読み込む
WordPressにはデフォルトでjQueryが導入されています。それを使用するには以下の記述をする必要があります。
<?php wp_enqueue_script( 'jquery' ); ?>WP headを読み込む
最後にWordPressデフォルトで導入されているheadタグ要素を丸っと呼び出すための以下のタグを入れます。こちらに関しては必須なので忘れずに。
<?php wp_head(); ?>ヘッダーコンテンツを作成する
ヘッダーにはグローバルナビゲーションや固定ヘッダーなどを作成する事が多いかと思います。
以下は見本です。
<body class="drawer drawer--left">
<header role="banner" id="top">
<!-- ヘッダーナビ -->
<button type="button" class="drawer-toggle drawer-hamburger sp-only">
<span class="sr-only"></span>
<span class="drawer-hamburger-icon"></span>
</button>
<nav class="drawer-nav sp-only" role="navigation">
<a href="/"><img src="<?php echo get_template_directory_uri(); ?>/img/logo.png"></a>
<?php
// メニューを表示
if ( has_nav_menu( 'about-menu' )){
$abutMenu = array(
'theme_location' => 'about-menu',
'menu_id' => 'about-menu',
'menu_class' => 'menu drawer-menu',
'container' => false,
'link_before' => '<span>',
'link_after' => '</span>',
'depth' => 0,
);
wp_nav_menu( $abutMenu );
};
?>
</nav>メニューの作成に関しては以下を見て下さい。
ヘッダーの呼び出し方法
このように作成したheader.phpを他のファイルで呼び出す時は以下の記述をします。これを全ページに入れれば全ページ共通のヘッダーとなります。
<?php get_header(); ?>まとめ
最後にこれまでの全てをまとめた記述を記載しときます。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<?php if (is_search()): ?>
<meta name="robots" content="noindex">
<?php elseif (is_404()): ?>
<meta name="robots" content="noindex">
<?php endif; ?>
<title><?php the_title(); ?>｜<?php bloginfo( 'name' ); ?></title>
<!-- ディスクリプション -->
<?php if (is_front_page()): ?>
<meta name="description" content="ここにディスクリプションを入れる">
<?php else: ?>
<meta name="description" content="<?php echo get_the_excerpt(); ?>">
<?php endif; ?>
<!-- OGP -->
<meta property="og:url" content="<?php echo get_the_permalink();?>" />
<meta property="og:type" content="artcle" />
<meta property="og:title" content="<?php the_title(); ?>｜<?php bloginfo( 'name' ); ?>" />
<meta property="og:description" content="<?php echo get_the_excerpt(); ?>" />
<meta property="og:site_name" content="<?php the_title(); ?>｜<?php bloginfo( 'name' ); ?>" />
<meta property="og:image" content="<?php the_post_thumbnail_url(); ?>" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="Twitterのユーザー名" />
<meta name="twitter:player" content="Twitterのユーザー名" />
<meta property="fb:admins" content="Facebookのユーザー名" />
<!-- ファビコン -->
<link rel="icon" href="<?php echo get_template_directory_uri(); ?>/favicon/favicon@514.png">
<link rel="apple-touch-icon-precomposed" href="<?php echo get_template_directory_uri(); ?>/favicon/favicon@180.png" sizes="180x180">
<link rel="icon" type="image/png" href="<?php echo get_template_directory_uri(); ?>/favicon/favicon@192.png" sizes="192x192">
<!-- css -->
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/drawer.min.css">
<?php if (is_front_page()): ?>
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/plugin/slick/slick.css">
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/plugin/slick/slick-theme.css">
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/styles.min.css">
<?php elseif (is_single()): ?>
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/article.min.css">
<?php elseif (is_page()): ?>
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/page.min.css">
<?php else: ?>
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/archive.min.css">
<?php endif; ?>
<?php wp_enqueue_script( 'jquery' ); ?>
<?php wp_head(); ?>
</head>以上が「ワードプレスのテーマで必要なヘッダーパーツの作成」でした。
