Go to Qiita Advent Calendar 2024 Top
LoginSignup
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@makkie(makkie)

【初心者向け】Wordpressテーマを自作する［header.php］

Last updated at Posted at 2022-12-22

ファイルの構造や解説等、Wordpress（以下、WP）のテーマを自作する際の基本的な部分は、こちらの記事で紹介しています。

ここでは、WPのテーマを作る上で必須のheader.phpのコードを交えた解説を行います。
とりあえず解説はいいからコードだけ、の方は以下をどうぞ。

コード（HTMLとPHP）

ファイルの先頭には、テーマカスタマイザーからもわかるようにTemplate Name: Headerを入れています。

<?php
//====================================================
//  Template Name: Header
//====================================================
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo('charset'); ?>" />
    <title><?php wp_title('|', true, 'right'); ?><?php bloginfo('name'); ?></title>
    <meta name="viewport" content="width=device-width">
    <meta name="description" content="<?php bloginfo('description'); ?>">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <?php
    //StylesheetやWebfontはfunctions
    wp_head(); ?>
</head>
<body>
    <header>
        <?php mycustom_logo(); ?>
    </header>
    <?php
    if( !is_home() || !is_front_page()) {
    ?>
    <nav id="nav-head">
    <?php
    //囲みdiv、ul等全て削除
    $menuParametersh = array(
        'container' => false,
        'echo' => false,
        'theme_location' => 'nav-head', //オプション：表示したいメニューの名称
        'items_wrap' => '%3$s',
        'depth' => 0,
    );
    echo strip_tags(wp_nav_menu( $menuParametersh ), '<a>');
    ?>
    </nav>
    <?php
    }
    ?>

解説

header.phpとは

WPのテーマを自作する際の必須ファイルです。
Webサイトの「ヘッダー」と呼ばれる上段部分のコンテンツを表示するファイルです。
詳しい説明はCodexをご覧ください。ただし、翻訳の関係なのかわかりにくい表現の日本語があります。
また日本語版は、最新の情報が掲載されていない事が多々ありますので、英語版も合わせてみると良いです。

テーマフォルダの中にindex.php header.php footer.php sidebar.php があればとりあえずのテーマができます。

Webサイトを表示するうえで必須なコード

DOCTYPEやhead body等、HTMLサイトでも必ず書くタグをWPでも書きます。
ただ違うのは、<?php ?>で囲んである箇所がWPの独自関数と呼ばれるもので、これを入れておくと、管理画面からもヘッダ情報が修正できるので、ぜひ利用してください。
直接記載することも可能です。

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo('charset'); ?>" />
    <title><?php wp_title('|', true, 'right'); ?><?php bloginfo('name'); ?></title>
    <meta name="viewport" content="width=device-width">
    <meta name="description" content="<?php bloginfo('description'); ?>">
    <?php
    wp_head(); ?>
</head>
<body>

ここで注意するのは、header.phpはWebサイトの上段部分のコンテンツを表示するファイルなので、bodyとhtmlは閉じないでください。タグを閉じるのはfooter.phpで行います。

titleは設定 > 一般にあるサイト名をbloginfo('name')で右側に表示する様にし、TOP以外のページではwp_titleでそのページのタイトルを表示する様にしています。
wp_title('|', true, 'right');はページのタイトル｜サイト名と表示されるように、ページタイトルの右側にバーティカルバーを入れています。

meta name="viewport"は、レスポンシブ対応サイトでは必須です。
これがないといくらメディアクエリ―を書いても反映されません。

最近、キーワードを入力していても検索の表示順などに影響しないことを知ったので、meta name="keywords"入れません。
meta name="description"とコンテンツの情報から、検索にヒットするようですので、WPの管理画面、設定 > 一般にあるサイトの説明はキチンと入力しましょう。

bodyタグの中

カスタムロゴ

このコードは、上段にロゴマークとカスタムナビゲーションが表示されるようにしています。

    <header>
        <?php mycustom_logo(); ?>
    </header>

mycustom_logo();は独自関数をfunctions.phpに書いて利用しています。
ロゴ画像は、カスタマイザーで登録しますが、登録されていない時にデフォルトだと何も表示されないので、サイト名がテキスト表示されるようにしています。

functions.php
//++++++++++++++++++++++++++++++++++++++++++
//カスタムロゴ
//外観-カスタマイズで画像指定
//画像がない時はサイトタイトル表示
//++++++++++++++++++++++++++++++++++++++++++
add_theme_support('custom-logo');
function mycustom_logo(){
  if( has_custom_logo() ){
   $custom_logo_id = get_theme_mod( 'custom_logo' );
   $image = wp_get_attachment_image_src( $custom_logo_id , 'full' );
     $mylogo = $image[0];
   $mylogo = '<img src="'. $mylogo .'" class="custom-logo" alt="'. get_bloginfo( 'name' ) .'" />';
  } else {
    $mylogo = get_bloginfo( 'name' );
  }
  if( is_front_page() && is_home()){
   echo '<h1 class="site-logo">'. $mylogo .'</h1>';
  } else {
   echo '<span class="site-logo"><a href="'. home_url() .'" rel="home">'. $mylogo .'</a></span>';
  }
}

カスタムナビゲーション

下記コードは、 if( !is_home() || !is_front_page()) {としているので、TOPページでカスタムナビゲーションは表示されません。すべてのページで表示する場合は、1～3行目の <?php if( !is_home() || !is_front_page()) { ?>と17～19行目の<?php } ?>を削除してください。

    <?php
    if( !is_home() || !is_front_page()) {
    ?>
    <nav id="nav-head">
    <?php
    //囲みdiv、ul等全て削除
    $menuParametersh = array(
        'container' => false,
        'echo' => false,
        'theme_location' => 'nav-head', //オプション：表示したいメニューの名称
        'items_wrap' => '%3$s',
        'depth' => 0,
    );
    echo strip_tags(wp_nav_menu( $menuParametersh ), '<a>');
    ?>
    </nav>
    <?php
    }
    ?>

カスタムナビゲーションは標準だとwp_nav_menu();で表示しますが、それだとul liで囲まれてしまうので、strip_tagsで付与されないようにしています。

    $menuParametersh = array(
        'container' => false,
        'echo' => false,
        'theme_location' => 'nav-head', //オプション：表示したいメニューの名称
        'items_wrap' => '%3$s',
        'depth' => 0,
    );
    echo strip_tags(wp_nav_menu( $menuParametersh ), '<a>');

ul liが欲しい方は、上記コードを削除しwp_nav_menu();でカスタムナビゲーションを表示してください。

カスタムナビゲーションに自動でidやclassが付与され、デザインを適用するのも煩雑になってしまうため、下記コードでidやclassを削除しています。
CSSを適用する時は、wp_nav_menu();をnavで囲んでCSSを適用してください。

functions.php
//カスタムメニューで自動挿入されるタグ（id + class）を削除
function my_nav_menu_id($menu_id){
	$id = NULL;
    return $id;
}
add_filter('nav_menu_item_id', 'my_nav_menu_id');

function remove_menu_aria_current( $atts, $item, $args ){
	unset ( $atts['aria-current'] );
	return $atts;
}
add_filter('nav_menu_link_attributes', 'remove_menu_aria_current', 11, 5);

カスタムナビゲーションがそもそも表示されない

カスタムナビゲーションがそもそも表示されないよって方はこちらのコードをfunctions.phpに追加してください。

functions.php
//++++++++++++++++++++++++++++++++++++++++++
//ナビゲーション
//++++++++++++++++++++++++++++++++++++++++++
function register_my_menus() {
  register_nav_menus( array(
    'nav-head' => 'ヘッダーナビ',
    'nav-foot' => 'フッターナビ'
  ));
}
add_action( 'after_setup_theme', 'register_my_menus' );

まとめ

WPの良い所は、「ユーザーが更新できる」事だと思うので、出来るだけWPの基本機能で管理画面から修正できるようになっているのがベストと考えています（お仕事は減っちゃいますが）ので、WPの独自関数を用いている個所が多いです。
HTMLのサイトと同じ様に直接書き込むこともできますので、仕様によって使い分けても良いかもですね。

カスタムナビゲーションの部分は、少しごたごたしていますが、覚えてしまえば大丈夫かと思います。
特にfunctions.phpに書いた自動でidやclassが付与されないようにするコードは、CSSを書く上でだいぶ楽になるので、覚えていて損はないかと思います。

10年以上WPでWEBサイト制作をしていますが、独学のため、色々間違えている個所などありましたらご指摘いただけますと幸いです。

3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?