カスタムメニュー wp_nav_menu

ヘッダーにあるwp_nav_menuタグは固定ページをそのままナビゲーションメニューとして使用したり，任意のページを管理画面からカスタムメニューとして登録し、出力する事ができます。

カスタムメニューは管理画面サイドにある「外観」→「メニュー」から作成する事ができます。
完全にオリジナルのリンクメニューを作る事もでき、カテゴリをそのままリンクとして出力することもできるのでCMS作成にこのタグはかかせません
メインメニューとして使えばとても便利です。
デフォルトではついていませんが、パラメータを加える事で任意のクラス名やIDを付加することもできます。

TOPページとh1を切り分ける is_home() || is_front_page()

ヘッダー部分の最初の処理、下記の部分はほんの一部ですがこれだけでもわけがわからなくなってしまいます。
この青い部分はどういう処理をしているかというと $heading_tagという変数にis_home() (サイトのTOPページ)とis_front_page() (その他のページ)の時にh1かdivを切り分ける処理を格納しています。
ですので、それ以降は$heading_tag; だけで ( is_home() || is_front_page() ) ? 'h1' : 'div'; という内容が出力されています。

<div id="header">
    <?php $heading_tag = ( is_home() || is_front_page() ) ? 'h1' : 'div'; ?>
    <<?php echo $heading_tag; ?> id="site-title"><a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></<?php echo $heading_tag; ?>>
    <p class="discprition"><?php bloginfo('description'); ?></p>

サイトのTOPページとそれ以外のページでなぜh1とdivのきり分けが必要なのか？
それは全ページでh1が重複してしまわないようにするため、h1は各ページで変えた方がSEO的にいいからです。

ヘッダーテンプレートの枠組みを作成

WordPressでオリジナルのテンプレートを作成するとき、phpのロジック部分を変更する事ができなくても、どのタグがどんなHTMLを書き出しているかを把握するだけでもデザインのカスタマイズは可能です。

今回は上の画像のような枠組みでテンプレートをカスタマイズしたいと思います。

ここで必要なのはheaderで使う<div id="header">～</div>とmenuで使う<ul class="mainnav">

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
～
</head>

<body <?php body_class(); ?>>
<div id="wrap">
<div id="header">
～
        <ul class="mainnavi clearfix">
            <li>～</li>
        </ul>
～
</div>
<div id="main" class="clearfix">


実際には省略している所にもっと複雑なソースコードがありますが、デザインを変更するために重要な部分は上記のidやclassで囲まれた部分です。
ロジックを変更しないといっても仕組みが分からないとデザインができない場合もあるので次回はこの中身にあるソースコードを少しずつ抜粋していきたいと思います。