WordPress でBootstrap4を使ったレスポンシブ対応のオリジナルテーマを作る【header.php】Bootstrap4編

2018年10月31日2018年11月03日

Contents

1. DOCTYPE宣言<!DOCTYPE html>
2. html要素のlang属性
3. charset 属性
- 3.1. テンプレートタグ <?php bloginfo(); ?>
4. <TITLE>タグ
- 4.1. テンプレートタグ <?php wp_title( $sep, $display, $seplocation ); ?>
- 4.2. テンプレートタグ wp_get_document_title
5. metaタグ　http-equiv=”X-UA-Compatible”
6. metaタグ　viewport
7. shortcut icon – favicon
8. Bootstrap4 の style.cssを読み込む（BootstrapCDN版）
9. BootstrapCDN – JS, Popper.js, and jQuery
10. get_stylesheet_uri style.cssを取得する（）
11. html5shiv.js　Respond.js
12. ＜?php wp_head(); ?＞
13. 最後に </head> と <body> タグを入れる
14. header.php 記入例

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">

Bootstrap4 の style.cssを読み込む（BootstrapCDN版）

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

BootstrapCDN – JS, Popper.js, and jQuery

Bootstrap4のJavascriptやjQueryなどはfooter.phpで読み込みます。下の記事を参考にしてください。

WordPress でBootstrap4を使ったレスポンシブ対応のオリジナルテーマを作る【footer.p

https://wordpress.japanbookmark.com/wordpress/footer-php-bootstrap4/

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" />

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="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<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(); ?>>

WordPress, オリジナルテーマ

Posted by WordPress Bookmark