解放区在住氷翠 緑の閃光

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(' &raquo; ', 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(' &raquo; ', true, 'right'); bloginfo('name'); ?></title>

次はこれ。タイトルタグの中身です。
ここでも「bloginfo」の関数が使われています。その引数「name」はサイトの名称が返ってきます。
では、ここで何をしているのかというと、ページのタイトルと、サイト名をつけ足して、ページに対するタイトルタグの内容を適切に作り出してくれています。
ページのタイトルの右側に「&raquo;」をつけて、その右側にサイト名を付ける。そんな感じになっています。

<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(); ?>

ここでは最後になりますが、テーマで設定されているメニューを出力するというもの。これは自動的に子のメニューもその関係性も保持したまま出力されるので、非常に便利だ。