CSS や JavaScript などは header で直接読み込むではなく
functions.php に設定を書いて出力する
タイトルタグのサポートを許可するという記述
add_theme_support( 'menus' );
add_theme_support( 'title-tag' );
■タイトルタグを呼び出す
add_theme_support( ‘title-tag’ );
結果出力されたタイトル
function WP_title( $title ) {
if ( is_front_page() && is_home() )
{ $title = get_bloginfo( 'name', 'display' );}
elseif ( is_singular() )
{$title = single_post_title( '', false );} return $title;}
add_filter( 'pre_get_document_title', 'WP_title' );
タイトルタグの判定
if ( is_front_page() && is_home() )
もし メインブログページが表示 &&(かつ) メインブログページが表示 ならば
{ $title = get_bloginfo( 'name', 'display' );}
ブログのタイトルを取得 変数$title
に代入 を行う
elseif ( is_singular() )
もし 個別投稿のページかを判定 ならば
{ $title = single_post_title( '', false ); }
個別の投稿のタイトルを取得 変数$title
に代入 を行う
■投稿・固定ページに関係なくサイトのフロントページが表示されているかを判定
is_front_page()
■メインブログページが表示されているかを判定
is_home()
■個別投稿のページかを判定
is_singular()
is_single()、is_page() 、is_attachment() のいずれかに該当する場合に真を返す。
■ブログのタイトルを取得し、変数$title
に代入
get_bloginfo()
■個別の投稿のタイトルを取得し、変数$title
に代入
single_post_title()
■else if (条件)で条件分岐
if( 条件式1 ){ 処理1 }
else if ( 条件式2 ){ 処理2 } else{ 処理 }
条件1ならば処理1を行う、もし条件式2ならば処理2を行う、 そうでなければ■■を行う
<■else if文の解説>-----------------------------------------------------
最初に、is_front_page() && is_home() という条件が評価され、
メインブログページが表示 かつ インブログページが表示
{ $title = get_bloginfo( 'name', 'display' );} が反映
$titleにブログの名前が設定
次に、elseifであるis_singular()という条件が評価され、
個別投稿のページかを判定
{ $title = single_post_title( '', false ); }が反映
$titleに個別の投稿のタイトルが設定
上記の2つの条件のいずれかが成立する場合に対応する処理を行っている
そのため、それ以外の条件に対応するelse文は不要
もし、追加の条件に対して別の処理を行いたい場合は、適切な条件を追加し、それに対応する処理を記述することもできる
---------------------------------------<■else if文の解説>--------------
フックの使用
WordPressにはフィルターやフックと言ったものがあり、
これを利用するとでページの表示にカスタマイズを行うことができる
function WP_title( $title )
{ else if文が入っている場所:
もし メインブログページが表示 かつ インブログページが表示ブログの名前が設定
個別投稿のページが表示個別の投稿のタイトルが設定 }
return $title;
}
add_filter
ページを構成する際に自分が作った関数を通してページを出力
( 'pre_get_document_title', ' WP_title' );
ドキュメントタイトル pre_get_document_titleフィルターフックが
<title></title>タグを取得する前にフック 発生時に実行。結果がタイトルタグの出力に反映
■指定したフィルターフックに関数を追加
add_filter ()
WordPressがページを構成する際に自分が作った関数を通してページを出力
■フィルターフック
pre_get_document_title
WordPressのドキュメントタイトル(<title></title>タグ)を
取得する前のフックポイント
■タイトルタグの出力に反映
WP_title
pre_get_document_titleフィルターフックが発生した時に実行され
その結果がタイトルタグの出力に反映される関数
header.php から title タグを削除したので通常は何も出力されないが、
add_filter('pre_get_document_title', 'WP_title')を通して処理を行うことで、<head></head> の部分が出力されるタイミングに合わせてタイトルタグも出力される
スタイルシートの読み込み
wp_enqueue_style
ファイルを読み込むタグを出力
( 'mplus1p', '//fonts.googleapis.com/earlyaccess/mplus1p.css', array() );
wp_enqueue_style
ファイルを読み込むタグを出力
('normalize',get_template_directory_uri()'/css/normalize.css',
テーマディレクトリの中のデータを出力
array(), '4.5.0' );
wp_enqueue_style
ファイルを読み込むタグを出力
( 'WP', get_template_directory_uri() .'/css/WP.css', array(),
テーマディレクトリの中のデータを出力
'1.0.0' );
■テーマディレクトリのURIを取得
get_template_directory_uri()
WordPressを経由してURLを出力
echo して出力するとテーマディレクトリの中のデータを出力する
※WordPressは相対パスで記述しても画像を表示することができない
■ファイルを読み込むタグを出力する関数
wp_enqueue_style()
引数として、スタイルシートの識別子(ハンドル)、ファイルのURL、依存関係、バージョンなどを指定。それぞれの行で、wp_enqueue_style()関数が呼び出され、指定されたスタイルシートが読み込まれる
JavaScriptも使って読み込ませることができる
-----使用例------------------------------
functions.php
<?php
add_theme_support( 'menus' );
add_theme_support( 'title-tag' );
function WP_title( $title ) {
if ( is_front_page() && is_home() ) { //トップページなら
$title = get_bloginfo( 'name', 'display' );
} elseif ( is_singular() ) { //シングルページなら
$title = single_post_title( '', false );
}
return $title;
}
add_filter( 'pre_get_document_title', 'WP_title' );
function WP_script()
{
wp_enqueue_style
( 'mplus1p', '//fonts.googleapis.com/earlyaccess/mplus1p.css', array() );
wp_enqueue_style
('normalize',get_template_directory_uri()'/css/normalize.css', array(),
'4.5.0' );
wp_enqueue_style( 'WP', get_template_directory_uri() . '/css/WP.css', array(), '1.0.0' );
}
add_action( 'wp_enqueue_scripts', 'WP_script' );
---------------------------使用例--------
📁フォルダ
(現時点で未作成フォルダ含む)
WP/css/WP.css
/footer.php
/functions.php
/header.php
/images/
/index.php
/page.php
/screenshot.png
/searchform.php
/sidebar.php
/single.php
/style.css