2021年3月2日

 WordPressテーマ制作

【WordPress テーマ制作】 STEP-03 header.phpを作る

WordPressテーマの土台ができたら目的とするサイトの要件に合わせてコードをどんどん記述していきます。このステップでは、「header.php」を製作します。「header.php」はテンプレートファイルで記述される「get_header();」で呼び出されます。では早速記述を進めていきましょう。

htmlタグに追記する

前回作成した「header.php」を開きます。前回までの進捗状況は下のようになっているでしょう。

<!DOCTYPE html>
<html>
    <head>
        <title>ページのタイトル</title>
    </head>
    <body>

このファイルに追記していきます。まず、「html」タグのアトリビュートを追加し値を書き込みます。

<html lang="ja" dir="ltr">

詳しい説明は省きますが、langは言語を指定し、dirは文字方向を指定します。値が「ltr」の場合は left to rightと、左から右へと文字を読む言語の時に記載します。アラビア語などの場合は逆に right to leftとなるので値は「rtl」を記述します。

metaタグを追記する

次に、metaタグを記述していきます。

記述した方がいいもの

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
// 表示の設定
<meta charset="utf-8" />
// 文字コードの指定
<meta name="robots" content="noindex,nofollow" />
// エンジンへのインデックスとクロールをしてほしくない場合に指定
<meta name="description" content="サイトの説明">
// サイトの説明を60文字程度で記述します。

<meta http-equiv="X-UA-Compatible" content="IE=edge">
// クライアントがIEの場合、常に標準モードで表示させるようにする

記述しなくてもいいもの

<meta name="author" content="制作者名、またはURLなど">
// サイトの制作者
<meta name="generator" content="制作に使用したアプリケーション">
// サイトの制作に使用したアプリケーション

linkタグを追記する

サイトのスタイルを指定するCSSなどはlinkタグを用いて読み込みます。

<link rel="stylesheet" href="<?php echo get_stylesheet_uri();?>">
// スタイルシートを読み込む(get_stylesheet_uri()でテーマルートのsytle.cssを読み込みます)
<link rel="icon" href="/favicon.ico">
// favicon.icoを設置しているURIを指定します

titleタグを追記する

次に、ページのタイトルタグを記述します。ここでは投稿タイトルをページタイトルとする場合の記述をしています。用途や想定するテーマに合わせて適宜変更してください。

<title>
<?php
  global $page, $paged;
  if (is_search()) :
    wp_title('', true, 'left');
    echo ' | ';
  else :
    wp_title('|', true, 'right');
  endif;
  bloginfo('name');

  if ($paged >= 2 || $page >= 2) :
    echo ' | ' . sprintf('%sページ', max($paged, $page));
  endif;
?>
</title>

wp_head();を追記する

</head>の前にwp_head();を追記して、header.phpの作成をいったんここで終了します。出来上がったファイルはこのようになっています。

// header.php
<!DOCTYPE html>
  <html lang="ja" dir="ltr">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta charset="utf-8" />
    <meta name="robots" content="noindex,nofollow" />
    <meta name="description" content="サイトの説明">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="author" content="制作者名、またはURLなど">
    <meta name="generator" content="制作に使用したアプリケーション">
    <title>
    <?php
      global $page, $paged;
      if (is_search()) :
        wp_title('', true, 'left');
        echo ' | ';
      else :
        wp_title('|', true, 'right');
      endif;
      bloginfo('name');

      if ($paged >= 2 || $page >= 2) :
        echo ' | ' . sprintf('%sページ', max($paged, $page));
      endif;
    ?>
    </title>
    <?php wp_head();?>
  </head>
  <body>

JQueryや、APIなどの機能を追加する場合で、head内に記述する必要があるものもここに記述しますが、今回は割愛して機能を追加する時にまたご紹介したいと思います。まずはこの状態で進めていきます。

NOTICE
このページは2021年3月2日に作成されています。閲覧時期によっては情報が古い可能性があります。免責事項をご確認ください。

関連記事

このページのTopへ