たまろぐ

header.phpの中身を作るhead編/wordpressテーマ自作!

2019年7月16日 23:26 カテゴリー: Wordpress

header.phpは「head」つまり、頭の部分の事です。このファイルを各ページで読み込むことにより、どのページでも一番上の部分が同じ表示になります。変更する場合も一つ一つ変更せずに一括で編集できます。

今回はheadを解説します。headはブラウザや検索エンジンに向けた設定を記載する場所です。SEOに有効であり、表示を著しく崩す場合もあるので、かなり重要な場所です。

ちなみに僕の「head」の中はおっぱいでいっぱいです。

headを記載するファイル

記載するファイルは基本は”header.php”に記載しましょう。

トップページ、記事ページ、アーカイブページそれぞれ全く違ったheadの内容にしたい場合は各ファイルに記載しましょう。ただし、編集がものすごく大変になる為、あまりお勧めはしません。

上記の様なheadの分け方は基本的には必要ないかとおもいます。SEOにこだわって、キーワードをカテゴリー別に設定したい場合等はいいかもしれないです。

今回はheader.phpに記載することを前提に作っています。

コード

まずは実際のコードを見てください。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width,user-scalable=yes,maximum-scale=2" />
	<meta name="keywords" content="Wordpress,テーマ,自作">

  <link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri(); ?>/style.css" />
	

	<title>
	<?php wp_title('-', true, 'right'); bloginfo('name'); ?>
	</title>

	<?php wp_head(); ?>
</head>
<body>

・・・分かります?とりあえず一つずつ解説していきますね。

解説!

<!DOCTYPE html>

DOCTYPE宣言といいます。HTMLで書かれてるよーって教える物。ブラウザの混乱を避けるための物です。

<html lang="ja">

HTMLは<html>から</html>の間に記載します。

lang=”ja” は記載することによって、言語は日本語ですよと定義できます。

<head>
~
</head>

headはページの情報を入力します。タイトルや、スタイルシートのURL、検索のキーワードなど、様々な情報がここに入ります。

<meta charset="UTF-8" />

metaは色々な設定を書く為の要素です。charsetでは文字コードを指定します。特別な理由がなければUTF-8をしておきましょう。ただし、SHIFT-JISのファイルを使っている場合は文字化けする可能性があります。もし文字化けした場合はここを変えてみるといいかもしれません。

<meta name="viewport" content="width=device-width,user-scalable=yes,maximum-scale=2" />

metaでviewportの設定を行います。viewportは表示する画面の幅の事です。のちのちレスポンシブデザインに対応するために、必ず設定しておきましょう。

name=”viewport” viewportの設定ですと、ブラウザに伝える役割があります。

content=”~” 実際の設定をしていきます。設定は「,」で区切ることで複数を同時に設定できます。

width=device-width 実際に閲覧しているデバイスに画面の幅を合わせる。具体的な幅(320px等)を指定すると、その幅で表示されます。

user-scalable=yes ユーザーによる拡大を許可する。yesをnoに変更すると拡大できなくなる。モバイル向けのサイトに多いですが、正直拡大できないサイトはみづらいのでやめてほしい。

maximum-scale=2 2倍までの拡大を許可します。

<meta name="keywords" content="Wordpress,テーマ,自作">

キーワードの設定です。設定することで、検索されやすくなります。(らしい)

content=”~” ~の部分にキーワードを入れていきます。「,」で区切ることで複数設定可能。あまり入れすぎるとぐーぐるさんにペナルティを与えられることもあるらしいので注意!

<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri(); ?>/style.css" />

外部スタイルシートを読み込みます。

昔はhead内に直接書いていた時期もありましたが、今はほとんどすべてのサイトが外部スタイルシートです。変更したい場合に一つを変更すればすべてのページを一括で変更できるのが大きいですね。

スタイルシートとは、webのデザインをするための言語です。webデザインをする上で必須の言語です。

rel=”stylesheet” このファイルはスタイルシートですよ!と教えています。

type=”text/css” 上の rel=”stylesheet”  と同じような物ですね。二つ記載する意味があるのかは知りません!w

href="<?php echo get_stylesheet_directory_uri(); ?>/style.css"

PHPが入っていたため、普通には記載できなかった。。。これはスタイルシートの場所を表しています。

<?php echo get_stylesheet_directory_uri(); ?>

これがPHPです。これはスタイルシートがあるフォルダの場所を取得するプログラムです。

WordPressにはこのような独自のPHPが多数用意されています。使いこなせるとかなり便利なので、しっかり使っていきましょう。

	<title>
	<?php wp_title("-", true, 'right'); bloginfo('name'); ?>
	</title>

ページのタイトルです。またPHPが使われていますね。

wp_title(‘-‘, true, ‘right’); はもし、記事のタイトルがあれば表示してくれます。トップページでは何も表示されません。

( )の中身はどう表示するかを設定します。

一番左の’-‘は区切りの部分の文字です。

真ん中のtrueはタイトルとして表示する事を表しています。PHPなどのプログラムで使用したい場合はfalesを指定すると文字列として値を返してくれます。

右の’right’は区切り文字の位置を表しています。この場合は「記事タイトル – ブログタイトル」で設定していますが、「ブログタイトル – 記事タイトル」にしたい場合は

bloginfo(‘name’); wp_title(‘-‘, true, ‘left’);

こうなります。

<?php wp_head(); ?>

何をしているのか・・・知りませんw

ただないと動かないプラグインがあったりするので、必ず入れておきましょう。

入れる場所はheadの一番最後、</head>の直前です。

</head>

HTMLは必ず終わりの合図を入れましょう。これを「閉じる」といいます。

終わりに

以上でheadは終了です。次回はheader.phpにタイトルの導入部分の解説をしていきます。

テーマを作る関係を下記の記事でまとめています。そちらもどうぞ!