WordPress でオリジナルテーマを作る【header.php】編

2018年11月10日

DOCTYPE宣言<!DOCTYPE html>

HTMLやXHTMLでは、バージョンごとに使用できる要素（タグ）や属性とそれらの配置ルールが定められていますが、 DOCTYPE宣言は、その文書がHTMLやXHTMLのどのバージョンで作成されているかを宣言するものです。

HTML 4.01では、DOCTYPE宣言は以下のように記述していました。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML5では、以下のようなシンプルな記述となります。

<!DOCTYPE html>

html要素のlang属性

<html>タグは、HTML文書であることを示す際に使用します。<html>～</html>の直下には、 <head>と <body>がそれぞれ一つづつ必要となります。html要素には、lang属性で言語を指定することができます。 例えば、日本語の場合はlang=”ja”を指定します。

<html lang="ja">

charset 属性

meta 要素に charset 属性を指定した場合は、head 要素内に記述することで、文書の文字コードを指定します。2つ以上の文字コード指定を文書内に入れることはできません。

テンプレートタグ <?php bloginfo(); ?>

サイトの情報を表示させる関数です。’charset’を指定することでブログで使われている文字コードが表示されます。
WordPress3.5以降ではUTF-8 がデフォルトとなっており、管理画面での設定ができなくなっています。

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

<TITLE>タグ

<TITLE>は文書にタイトルをつけるタグです。<TITLE>は省略できない要素なので、 <HEAD>～</HEAD>内に必ず1つ記述します。

テンプレートタグ <?php wp_title( $sep, $display, $seplocation ); ?>

$sepは区切り文字でデフォルトは「 » 」です。$displayはタイトルを表示する（true）か、PHP 文字列として使えるようにタイトルの値を返す（false）かを指定します。初期値は”true”です。 $seplocationは$sep 文字列を表示する位置。’right’ ならタイトルの右（後）に、そうでなければ左（前）に $sep を表示します。

<title><?php wp_title( '|', true, 'right' ); ?></title>

テンプレートタグ wp_get_document_title

今後wp_titleタグは非推奨扱いとなるでしょう。WordPress4.4から登場した新しい関数 ‘wp_get_document_title’ を使用することがよいでしょう。この関数をfunctions.phpに記入するとheader.phpに<title>は記入する必要はありません。

functions.php記入例

最低限この一行をfunctions.phpに記入すればtitleは表示されます。

add_theme_support( 'title-tag' );

区切っているセパレートを初期値の「-」から「|」に変更する場合はさらに下記のコードをfunctions.phpに追記してください。

function wp_document_title_separator( $separator ) {
$separator = '|';
return $separator;
}
add_filter( 'document_title_separator', 'wp_document_title_separator' );

初期値は「サイトタイトル – サイトディスクリプション」と表示されます。サイトディスクリプションを表示しない場合はさらに下記のコードをfunctions.phpに追記してください。

function wp_document_title_parts ( $title ) {
if ( is_home() || is_front_page() ) {
unset( $title['tagline'] );
}
return $title;
}
add_filter( 'document_title_parts', 'wp_document_title_parts', 10, 1 );

カテゴリーページやタグページのタイトルを変えたいとき。slagがxxx、表示したいページタイトルがYYYの場合は

function wp_pre_get_document_title( $title ) {
if ( is_category( 'xxxx' ) ) {
$title = 'YYY';
}
return $title;
}
add_filter( 'pre_get_document_title', 'wp_pre_get_document_title' );

記入例：

//titleの設定
add_theme_support( 'title-tag' );
function wp_document_title_separator( $separator ) {
$separator = '|';
return $separator;
}
add_filter( 'document_title_separator', 'wp_document_title_separator' );
function wp_document_title_parts ( $title ) {
if ( is_home() || is_front_page() ) {
unset( $title['tagline'] );
}
return $title;
}
add_filter( 'document_title_parts', 'wp_document_title_parts', 10, 1 );

metaタグ　http-equiv=”X-UA-Compatible”

IE8以降を使用しているユーザは、任意でレンダリングモードを互換モードにすることができますが、 X-UA-CompatibleにIE=edgeを設定することで、ユーザが互換モードにするのを防ぎます。 これにより、常にWebページを最新のブラウザで標準モードで表示させることができるようになります。

<meta http-equiv="X-UA-Compatible" content="IE=edge" >

metaタグ　viewport

スマートフォンやタブレット端末用に画面サイズを規定します。widthは画面いっぱいのサイズ、initial-scaleは初期のズーム倍率、user-scalableはズーム操作を許可するかしないかを設定します。yesだと許可 （初期値）。noだと許可しないとなります。

<meta content="width=device-width,initial-scale=1.0,user-scalable=yes" name="viewport">

shortcut icon – favicon

shortcut iconは通常ファビコン・faviconと呼ばれ、ウェブサイトのシンボルマーク・イメージとして、ウェブサイト運営者がウェブサイトやウェブページに配置するアイコン画像の俗称です。

IE8以下も含めたIE、Chrome、Firefox、Safari、Opera、Edgeの記述方法
<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/images/favicon.ico">
IE9以上のIE、Chrome、Firefox、Safari、Opera、Edgeの記述方法
<link rel="icon" type="image/x-icon" href="<?php echo get_template_directory_uri(); ?>/images/favicon.ico">
IE11以上のIE、Chrome、Firefox、Safari、Opera、Edgeの記述方法
<link rel="icon" href="<?php echo get_template_directory_uri(); ?>/images/favicon.ico">

拡張子は.icoの他にpngやgifも使用可能

<link rel="icon" type="image/png" href="<?php echo get_template_directory_uri(); ?>/images/favicon.png">
<link rel="icon" type="image/gif" href="<?php echo get_template_directory_uri(); ?>/images/favicon.gif">

サイズごとに指定する場合

<link rel="icon" type="image/png" href="<?php echo get_template_directory_uri(); ?>/images/favicon-16.png" sizes="16x16">
<link rel="icon" type="image/png" href="<?php echo get_template_directory_uri(); ?>/images/favicon-32.png" sizes="32x32">

get_stylesheet_uri style.cssを取得する

一般的に、CSSは～の中にリンク先を記述して、ファイルを読み込みます。WordPressではheader.phpに下記のようなリンクが記述され「style.css」を読み込みます。

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" media="screen" >
この「style.css」に2つ目のCSSファイルである「second.css」を追加するためには、get_template_directory_uri を使います。
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/second.css" type="text/css" media="screen" >

style.cssにタイムスタンプを付加する

style.cssを変更した際にキャッシュの影響で、変更箇所が即座に反映されない場合があります。この問題を回避するためにstyle.cssにタイムスタンプ付加します。

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>?<?php echo filemtime( get_stylesheet_directory() . '/style.css'); ?>">

html5shiv.js　Respond.js

HTML5 で作製したサイトを Internet Explorer 8（IE8）以前のバージョンで閲覧すると、TML5 から新たに導入されたタグを解釈できないためにレイアウトがくずれます。これらのタグを IE8 以前のバージョンに対応させるための対策方法のひとつである「html5shiv.js」というスクリプトを読み込ませます。また、同じくレスポンシブデザインに対応していないブラウザをレスポンシブデザイン対応にしてくれるライブラリ「Respond.js」も一緒に読み込んでおきます。

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!-- [if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

＜?php wp_head(); ?＞

WordPressのheader.phpには、＜/header＞の直前に＜?php wp_head(); ?＞を必ず入れます。

wp_head()の関数は［wp-includes］というフォルダの［default-filters.php］というPHPファイルで制御されているかと思います。wp_head()関数はデフォルトの状態でWordPressに必要なメタ情報、jQueryやCSSのファイルが読み込まれます。

各種プラグインはこれを前提に動いているので、＜?php wp_head(); ?＞が抜けているとプラグイン、やテーマが機能しない場合があります。

<?php wp_head(); ?>

最後に </head> と <body> タグを入れる

<body>タグにはクラスを付加します。

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

以上で header.php 最低限の設定が完了しました。

header.php 記入例

<TITLE>タグはテンプレートタグ wp_get_document_titleをfunctions.phpに記入するものとしてheader.phpの記入例を記します。

<!DOCTYPE html>
<html lang="ja">
<meta charset="<?php bloginfo('charset'); ?>" >
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
<meta content="width=device-width,initial-scale=1.0,user-scalable=yes" name="viewport">
<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/images/favicon.ico">
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" media="screen" >
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!-- [if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>

<?php get_header(); ?>

index.php に <?php get_header(); ?> というインクルードタグを記載します。

<?php get_header(); ?>

WordPress, オリジナルテーマ

Posted by WordPress Bookmark