【テーマの自作】header.phpの作成 – titleの設定

今回はheader.phpで設定する「title」について記述します。

title(titleタグ)を作成する際には、実際にはheader.phpに記載せずにfunction.phpに「add_theme_support( ‘title-tag’ )関数」を記載することになるのですが。

まぁ順を追って説明していきます。

初心者の私が実際にやって出来たことをなるべく簡素に説明していきます。

スポンサーリンク

ヘッダーで記載するもの(おさらい)

header.phpには、主に以下のタグを記述することは【テーマの自作】header.phpの作成 – 構成で書かせて頂きました。

・htmlタグの始まり部分(<html>)

・headタグ(<head></head>)

・titleタグ(<title></title>)

・wp_head();関数(<?php wp_head(); ?>)

・bodyタグの始まり部分(<body>)

 

本記事ではその内のtitleタグについて説明します。

ちなみにtitleタグで記述されたものは、Webサイトを開いた時のページタイトルになります。

具体的には、画面上部にあるここの表示内容とか

 

Google等の検索エンジンで検索したときのタイトルになります。

 

アクセス数をあげるためにはかなり重要なところなので、ちゃんと設定していきましょう。

スポンサーリンク

titleタグに記載するもの

【テーマの自作】header.phpの作成 – 構成で書かせて頂いた通り、WordPressのテーマの自作をする上で(WordPress4.1以降から)titleタグは不要となりました。

なので、titleタグはごっそりなくしちゃって問題ありません。

具体的には、(header.phpに記載する最低限の構成だけで書くと)以下のような感じでOKです。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8" />
        <?php wp_head(); ?>
    </head>
<body <?php body_class(); ?>>

 

しかし、titleタグを消すと疑問が1つでてきます。

それは、「じゃぁページタイトルはどこで決定するんだ?」っていうこと。

その答えは、「add_theme_support( ‘title-tag’ )関数を使って決定する」となります。

 

果たして、この「add_theme_support( ‘title-tag’ )関数」とは一体何者なのか。

次項にて説明していきます。

スポンサーリンク

add_theme_support( ‘title-tag’ )関数の使い方

それでは早速試しに、add_theme_support( ‘title-tag’ )関数を使っていこうと思います。

 

しかしその前に。

add_theme_support( ‘title-tag’ )関数を使えばheader.phpにtitleタグは不要であることを前項で説明しました。

なので、まずは事前準備としてheader.phpからtitleタグをごっそり消しておきます。

titleタグをごっそり消すとページタイトルは何も設定されてない状態になるので、ページタイトルはURLの状態になります。

 

これで、add_theme_support( ‘title-tag’ )関数を使う準備は終了です。

それでは早速、実際にadd_theme_support( ‘title-tag’ )関数を使っていきましょう。

add_theme_support( ‘title-tag’ )関数の使い方

add_theme_support( ‘title-tag’ )関数を使うためには、以下の記述を「function.php」に追加します。

<?php
    function setup_theme() {
        add_theme_support( 'title-tag' );
    }
    add_action( 'after_setup_theme', 'setup_theme' );
?>

 

function.phpは、自作した関数を記載するファイルです。

function.phpに関数を記載することで、その関数が使えるようになります。

関数なので、phpタグ内に書くことも忘れないでくださいね(htmlタグではNGですよ)

 

そして、function.phpに上記の関数を追加するだけで、ページタイトルは以下のようになります。

 

以上で設定終了です。簡単ですね。

スポンサーリンク

add_theme_support( ‘title-tag’ )関数のカスタマイズ

次に、add_theme_support( ‘title-tag’ )関数を少しずつカスタマイズしてみましょう。

キャッチフレーズを消す

まずは、先ほどのページタイトルから「キャッチフレーズ」の部分を消すやり方です。

 

キャッチフレーズを消すには以下の記述を加えます。(7~13行目が加えた部分です)

<?php
    function setup_theme() {
        add_theme_support( 'title-tag' );
    }
    add_action( 'after_setup_theme', 'setup_theme' );

    function remove_tagline($title) {
        if ( isset($title['tagline']) ) {
            unset( $title['tagline'] );
        }
        return $title;
    }
    add_filter( 'document_title_parts', 'remove_tagline' );
?>

 

それを加えることで、キャッチフレーズを消すことが出来ます。

 

ページタイトルの接続文字を変更する

次のカスタマイズは、ページタイトルの接続文字を変更する方法です。

 

今まで記載した内容だと、デフォルトで接続文字は「 – 」が適用されます。

なので、サイト内にあるどこかの記事を表示した場合には、

「記事のタイトル – サイト名」

と表示されます。

特に「 – 」で接続するのに問題なければ変更する必要はありませんが、自分は記事のタイトルに「 – 」を使っているので見にくくなってしまうんですよね。

そういった場合には、以下のような記述を足すことで接続文字を変えることが可能です(15~19行目を足していますよ)

<?php
    function setup_theme() {
        add_theme_support( 'title-tag' );
    }
    add_action( 'after_setup_theme', 'setup_theme' );

    function remove_tagline($title) {
        if ( isset($title['tagline']) ) {
            unset( $title['tagline'] );
        }
    return $title;
    }
    add_filter( 'document_title_parts', 'remove_tagline' );

    function custom_title_separator($sep) {
        $sep = '|';
        return $sep;
    }
    add_filter( 'document_title_separator', 'custom_title_separator' );
?>

 

ちなみに、接続文字は「 | 」で設定しています。

設定しているのは16行目のシングルクォート(’)で囲まれた部分です。

上記のように設定すると、ページタイトルが以下のように変更されます。

 

以上で、titleタグ(実際にはfunction.phpに記述を追加するだけとなりましたが)の説明は終了です。

add_theme_support( ‘title-tag’ )関数を使えば、ページタイトルの設定はとても簡単ですね。

最後に

今まで記載した記事の内容と今回の記事の内容、そしてbodyタグ以下に自分の作成したい記述(htmlタグやphpタグ)をしていけばheader.phpの完成となりますので、header.phpの作成に関する記事はこれが最後となります。

 

しかし実は、このheader.phpのbodyタグ以下を作成して、いざ自作のテーマに反映させたとしても、まだheader.phpの記載内容は適用されません。

反映させるためにはindex.phpやarchive.phpでheader.phpの記載内容を呼び出してあげる必要があります。

詳しくは、index.phpの作成やarchive.phpの作成についての記事にて説明していきます。

他のWordPressに関する記事

WordPressまとめ

WordPressに関する記事をテーマごとにまとめています。 「使い方」と「テーマの自作」については、上から順番に見ていくことでわかりやすいように作成しています。 スポンサーリンク [adcode] [outline[…]

スポンサーリンク