【テーマの自作】header.phpの作成 – ヘッダーとは

WordPressでのテーマの自作で、header.phpの作成を行っていきます。

header.phpはヘッダーを作成するためのファイルですが、まずはそもそもの「ヘッダー」について説明していきます。

スポンサーリンク

ヘッダーとは

ヘッダーとは、主にタイトルだったりサイトを象徴する画像だったりを配置するエリアのことを指します。

以下図で言えば、赤枠部分に該当する部分です。

※ちなみに、青枠部分はコンテンツエリア、緑部分はサイドバーと呼びます。

 

header.phpには、上図赤枠の箇所をどう表示させるのかを記述していきます。

他にもheader.phpにはページタイトルやメタデータなどを記述するのですが、これは追々説明していきますので、現時点では気にしなくてよいです。

まずはヘッダーとはどの部分のことを指しているのかさえわかって頂ければ、今後のテーマの自作がスムーズになるかと思います。

スポンサーリンク

既存テーマの作りを見てみる

いきなり0からテーマを自作するとなると中々しんどいかと思いますので、WordPressに最初から備わっている既存のテーマが、どんな風な作りになっているか確認する方法を記載します。

今回では例として、「twentyten」というテンプレートをインストールしたあとに、「twentyten」のheader.phpがどんな作りになっているのか見てみます。

尚、既存のテーマの作りを見るためにはFTPソフトが必要です。

※FTPソフトは色々な種類がありますが、前回は「FileZilla」を使ってローカルPC内のデータをWordPress上に保存したので今回も「FileZilla」を使います。

 

1.まずは自分のサイトに「FileZilla」で接続し、欲しいデータがあるディレクトリに移動(以下青枠部分)して、欲しいファイルを右から左にドラッグします。

 

それだけでダウンロードは完了です。

これで既存のテーマが一体どんな風に作成されているのかを確認することが出来ます。

スポンサーリンク

htmlタグとphpタグ(簡易)

それでは早速、先ほどダウンロードしたheader.phpを開いてみましょう。

尚、phpファイルはテキストエディタ(Windowsであれば「メモ帳」等)で開くことが可能です。

 

中身を見てみると何だかよくわからない文字列がいっぱい出てきたと思いますが、慣れればなんてことはありません。

この文字列たちは「タグ」と呼ばれるもので構成されているのですが、ここでは必要最低限の「タグ」について説明していきます。

 

まず、header.phpを開いたあとには<html>という記述がありますが、更に後ろの方を見れば</html>という記述も必ずあります。

これは、この<html>から</html>の間に囲まれたものは「html」という種類の記述ですよ、ということを示しています。

このように、<○○○>から</○○○>を1セットとして「一体どんな種類のパーツを作成しているのか」を表すのを「htmlタグ」といいます。

 

そして更に、よく見て見ると「<?php」と「?>」で囲まれた部分があります。

この「<?php」と「?>」で囲まれた部分の記述が「PHPタグ」といいます。

なんか専門用語ばかり出て嫌になるかもしれませんが、要はWordPressのテーマは「HTMLタグ」と「PHPタグ」というもので作られているということだけわかれば問題ないです。

 

また、

「HTMLタグ」の場合、「<!–」と「–>」で挟んだ文字が「コメント」という扱いになります。

「PHPタグ」の場合、「/*」と「*/」の間に挟んだ文字は「コメント」という扱いになります。

そして、この「コメント」は作成者がメモのために残した文字を表します。

 

……といった具合に、この「タグ」で挟むことで「そこでどんな記述をしているのか」を操作することが出来ます。

スポンサーリンク

関数について(簡易)

テーマの自作においては、この「関数」も避けては通れない道です。

何やら難しい専門用語を使っていますが、この「関数」というのも知ってしまえばとても簡単なものです。

 

関数とは、一言で言ってしまえば「特定の処理を行った結果を返すもの」のことを指します。

身近なもので例えれば、コンビニ店員に品物を渡したらレジで請求金額を教えてくれます。

これが関数です。

 

ユーザー(我々)がやったことは

コンビニ店員に品物を渡した

ですが、その結果として

渡した品物を買うための請求金額を提示

してくれました。

 

このように、何かの特定の処理を行ってくれるのが「関数」です。

サンプルとして、既存のテーマ「twentyten」のheader.phpを元に以下説明していきます。

 

テーマ「twentyten」のheader.phpを開けてみると以下のような状態になっているかと思います。

 

何やらわけのわからなそうな記述が続いていますが、

「タグの説明」で説明した通り、最初の方はPHPタグ(「<?php」と「 ?>」で囲まれた部分の記述)で記載されたコメント(「/**」と「*/」で挟まれたもの)ですね。

コメントは作者がメモとして記載した文字なのでテーマの表示には何も関係しません。

無視して問題ないです。

なんだったらコメントの記述は全て削除しても何も問題ありません。

 

次に現れるのは<!DOCTYPE html>という記述ですが、これは「<?php」と「 ?>」で囲まれていないタグであるため「HTMLタグ」の記述ということになります。

そして<!DOCTYPE html>は少し特殊なタグなので「</>」で終わらせていません。

まぁ、この記述はphpやhtmlを作成するときの決まり文句なので

 

「こういう記述をするんだ」

 

ぐらいの認識で問題ないです。(一応説明すると文書タイプというのを宣言しています)

 

 

次に現れるのは「<html <?php language_attributes(); ?>>」ですが、これは、

「html」というHTMLタグの中に「<?php」と「?>」で囲んだPHPタグの記述、「language_attributes();」が埋め込まれている、という構成になっています。

 

この「language_attributes();」こそが、まさに「関数」と呼ばれるものになります。

 

「関数」かどうかの見極め方としては、現時点では、

・PHPタグ内の記述であること
・();で終わっていること

の2つに該当していれば、ほぼほぼ「関数」だと思って問題ないと思います。

ちなみに、この「関数」かどうかを見極めるための条件の2つ目

 

「();で終わる」

 

についてですが、たまに「()」内に記述が書かれている場合があります(既にお気づきかもしれませんが、上の図で言えば<?php bloginfo( ‘charset’ ); ?>がそれに該当します)

そういったものも「関数」と呼ばれるものになるので、注意して見ていきましょう。

 

 

それぞれの「関数」については検索すれば詳しい内容が見れますが、ここでは例として「language_attributes();」と「bloginfo( ‘charset’ );」の「関数」は一体どういう処理をしてくれているのかを紹介していきます。

スポンサーリンク

まずはlanguage_attributes();

この関数は、どっかのディレクトリに置いてある言語設定を設定しているだけの関数です。

このサイトを見てくれている方は恐らく日本語で見ていると思います。

なので、95%ぐらいの確率で、この記事を見てくれている方がlanguage_attributes();の関数を呼び出すと、その関数は自動的に「lang=”ja”」という言語設定を結果として返してくれます

そのため

「<html <?php language_attributes(); ?>>」

の記述と

「<html lang=”ja”>」

の記述は全く同じ意味になります。

尚、この「<html lang=”ja”>」の意味は、「このHTMLで作成するサイトは日本語用のサイトですよ」ということです。

 

 

次に、bloginfo( ‘charset’ );

これは、「bloginfo」という「関数」に「charset」という単語を渡している形になります。

 

例えば、コックにジャガイモを渡したらマッシュポテトを作ってくれるとします。

では、コックにジャガイモではなくレタスを渡したら何を作ってくれるでしょうか。

それは「サラダ」かもしれませんし、もしかしたら「レタスチャーハン」とかかもしれませんね。

このような感じで、「関数」もそれと同じで、何を渡すのかによって処理内容を変えてくれるものが存在します(引数ありの関数と言います)

 

この「bloginfo」という「関数」は、まさにその「引き渡すもの」によって処理を変えてくれる関数で、「bloginfo」に「charset」をした場合の処理は「文字コードの設定をどっかのディレクトリから引っ張ってきて設定してくれる」というものになります。

ちなみに、このサイトを見てくれている方は恐らく日本圏内の人だと思うので、bloginfo( ‘charset’ );と設定すると「UTF-8」という文字コート設定を結果として返してくれます。

 

 

……といった具合に、何か特別な処理を行ってくれて、その結果を設定してくれるのが「関数」と呼ばれる記述になります。

テーマの自作を行う上ではこの「関数」はとても大事なものになりますので、いつか別記事でまとめたいと考えていますが、一先ずは本記事で説明したぐらいの概念がわかっていれば問題ないと思います。

他のWordPressに関する記事

WordPressまとめ

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

スポンサーリンク