鳥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