WordPressテーマの作り方2(メタ情報,head内コード)

WordPressテーマの作り方2(メタ情報,head内コード)

メタ情報,head内のコード

この記事ではheader.phpに書くコード、特にheadタグ内に書くコードを紹介します。cssとの紐づけとかメタ情報(ページに関する詳しい情報)を表すコードの紹介をします。検索順位(SEO)に大きく響くところでもあるので是非見てください。

header.phpの準備

まずはheader.phpファイルを作成しましょう。作成したら、htmlのひな形である<!DOCTYPE html>以下コードを記述します。vscodeを使っている人は、htmlと入力して候補に出てきた「html:5」を選択すると勝手にひな形を入力してくれます。

<!DOCTYPE html>~</header>まで記述すると、下のようになります。

<!DOCTYPE html>

<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<header>

</header>

titleタグ

titleタグは、ページにタイトルをつけるタグです。表示部分でいうと、ブラウザのタブ部分を担当するのでページごとに表示内容が違ってきます。

ページタイトル | ブログサイトの名前  を表示するためのコード↓

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

style.cssを読み込む

style.cssを読み込むために、wordpressでは下記のように記述します。

<link rel="stylesheet" href="<?php echo get_stylesheet_uri();?>">

style.css以外のcssを読み込む際、テーマディレクトリURLを取得したいこともあると思います。URLを取得する必要があるときは、下記コードで取得できます。

<?php echo get_template_directory_uri();?>

そうそう、もちろんリンク先直書きもできるので、下記コードのようなgoogleフォントのURLとかも記述できます。

<link href="https://fonts.googleapis.com/css?family=Open+Sans|Yellowtail" rel="stylesheet">

bodyタグにクラス名を自動的に付与する

bodyタグにクラス名を自動的に挿入して、ページの区別をすることができます。記事の個別ページを生成した場合はクラス名に「single」などが付与されます。トップページと記事ページに分けてcssを記述することができるので便利になると思います。

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

wordpressが用意してくれるhead内情報

プラグインを導入すると、プラグイン固有のcssを読み込む必要が出てきますが、それを勝手に入力してくれる関数があります。

記述場所は</head>の直前に記述します。

...
<?php wp_head(); ?>
</head>
...

ここまでが、管理人はたぴが思う必要最低限のheader.phpのコードです。

ここまで説明したheader.php内のコード

下記にここまで説明したコードを組み合わせたheader.php内のコードを載せます。

<!DOCTYPE html>

<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
        <?php wp_title( '|', true, 'right' ); ?>
        <?php bloginfo('name');?>
    </title>
    <link rel="stylesheet" href="<?php echo get_stylesheet_uri();?>">

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

</header>

メタ情報の記述は随時更新!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA