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を使用することにします。
で、2行目に記述されているこれ。
通常、「<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(); ?>
ここでは最後になりますが、テーマで設定されているメニューを出力するというもの。これは自動的に子のメニューもその関係性も保持したまま出力されるので、非常に便利だ。