header.phpの内容
表示されるページのヘッダー部を構成するheader.phpの内容を検討。
<!DOCTYPE html>
<html lang="ja">書き出しはいたってシンプルになっている。
<?php if( is_single() ): ?>
<head prefix="og: https://ogp.me/ns#">
<?php else: ?>
<head>
<?php endif; ?>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<?php if( is_single() ): ?>
<meta property="og:site_name" content="<?php bloginfo( 'name' ); ?>">
<meta property="og:locale" content="ja_JP">
<meta property="og:type" content="article">
<meta property="og:title" content="<?php the_title(); ?>">
<meta property="og:url" content="<?php the_permalink(); ?>">
<meta property="og:description" content="<?php echo esc_attr( wp_strip_all_tags( get_the_excerpt() ) ); ?>">
<?php if( has_post_thumbnail() ): ?>
<?php $myimg = get_post_thumbnail_id(); ?>
<meta property="og:image" content="<?php echo esc_url( wp_get_attachment_url( $myimg ) ); ?>">
<meta property="og:image:width" content="<?php echo esc_attr( wp_get_attachment_metadata( $myimg )['width'] ); ?>">
<meta property="og:image:height" content="<?php echo esc_attr( wp_get_attachment_metadata( $myimg )['height'] ); ?>">
<?php endif; ?>
<?php endif; ?>投稿ページにのみ、Open Graph Protcol（OGP）というSNSでシェアされるときに、正しい情報を提供する<meta>タグを反映させるために、is_single()関数を用いて、表示ページが投稿ページであるか判断している。
| OGP | 設定値／関数 | 設定内容 |
|---|---|---|
| site_name | bloginfo( ‘name’ ) | サイト名 |
| locale | ja_JP | 言語の種類「日本語」 |
| type | article | 投稿の種類「記事」 |
| title | the_title() | 投稿のタイトル |
| url | the_permalink() | 投稿ページのURL |
| description | wp_strip_all_tags( get_the_excerpt() ) | 投稿内容の抜粋 |
| image | wp_get_attachment_url( $myimg ) | 投稿のアイキャッチ画像のURL |
| image:width | wp_get_attachment_metadata( $myimg )[‘width’] | 投稿のアイキャッチ画像の幅 |
| image:height | wp_get_attachment_metadata( $myimg )[‘height’] | 投稿のアイキャッチ画像の高さ |
他にもSNS固有の設定があるが、そこまで固有SNSに阿る気が起きない。
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<div class="MyGroundwork">
wp_head()関数ではWordpressのヘッダー構造をインポートしている。
body_class()関数では<body>タグにページの種類ごとにCSSスタイルが設定できるようにしている。
wp_body_open()関数では・・・Wordpress5.2以降で追加された機能らしいが。具体的な用途を未だ見いだせていない。<body>タグ直後に記述したい何かが出力できることだけは判った。
<?php if( has_nav_menu( 'primary' ) ): ?>
<nav class="MyNavigation">
<?php wp_nav_menu( array( 'rheme_location' => 'primary', ) ); ?>
</nav>
<?php endif; ?>ナビゲーションメニューを利用する場合は、has_nav_menu( ‘primary’ )関数で、function.php内で定義された’primary’に該当するナビゲーションの設定の有無を判定し、指定されたナビゲーションが存在する場合には、wp_nav_menu( array( ‘rheme_location’ => ‘primary’, ) )関数で、ナビゲーションメニューを構成するhtmlを出力させている。
<header class="MyHeader">
<?php if( has_site_icon() ): ?>
<figure><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php echo esc_url( get_site_icon_url( 64 ) ) ?>"></a></figure>
<?php endif; ?>
<p class="MyHeader-name"><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></p>
<p class="MyHeader-description"><?php bloginfo( 'description' ); ?></p>
</header>実際に表示されるヘッダー部分<header>～</header>を構成している箇所には、MyHeaderのCSSスタイルを適用している。
サイトアイコンを設定している場合に限り、そのアイコン画像をロゴとして表示したいがために、has_site_icon()関数で設定の有無を判定し、get_site_icon_url( 64 )関数でサイトアイコンの画像URLを取得している。get_site_icon_url()関数の引数には画像の大きさを指定している。
サイト名をbloginfo( ‘name’ )関数で取得し、MyHeader-nameのCSSスタイルを適用している。
サイトの説明をbloginfo( ‘description’ )関数で取得し、MyHeader-descriptionのCSSスタイルを適用している。
それらのリンク先にはhome_url( ‘/’ )関数で、サイトのトップ（’/’）URLを指定している。
