WordPressテーマのheader.phpを編集してヘッダーをカスタマイズする方法をお伝えします。
WordPressサイトは、全ページの共通部分としての「サイトヘッダー」があり、この部分にはサイトタイトルやサイトロゴ、主要なページへのリンクが設置されているグローバルナビゲーションなどが組み込まれています。
サイトヘッダーは「WordPressサイト」の最上部にあるヘッダーですが、これとは別に、各ページ固有のコンテンツ部分のヘッド部分にあたる「コンテンツヘッダー」などもあります。今回は大きくWordPressサイトのヘッダーであるサイトヘッダーをWordPressテーマファイルの中のheader.phpを編集してカスタマイズする場合をお伝えします。
WordPressテーマのheader.phpを編集する
WordPressのヘッダーをカスタマイズするためにWordPressテーマ中のheader.phpを編集する場合には、WordPress管理画面から操作するか、WordPressインストールサーバーにFTPなどで接続し、header.phpをダウンロードしてローカル環境で修正します。
header.php（テーマヘッダー）は、WordPressサイト上の共通ヘッダーを定義しているファイルです。
基本的には全ページ共通のヘッダー設定ですが、カスタムページ等で、header.phpを呼び出さず独自にヘッダーを設定している場合もあります。
header.phpの有無
WordPressテーマによってはheader.phpが存在しないケースもあり、ヘッダー部分に関するファイルの名称が異なっていたり、様々なテーマディレクトリの中にheader.phpに該当するファイルが細切れのように配置されていたり、index.phpなどの中にWordPressヘッダーに関する部分が指定してある場合もあります。
WordPressテーマにheader.phpがある場合は、そのファイルの存在の確認と編集するために、管理画面からチェックしてみましょう。
また、テーマ内の「カスタマイズ」でヘッダータイプを選択可能なテーマなどにおいては、header.php内に、別のphpファイルの呼び出しが組み込まれている場合があります。
管理画面からheader.phpを確認し、編集する
WordPressにログインすると管理画面が表示されます。
WordPress管理画面の左側に操作メニューが表示されていますので、その中の「外観」から「テーマの編集」を選択します。
すると画面右側にWordPressテーマファイルの一覧が表示されますので（深い階層にあるものは表示されない場合があります）、その中にheader.phpがある場合は、その部分をクリックします。なお、WordPress標準テーマの場合は、「テーマヘッダー（header.php）」と表記されています。
この部分を修正することで、WordPressサイトのヘッダーのカスタマイズを行うことができます。
WordPressサイトのヘッダーのカスタマイズ
WordPressサイト ヘッダー
WordPressサイトのヘッダーには全てのページに共通した部分であるサイトロゴやサイトタイトル、キャッチフレーズ、グローバルナビゲーションなどが設置されていますが、header.phpを編集することで、こうした要素の配置変更やサイズ変更、要素の属性変更などのカスタマイズを行うことができます。
その他、header.phpにはメタ設定が記述されていることが多く、<head>内の記述の変更、追加などを行う場合header.phpを編集することがあります。
ヘッダーの表示項目
基本的にはブログスタイルのWordPressサイトにおいて、ヘッダー部分に企業ホームページらしくするためのお問い合わせフォーム・電話番号などの画像や画像リンクを配置したりすることもできるようになります。グローバルメニューの他にもこうしたホームページ経由の問い合わせ獲得のための工夫をしてみるのもよいでしょう。
WordPressテーマによっては、テーマカスタマイズ機能によって設定できる場合もありますが、細かなカスタマイズにはheader.phpを編集する必要があります。
<?php wp_head(); ?>
なお、header.php内などにある
<?php wp_head(); ?>
という項目は、WordPressからの自動出力項目を吐き出す部分となります。
この部分の出力の制御は、functions.phpで行います。
ヘッダーにおける条件分岐でページ属性ごとにmeta設定を振り分ける
header.phpなどWordPressテーマ内のヘッダーに関する共通ファイルにおいて、WordPressの条件分岐を利用することで、ページ属性ごとにmeta設定を振り分けることができます。
その一つの例としては、404ページにおいて、「meta http-equiv=”refresh”」を利用した転送を実装するというようなものです。
WordPressテーマの404.phpを編集して404ページをカスタマイズする
また、例えば投稿の場合のみ表示させる時は次のようなコードをヘッダー（header.php）に挿入し、内容を記述します。
<?php if(is_single()): ?>
「投稿」の場合に表示するコード
<?php endif; ?>
こうしたもの使い方は様々です。
SEOの一つとして、ページ属性ごとに加えるmeta属性を設定するために利用することもありますし、「ある特集コーナーだけロゴを変える」というような外観上の工夫にも使うことができます。
例）特定のカテゴリーアーカイブページに noindex を挿入（条件分岐で対応）
たとえば「news」というスラッグのカテゴリーアーカイブだけ、Googleのインデックス対象から外したいとします。その場合、header.php の <head> 内に条件分岐でnoindexを挿入します。
下記は一例です。テーマによっては別の書き方のほうが良い場合もあります。
<?php
// header.php の <head> 内、<meta charset> や <title> より後に記述
if (is_category('news')) {
echo '<meta name="robots" content="noindex, follow">' . "\n";
}
?>
例）DNSプリフェッチの手動挿入
DNSプリフェッチ外部ドメイン（例：Google Fonts、jQuery CDNなど）への接続を事前に解決し、ページ表示を高速化します。
WordPress のバージョン4.6以降は一部のDNSプリフェッチが自動挿入されますが、手動で挿入することもできます。
<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="dns-prefetch" href="//ajax.googleapis.com">
<link rel="dns-prefetch" href="//use.fontawesome.com">
ファビコンの手動設定
ファビコン（favicon）はブラウザのタブやブックマーク一覧で表示される小さなアイコンです。WordPressのカスタマイザーで設定する方法もありますが、header.php に直接記述する方法も可能です。
WordPressカスタマイザー（外観 → カスタマイズ → サイト基本情報）でファビコンが設定されている場合、そちらが優先されます。二重定義を避けたい場合は、functions.php で remove_action(‘wp_head’, ‘…’) を使って調整可能です。
キャッシュにより古いファビコンが表示され続けることがあるります。その場合、開発時はブラウザのキャッシュをクリアするか、画像URLにクエリパラメータ（例：favicon.png?v=2）をつけます。
favicon.ico を手動で設定
favicon.ico を テーマフォルダ直下（例：/wp-content/themes/your-theme/favicon.ico）に設置している場合。
<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/favicon.ico">
iOSやAndroid対応も含める場合
<!-- 汎用ファビコン -->
<link rel="icon" type="image/png" href="<?php echo get_template_directory_uri(); ?>/favicon.png">
<!– Apple Touch Icon（iPhone/iPad用）–>
<link rel=”apple-touch-icon” sizes=”180×180″ href=”<?php echo get_template_directory_uri(); ?>/apple-touch-icon.png”>
<!– Android用アイコン –>
<link rel=”icon” type=”image/png” sizes=”192×192″ href=”<?php echo get_template_directory_uri(); ?>/android-chrome-192×192.png”>
推奨画像サイズ
- favicon.ico（16×16 または 32×32）
- favicon.png（32×32 推奨）
- apple-touch-icon.png（180×180）
- android-chrome-192×192.png（192×192）
WordPressサイトの「ヘッダー」・「フッター」カスタマイズ
ホームページ制作 京都 ファンフェアファンファーレでは、WordPressテーマファイルの編集によるWordPressサイトのヘッダーのカスタマイズをはじめ、お客さまのニーズに合わせたWordPressのカスタマイズを手がけております。
- 「WordPressサイトを運営しているが、テーマ設定やウィジェット設定でのヘッダー設定がうまくできない」
- 「WordPressテーマ純正のヘッダーの仕様を変更したい・デザインを変更したい」
- 「ヘッダーロゴのサイズを変更したい」
といったケースにおいて、WordPressサイトのヘッダーを構成するWordPressテーマファイルを編集することで、ご希望どおりにカスタマイズさせていただいております。
WordPressサイトの「ヘッダー」・「フッター」カスタマイズ
WordPressの設定・カスタマイズ・修正・編集方法の参考例
（初回投稿日 2015年10月28日）
WordPressカスタマイズ・修正
ホームページ制作 京都のWeb制作会社ファンフェアファンファーレでは、WordPressで制作されたウェブサイト・ホームページのカスタマイズサービスとして、WordPress（ワードプレス）のテーマ（テンプレート）やプラグインのカスタマイズサービスを提供しております。
WordPressカスタマイズの他、WordPressに関する様々な機能の実装や調整、編集はもちろん、各種エラーの修正・復旧・復元に対応しております。
WordPressでのホームページ制作（WordPressサイト制作）
ホームページ制作 京都 ファンフェアファンファーレでは、ホームページ制作にあたり、WordPressでのホームページ制作（WordPressサイト制作）を推進させていただいております。
企業のWebマーケティングを加速するWordPressでのホームページ制作（WordPressサイト制作）ならお任せください！新規WordPressサイト制作はもちろん、htmlサイトからのホームページリニューアル、WordPressサイトのリニューアルにも対応しています。
