テーマ作成時、header.phpに書く最小構成はたったこれだけ！
バランスよくプラグインを使って効率化しましょう。
最小構成
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>今さらですが、wp_head()は必須となります。
ここにSEOプラグインなどの情報が入ります。
metaタグ行の最後にスペースなどが入ると、wp_head()の内容が、bodyの後に出力されたりするので要注意。
タイトルについて
WP4.5〜は、add_theme_support( 'title-tag' )で自動的に処理してくれます。
SEOについて
これは大人しくプラグインを使った方が◎
CSSとJavaScriptについて
functions.php側に記述しましょう。
Faviconについて
oEmbedの埋め込みを許可している場合、管理画面 ＞ 外観 ＞ カスタマイズ ＞ サイト基本情報 ＞ サイトアイコン から登録したものがブログカードに使われます。この時のサイズは、512px x 512px 以上が必要となり透過PNGを使うと、透過部分は黒くなります。
企業サイトなどでは、PCでは透過させたかったり、スマホ等に向けては大きいアイコンが使われるため情報量を増やしたかったりするので、oEmbedよりもブランディングを考慮して、直接書き込む事の方が多いです。
直接書く場合は、wp_head()の次の行になります。
コンテンツマーケティングなどで企業ブログの場合は、迷いますね・・・
アクセス解析について
直接書くこともあります。直接書く場合は、</head>の直前に書きます。
Google Analyticsなどメジャーなタグについては、SEO関連プラグインなどで埋め込み機能がついてる場合があります。プラグインで埋め込むことができても、管理者は除外するなどの細かい設定ができない場合もあります。
OGPについて
OGPもプラグインで自動化する事が多いので、header.phpには書きません。
その際に、サイトがhtlm5とxhtmlのprefix / xmlns の判別が正しくできているかを確認しましょう。
HTML5用
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
XHTML用
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://ogp.me/ns/fb#" lang="ja">最小構成プラスα
他には、bodyに続いてheaderやnavなど全ページ共通で使うものを書きましょう。
参考までに・・・
<header class="header">
<?php if( is_front_page() && ! is_paged() ): ?>
<h1 class="logo"><?php the_custom_logo(); if ( ! has_custom_logo() ) { ?><?php bloginfo( 'name' ); ?><?php } ?></h1>
<?php else: ?>
<p class="logo"><a href="<?php echo esc_url( home_url() ); ?>"><?php the_custom_logo(); if ( ! has_custom_logo() ) { ?><?php bloginfo( 'name' ); ?><?php } ?></a></p>
<?php endif; ?>
<p class="desc"><?php bloginfo( 'description' ); ?></p>
</header>
<nav class="nav">
<?php wp_nav_menu(); ?>
</nav>
<div class="site-content">
<main class="main">wp_nav_menu()については、近日紹介します。
もう少し独自設定をしてますが、このパターンで新規サイト立ち上げ時に、header.phpをコピペしてほぼこのまま使えます。
まとめ
リニューアル案件などの他社制作テーマでよく見かけるJavaScriptなどを直接書いてる方は、初めは、CSS / JavaScriptとwp_nav_menu()のfunctions.phpでの取り扱いに戸惑うかもしれませんが、慣れると管理が一元化できてメチャクチャ便利になります。
同業者には是非覚えて欲しい・・・。