header.php【WordPress】
2016-02-19 17:42
もちろん、ソース上のことですが。
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width;">
<title><?php wp_title(' » ', true, 'right'); bloginfo('name'); ?></title>
<link rel="stylesheet" type="text/css" media="all" href="<?php echo get_template_directory_uri(); ?>/layout.css" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('stylesheet_url'); ?>" />
<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/images/favicon.ico">
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<meta name="keywords" content="Webデザイン, Web制作, WordPress">
<meta name="description" content="<?php bloginfo('description'); ?>" />
<?php
if(is_singular() && get_option('thread_comments'))
wp_enqueue_script('comment-reply');
wp_head();
wp_get_archives('type=monthly&format=link');
?>
</head>
<body>
<header>
<div class="header-inner">
<div class="header-table">
<div class="header-logo">
<div class="main-image"></div>
<div class="site-name"><?php bloginfo('name'); ?></div>
</div><!-- from header-logo -->
<div class="header-right">
<div class="search-form">
<?php
add_theme_support( 'html5', array( 'search-form' ) );
get_search_form(true);
?>
</div>
<div class="navigation-Btn">
<div class="menuBtn"></div>
<nav>
<div class="nav-inner">
<div class="nav-close-btn">
<a href="javascript:void(0);">×</a>
</div><!-- from nav-close-btn -->
<?php wp_nav_menu(); ?>
</div>
</nav>
</div>
</div><!-- from header-right -->
</div><!-- from header-table -->
</div><!-- from header-inner -->
</header>
上記のソースは、もちろんテスト上のものなので、実際に使っているわけではありません。
ただ、Wordpressでは様々な関数を用意してあるので、それらを使用した例として見てください。
<html <?php language_attributes(); ?>>
早速、このソースはHTML5を使用することにします。
で、２行目に記述されているこれ。
通常、「<html lang=”ja”>」とかってなります。
このWordpressはやはり国際化するプログラムなので、こういったことも重要になってきます。
「<?php language_attributes(); ?>」これだけで「 lang=”ja”」を出力するという関数が用意されているわけです。
<meta charset="<?php bloginfo('charset'); ?>">
次にこの部分、ここで得られる答えは「UTF-8」が理想。もちろん、その答えが出力されるわけです。
ここで使われている「bloginfo();」という関数はその引数によっていろんな情報を出力してくれます。
wordpress codeXを参照してもらえれば、いろんな情報があります。ここでは「charset」という引数を渡しているので、「UTF-8」という答えが返ってきます。
<title><?php wp_title(' » ', true, 'right'); bloginfo('name'); ?></title>
次はこれ。タイトルタグの中身です。
ここでも「bloginfo」の関数が使われています。その引数「name」はサイトの名称が返ってきます。
では、ここで何をしているのかというと、ページのタイトルと、サイト名をつけ足して、ページに対するタイトルタグの内容を適切に作り出してくれています。
ページのタイトルの右側に「»」をつけて、その右側にサイト名を付ける。そんな感じになっています。
<link rel="stylesheet" type="text/css" media="all" href="<?php echo get_template_directory_uri(); ?>/layout.css" />
次は任意のスタイルシートを加えるため、linkタグを使います。
この中では「get_template_directory_url();」が使われていますが、これは現在のテーマのURLを返しています。その中にある「layout.css」を使おうということになります。
メタタグのキーワードはテーマの中に打ち込んでしまいましたが、これに関する関数が用意されていないので。
<meta name="description" content="<?php bloginfo('description'); ?>" />
次のメタタグはサイトの説明文。ここでも「bloginfo」の内容を利用しています。「description」という引数で説明文が出力されます。
<?php
if(is_singular() && get_option('thread_comments'))
wp_enqueue_script('comment-reply');
wp_head();
wp_get_archives('type=monthly&format=link');
?>
次はheadタグの中で最後の部分。
まず「is_singular()」。予想通り、投稿ページなのかどうかを真偽値で。これにタイトル名とか引数を加えると、そのページなのかどうかの真偽値が返ってくる。このほかに「is_page()」「is_attachment()」があり、それぞれ「固定ページ」「添付ファイルページ」という感じで真偽値が返ってくるようだ。
「get_option」はサイトの設定のデータベースから任意の情報を取り出すもの。「thread_comments」（ネイティブのネストされたコメントを有効化するかどうか）というもの。
つまりここでは、投稿ページなら、以下の情報を出力するというものです。
では、その内容は。。。
「wp_enqueue_script」はスクリプトファイルがインクルードされている場合に、ファイルが生成されたページにリンクするというもの。
「wp_head」実際にいはheadのアクションフックを実行するというもの。
「wp_get_archives」は日付ベースのアーカイブのリンクを貼る。
add_theme_support( 'html5', array( 'search-form' ) ); get_search_form(true);
「add_theme_support」テーマやプラグインが特定のテーマ機能をサポートすることを許可する。ということは、そのwordpressの機能を使用する場合にこれを使うということだ。
そのあとにある「get_search_form」は検索フォームを出力するというものなので、事前に検索機能を使うというのを宣言しておくということだろう。
<?php wp_nav_menu(); ?>
ここでは最後になりますが、テーマで設定されているメニューを出力するというもの。これは自動的に子のメニューもその関係性も保持したまま出力されるので、非常に便利だ。