WordPressでHeaderにスタイルをつける

header.phpに必要なもの話
cssファイルについて
ヘッダーのスタイルを作っていく

まずheader.phpを編集していきます。

<?php
/**
 * Header file for the Signpost WordPress theme.
 * 
 * @package signpost
 * @author meko
 * @license http://www.gnu.org/licenses/gpl-3.0.html GUN General Public License v3
 * @copyright Copyright (c) 2020 meko All Right Reserved.
 */
?>
<!DOCTYPE html>
  <head>
    <title><?php bloginfo("name"); ?></title>
    <meta name="viewport" content="width=device-width, height=device-height">
    <meta charset="<?php bloginfo('charset'); ?>">
    <?php wp_head(); ?>
  </head>
  <body <?php body_class(); ?>>

前の記事で書いたheader.phpにドキュメントとmetaタグを追加しました。

ドキュメントは自分が書いたコードがリンク先の規約によって守られていることや誰が書いたのか、などを書いてあります。
詳しくはPHPドキュメントタグにまとめてあります。

<meta name="viewport" content="width=device-width, height=device-height">

このmetaタグは画面の横幅と高さはデバイスに合わせるよと書いてあります。
レスポンシブなサイトには必須ですね。
viewportについて詳しくはTag Indexにまとめてあります。

<meta charset="<?php bloginfo('charset'); ?>">

このmetaタグは文字コードはwordpressで設定したものだと書いてあります。
文字化けを防ぐためのものです。
viewportについて詳しくはTag Indexにまとめてあります。

これでレスポンシブはHeaderの大枠ができました。

次にstyleを設定して、色や形を決めていきます。
style.cssを直接書き換えても良いのですが、公式が子テーマを作成しアップデートしていくことをオススメしているので、子テーマを作っていきます。

signpost
   |--index.php
   |--style.css
   |--screenshot.png

signpost-child
   |--style.css
   |--functions.php

/*
 Theme Name: Signpost Child
 Author:       meko
 Version:      1.0.0
 Template: signpost
*/

Templateは親テーマのフォルダ名です。

style.cssが作成できたので次はfunctions.phpを作成していきます。

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

}

wp_enqueue_scriptsが呼ばれるときに、theme_enqueue_stylesという自分で作った関数を呼び出してねと書いてあります。
theme_enqueue_stylesは”parent-style”で親のスタイルを引き継いで、signpost-child（子テーマ）のstyle.cssをその後に読み込んでねと書いてあります。詳細を見たい方はここからどうぞ。

ファイルの作成はこれで終わりです。