【header.php編】WP公式テーマ『Twenty Seventeen』から学ぶ最新WordPress事情
すっかり春らしくなってまいりました。山田でございます。
本日は、
「WP公式テーマ『Twenty Seventeen』から学ぶ最新WordPress事情」と題しまして、WordPress.orgが自信をもってWordPress本体に同梱させてしまうほどの自信作テーマ「Twenty Seventeen」を眺めていきながら最新のWordPress事情を紐解いていこうという企画です。
「Twenty Seventeen」とは
Twenty Seventeen は、没入感のあるアイキャッチ画像と繊細なアニメーションを用いて、(中略)2017年のデフォルトテーマは、多くの言語において、どんな才能に対しても、どのようなデバイスでも、うまく動作します。
との通り、2017年のデフォルトたりえるテーマなのですね！
よくよく考えたら「Twenty Seventeen」は「2017」ですからね！
2018年はわかりませんが、少なくとも今年2017年はこのテーマを抑えておけばまず間違いないというわけです！！
header.phpを見てみる
ということで、今回はそんな「Twenty Seventeen」の中でも、Webサイトの顔となるheader.phpを見ていきましょう！
ダウンロードがまだの方はこちらから！！
</head>まで
<!DOCTYPE html> <html <?php language_attributes(); ?> class="no-js no-svg"> <head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="profile" href="http://gmpg.org/xfn/11"> <?php wp_head(); ?> </head>
パッと見で気になるものはhead内のシンプルさですね！CSSやJSはもちろんタイトルなんかも含まれていないのです！
さっそく気になるところをみていきましょう！
language_attributes()
言語属性を表示します。（<html>タグ専用）
具体的にはlangを(RTLであればdirも)表示します。
多言語化サイトなんかで地味に嬉しいやつです。
使い方
<html <?php language_attributes(); ?>
出力例
<html lang="en-US">
bloginfo('charset')
常にutf-8を返します。 <meta charset>にぴったりですね！
常に同じ値を返すならハードコーディングしてもええやないかと思ってしまうかもしれませんが、使えるものは使っておきましょう。
いつ世のメジャーな文字エンコーディングがutf-8000になるかわかりません。（なりません）
使い方
<meta charset="<?php bloginfo('charset'); ?>">
出力例
<meta charset="utf-8">
タイトルやCSSはどこへ…？
と、ここにきて気になるのは通常<head>内にその身を置いているはずのタイトル(<title>)やCSS、JSがどこにも書かれていませんね。
では彼らは一体どこへ…？
タイトルは「title-tag」へ
そこでfunctions.phpを眺めてみると45行目に
/* * Let WordPress manage the document title. * By adding theme support, we declare that this theme does not use a * hard-coded <title> tag in the document head, and expect WordPress to * provide it for us. */ add_theme_support( 'title-tag' );
なるものが！
そう、WP4.1〜で採用されたこのテーマ機能をadd_theme_support()すると、いい感じにWordPressがつけてくれたタイトルを<title>タグごと<head>内に出力してくれるため、header.phpに<title>タグを入れる必要はもはやなくなったのです！
ただ、実案件ではページごとにタイトルを適宜書き換えるケースが少なくなく、SEO系のプラグイン（Yoast SEOなど）を使うことがほとんどで、その恩恵にはなかなか預かれません(^o^)
CSSは「wp_enqueue_style()」へ
では、CSSはについてはどうでしょう？
おなじくfunctions.phpの411行目〜
// Theme stylesheet. wp_enqueue_style( 'twentyseventeen-style', get_stylesheet_uri() );
ここでCSSを読んでいるわけです！
wp_enqueue_style()を使うことでheader.php内に<link>を直書きする必要はもはやなくなっているのです！
ちなみに以前までよくCSSを読み込む際に使われていたget_template_directory_uri()も、
WP4.7〜ではget_theme_file_uri()なる、より便利な関数が追加されたので、ご興味ある方はこちらについても。
<body>以降
<body <?php body_class(); ?>> <div id="page" class="site"> <a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'twentyseventeen' ); ?></a> <header id="masthead" class="site-header" role="banner"> <?php get_template_part( 'template-parts/header/header', 'image' ); ?> <?php if ( has_nav_menu( 'top' ) ) : ?> <div class="navigation-top"> <div class="wrap"> <?php get_template_part( 'template-parts/navigation/navigation', 'top' ); ?> </div><!-- .wrap --> </div><!-- .navigation-top --> <?php endif; ?> </header><!-- #masthead -->
うーん美しいですね。さすがとしか言いようがございやせん。
適宜get_template_part()してコードの可読性や保守性を保っている点などは本当に見習うべきところです。
では、こちらでも気になるところをみていきましょう！
body_class()
<body>タグに現在表示されているページに応じてクラスを付与するおなじみbody_class()ちゃんですが、「Twenty Seventeen」ではadd_filter()でさらに使いやすくしています。
/inc/template-functions.php内のtwentyseventeen_body_classes()がそうですね。
if ( is_multi_author() ) {
$classes[] = 'group-blog';
}
のような好みの条件で分岐させ、$classesに好みのクラスを追加していくわけです。
一方で、とくにカスタマイズしない限り、
<body class="page page-id-2 page-template page-template-default logged-in">
のように、ありがた迷惑気味なくらいクラスが付与されてしまうため、実際にはmy_body_class()のような関数を自分で用意してしまう方がスマートになる場合も少なくありません(^o^)
the_custom_logo()
/template-parts/header/header-image.php内で呼ばれる/template-parts/header/site-branding.phpに現れるこの子ですが、WP4.5〜使えるようになった「カスタムロゴ」を表示できる関数です！
カスタムロゴ
コーポレートサイトを筆頭にあらゆるWebサイトの顔となるロゴですが、
もちろん今まで通り使いたい箇所でget_theme_file_uri('/img/logo.png')などとしても問題はないのですが、WP管理画面からお客様が自由に変更できるなどメリットも多いため、可能であればどんどん使っていきたいですね！
具体的な使い方などは追ってまた…
まとめ
今回はざっくりと「Twenty Seventeen」のなかでもheader.phpにスポットを当ててとくに注目すべき点をご紹介していきましたが、いかがでしたでしょうか？
Web界隈に身を置く以上、こういった新しいウェーブにキャッチアップしていくためにも常に新しい情報をインプットしていきたいですね！
次回はfooter.phpなどをご紹介しようかと！
それでは、よきGWを。
