テーマを作ろう – 其の四(header.php②)

個人的に斎藤さんが一番かわいいと思うんですがどうでしょうか?今のところ出番少ないけど…。(ゆるきゃん)

前回、最後にstylesheetはどこで読まれてるのん?って旨を書きました。僕は今まで<head>~</head>内に直に

<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style.css">

を書いてましたが…参考サイト

functions.phpを使ってCSSを読み込ませる

上記のやり方でもできるのですが基本はこちらの方法をオススメします。

index.php

<?php get_header(); ?>
header.php

<!DOCTYPE html>
    <head>
        <?php wp_head(); ?> 
    </head>
    <body>
functions.php

<?php
    function Read_CSS(){
        wp_enqueue_style( 'style-css', get_template_directory_uri() . '/style.css' );
    }
    add_action( 'wp_enqueue_scripts' , 'Read_CSS' );

wp_enqueue_style( ‘style-css’, get_template_directory_uri() . ‘/style.css’ );とはCSSファイルなどを読み込ませるものです。詳しくは関数リファレンス/wp enqueue styleをご覧ください。

どうやらfunctions.phpに記述したものをwp_head();に入れてあげるのがいいらしい。twenty seventeenもそうなってました。

では前回の続き、bodyタグに。

<body <?php body_class(); ?>> <div id="page" class="site">  <div class="site-inner">  <a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'twentysixteen' ); ?></a> <header id="masthead" class="site-header" role="banner">  <div class="site-header-main">  <div class="site-branding">  <?php twentysixteen_the_custom_logo(); ?> <?php if ( is_front_page() && is_home() ) : ?>  <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>  <?php else : ?>  <p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>  <?php endif; $description = get_bloginfo( 'description', 'display' );  if ( $description || is_customize_preview() ) : ?>  <p class="site-description"><?php echo $description; ?></p>  <?php endif; ?>  </div><!-- .site-branding --> <?php if ( has_nav_menu( 'primary' ) || has_nav_menu( 'social' ) ) : ?>  <button id="menu-toggle" class="menu-toggle"><?php _e( 'Menu', 'twentysixteen' ); ?></button> <div id="site-header-menu" class="site-header-menu">  <?php if ( has_nav_menu( 'primary' ) ) : ?>  <nav id="site-navigation" class="main-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Primary Menu', 'twentysixteen' ); ?>">  <?php  wp_nav_menu( array(  'theme_location' => 'primary',  'menu_class' => 'primary-menu',  ) );  ?>  </nav><!-- .main-navigation -->  <?php endif; ?> <?php if ( has_nav_menu( 'social' ) ) : ?>  <nav id="social-navigation" class="social-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Social Links Menu', 'twentysixteen' ); ?>">  <?php  wp_nav_menu( array(  'theme_location' => 'social',  'menu_class' => 'social-links-menu',  'depth' => 1,  'link_before' => '<span class="screen-reader-text">',  'link_after' => '</span>',  ) );  ?>  </nav><!-- .social-navigation -->  <?php endif; ?>  </div><!-- .site-header-menu -->  <?php endif; ?>  </div><!-- .site-header-main -->

わー。ちょっと骨が折れそう。一個ずつ見ていこう。

<body <?php body_class(); ?>>

body_class()とは要はis_single()とかis_pageの結果をクラス名で出力するものみたい(言い回しがおかしい)。

アーカイブなら archive category category-slug [ paged paged-n category-paged-n ]って感じらしい。

テンプレート階層で管理するしこれ要る?って最初は考えましたが、スラッグとかが表示される = 些細な表示を変えるだけにarchive-slugといった個別テンプレートを用意しなくていいと思うと便利そう。

<div id="page" class="site">

これは特にコメントするところはないですね。position: relative; とword-wrap: break-word;が指定されてるだけでした。自分の好みにしたら良さそう。

<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'twentyseventeen' ); ?></a>

これ最初開発者ツールでチェックしても1×1pxで表示されていなくてなんなんだと思ってたら、どうやら音声読み上げに使う何からしいです。(参考サイト

ところで、

WordPressの公式ディレクトリにテーマを登録する場合に対応必須のクラスがある。画像に付与される .aligncenter、.alignright、.alignleft、.wp-captionなど。 いつのまにか .screen-reader-text が加わったようだ。

こんなのあるんですね。絶対チェックしておかないといけないやつだ。どうやらテーマチェックをしてくれるプラグインがあるようなので確認できるみたいです。

今日はここまでにします。友人がそろってモンハン始めやがりましたので近日買うことになると思います。