今回は、サイトのヘッダーとフッターをやって行きたいと思います。
ヘッダーとフッターはこの回で既にやっていますが、後回しになっていたロゴ画像とかを入れていきます。
サイトのヘッダー
以前のテーマでの見た目を継承しつつ、
ロゴ画像、メニュー、検索ボックスをまとめるようなデザインにしようと思います。
メニューはコンパクトにして、ロゴ画像と横並びになるようにし、
検索ボックスについては必要に応じて見え隠れできるようにしたいと思っています。
まぁ、このページの上部↑にあるように既に出来上がっているわけですが・・・(^_^;)
構造
構造としては以下のようにします。
ロゴ画像とメニュー
ロゴ画像は以前のテーマでの画像を流用して、より小さく作り直します。
メニューについては、必要最低限の項目数にすることでコンパクト化を図ります。
自作品の一覧へのアクセスのために「Webサービス」「ブログパーツ」の２つを設けます。
そこに「問い合わせ」と「検索」を加え、合計４つとします。
「検索」はトグルボタンのような動作にして、検索ボックスが見え隠れするように作ります。
「問い合わせ」と「検索」については、アイコン表示にすることで幅の消費を抑えるように工夫します。
ざっくり↓こんな感じに。
「 Webサービス ブログパーツ 」
さて、
メニューについてですが、こちらを参考にやってみます。
register_nav_menu() を使って、メニューを登録するアクションを after_setup_theme フックに追加します。
functions.php に以下のコードを追加しました
add_action( 'after_setup_theme', function() {
register_nav_menu( 'main-menu','メインメニュー'); // メニュー登録。
});これによって、管理画面の「外観」に「メニュー」が現れますので、あとは必要なメニュー項目を設定すればOKですね。
コード
サイトのヘッダーのコードは例の如くテンプレート部品化します。→ parts/site-header.php
header.php に以下のように追加しました。
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<div id="page">
<?php get_template_part( 'parts/site-header' ); ?>
<div id="content">
<?php
if ( !is_home() && !is_singular() ) {
get_template_part( 'parts/breadcrumb' );
}
?>
<div id="primary">
<main id="main">parts/site-header.php のコードは以下のようになりました。
<header class="site-header" role="banner">
<div class="site-primary">
<?php
printf( '<div class="site-logo"><a href="%s" rel="home" title="ホーム"><img src="%s" width="360" height="60" alt="%s"></a></div>',
esc_url( home_url( '/' ) ),
get_template_directory_uri() . '/image/site-logo.png',
get_bloginfo( 'name' )
);
if ( has_nav_menu( 'main-menu' ) ) {
echo '<nav id="site-navigation" role="navigation">';
wp_nav_menu(
[
'theme_location' => 'main-menu' // 登録した名前を指定。
]
);
echo '</nav>';
}
?>
</div>
<div id="site-search">
<?php
get_template_part( 'searchform' );
?>
</div>
</header> 少し解説してみます。
サイトロゴ全体を <a> で囲い、home_url() を使って、ホームへのリンクとしました。
ロゴ画像は テーマの基準フォルダ/image/site-logo.png というファイル名にしました。また、width、height、alt の各属性を一応設定しておくようにします。
メニューについては、has_nav_menu() で登録されているかを確認して、wp_nav_menu() で出力します。
検索については、さらにテンプレート部品化しました。
searchform.php のコードは以下のようになりました。
<form role="search" method="get" class="search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
<input type="text" class="search-field" value="" name="s" placeholder="サイト内検索" required>
<button type="submit" class="search-submit" aria-label="検索"><i class="icon-search"></i></button>
</form> 検索クエリは https://example.com/?s=keyword のようになるので、
method=”get” かつ actionをホームのURLに設定した <form> を作り、
キーワードに対する <input> に name=”s” 属性を設定すればOKです。
なお、アイコンについては後述します。
サイトのフッター
フッターにはこれといって表示したいものがなかったので、
無しでも良かったのですが、コピーライト表示だけ入れることにしました。
↓こんな感じ。
「© Everyday Pieces ::」
コード
サイトのフッターのコードは例の如くテンプレート部品化します。→ parts/site-footer.php
footer.php に以下のように追加しました。
</main>
<?php get_template_part( 'parts/sidebar' ); ?>
</div>
</div>
<?php get_template_part( 'parts/site-footer' ); ?>
</div>
<?php wp_footer(); ?>
</body>
</html>ということで、parts/site-footer.php のコードは以下のようになりました。
<footer class="site-footer">
<div class="site-info">
<div class="site-name">© <?php bloginfo( 'name' ); ?></div>
</div>
</footer>アイコンについて
アイコンは無料で使えるフォントを利用します。
以前は「Fontello」をよく使っていましたが、最近は「IcoMoon」を使うことが多いです。
どちらも基本的な使い方は同じ。必要なフォントを選んでダウンロードするだけです。
あとはCSSを組み込めばOK。簡単ですね。
ちなみに導入したアイコンは以下の通りです。
icon-asterisk
icon-search
icon-user
icon-repeat
icon-tags
icon-pencil
icon-edit
icon-comment
icon-folder
icon-comments
icon-envelope
icon-reply
icon-file-text2
icon-quotes-left
icon-quotes-right
icon-link
icon-arrow-right2
icon-arrow-left2
次回に続きます。