TopWordPressテーマ > 2011年9月
2011年9月23日

WordPressのTwenty Elevenテーマ解説:フッター (footer.php)

September 23,2011 1:55 AM
Tag:[, ]
Permalink

WordPressの勉強も兼ねて、Twenty Elevenテーマの各テンプレートについて解説しています。確認バージョンは3.2.1です。

フッター (footer.php)

Twenty Elevenテーマの「フッター (footer.php)」は、スクリーンショットの赤枠で示す、WordPressのすべてのページのフッター部分(ヘッダーのdiv要素の終了タグ~</html>まで)に対応しています。

Twenty Elevenテーマ

テンプレートのソースコードは次のとおりです。

<?php
/**
 * The template for displaying the footer.
 *
 * Contains the closing of the id=main div and all content after
 *
 * @package WordPress
 * @subpackage Twenty_Eleven
 * @since Twenty Eleven 1.0
 */
?>
 
    </div><!-- #main -->
 
    <footer id="colophon" role="contentinfo">
 
            <?php
                /* A sidebar in the footer? Yep. You can can customize
                 * your footer with three columns of widgets.
                 */
                get_sidebar( 'footer' );
            ?>
 
            <div id="site-generator">
                <?php do_action( 'twentyeleven_credits' ); ?>
                <a href="<?php echo esc_url( __( 'http://wordpress.org/', 'twentyeleven' ) ); ?>" title="<?php esc_attr_e( 'Semantic Personal Publishing Platform', 'twentyeleven' ); ?>" rel="generator"><?php printf( __( 'Proudly powered by %s', 'twentyeleven' ), 'WordPress' ); ?></a>
            </div>
    </footer><!-- #colophon -->
</div><!-- #page -->
 
<?php wp_footer(); ?>
 
</body>
</html>

1.フッターメニューの出力

デフォルトの状態では何も表示されていませんが、get_sidebar()でフッターの上部にメニューを追加できます。メニューを追加するには、管理画面の「外観」→「ウィジェット」の赤枠部分に任意のウィジェットをドラッグします。

ウィジェット

下のスクリーンショットはフッターメニューを追加したところです。

ウィジェット

get_sidebar()の役割は、テーマにある「sidebar.php」を取得することです。ここではパラメータに「footer」が設定されているので、「sidebar-footer.php」を取得します。

get_sidebar( 'footer' );

2.テーマクレジットの表示

フックポイント「twentyeleven_credits」でクレジットを表示することができます。

<?php do_action( 'twentyeleven_credits' ); ?>

デフォルトではこのフックポイントを利用している関数はありませんが、functions.phpに次のような関数を追加すれば「Twenty Eleven」というクレジットを表示します。

function add_twentyeleven_credits() {
    echo 'Twenty Eleven';
}
add_action('twentyeleven_credits', 'add_twentyeleven_credits');

3.wp_footer()

wp_footer()は、テーマを作成するときに必ず必要なもので、通常はbody要素の終了タグの直前に記述します。wp_footer()を記述した部分に、プラグインで定義したスクリプトなどが出力されます。

wp_footer()は「wp_footer」フックポイントを実行するためだけの機能をもち、wp-includes/general-template.phpに実装されています。

function wp_footer() {
    do_action('wp_footer');
}

プラグインなどでは次のように「wp_footer」フックポイントに登録します。この場合はscript要素を出力します。

<?php
/*
Plugin Name: add_script
Description: add_script
Version: 1.0
*/ 
 
function add_script() {
  echo '<script type="text/javascript">// ... </script>';
}
add_action('wp_footer', 'add_script');
?>

「wp_footer」フックポイントにはデフォルトで2つの関数が登録されています。ひとつはwp_print_footer_scripts()です。

wp-includes/default-filters.php

add_action( 'wp_footer',           'wp_print_footer_scripts'              );

wp_print_footer_scripts()は、スクリプトを出力する関数のようです。wp-includes/script-loader.phpに実装されています。

function wp_print_footer_scripts() {
    return print_footer_scripts();
}

管理者でログインしている場合は次の1行が出力されます。これは次項で説明する「管理バー」用のスクリプトです。

<script type='text/javascript' src='http://user-domain/wp/wp-includes/js/admin-bar.js?ver=20110131'></script>

4.管理バーの出力

もうひとつはwp_admin_bar_render()で、これはページ上部に表示される管理バーを出力するためのものです。3項で説明したadmin-bar.jsも関係しています。

wp-includes/admin-bar.php

add_action( 'wp_footer', 'wp_admin_bar_render', 1000 );

管理バー
管理バー

次のようなマークアップを出力します。

<div id="wpadminbar">
    <div class="quicklinks">
        <ul>
            <li id="wp-admin-bar-my-account-with-avatar" class="menupop"><a href="http://user-domain/wp/wp-admin/profile.php"><span><img alt='' src='http://0.gravatar.com/avatar/ef7e5083fd46c3e1959a22621bc624c1?s=16&amp;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D16&amp;r=G' class='avatar avatar-16 photo' height='16' width='16' />admin</span></a>
                <ul>
                    <li id="wp-admin-bar-edit-profile" class=""><a href="http://user-domain/wp/wp-admin/profile.php">プロフィールを編集</a></li>
                    <li id="wp-admin-bar-logout" class=""><a href="http://user-domain/wp/wp-login.php?action=logout&#038;_wpnonce=9dc934d1db">ログアウト</a></li>
                </ul>
            </li>
            <li id="wp-admin-bar-dashboard" class=""><a href="http://user-domain/wp/wp-admin/">ダッシュボード</a></li>
            <li id="wp-admin-bar-new-content" class="menupop"><a href="http://user-domain/wp/wp-admin/post-new.php?post_type=post"><span>新規追加</span></a>
                <ul>
                    <li id="wp-admin-bar-new-post" class=""><a href="http://user-domain/wp/wp-admin/post-new.php?post_type=post">投稿</a></li>
                    <li id="wp-admin-bar-new-page" class=""><a href="http://user-domain/wp/wp-admin/post-new.php?post_type=page">固定ページ</a></li>
                    <li id="wp-admin-bar-new-media" class=""><a href="http://user-domain/wp/wp-admin/media-new.php">メディア</a></li>
                    <li id="wp-admin-bar-new-link" class=""><a href="http://user-domain/wp/wp-admin/link-add.php">リンク</a></li>
                    <li id="wp-admin-bar-new-user" class=""><a href="http://user-domain/wp/wp-admin/user-new.php">ユーザー</a></li>
                    <li id="wp-admin-bar-new-theme" class=""><a href="http://user-domain/wp/wp-admin/theme-install.php">テーマ</a></li>
                    <li id="wp-admin-bar-new-plugin" class=""><a href="http://user-domain/wp/wp-admin/plugin-install.php">プラグイン</a></li>
                </ul>
            </li>
            <li id="wp-admin-bar-comments" class=""><a href="http://user-domain/wp/wp-admin/edit-comments.php">コメント </a></li>
            <li id="wp-admin-bar-appearance" class="menupop"><a href="http://user-domain/wp/wp-admin/themes.php"><span>外観</span></a>
                <ul>
                    <li id="wp-admin-bar-themes" class=""><a href="http://user-domain/wp/wp-admin/themes.php">テーマ</a></li>
                    <li id="wp-admin-bar-widgets" class=""><a href="http://user-domain/wp/wp-admin/widgets.php">ウィジェット</a></li>
                    <li id="wp-admin-bar-menus" class=""><a href="http://user-domain/wp/wp-admin/nav-menus.php">メニュー</a></li>
                    <li id="wp-admin-bar-background" class=""><a href="http://user-domain/wp/wp-admin/themes.php?page=custom-background">背景</a></li>
                    <li id="wp-admin-bar-header" class=""><a href="http://user-domain/wp/wp-admin/themes.php?page=custom-header">ヘッダー</a></li>
                </ul>
            </li>
        </ul>
    </div>
    <div id="adminbarsearch-wrap">
        <form action="http://user-domain/wp" method="get" id="adminbarsearch">
            <input class="adminbar-input" name="s" id="adminbar-search" type="text" value="" maxlength="150" />
            <input type="submit" class="adminbar-button" value="検索"/>
        </form>
    </div>
</div>

管理バーの表示・非表示はプロフィールのページで制御できます。

プロフィールのページ

Comments [0] | Trackbacks [0]
2011年9月21日

WordPressのTwenty Elevenテーマ解説:ヘッダー (header.php):その3

September 21,2011 3:33 AM
Tag:[, ]
Permalink

WordPressの勉強も兼ねて、Twenty Elevenテーマの各テンプレートについて解説しています。確認バージョンは3.2.1です。

今回は「WordPressのTwenty Elevenテーマ解説:ヘッダー (header.php):その2」の続きです。

ヘッダー (header.php):その3

Twenty Elevenテーマの「ヘッダー (header.php)」は、スクリーンショットの赤枠で示す、WordPressのすべてのページのヘッダー部分(DOCTYPE~<div id="main">まで)に対応しています。

ヘッダー

テンプレートのソースコードは次のとおりです。この回で説明するのは青色で示す部分です。

<?php
/**
 * The Header for our theme.
 *
 * Displays all of the <head> section and everything up till <div id="main">
 *
 * @package WordPress
 * @subpackage Twenty_Eleven
 * @since Twenty Eleven 1.0
 */
?><!DOCTYPE html>
<!--[if IE 6]>
<html id="ie6" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 7]>
<html id="ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html id="ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 6) | !(IE 7) | !(IE 8)  ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<title><?php
    /*
     * Print the <title> tag based on what is being viewed.
     */
    global $page, $paged;
 
    wp_title( '|', true, 'right' );
 
    // Add the blog name.
    bloginfo( 'name' );
 
    // Add the blog description for the home/front page.
    $site_description = get_bloginfo( 'description', 'display' );
    if ( $site_description && ( is_home() || is_front_page() ) )
        echo " | $site_description";
 
    // Add a page number if necessary:
    if ( $paged >= 2 || $page >= 2 )
        echo ' | ' . sprintf( __( 'Page %s', 'twentyeleven' ), max( $paged, $page ) );
 
    ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->
<?php
    /* We add some JavaScript to pages with the comment form
     * to support sites with threaded comments (when in use).
     */
    if ( is_singular() && get_option( 'thread_comments' ) )
        wp_enqueue_script( 'comment-reply' );
 
    /* Always have wp_head() just before the closing </head>
     * tag of your theme, or you will break many plugins, which
     * generally use this hook to add elements to <head> such
     * as styles, scripts, and meta tags.
     */
    wp_head();
?>
</head>
 
<body <?php body_class(); ?>>
<div id="page" class="hfeed">
    <header id="branding" role="banner">
            <hgroup>
                <h1 id="site-title"><span><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span></h1>
                <h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
            </hgroup>
 
            <?php
                // Check to see if the header image has been removed
                $header_image = get_header_image();
                if ( ! empty( $header_image ) ) :
            ?>
            <a href="<?php echo esc_url( home_url( '/' ) ); ?>">
                <?php
                    // The header image
                    // Check if this is a post or page, if it has a thumbnail, and if it's a big one
                    if ( is_singular() &&
                            has_post_thumbnail( $post->ID ) &&
                            ( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( HEADER_IMAGE_WIDTH, HEADER_IMAGE_WIDTH ) ) ) &&
                            $image[1] >= HEADER_IMAGE_WIDTH ) :
                        // Houston, we have a new header image!
                        echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
                    else : ?>
                    <img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
                <?php endif; // end check for featured image or standard header ?>
            </a>
            <?php endif; // end check for removed header image ?>
 
            <?php
                // Has the text been hidden?
                if ( 'blank' == get_header_textcolor() ) :
            ?>
                <div class="only-search<?php if ( ! empty( $header_image ) ) : ?> with-image<?php endif; ?>">
                <?php get_search_form(); ?>
                </div>
            <?php
                else :
            ?>
                <?php get_search_form(); ?>
            <?php endif; ?>
 
            <nav id="access" role="navigation">
                <h3 class="assistive-text"><?php _e( 'Main menu', 'twentyeleven' ); ?></h3>
                <?php /*  Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff. */ ?>
                <div class="skip-link"><a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to primary content', 'twentyeleven' ); ?>"><?php _e( 'Skip to primary content', 'twentyeleven' ); ?></a></div>
                <div class="skip-link"><a class="assistive-text" href="#secondary" title="<?php esc_attr_e( 'Skip to secondary content', 'twentyeleven' ); ?>"><?php _e( 'Skip to secondary content', 'twentyeleven' ); ?></a></div>
                <?php /* Our navigation menu.  If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assiged to the primary position is the one used. If none is assigned, the menu with the lowest ID is used. */ ?>
                <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
            </nav><!-- #access -->
    </header><!-- #branding -->
 
    <div id="main">

1.body要素のclass属性値の出力

body_class()でbody要素のclass属性を設定します。

<body <?php body_class(); ?>>

メインページでは次のような出力になります。

<body class="home blog single-author two-column right-sidebar">

記事ページでは次のような出力になります。

<body class="single single-post postid-6 single-format-gallery logged-in admin-bar single-author singular two-column right-sidebar">

body_class()はwp-includes/post-template.phpに実装されています。

wp-includes/post-template.php

function body_class( $class = '' ) {
    // Separates classes with a single space, collates classes for body element
    echo 'class="' . join( ' ', get_body_class( $class ) ) . '"';
}

中で起動されているget_body_class()も同じファイルに実装されています(長いので掲載は割愛)。

2.ブログタイトルとキャッチフレーズの出力

ブログタイトルとキャッチフレーズ

次の部分でブログタイトルとキャッチフレーズを出力します。

            <hgroup>
                <h1 id="site-title"><span><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span></h1>
                <h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
            </hgroup>

esc_url()でラップされているhome_url()は、wp-includes/link-template.phpに実装されています。

wp-includes/link-template.php

function home_url( $path = '', $scheme = null ) {
    return get_home_url(null, $path, $scheme);
}

中で起動されているget_home_url()も同じファイルに実装されていて、中ではget_option()またはget_blog_option()の値を利用しています。プロトコル(http/https)は、is_ssl()とis_admin()で決定しています。is_ssl()はセキュアなアクセスである場合に実行し、プロトコル(http/https)を振り分けます。

function get_home_url( $blog_id = null, $path = '', $scheme = null ) {
    $orig_scheme = $scheme;
 
    if ( !in_array( $scheme, array( 'http', 'https' ) ) )
        $scheme = is_ssl() && !is_admin() ? 'https' : 'http';
 
    if ( empty( $blog_id ) || !is_multisite() )
        $url = get_option( 'home' );
    else
        $url = get_blog_option( $blog_id, 'home' );
 
    if ( 'http' != $scheme )
        $url = str_replace( 'http://', "$scheme://", $url );
 
    if ( !empty( $path ) && is_string( $path ) && strpos( $path, '..' ) === false )
        $url .= '/' . ltrim( $path, '/' );
 
    return apply_filters( 'home_url', $url, $path, $orig_scheme, $blog_id );
}

esc_url()はURLに含まれる文字列をURIエンコードする役割があり、wp-includes/formatting.phpに実装されています。esc_attr()は属性値として設定する文字列をエスケープする役割があり、同じファイルに実装されています。

get_bloginfo( 'name', 'display' ) )でブログ名をa要素のtitle属性に設定します。 bloginfo( 'name' )はブログ名、bloginfo( 'description' )はキャッチフレーズを出力します。get_bloginfo()とbloginfo()は既出のため、解説は省略します。

3.ヘッダ画像の出力

ヘッダ画像

以下の部分でヘッダ画像を出力します。記事ページではアイキャッチ画像を表示することもできます。アイキャッチ画像の詳細については別途エントリーしたいと思います。

            <?php
                // Check to see if the header image has been removed
                $header_image = get_header_image();
                if ( ! empty( $header_image ) ) :
            ?>
            <a href="<?php echo esc_url( home_url( '/' ) ); ?>">
                <?php
                    // The header image
                    // Check if this is a post or page, if it has a thumbnail, and if it's a big one
                    if ( is_singular() &&
                            has_post_thumbnail( $post->ID ) &&
                            ( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( HEADER_IMAGE_WIDTH, HEADER_IMAGE_WIDTH ) ) ) &&
                            $image[1] >= HEADER_IMAGE_WIDTH ) :
                        // Houston, we have a new header image!
                        echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
                    else : ?>
                    <img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
                <?php endif; // end check for featured image or standard header ?>
            </a>
            <?php endif; // end check for removed header image ?>

get_header_image()は画像のURLを収集する役割があり、変数$header_imageに次のようなURLを設定します。

http://user-domain/wp/wp-content/themes/twentyeleven/images/headers/trolley.jpg

get_header_image()はwp-includes/theme.phpに実装されています。

wp-includes/theme.php

function get_header_image() {
    $default = defined( 'HEADER_IMAGE' ) ? HEADER_IMAGE : '';
    $url = get_theme_mod( 'header_image', $default );
 
    if ( 'remove-header' == $url )
        return false;
 
    if ( is_random_header_image() )
        $url = get_random_header_image();
 
    if ( is_ssl() )
        $url = str_replace( 'http://', 'https://', $url );
    else
        $url = str_replace( 'https://', 'http://', $url );
 
    return esc_url_raw( $url );
}

HEADER_IMAGEはテーマのfunctions.phpのtwentyeleven_setup()に定義されています(ただし値は空)。

function twentyeleven_setup() {
    //...
    define( 'HEADER_IMAGE', '' );

get_theme_mod()はテーマのオプションを取得する関数で、後述します。

remove-headerの判定は、「外観」→「ヘッダー」で「ヘッダー画像を削除」をクリックした場合に実行されるものと思われます(間違っていたらすいません)。

ヘッダー画像を削除

is_random_header_image()は同じ管理画面で「ランダム」を選択している場合に実行される関数で、wp-includes/theme.phpに実装されています。

ランダム

return時のesc_url_raw()は、esc_url()をラップした関数で、wp-includes/formatting.phpに実装されています。

function esc_url_raw( $url, $protocols = null ) {
    return esc_url( $url, $protocols, 'db' );
}

話を戻して、変数$header_imageに値が設定されていれば(=ヘッダ画像のURLがあれば)、home_url()とesc_url()を組み合わせて、ブログのメインページのリンクを出力します。

                if ( ! empty( $header_image ) ) :
            ?>
            <a href="<?php echo esc_url( home_url( '/' ) ); ?>">
                // ...
            </a>
            <?php endif; // end check for removed header image ?>

リンクのコンテンツの出力部分は以下です。

                <?php
                    // The header image
                    // Check if this is a post or page, if it has a thumbnail, and if it's a big one
                    if ( is_singular() &&
                            has_post_thumbnail( $post->ID ) &&
                            ( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( HEADER_IMAGE_WIDTH, HEADER_IMAGE_WIDTH ) ) ) &&
                            $image[1] >= HEADER_IMAGE_WIDTH ) :
                        // Houston, we have a new header image!
                        echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
                    else : ?>
                    <img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
                <?php endif; // end check for featured image or standard header ?>

次の4つの条件を満たす場合、get_the_post_thumbnail()でアイキャッチ画像を出力します。

  • 記事ページである(is_singular())
  • 記事に画像が添付されている(post-thumbnail-template.php/has_post_thumbnail())
  • 画像の情報(URL、高さ、幅)を取得できる
  • 取得した画像の幅がHEADER_IMAGE_WIDTH(1000px)より大きい
get_the_post_thumbnail( $post->ID, 'post-thumbnail' );

アイキャッチ画像(=夕焼けの亜像)をヘッダに表示したところ
デフォルト状態の検索フォーム

上記以外の場合は、Twenty Elevenテーマで用意されている画像を表示します。

<img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />

header_image()はget_header_image()をechoする関数で、wp-includes/theme.phpに実装されています。

4.検索フォームの出力

検索フォーム

次の部分で検索フォームを出力します。

            <?php
                // Has the text been hidden?
                if ( 'blank' == get_header_textcolor() ) :
            ?>
                <div class="only-search<?php if ( ! empty( $header_image ) ) : ?> with-image<?php endif; ?>">
                <?php get_search_form(); ?>
                </div>
            <?php
                else :
            ?>
                <?php get_search_form(); ?>
            <?php endif; ?>

デフォルトの状態ではページの右上に検索フォームを表示しますが、get_header_textcolor()の結果が「blank」であればdiv要素を挿入して、検索フォームをナビゲーションの右側に出力するようになっています。

デフォルト状態の検索フォーム
デフォルト状態の検索フォーム

「blank」の場合の検索フォーム
「blank」の場合の検索フォーム

get_header_textcolor()はHEADER_TEXTCOLORの値を出力する関数で、wp-includes/theme.phpに実装されています。

wp-includes/theme.php

function get_header_textcolor() {
    $default = defined('HEADER_TEXTCOLOR') ? HEADER_TEXTCOLOR : '';
 
    return get_theme_mod('header_textcolor', $default);
}

HEADER_TEXTCOLORは、テーマのfunctions.phpのtwentyeleven_setup()に定義されています。

function twentyeleven_setup() {
    //...
    define( 'HEADER_TEXTCOLOR', '000' );

twentyeleven_setup()は、functions.phpにある「after_setup_them」フックポイントで起動されます。

add_action( 'after_setup_theme', 'twentyeleven_setup' );

get_theme_mod()は、現在のテーマについて第1パラメータで指定したキーの値(modification value)を取得する関数のようです。キーと値はテーマを切り替えたときにwp_optionsテーブルに保存されるようです。

function get_theme_mod( $name, $default = false ) {
    $mods = get_theme_mods();
 
    if ( isset( $mods[ $name ] ) )
        return apply_filters( "theme_mod_$name", $mods[ $name ] );
 
    return apply_filters( "theme_mod_$name", sprintf( $default, get_template_directory_uri(), get_stylesheet_directory_uri() ) );
}

get_theme_mods()も同じファイルに実装されています。

function get_theme_mods() {
    $theme_slug = get_option( 'stylesheet' );
    if ( false === ( $mods = get_option( "theme_mods_$theme_slug" ) ) ) {
        $theme_name = get_current_theme();
        $mods = get_option( "mods_$theme_name" ); // Deprecated location.
        if ( is_admin() && false !== $mods ) {
            update_option( "theme_mods_$theme_slug", $mods );
            delete_option( "mods_$theme_name" );
        }
    }
    return $mods;
}

get_theme_mods()は取得関数ですが、オプションの設定はadd_option()、更新はupdate_option()、またオプションの削除関数としてremove_theme_mods()があります。add_option()とupdate_option()はwp-includes/functions.phpに実装されています。

テーマの切り替えなどを行うと、これらの関数が実行されるようです。

5.ナビゲーションの出力

ナビゲーション

最後に、次の部分でナビゲーションを出力します。

            <nav id="access" role="navigation">
                <h3 class="assistive-text"><?php _e( 'Main menu', 'twentyeleven' ); ?></h3>
                <?php /*  Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff. */ ?>
                <div class="skip-link"><a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to primary content', 'twentyeleven' ); ?>"><?php _e( 'Skip to primary content', 'twentyeleven' ); ?></a></div>
                <div class="skip-link"><a class="assistive-text" href="#secondary" title="<?php esc_attr_e( 'Skip to secondary content', 'twentyeleven' ); ?>"><?php _e( 'Skip to secondary content', 'twentyeleven' ); ?></a></div>
                <?php /* Our navigation menu.  If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assiged to the primary position is the one used. If none is assigned, the menu with the lowest ID is used. */ ?>
                <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
            </nav><!-- #access -->

以下は出力例です。

<nav id="access" role="navigation">
    <h3 class="assistive-text">メインメニュー</h3>
    <div class="skip-link"><a class="assistive-text" href="#content" title="メインコンテンツへ移動">メインコンテンツへ移動</a></div>
    <div class="skip-link"><a class="assistive-text" href="#secondary" title="サブコンテンツへ移動">サブコンテンツへ移動</a></div>
    <div class="menu"><ul><li class="current_page_item"><a href="http://localhost/wordpress321/" title="ホーム">ホーム</a></li><li class="page_item page-item-2"><a href="http://localhost/wordpress321/?page_id=2" title="サンプルページ">サンプルページ</a></li></ul></div>
</nav><!-- #access -->

wp_nav_menu()はナビゲーションメニューを出力するための関数で、wp-includes/nav-menu-template.phpに実装されています(掲載は割愛)。wp_nav_menu()には色々なオプションがありますが、詳細は別途エントリーしたいと思います。

Twenty Elevenテーマでは、テーマ内で使用する場所(ロケーション)を示す「theme_location」のみを設定しています。「theme_location」の値「primary」は、functions.phpにregister_nav_menu()で設定しています。

    // This theme uses wp_nav_menu() in one location.
    register_nav_menu( 'primary', __( 'Primary Menu', 'twentyeleven' ) );

functions.phpにregister_nav_menu()を追加していけば、ロケーションのバリエーションを増やすことができます。

    register_nav_menu( 'secondary', 'フッターメニュー' );

register_nav_menu()で複数のロケーションをまとめて設定することもできます。

register_nav_menus( array(
    'primary' => __( 'Primary Navigation', 'twentyten' ),
    'secondary' => 'フッターメニュー',
    'thirdly' => 'サイドメニュー',
) );

肝心のメニューの内容は、管理画面の「外観」→「メニュー」で設定します。

メニュー

デフォルト状態では何も設定されていないので、先程の「フッターメニュー」用のメニュー内容を作りたい場合は、「メニューの名前」に「フッター」など任意の名称を入力して「メニューを作成」をクリック。

メニューを作成

作成すると左側にメニュー項目として「カスタムリンク」「固定ページ」「カテゴリー」などがアクティブになり、同時に「register_nav_menus」に対応する「テーマの場所(ロケーション)」も表示されます。

テーマの場所

あとはそれぞれのロケーションに作成したメニューを作って「保存」をクリックします。フッターメニューは、テーマの「フッター」に次の記述すれば表示されます。

<?php wp_nav_menu( array( 'theme_location' => 'secondary' ) ); ?>
Comments [0] | Trackbacks [0]
2011年9月14日

WordPressのTwenty Elevenテーマ解説:ヘッダー (header.php):その2

September 14,2011 1:55 AM
Tag:[, ]
Permalink

WordPressの勉強も兼ねて、Twenty Elevenテーマの各テンプレートについて解説しています。確認バージョンは3.2.1です。

今回は「WordPressのTwenty Elevenテーマ解説:ヘッダー (header.php):その1」の続きです。

ヘッダー (header.php):その2

Twenty Elevenテーマの「ヘッダー (header.php)」は、スクリーンショットの赤枠で示す、WordPressのすべてのページのヘッダー部分(DOCTYPE~<div id="main">まで)に対応しています。

ヘッダー

テンプレートのソースコードは次のとおりです。この回で説明するのは青色で示す部分です。

<?php
/**
 * The Header for our theme.
 *
 * Displays all of the <head> section and everything up till <div id="main">
 *
 * @package WordPress
 * @subpackage Twenty_Eleven
 * @since Twenty Eleven 1.0
 */
?><!DOCTYPE html>
<!--[if IE 6]>
<html id="ie6" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 7]>
<html id="ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html id="ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 6) | !(IE 7) | !(IE 8)  ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<title><?php
    /*
     * Print the <title> tag based on what is being viewed.
     */
    global $page, $paged;
 
    wp_title( '|', true, 'right' );
 
    // Add the blog name.
    bloginfo( 'name' );
 
    // Add the blog description for the home/front page.
    $site_description = get_bloginfo( 'description', 'display' );
    if ( $site_description && ( is_home() || is_front_page() ) )
        echo " | $site_description";
 
    // Add a page number if necessary:
    if ( $paged >= 2 || $page >= 2 )
        echo ' | ' . sprintf( __( 'Page %s', 'twentyeleven' ), max( $paged, $page ) );
 
    ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->
<?php
    /* We add some JavaScript to pages with the comment form
     * to support sites with threaded comments (when in use).
     */
    if ( is_singular() && get_option( 'thread_comments' ) )
        wp_enqueue_script( 'comment-reply' );
 
    /* Always have wp_head() just before the closing </head>
     * tag of your theme, or you will break many plugins, which
     * generally use this hook to add elements to <head> such
     * as styles, scripts, and meta tags.
     */
    wp_head();
?>
</head>
 
<body <?php body_class(); ?>>
<div id="page" class="hfeed">
    <header id="branding" role="banner">
            <hgroup>
                <h1 id="site-title"><span><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span></h1>
                <h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
            </hgroup>
 
            <?php
                // Check to see if the header image has been removed
                $header_image = get_header_image();
                if ( ! empty( $header_image ) ) :
            ?>
            <a href="<?php echo esc_url( home_url( '/' ) ); ?>">
                <?php
                    // The header image
                    // Check if this is a post or page, if it has a thumbnail, and if it's a big one
                    if ( is_singular() &&
                            has_post_thumbnail( $post->ID ) &&
                            ( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( HEADER_IMAGE_WIDTH, HEADER_IMAGE_WIDTH ) ) ) &&
                            $image[1] >= HEADER_IMAGE_WIDTH ) :
                        // Houston, we have a new header image!
                        echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
                    else : ?>
                    <img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
                <?php endif; // end check for featured image or standard header ?>
            </a>
            <?php endif; // end check for removed header image ?>
 
            <?php
                // Has the text been hidden?
                if ( 'blank' == get_header_textcolor() ) :
            ?>
                <div class="only-search<?php if ( ! empty( $header_image ) ) : ?> with-image<?php endif; ?>">
                <?php get_search_form(); ?>
                </div>
            <?php
                else :
            ?>
                <?php get_search_form(); ?>
            <?php endif; ?>
 
            <nav id="access" role="navigation">
                <h3 class="assistive-text"><?php _e( 'Main menu', 'twentyeleven' ); ?></h3>
                <?php /*  Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff. */ ?>
                <div class="skip-link"><a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to primary content', 'twentyeleven' ); ?>"><?php _e( 'Skip to primary content', 'twentyeleven' ); ?></a></div>
                <div class="skip-link"><a class="assistive-text" href="#secondary" title="<?php esc_attr_e( 'Skip to secondary content', 'twentyeleven' ); ?>"><?php _e( 'Skip to secondary content', 'twentyeleven' ); ?></a></div>
                <?php /* Our navigation menu.  If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assiged to the primary position is the one used. If none is assigned, the menu with the lowest ID is used. */ ?>
                <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
            </nav><!-- #access -->
    </header><!-- #branding -->
 
    <div id="main">

1.link要素の出力

スタイルシートとピンバックのlink要素を出力します。link要素のhref属性の出力にはbloginfo()を利用しています。

<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />

その1でも解説していますが、bloginfo()はwp-includes/general-template.phpに実装されていて、get_bloginfo()をキックしています。get_bloginfo()については「その1」の4項を参照してください。

wp-includes/general-template.php

function bloginfo( $show='' ) {
    echo get_bloginfo( $show, 'display' );
}

2.script要素の出力

ブラウザがIEでバージョンがIE9以下の場合、script要素にget_template_directory_uri()を組み合わせて、html5.jsを読み込みます。

<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->

script要素のsrc属性は、

http://user-domain/wp-content/themes/twentyeleven/js/html5.js

という風に、Twenty Elevenテーマに含まれているhtml5.jsのURLを出力します。

get_template_directory_uri()はテーマディレクトリのURLを出力する関数で、wp-includes/theme.phpに実装されています。

wp-includes/theme.php

function get_template_directory_uri() {
    $template = get_template();
    $theme_root_uri = get_theme_root_uri( $template );
    $template_dir_uri = "$theme_root_uri/$template";
 
    return apply_filters( 'template_directory_uri', $template_dir_uri, $template, $theme_root_uri );
}

get_template()もwp-includes/theme.phpに実装されています。

function get_template() {
    return apply_filters('template', get_option('template'));
}

get_template()は何をやっているのか分かりにくいのですが、まずget_option()の結果を取得し、その後apply_filters()を実行しています。つまり、フックポイント「template」を使ってget_option()で取得した内容をフィルタできるということです。

例えば次のプラグインを適用すれば、get_template()の出力結果の末尾に「hoge」という文字列を追加できます。

<?php
/*
Plugin Name: hoge
Description: hoge
Version: 1.0
*/ 
 
function hoge($template) {
  return $template . "hoge";
}
add_filter('template', 'hoge', $template);
?>

get_option()はwp-includes/functions.phpに実装されており(コード掲載は割愛)、get_option('template')は「twentyeleven」という文字列を返却します。

get_option()を利用すればさまざまなオプションデータを取得できるようです。get_option()のパラメータに設定可能な値はOption Referenceを参照してください。

get_option()の中でwp_load_alloptions()という関数を実行しているので、以下の1行を実行すればどのようなオプションがあるか分かるかもしれません。get_bloginfo()の一部のデータもget_option()を利用しているようです。

var_dump(wp_load_alloptions());

話を戻して、get_theme_root_uri()はWordPressのthemesディレクトリに対応するURLを取得する関数で、wp-includes/theme.phpに実装されています(掲載は割愛)。

    $theme_root_uri = get_theme_root_uri( $template );

なお、get_theme_root_uri()の中でさらにcontent_url()という関数を起動しています。content_url()はプロトコル(http/https)を決める役割と、パラメータに指定した文字列をURLの末尾に追加する役割があるようです。wp-includes/link-template.phpに実装されています。

3.コメント返信用JavaScriptライブラリの出力

シングルページかつスレッドコメントに対応している場合、コメント返信用JavaScriptライブラリのscript要素を出力します。

    if ( is_singular() && get_option( 'thread_comments' ) )
        wp_enqueue_script( 'comment-reply' );

出力結果は次のようになります。

<script type='text/javascript' src='http://use-domain/wordpress/wp-includes/js/comment-reply.js?ver=20090102'></script>

is_singular()は、シングルページ (固定ページ、個別投稿ページ、添付ファイルページ)であることを判定する関数で、wp-includes/query.phpに実装されています(掲載は割愛)。is_single()、is_page() 、is_attachment() のいずれかがtrueである場合にtrueを返却します。

wp_enqueue_script()でscript要素を出力します。この関数については次項で解説します。

4.wp_enqueue_script()について

wp_enqueue_script()は、同一のJavaScriptライブラリを重複して出力させない役割があります。

今回の例で言うと、プラグイン内で

wp_enqueue_script('comment-reply');

を使ってコメントスレッド用のライブラリを出力する指定を行っておけば、コメントスレッド用ライブラリのscript要素は、Twenty Elevenテーマのヘッダーに記述されている、

wp_enqueue_script( 'comment-reply' );

とあわせて1回しか出力しません。

よくあるケースとして、プラグインでjqueryライブラリを使用する場合、プラグインに次のように記述します。

<?php
function my_scripts_method() {
    wp_enqueue_script( 'jquery' );
}    
 
add_action('wp_enqueue_scripts', 'my_scripts_method');
?>

wp_enqueue_script()はwp-includes/functions.wp-scripts.phpに実装されています。デフォルトで登録されているライブラリは、wp-includes/script-loader.phpのwp_default_scripts()で確認できます。

wp_enqueue_script()のパラメータは次のようになっています。必須パラメータは$handleのみです。

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer )
  • $handle:識別名
  • $src:指定するライブラリのパス
  • $deps:依存するライブラリの識別名を配列で記述。例:array('scriptaculous')
  • $ver:ライブラリのバージョン
  • $in_footer:ライブラリをwp_footer()で配置(true/false)※デフォルトはfalse

5.wp_head()

wp_head()はテーマを作成するときに必ず必要なもので、通常はhead要素の終了タグの直前に記述します。wp_head()を記述した部分に、プラグインで定義したスクリプトやスタイルのための各要素が出力されます。

wp_head()は「wp_head」フックポイントを実行するためだけの機能をもち、wp-includes/general-template.phpに実装されています。

function wp_head() {
    do_action('wp_head');
}

プラグインなどでは次のように「wp_head」フックポイントに登録します。この場合はstyle要素を出力します。

<?php
/*
Plugin Name: add_style
Description: add_style
Version: 1.0
*/ 
 
function add_style() {
  echo '<style type="text/css">/* ... */</style>';
}
add_action('wp_head', 'add_style');
?>

ちなみにデフォルト状態で「wp_head」フックポイントには色々なものが登録されていて、メインページでは次のような内容を出力します。

<link rel="alternate" type="application/rss+xml" title="My First Blog &raquo; フィード" href="http://user-domain/wordpress/?feed=rss2" />
<link rel="alternate" type="application/rss+xml" title="My First Blog &raquo; コメントフィード" href="http://user-domain/wordpress/?feed=comments-rss2" />
<link rel='stylesheet' id='admin-bar-css'  href='http://user-domain/wordpress/wp-includes/css/admin-bar.css?ver=20110622' type='text/css' media='all' />
<script type='text/javascript' src='http://user-domain/wordpress/wp-includes/js/l10n.js?ver=20101110'></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://user-domain/wordpress/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://user-domain/wordpress/wp-includes/wlwmanifest.xml" /> 
<link rel='index' title='My First Blog' href='http://user-domain/wordpress' />
<meta name="generator" content="WordPress 3.2.1" />
<style type="text/css" media="print">#wpadminbar { display:none; }</style>
<style type="text/css" media="screen">
	html { margin-top: 28px !important; }
	* html body { margin-top: 28px !important; }
</style>

「wp_head」フックポイントにデフォルトで登録されているものを削除したい場合は、remove_action()を使用します。例えば

<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://user-domain/wordpress/xmlrpc.php?rsd" />

が不要な場合は次の1行をテーマのfunctions.phpに記述します。

remove_action('wp_head', 'rsd_link');

デフォルトで「wp_head」フックポイントに登録されているアクションは、wp-includes/default-filters.phpに記述されています。下記は「wp_head」分のみ抜粋したものです。

add_action( 'wp_head',             'wp_enqueue_scripts',            1     );
add_action( 'wp_head',             'feed_links',                    2     );
add_action( 'wp_head',             'feed_links_extra',              3     );
add_action( 'wp_head',             'rsd_link'                             );
add_action( 'wp_head',             'wlwmanifest_link'                     );
add_action( 'wp_head',             'index_rel_link'                       );
add_action( 'wp_head',             'parent_post_rel_link',          10, 0 );
add_action( 'wp_head',             'start_post_rel_link',           10, 0 );
add_action( 'wp_head',             'adjacent_posts_rel_link_wp_head', 10, 0 );
add_action( 'wp_head',             'locale_stylesheet'                    );
add_action( 'wp_head',             'noindex',                       1     );
add_action( 'wp_head',             'wp_print_styles',               8     );
add_action( 'wp_head',             'wp_print_head_scripts',         9     );
add_action( 'wp_head',             'wp_generator'                         );
add_action( 'wp_head',             'rel_canonical'                        );
add_action( 'wp_head',             'wp_shortlink_wp_head',          10, 0 );
Comments [0] | Trackbacks [0]
2011年9月12日

WordPressのTwenty Elevenテーマ解説:ヘッダー (header.php):その1

September 12,2011 1:55 AM
Tag:[, ]
Permalink

WordPressの勉強も兼ねて、Twenty Elevenテーマの各テンプレートについて解説しています。確認バージョンは3.2.1です。

ヘッダー (header.php):その1

今回はヘッダーです。このエントリーでヘッダーテンプレートのすべてを紹介する予定でしたが、コードの深いところまでトレースしていくと予想以上に長くなってしまい、あきらめて数回に分けることにしました。

説明の中では、apply_filters()の役割や、_e()と__()の違い、bloginfo()とget_bloginfo()の違いなどについても触れています。

Twenty Elevenテーマの「ヘッダー (header.php)」は、スクリーンショットの赤枠で示す、WordPressのすべてのページのヘッダー部分(DOCTYPE~<div id="main">まで)に対応しています。

ヘッダー

テンプレートのソースコードは次のとおりです。この回で説明するのは青色で示す部分です。

<?php
/**
 * The Header for our theme.
 *
 * Displays all of the <head> section and everything up till <div id="main">
 *
 * @package WordPress
 * @subpackage Twenty_Eleven
 * @since Twenty Eleven 1.0
 */
?><!DOCTYPE html>
<!--[if IE 6]>
<html id="ie6" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 7]>
<html id="ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html id="ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 6) | !(IE 7) | !(IE 8)  ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<title><?php
    /*
     * Print the <title> tag based on what is being viewed.
     */
    global $page, $paged;
 
    wp_title( '|', true, 'right' );
 
    // Add the blog name.
    bloginfo( 'name' );
 
    // Add the blog description for the home/front page.
    $site_description = get_bloginfo( 'description', 'display' );
    if ( $site_description && ( is_home() || is_front_page() ) )
        echo " | $site_description";
 
    // Add a page number if necessary:
    if ( $paged >= 2 || $page >= 2 )
        echo ' | ' . sprintf( __( 'Page %s', 'twentyeleven' ), max( $paged, $page ) );
 
    ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->
<?php
    /* We add some JavaScript to pages with the comment form
     * to support sites with threaded comments (when in use).
     */
    if ( is_singular() && get_option( 'thread_comments' ) )
        wp_enqueue_script( 'comment-reply' );
 
    /* Always have wp_head() just before the closing </head>
     * tag of your theme, or you will break many plugins, which
     * generally use this hook to add elements to <head> such
     * as styles, scripts, and meta tags.
     */
    wp_head();
?>
</head>
 
<body <?php body_class(); ?>>
<div id="page" class="hfeed">
    <header id="branding" role="banner">
            <hgroup>
                <h1 id="site-title"><span><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span></h1>
                <h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
            </hgroup>
 
            <?php
                // Check to see if the header image has been removed
                $header_image = get_header_image();
                if ( ! empty( $header_image ) ) :
            ?>
            <a href="<?php echo esc_url( home_url( '/' ) ); ?>">
                <?php
                    // The header image
                    // Check if this is a post or page, if it has a thumbnail, and if it's a big one
                    if ( is_singular() &&
                            has_post_thumbnail( $post->ID ) &&
                            ( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( HEADER_IMAGE_WIDTH, HEADER_IMAGE_WIDTH ) ) ) &&
                            $image[1] >= HEADER_IMAGE_WIDTH ) :
                        // Houston, we have a new header image!
                        echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
                    else : ?>
                    <img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
                <?php endif; // end check for featured image or standard header ?>
            </a>
            <?php endif; // end check for removed header image ?>
 
            <?php
                // Has the text been hidden?
                if ( 'blank' == get_header_textcolor() ) :
            ?>
                <div class="only-search<?php if ( ! empty( $header_image ) ) : ?> with-image<?php endif; ?>">
                <?php get_search_form(); ?>
                </div>
            <?php
                else :
            ?>
                <?php get_search_form(); ?>
            <?php endif; ?>
 
            <nav id="access" role="navigation">
                <h3 class="assistive-text"><?php _e( 'Main menu', 'twentyeleven' ); ?></h3>
                <?php /*  Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff. */ ?>
                <div class="skip-link"><a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to primary content', 'twentyeleven' ); ?>"><?php _e( 'Skip to primary content', 'twentyeleven' ); ?></a></div>
                <div class="skip-link"><a class="assistive-text" href="#secondary" title="<?php esc_attr_e( 'Skip to secondary content', 'twentyeleven' ); ?>"><?php _e( 'Skip to secondary content', 'twentyeleven' ); ?></a></div>
                <?php /* Our navigation menu.  If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assiged to the primary position is the one used. If none is assigned, the menu with the lowest ID is used. */ ?>
                <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
            </nav><!-- #access -->
    </header><!-- #branding -->
 
    <div id="main">

1.html要素のdir属性出力

DOCTYPE宣言の下に、IEの条件付きコメントの中にlanguage_attributes()が使われています。

<!--[if IE 6]>
<html id="ie6" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 7]>
<html id="ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html id="ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 6) | !(IE 7) | !(IE 8)  ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->

この関数は、次のような内容を出力します。

dir="ltr" lang="ja"

まず、dir属性の出力について解説します。

language_attributes()はwp-includes/general-template.phpに実装されています。dir属性の出力は赤色部分が対応します。

wp-includes/general-template.php

function language_attributes($doctype = 'html') {
    $attributes = array();
    $output = '';
 
    if ( function_exists( 'is_rtl' ) )
        $attributes[] = 'dir="' . ( is_rtl() ? 'rtl' : 'ltr' ) . '"';
 
    if ( $lang = get_bloginfo('language') ) {
        if ( get_option('html_type') == 'text/html' || $doctype == 'html' )
            $attributes[] = "lang=\"$lang\"";
 
        if ( get_option('html_type') != 'text/html' || $doctype == 'xhtml' )
            $attributes[] = "xml:lang=\"$lang\"";
    }
 
    $output = implode(' ', $attributes);
    $output = apply_filters('language_attributes', $output);
    echo $output;
}

function_exists()はパラメータに指定した関数が定義されている場合にtrueを返却するPHPの関数です。ここではis_rtlという関数定義を判断して、定義されていれば、配列変数$attributesに「dir="rtl"」または「dir="ltr"」を設定します。

dir 属性は要素のテキストの方向性を指定するためのもので、値は次の意味をもちます。

  • ltr:該当の要素のコンテンツが明示的に左から右向きに組み込まれたテキスト
  • rtl:該当の要素のコンテンツが明示的に右から左向きに組み込まれたテキスト

どちらの値を設定するかは、is_rtl()で判定しています。is_rtl()はwp-includes/locale.phpの最後に実装されています。

wp-includes/locale.php

function is_rtl() {
    global $wp_locale;
    return $wp_locale->is_rtl();
}

話がちょっと長くなりますが、変数$wp_localeはwp-settings.phpで定義しています。

$wp_locale = new WP_Locale();

WP_Localeクラスは先程のwp-includes/locale.phpで宣言されています。

/**
 * Class that loads the calendar locale.
 *
 * @since 2.1.0
 */
class WP_Locale {
    // ...
}

ということで、is_rtl()の処理にある、

    return $wp_locale->is_rtl();

は、WP_Localeクラスの中に定義されていることが分かります。

class WP_Locale {
    // ...
    function is_rtl() {
        return 'rtl' == $this->text_direction;
    }
}

変数$text_directionは同じクラス内に記述されています。値は「ltr」固定のようです。

var $text_direction = 'ltr';

この部分を「rtl」に書き換えると、ページは次のようになります。

dir属性値を「rtl」に設定

2.html要素のlang属性出力

1項で説明したlanguage_attributes()の赤色部分でlang属性も出力します。

function language_attributes($doctype = 'html') {
    $attributes = array();
    $output = '';
 
    if ( function_exists( 'is_rtl' ) )
        $attributes[] = 'dir="' . ( is_rtl() ? 'rtl' : 'ltr' ) . '"';
 
    if ( $lang = get_bloginfo('language') ) {
        if ( get_option('html_type') == 'text/html' || $doctype == 'html' )
            $attributes[] = "lang=\"$lang\"";
 
        if ( get_option('html_type') != 'text/html' || $doctype == 'xhtml' )
            $attributes[] = "xml:lang=\"$lang\"";
    }
 
    $output = implode(' ', $attributes);
    $output = apply_filters('language_attributes', $output);
    echo $output;
}

処理中で使われているget_bloginfo()はパラメータに指定した情報を取得する関数で、wp-includes/general-template.phpに実装されています。今回の該当部分のみ抜粋して掲載します。

function get_bloginfo( $show = '', $filter = 'raw' ) {
    // ...
    switch( $show ) {
        case 'language':
            $output = get_locale();
            $output = str_replace('_', '-', $output);
            break;
    }
    // ...
    return $output;
}

get_bloginfo()の中で使われているget_locale()は、wp-includes/l10n.phpに実装されています。

wp-includes/l10n.php

function get_locale() {
    global $locale;
 
    if ( isset( $locale ) )
        return apply_filters( 'locale', $locale );
 
    // WPLANG is defined in wp-config.
    if ( defined( 'WPLANG' ) )
        $locale = WPLANG;
 
    // If multisite, check options.
    if ( is_multisite() && !defined('WP_INSTALLING') ) {
        $ms_locale = get_option('WPLANG');
        if ( $ms_locale === false )
            $ms_locale = get_site_option('WPLANG');
 
        if ( $ms_locale !== false )
            $locale = $ms_locale;
    }
 
    if ( empty( $locale ) )
        $locale = 'en_US';
 
    return apply_filters( 'locale', $locale );
}

今回は赤色部分のコードで「ja」という文字列を返却します。理由は、WordPressの日本語パッケージではwp-config.phpに次の内容が設定されているからです。

define('WPLANG', 'ja');

次に、language_attributes()の中にあるget_option()は、管理画面の「設定」メニューの任意の項目などを取得する関数で、DBのwp_optionsテーブル(wp_が接頭辞の場合)に対応しているようです。

    if ( $lang = get_bloginfo('language') ) {
        if ( get_option('html_type') == 'text/html' || $doctype == 'html' )
            $attributes[] = "lang=\"$lang\"";
 
        if ( get_option('html_type') != 'text/html' || $doctype == 'xhtml' )
            $attributes[] = "xml:lang=\"$lang\"";
    }

ここでは、「html_type」を指定していますが、wp_optionsテーブルには該当のデータがないようなので(設定不足でしたらすいません)、変数$doctypeの値を判定します。変数$doctypeにはデフォルトで「html」が設定されているので、配列変数$attributesには「html="ja"」が設定されます。

あとは、implode()でdir属性とhtml属性を半角スペースで結合して出力します。

    $output = implode(' ', $attributes);
    $output = apply_filters('language_attributes', $output);
    echo $output;

3.apply_filters()について

テンプレートから話がそれますが、前項の赤色のapply_filters()について解説します。

apply_filters()は「WordPressのTwenty Elevenテーマ解説:メインインデックスのテンプレート (index.php)」で解説した、do_action()を使ってフックポイントを追加する動作に似ています。apply_filters()の役割は、フィルタ(出力内容をプラグインなどで書き換える)を追加するためのものです。

例えば、

apply_filters('language_attributes', $output);

は、フックポイント「language_attributes」を追加し、書き換えの対象が$outputであることを示します。ここでは変数を1つしか設定していませんが、複数指定し、それらをフィルタの処理判定などに使うこともできます。

プラグインを作成している方はすでにご存知と思いますが、add_filter()を使えばフックポイントに任意のフィルタを追加できます。

今回の場合、プラグインで次のコードを記述すれば、フックポイント「language_attributes」、つまりapply_filters('language_attributes', $output)の実行時にbar()が起動され、html要素の最後に「class="bar"」が追加されます。

<?php
/*
Plugin Name: Bar
Description: Bar
Version: 1.0
*/ 
 
function bar($options) {
  return $options . " class=\"bar\"";
}
add_filter('language_attributes', 'bar', $options);
?>

4.meta要素のcharset属性の出力

meta要素のcharset属性値の出力には、bloginfo()を利用しています。

<meta charset="<?php bloginfo( 'charset' ); ?>" />

bloginfo()はwp-includes/general-template.phpに実装されていて、先述のget_bloginfo()をキックしています。bloginfo()はget_bloginfo()の結果をechoしているのが大きな違いです。

wp-includes/general-template.php

function bloginfo( $show='' ) {
    echo get_bloginfo( $show, 'display' );
}

また、bloginfo()からget_bloginfo()をキックした場合はget_bloginfo()の中でapply_filters()が動作します。厳密に言えば、キックしなくてもget_bloginfo()の第2パラメータに「display」を指定すればapply_filters()が動作します。フックポイントは「bloginfo_url」と「bloginfo」の2種類があります。

get_bloginfo()でapply_filters()が起動する部分のみ抜粋しておきます。

function get_bloginfo( $show = '', $filter = 'raw' ) {
    // ...
    $url = true;
    if (strpos($show, 'url') === false &&
        strpos($show, 'directory') === false &&
        strpos($show, 'home') === false)
        $url = false;
 
    if ( 'display' == $filter ) {
        if ( $url )
            $output = apply_filters('bloginfo_url', $output, $show);
        else
            $output = apply_filters('bloginfo', $output, $show);
    }
 
    return $output;
}

$urlがtrueになる条件は、get_bloginfo()の第1パラメータが次のもの以外が設定されている場合です。

  • url
  • directory
  • home

$urlがtrueになれば「bloginfo_url」のフィルタが登録されます。$urlがfalseになれば「bloginfo」のフィルタが登録されます(間違ってたらすいません)。

5.title要素の出力

次の部分でtitle要素を出力します。

<title><?php
    /*
     * Print the <title> tag based on what is being viewed.
     */
    global $page, $paged;
 
    wp_title( '|', true, 'right' );
 
    // Add the blog name.
    bloginfo( 'name' );
 
    // Add the blog description for the home/front page.
    $site_description = get_bloginfo( 'description', 'display' );
    if ( $site_description && ( is_home() || is_front_page() ) )
        echo " | $site_description";
 
    // Add a page number if necessary:
    if ( $paged >= 2 || $page >= 2 )
        echo ' | ' . sprintf( __( 'Page %s', 'twentyeleven' ), max( $paged, $page ) );
 
    ?></title>

トップページでページ送りをしていて3ページ目であれば、次のような表示になります。

titleの表示

表示内容の意味は次の通りです。

ブログ名 | キャッチフレーズ | ページ番号

変数$pagedには、ページ送り(ページング)を行った場合に、URLのクエリーに設定される「paged」の値が設定されます。$pageには特に値が設定されていないようです(間違っていたらすいません)。

    global $page, $paged;

内容の説明が前後しますが、先にページ番号についてまとめて説明します。ページ番号が2以上の場合に、次の部分でtitle要素に出力します。

    if ( $paged &gt;= 2 || $page &gt;= 2 )
        echo ' | ' . sprintf( __( 'Page %s', 'twentyeleven' ), max( $paged, $page 

max()は、設定されたものから一番大きい値を返却するPHPの関数です。

__()は、日本語ローカライズを行うためのものです。第1パラメータにローカライズ対象の文字列、第2パラメータがドメイン名を指定します。wp-includes/l10n.phpに実装されています。

wp-includes/l10n.php

function __( $text, $domain = 'default' ) {
    return translate( $text, $domain );
}

WordPressのTwenty Elevenテーマ解説:メインインデックスのテンプレート (index.php)」で_e()について紹介しましたが、2つの関数の違いは、__()はreturnしているだけですが、_e()はechoしています。

function _e( $text, $domain = 'default' ) {
    echo translate( $text, $domain );
}

wp_title()はページタイトルを表示するテンプレートタグで、利用するページで処理が異なります。

    wp_title( '|', true, 'right' );

この関数はwp-includes/general-template.phpに実装されています(長いので掲載は省略)。パラメータの意味は次の通りです。

  • 第1パラメータ:セパレータ文字列
  • 第2パラメータ:wp_titleの実行結果をechoで表示する・しない(true/false)
  • 第3パラメータ:セパレータの位置(right/left)

bloginfo('name')では、ブログ名を出力します。

    bloginfo( 'name' );

管理画面の「設定」→「一般」→「キャッチフレーズ」は次の部分で出力します。

    $site_description = get_bloginfo( 'description', 'display' );
    if ( $site_description && ( is_home() || is_front_page() ) )
        echo " | $site_description";

is_home()はサイトのトップページを表示していることを判定する関数で、wp-includes/query.phpに実装されています。

wp-includes/query.php

function is_home() {
    global $wp_query;
 
    if ( ! isset( $wp_query ) ) {
        _doing_it_wrong( __FUNCTION__, __( 'Conditional query tags do not work before the query is run. Before then, they always return false.' ), '3.1' );
        return false;
    }
 
    return $wp_query->is_home();
}

is_front_page()は、サイトのフロントページが表示されているかどうかを判定する関数で、is_home()同様、wp-includes/query.phpに実装されています。

function is_front_page() {
    global $wp_query;
 
    if ( ! isset( $wp_query ) ) {
        _doing_it_wrong( __FUNCTION__, __( 'Conditional query tags do not work before the query is run. Before then, they always return false.' ), '3.1' );
        return false;
    }
 
    return $wp_query->is_front_page();
}

is_front_page()でtrueを返却するのは、管理画面の「設定」→「表示設定」→「フロントページの表示」にて、「最新の投稿」を選択して、最新の投稿ページが表示されている場合および、「固定ページ」を選択して、「フロントページ」に指定したページが表示されている場合です。

Comments [0] | Trackbacks [0]
2011年9月 9日

WordPressのTwenty Elevenテーマ解説:メインインデックスのテンプレート (index.php)

September 9,2011 12:22 AM
Tag:[, ]
Permalink

WordPressの勉強も兼ねて、Twenty Elevenテーマの各テンプレートについて解説してみたいと思います。確認バージョンは3.2.1です。

メインインデックスのテンプレート (index.php)

Twenty Elevenテーマの「メインインデックスのテンプレート (index.php)」で出力されるページは次のようになります。

「メインインデックスのテンプレート (index.php)」で出力されるページ

テンプレートのソースコードは次のとおりです。

<?php
/**
 * The main template file.
 *
 * This is the most generic template file in a WordPress theme
 * and one of the two required files for a theme (the other being style.css).
 * It is used to display a page when nothing more specific matches a query.
 * E.g., it puts together the home page when no home.php file exists.
 * Learn more: http://codex.wordpress.org/Template_Hierarchy
 *
 * @package WordPress
 * @subpackage Twenty_Eleven
 */
 
get_header(); ?>
<div id="primary">
    <div id="content" role="main">
 
    <?php if ( have_posts() ) : ?>
 
        <?php twentyeleven_content_nav( 'nav-above' ); ?>
 
        <?php /* Start the Loop */ ?>
        <?php while ( have_posts() ) : the_post(); ?>
 
            <?php get_template_part( 'content', get_post_format() ); ?>
 
        <?php endwhile; ?>
 
        <?php twentyeleven_content_nav( 'nav-below' ); ?>
 
    <?php else : ?>
 
        <article id="post-0" class="post no-results not-found">
            <header class="entry-header">
                <h1 class="entry-title"><?php _e( 'Nothing Found', 'twentyeleven' ); ?></h1>
            </header><!-- .entry-header -->
 
            <div class="entry-content">
                <p><?php _e( 'Apologies, but no results were found for the requested archive. Perhaps searching will help find a related post.', 'twentyeleven' ); ?></p>
                <?php get_search_form(); ?>
            </div><!-- .entry-content -->
        </article><!-- #post-0 -->
 
    <?php endif; ?>
 
    </div><!-- #content -->
</div><!-- #primary -->
 
<?php get_sidebar(); ?>
<?php get_footer(); ?>

1.ヘッダー情報の出力

ヘッダー情報はget_header()で出力します。

<?php
…中略…
get_header(); ?>

ヘッダー情報は、トップページの赤枠部分が対応します。

ヘッダー情報

get_header()はwp-includes/general-template.phpに実装されています。

wp-includes/general-template.php

function get_header( $name = null ) {
    do_action( 'get_header', $name );
 
    $templates = array();
    if ( isset($name) )
        $templates[] = "header-{$name}.php";
 
    $templates[] = 'header.php';
 
    // Backward compat code will be removed in a future release
    if ('' == locate_template($templates, true))
        load_template( ABSPATH . WPINC . '/theme-compat/header.php');
}

do_action()はフックポイント「get_header」の作成を行っています。

    do_action( 'get_header', $name );

プラグインを作成している方はすでにご存知と思いますが、add_action()を使えばフックポイントに任意のアクションを追加できます。

例えばプラグインで次のコードを記述すれば、フックポイント「get_header」、つまりdo_action('get_header')の実行時にfoo()が起動され、doctype宣言の前に「foo」が出力されます。

<?php
/*
Plugin Name: Foo
Description: Foo
Version: 1.0
*/ 
function foo() {
  echo "foo";
}
add_action('get_header', 'foo');
?>

話を戻して、get_header()では、パラメータに設定した文字列をテンプレート名として利用します。「get_header('foo')」と書いておけば、「header-foo.php」を「header.php」の代わりにロードします。パラメータの設定がなければ「header.php」をロードします。

    $templates = array();
    if ( isset($name) )
        $templates[] = "header-{$name}.php";
 
    $templates[] = 'header.php';

2.記事の有無判定

次のif文では、記事の有無判定により処理を振り分けています。

    <?php if ( have_posts() ) : ?>
      // 記事が投稿されている場合の処理
    <?php else : ?>
      // 記事が投稿されていない場合の処理
    <?php endif; ?>

have_posts()は投稿記事をチェックする関数で、wp-includes/query.phpに実装されています。

wp-includes/query.php

function have_posts() {
    global $wp_query;
 
    return $wp_query->have_posts();
}

投稿記事が存在する場合はtrue、存在しない場合はfalseを返却します。パラメータはありません。ここではhave_posts()をif文で使っていますが、この関数はループ処理で利用することもできます。

if文の中の処理の説明は後回しにして、それぞれどのような出力になるかをご覧ください。

記事が投稿されている場合(記事データを出力)
記事が投稿されている場合(記事データを出力)

記事が投稿されていない場合(メッセージと検索フォームを出力)
記事が投稿されていない場合(メッセージと検索フォームを出力)

次に、それぞれの処理について解説します。

3.ナビゲーションの表示

投稿記事がある場合はナビゲーションとコンテンツを出力します。ここではナビゲーションの出力について説明します。該当する処理は次の赤色部分になります。

    <?php if ( have_posts() ) : ?>
 
        <?php twentyeleven_content_nav( 'nav-above' ); ?>
 
        <?php /* Start the Loop */ ?>
        <?php while ( have_posts() ) : the_post(); ?>
 
            <?php get_template_part( 'content', get_post_format() ); ?>
 
        <?php endwhile; ?>
 
        <?php twentyeleven_content_nav( 'nav-below' ); ?>

twentyeleven_content_nav()はTwenty Elevenテーマの独自処理で、表示する記事数が1ページを超える場合に前後のナビゲーションを表示します。1ページの表示記事数は「設定」→「表示設定」→「1ページに表示する最大投稿数」で決まります。

ナビゲーション
ナビゲーション

twentyeleven_content_nav()は、テーマのfunctions.phpに実装されています。

functions.php

/**
 * Display navigation to next/previous pages when applicable
 */
function twentyeleven_content_nav( $nav_id ) {
    global $wp_query;
 
    if ( $wp_query->max_num_pages > 1 ) : ?>
        <nav id="<?php echo $nav_id; ?>">
            <h3 class="assistive-text"><?php _e( 'Post navigation', 'twentyeleven' ); ?></h3>
            <div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">&larr;</span> Older posts', 'twentyeleven' ) ); ?></div>
            <div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">&rarr;</span>', 'twentyeleven' ) ); ?></div>
        </nav><!-- #nav-above -->
    <?php endif;
}

「$wp_query->max_num_pages」が最大ページ数です。

さて、ナビゲーションは基本的に記事の上部と下部の2ヶ所に表示されるのですが、このテーマではトップページのみ記事の下部にだけ表示されるように仕込まれています。

トップページのナビゲーション(記事の下部のみ)
トップページのナビゲーション(記事の下部のみ)

この技は、style.cssにある次のセレクタを使って実現しています。

「nav-above」は記事の上部に表示するナビゲーションのid属性値で常に非表示ですが、「paged」はトップページ以外の前後ページでbody要素に与えられるclass属性値で、このときだけdiplayプロパティを「block」に変更しています。

#nav-above {
    display: none;
}
.paged #nav-above {
    display: block;
}

4.コンテンツの表示

ナビゲーション出力処理にはさまれて、赤色で示すコンテンツ出力処理があります。

    <?php if ( have_posts() ) : ?>
 
        <?php twentyeleven_content_nav( 'nav-above' ); ?>
 
        <?php /* Start the Loop */ ?>
        <?php while ( have_posts() ) : the_post(); ?>
 
            <?php get_template_part( 'content', get_post_format() ); ?>
 
        <?php endwhile; ?>
 
        <?php twentyeleven_content_nav( 'nav-below' ); ?>

while文で、先に説明したhave_posts()を使って判定し、表示する記事があるまで繰り返します。

the_post()は投稿データをロードする関数です。the_post()を実行しただけでは何も出力しません。

余談ですが、while/have_posts()/the_post()の組み合わせは、Movable Typeの次のテンプレートタグを書いた状態とほぼ同じと言えるでしょう。

<mt:Entries>
</mt:Entries>

get_template_part()でコンテンツを出力します。get_template_part()はwp-includes/general-template.phpに実装されています。

wp-includes/general-template.php

function get_template_part( $slug, $name = null ) {
    do_action( "get_template_part_{$slug}", $slug, $name );
 
    $templates = array();
    if ( isset($name) )
        $templates[] = "{$slug}-{$name}.php";
 
    $templates[] = "{$slug}.php";
 
    locate_template($templates, true, false);
}

do_action()でフックポイント「get_template_part_スラッグ名」の作成を行っています。この場合はスラッグ名は「content」なので、フックポイント名は「get_template_part_content」になります。

また、get_header()と同様、第1パラメータと第2パラメータに設定された名前を使ってテンプレートを呼び出します。第2パラメータが設定されていれば、
「スラッグ名-名前.php」でテンプレートを呼び出します。第2パラメータが設定されていなければ、「スラッグ名.php」でテンプレートを呼び出します。

get_template_part()の第1パラメータは「content」ですが、第2パラメータには「get_post_format()」という関数名が設定されています。言い換えると、get_post_format()の実行結果が第2パラメータに設定されることになります。

            <?php get_template_part( 'content', get_post_format() ); ?>

このget_post_format()は何者か?ということですが、記事の場合は投稿画面にある「フォーマット」を取得するための関数です。

フォーマット

get_post_format()は、wp-includes/post.phpに実装されています。

wp-includes/post.php

function get_post_format( $post = null ) {
    $post = get_post($post);
 
    if ( ! post_type_supports( $post->post_type, 'post-formats' ) )
        return false;
 
    $_format = get_the_terms( $post->ID, 'post_format' );
 
    if ( empty( $_format ) )
        return false;
 
    $format = array_shift( $_format );
 
    return ( str_replace('post-format-', '', $format->slug ) );
}

つまり、while文の中で実行しているget_post_format()の実行結果は、記事単位に異なります。フォーマットとget_post_format()の実行結果、対応するテンプレートは次のようになります。

フォーマット実行結果テンプレート
標準0(なし)content.php
アサイドasidecontent-aside.php
リンクlinkcontent-link.php
ギャラリーgallerycontent-gallery.php
ステータスstatuscontent-status.php
引用quotecontent-quote.php
画像imagecontent-image.php

余談ですが、テーマにあるその他の「content-xx.php」は次のように他のテンプレートに対応しています。

テンプレート利用テンプレート
content-intro.php
content-feature.php
showcase.php
content-page.phppage.php
sidebar-page.php
content-single.phpsingle.php

5.検索フォームの出力

投稿記事がなかった場合には検索フォームを出力します。

    <?php else : ?>
 
        <article id="post-0" class="post no-results not-found">
            <header class="entry-header">
                <h1 class="entry-title"><?php _e( 'Nothing Found', 'twentyeleven' ); ?></h1>
            </header><!-- .entry-header -->
 
            <div class="entry-content">
                <p><?php _e( 'Apologies, but no results were found for the requested archive. Perhaps searching will help find a related post.', 'twentyeleven' ); ?></p>
                <?php get_search_form(); ?>
            </div><!-- .entry-content -->
        </article><!-- #post-0 -->

_e()は、日本語ローカライズを行うためのものです。第1パラメータにローカライズ対象の文字列、第2パラメータがドメイン名を指定します。

                <h1 class="entry-title"><?php _e( 'Nothing Found', 'twentyeleven' ); ?></h1>

検索フォームの出力にget_search_form()を使っています。

                <?php get_search_form(); ?>

get_search_form()は、wp-includes/general-template.phpに実装されています。

wp-includes/general-template.php

function get_search_form($echo = true) {
    do_action( 'get_search_form' );
 
    $search_form_template = locate_template('searchform.php');
    if ( '' != $search_form_template ) {
        require($search_form_template);
        return;
    }
 
    $form = '<form role="search" method="get" id="searchform" action="' . home_url( '/' ) . '" >
    <div><label class="screen-reader-text" for="s">' . __('Search for:') . '</label>
    <input type="text" value="' . get_search_query() . '" name="s" id="s" />
    <input type="submit" id="searchsubmit" value="'. esc_attr__('Search') .'" />
    </div>
    </form>';
 
    if ( $echo )
        echo apply_filters('get_search_form', $form);
    else
        return apply_filters('get_search_form', $form);
}

テーマに「searchform.php」があればその内容を返却します。そうでない場合はget_search_form()の中で生成した検索フォームを返却します。do_action()の動作は前述と同じなので、割愛します。

6.サイドバー情報の出力

サイドバー情報は、トップページの赤枠部分が対応します。

サイドバー情報

サイドバー情報はget_sidebar()で出力します。

<?php get_sidebar(); ?>

get_sidebar()は、wp-includes/general-template.phpに実装されています。

wp-includes/general-template.php

function get_sidebar( $name = null ) {
    do_action( 'get_sidebar', $name );
 
    $templates = array();
    if ( isset($name) )
        $templates[] = "sidebar-{$name}.php";
 
    $templates[] = 'sidebar.php';
 
    // Backward compat code will be removed in a future release
    if ('' == locate_template($templates, true))
        load_template( ABSPATH . WPINC . '/theme-compat/sidebar.php');
}

get_sidebar()では、パラメータに設定した文字列をテンプレート名として利用します。「get_sidebar('foo')」と書いておけば、「sidebar-foo.php」を「sidebar.php」の代わりにロードします。

7.フッター情報の出力

フッター情報は、トップページの赤枠部分が対応します。

フッター情報

フッター情報はget_footer()で出力します。

<?php get_footer(); ?>

get_footer()は、wp-includes/general-template.phpに実装されています。

wp-includes/general-template.php

function get_footer( $name = null ) {
    do_action( 'get_footer', $name );
 
    $templates = array();
    if ( isset($name) )
        $templates[] = "footer-{$name}.php";
 
    $templates[] = 'footer.php';
 
    // Backward compat code will be removed in a future release
    if ('' == locate_template($templates, true))
        load_template( ABSPATH . WPINC . '/theme-compat/footer.php');
}

パラメータの設定やフックポイントの設定はこれまでと同様なので省略します。

Comments [0] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3