【テーマの自作】header.phpの作成 – 構成

今回はheader.phpの「構成」について記載します。

スポンサーリンク

ヘッダーの構成

WordPressの「header.php」には、主に以下のタグを記述します。

 

・htmlタグの始まり部分(<html>)

・headタグ(<head></head>)

。wp_head();関数(<?php wp_head(); ?>)

・titleタグ(<title></title>)

・bodyタグの始まり部分(<body>)

 

余計なものを一切排除し、ものすごく簡略的に書くと以下みたいになります。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8" />
        <title>
        </title>
        <?php wp_head(); ?>
    </head>
    <body <?php body_class(); ?>>

 

ここで注意すべき点は、htmlタグとbodyタグが終了していない(</html>と</body>がない)ということです。

これはindex.phpの作成に入ったときに説明します。

 

他、wp_head()関数が使われていますが、これも特に今は知らなくても問題ありません。

現時点では「header.phpを構成する最低限の構成はこれか」ぐらいの認識で問題ないです。

ちなみにwp_head()関数は</head>の1行上に記載するようにしてくださいね

スポンサーリンク

どこに何を書くか

続いて、header.phpのどこに何を書けばよいのかを説明していきます。

すごく作り込むのであれば覚えることはたくさんありますが、まずは最低限の構成だけで作成するので覚えることなんてほぼないです。

 

header.phpには、以下のように記載していけば問題ありません。

・headタグ内にmetaタグを記載する

・headタグ内にtitleタグを記載する

・titleタグ内にページタイトルを記載する

・headタグ終了前にwp_head()関数を記載する

・bodyタグ以下にヘッダーのhtmlを記載する

 

上記の内、bodyタグ以下にヘッダーのhtmlを記載するについては人それぞれ作成したいテーマによって変わるので説明することは出来ませんが、headタグ内に記載するmetaタグとtitleタグについては簡単に説明していきます。

 

まずはmetaタグ。

すごい簡易的な以下の状態で言うと、4行目の<meta charset=”UTF-8″ />が該当します。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8" />
        <title>
        </title>
        <?php wp_head(); ?>
    </head>
    <body <?php body_class(); ?>>

ちなみに「<○○○     />」という記述は、「<○○○></○○○>」という記述の省略形なので、「<meta charset=”UTF-8″ />」は「<meta charset=”UTF-8″></meta>」と同じ意味です。

この「meta」というタグで囲む記述は、PCもしくはスマホなどにどのように本サイトを読み込ませるかを記述するものとなります。

そのため、metaタグは我々人間が意識することはありません。

しかし、htmlタグやphpタグを読み込んでいる機械にとっては、とても重要な記述です。

尚、「<meta charset=”UTF-8″ />」は、「このサイトの文字コードはUTF-8を使ってね」ということを機械に教えてあげているmetaタグとなります。

 

 

次に、titleタグ(<title>と</title>で囲まれた部分)は何をやっているのかというと、文字通りそのページのタイトルを決定しています。

例えば、PCで何かしらのサイトを開くと、上の方にこのようなサイト名が表示されるかと思います。

ここの内容がまさにtitleタグで入力された内容です。

 

「ふーん、普段あまり気にしてないし、どうでもいいな」

と思うのは時期尚早です。

この「タイトル」、つけ方によってはブログ(サイト)へのアクセス数に繋がります。

なので、タイトルといって侮らずに、しっかりとtitleタグでタイトルで何を表示するのかを決めていきましょう。

 

 

以上でheader.phpの構成に関する大まかな説明は終わりますが・・・・・・

実は最後の方に説明したtitleタグですが、WordPres 4.1以降であればこのtitleタグすらも記述する必要はありません。

「じゃぁどうやってページのタイトルを決めるんだ?」というのは、次回の記事で記載します。

次回の記事は以下からどうぞ。

関連記事

今回はheader.phpで設定する「title」について記述します。 title(titleタグ)を作成する際には、実際にはheader.phpに記載せずにfunction.phpに「add_theme_support( 'titl[…]

他のWordPressに関する記事

WordPressまとめ

WordPressに関する記事をテーマごとにまとめています。 「使い方」と「テーマの自作」については、上から順番に見ていくことでわかりやすいように作成しています。 スポンサーリンク [adcode] [outline[…]

スポンサーリンク