TopWordPressテーマ > 2011年11月
2011年11月21日

WordPressのTwenty Elevenテーマ解説:サイドバー (sidebar.php)

November 21,2011 1:55 AM
Tag:[, , ]
Permalink

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

サイドバー (sidebar.php)

Twenty Elevenテーマの「サイドバー (sidebar.php)」は、次のように、各ページのサイドバーを表示します。

サイドバー (sidebar.php)

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

<?php
/**
 * The Sidebar containing the main widget area.
 *
 * @package WordPress
 * @subpackage Twenty_Eleven
 * @since Twenty Eleven 1.0
 */
 
$options = twentyeleven_get_theme_options();
$current_layout = $options['theme_layout'];
 
if ( 'content' != $current_layout ) :
?>
        <div id="secondary" class="widget-area" role="complementary">
            <?php if ( ! dynamic_sidebar( 'sidebar-1' ) ) : ?>
 
                <aside id="archives" class="widget">
                    <h3 class="widget-title"><?php _e( 'Archives', 'twentyeleven' ); ?></h3>
                    <ul>
                        <?php wp_get_archives( array( 'type' => 'monthly' ) ); ?>
                    </ul>
                </aside>
 
                <aside id="meta" class="widget">
                    <h3 class="widget-title"><?php _e( 'Meta', 'twentyeleven' ); ?></h3>
                    <ul>
                        <?php wp_register(); ?>
                        <li><?php wp_loginout(); ?></li>
                        <?php wp_meta(); ?>
                    </ul>
                </aside>
 
            <?php endif; // end sidebar widget area ?>
        </div><!-- #secondary .widget-area -->
<?php endif; ?>

以下、順を追ってテンプレートの内容について解説します。

1.レイアウト情報の取得

テーマ情報をtwentyeleven_get_theme_options()で取得し、さらにその中のレイアウト情報を取得します。

$options = twentyeleven_get_theme_options();
$current_layout = $options['theme_layout'];

twentyeleven_get_theme_options()はwp-content/themes/twentyeleven/inc/theme-options.phpに実装されています。

wp-content/themes/twentyeleven/inc/theme-options.php

function twentyeleven_get_theme_options() {
    return get_option( 'twentyeleven_theme_options', twentyeleven_get_default_theme_options() );
}

twentyeleven_get_theme_options()の中ではget_option()を実行しているだけです。get_option()の第1パラメータはオプション名、第2パラメータはデータベースにオプションが存在しない場合のデフォルト値です。デフォルト値はtwentyeleven_get_default_theme_options()で返却された値を使用しています。

twentyeleven_get_default_theme_options()は、twentyeleven_get_theme_options()と同じtheme-options.phpに実装されています。

function twentyeleven_get_default_theme_options() {
    $default_theme_options = array(
        'color_scheme' => 'light',
        'link_color'   => twentyeleven_get_default_link_color( 'light' ),
        'theme_layout' => 'content-sidebar',
    );
 
    if ( is_rtl() )
        $default_theme_options['theme_layout'] = 'sidebar-content';
 
    return apply_filters( 'twentyeleven_default_theme_options', $default_theme_options );
}

$options['theme_layout']に対応する内容として「content-sidebar」が設定されていることが分かります。

2.レイアウトについて

Twenty Elevenテーマのレイアウトには次の3種類が用意されています。

  • content-sidebar(右サイドバー)
  • sidebar-content(左サイドバー)
  • content(サイドバーなし)

レイアウトは、theme-options.phpのtwentyeleven_layouts()に定義されています。

function twentyeleven_layouts() {
    $layout_options = array(
        'content-sidebar' => array(
            'value' => 'content-sidebar',
            'label' => __( 'Content on left', 'twentyeleven' ),
            'thumbnail' => get_template_directory_uri() . '/inc/images/content-sidebar.png',
        ),
        'sidebar-content' => array(
            'value' => 'sidebar-content',
            'label' => __( 'Content on right', 'twentyeleven' ),
            'thumbnail' => get_template_directory_uri() . '/inc/images/sidebar-content.png',
        ),
        'content' => array(
            'value' => 'content',
            'label' => __( 'One-column, no sidebar', 'twentyeleven' ),
            'thumbnail' => get_template_directory_uri() . '/inc/images/content.png',
        ),
    );
 
    return apply_filters( 'twentyeleven_layouts', $layout_options );
}

レイアウトを変更するには、管理画面の「外観」→「テーマ設定」→「デフォルトのレイアウト」で行えます。

デフォルトのレイアウト

3.レイアウトの判定

取得したレイアウトの判定を行い、「content」つまりサイドバーを表示しないレイアウト以外であれば、ifブロック内を実行します。

<?php
…中略…
if ( 'content' != $current_layout ) :
?>
…中略…
<?php endif; ?>

4.サイドバーの判定

dynamic_sidebar()でサイドバーの有無を判定します。第1パラメータはサイドバーの名称で「sidebar-1」は管理画面の「外観」→「ウィジェット」の「メインサイドバー」が対応します。「メインサイドバー」にウィジェットが1つも割り当てられていなけばifブロック内を実行します。

        <div id="secondary" class="widget-area" role="complementary">
            <?php if ( ! dynamic_sidebar( 'sidebar-1' ) ) : ?>
            …中略…
            <?php endif; // end sidebar widget area ?>
        </div><!-- #secondary .widget-area -->

dynamic_sidebar()はwp-includes/widgets.phpに実装されています(掲載は割愛)。この関数の実行結果は真偽値を返却します。

5.アーカイブ一覧の出力

次の部分でアーカイブ一覧を出力します。

                <aside id="archives" class="widget">
                    <h3 class="widget-title"><?php _e( 'Archives', 'twentyeleven' ); ?></h3>
                    <ul>
                        <?php wp_get_archives( array( 'type' => 'monthly' ) ); ?>
                    </ul>
                </aside>

wp_get_archives()は日付ベースのアーカイブリストを表示するテンプレートタグで、wp-includes/general-template.phpに実装されています(掲載は割愛)。

パラメータの「type」には次のものを指定できます。指定を省略した場合は「monthly」を適用します。

  • yearly
  • monthly
  • daily
  • weekly
  • postbypost

その他、下記のパラメータを設定できます(内容は公式ドキュメントより)。

  • limit:取得するアーカイブ数を数値で設定。デフォルトは制限なし
  • format:アーカイブリストの形式(下記のいずれか)を設定
    • html:HTML のリストタグ(<li>)と before・after の文字列
    • option:セレクトボックスまたはドロップダウンメニュー用のセレクトタグ(<select>)内のオプションタグ(<option>)
    • link:リンクタグ(<link>)内に
    • custom:before・after の文字列を用いたカスタムリスト
  • before:リンクの前に表示する内容(htmlまたはcustomを選択した場合に有効)
  • after:リンクの後に表示する内容(htmlまたはcustomを選択した場合に有効)
  • show_post_count:投稿数を表示(真偽値を設定)

6.メタ情報の出力

次の部分でアーカイブ一覧を出力します。

                <aside id="meta" class="widget">
                    <h3 class="widget-title"><?php _e( 'Meta', 'twentyeleven' ); ?></h3>
                    <ul>
                        <?php wp_register(); ?>
                        <li><?php wp_loginout(); ?></li>
                        <?php wp_meta(); ?>
                    </ul>
                </aside>

wp_register()は次の制御を行います。

  • ログイン中:「サイト管理」のリンクを出力(クリックすれば管理画面に移動)
  • ログアウト中:
    • 管理画面の「設定」→「一般」の「だれでもユーザー登録ができるようにする」をチェックしている場合:「登録」のリンクを出力
    • チェックしていない場合:何も出力しない

ログイン中の表示
ログイン中の表示

ログアウト中(または他ユーザー)でチェックしている場合の表示
ログイン中の表示

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

wp-includes/general-template.php

function wp_register( $before = '<li>', $after = '</li>', $echo = true ) {
 
    if ( ! is_user_logged_in() ) {
        if ( get_option('users_can_register') )
            $link = $before . '<a href="' . site_url('wp-login.php?action=register', 'login') . '">' . __('Register') . '</a>' . $after;
        else
            $link = '';
    } else {
        $link = $before . '<a href="' . admin_url() . '">' . __('Site Admin') . '</a>' . $after;
    }
 
    if ( $echo )
        echo apply_filters('register', $link);
    else
        return apply_filters('register', $link);
}

wp_loginout()はログインリンクを表示します。ログインしているユーザーにはログアウトリンクを表示します。

ログイン中
ログイン中の表示

ログアウト中
ログアウト中の表示

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

wp-includes/general-template.php

function wp_loginout($redirect = '', $echo = true) {
    if ( ! is_user_logged_in() )
        $link = '<a href="' . esc_url( wp_login_url($redirect) ) . '">' . __('Log in') . '</a>';
    else
        $link = '<a href="' . esc_url( wp_logout_url($redirect) ) . '">' . __('Log out') . '</a>';
 
    if ( $echo )
        echo apply_filters('loginout', $link);
    else
        return apply_filters('loginout', $link);
}

wp_meta()は、プラグインのアクションフックです。デフォルトの状態では何も出力されません。functions.phpに次のようなコードを記述すればリンクが表示されます。

function out_link () {
    echo "<li><a href="...">foo</a></li>";
}
add_action('wp_meta', 'out_link');
Comments [0] | Trackbacks [0]
2011年11月13日

WordPressのTwenty Elevenテーマ解説:固定ページテンプレート (page.php)

November 13,2011 12:55 AM
Tag:[, ]
Permalink

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

固定ページテンプレート (page.php)

Twenty Elevenテーマの「固定ページテンプレート (page.php)」で出力されるページは次のように、URLが一意のページにコンテンツが表示されます。

固定ページテンプレート (page.php)

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

<?php
/**
 * The template for displaying all pages.
 *
 * This is the template that displays all pages by default.
 * Please note that this is the WordPress construct of pages
 * and that other 'pages' on your WordPress site will use a
 * different template.
 *
 * @package WordPress
 * @subpackage Twenty_Eleven
 * @since Twenty Eleven 1.0
 */
 
get_header(); ?>
 
        <div id="primary">
            <div id="content" role="main">
 
                <?php the_post(); ?>
 
                <?php get_template_part( 'content', 'page' ); ?>
 
                <?php comments_template( '', true ); ?>
 
            </div><!-- #content -->
        </div><!-- #primary -->
 
<?php get_footer(); ?>

以下、順を追ってテンプレートの内容について解説します。「WordPressのTwenty Elevenテーマ解説:単一記事の投稿 (single.php)」と重複している部分がありますが、この記事だけで一気に読みきれるよう、他の記事への参照は行ってません。

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.記事データの取得

赤色で示したthe_post()で、記事データを取得します。

        <div id="primary">
            <div id="content" role="main">
 
                <?php the_post(); ?>
 
                <?php get_template_part( 'content', 'page' ); ?>
 
                <?php comments_template( '', true ); ?>
 
            </div><!-- #content -->
        </div><!-- #primary -->

the_post()は投稿データをロードする関数で、wp-includes/query.phpに実装されています。the_post()を実行しただけでは何も出力しません。

wp-includes/query.php

function the_post() {
    global $wp_query;
 
    $wp_query->the_post();
}

3.コンテンツの出力

赤色のget_template_part()でコンテンツを出力します。

        <div id="primary">
            <div id="content" role="main">
 
                <?php the_post(); ?>
 
                <?php get_template_part( 'content', 'page' ); ?>
 
                <?php comments_template( '', true ); ?>
 
            </div><!-- #content -->
        </div><!-- #primary -->

コンテンツは次の赤枠部分が該当します。

コンテンツ情報

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」でテンプレートを呼び出します。

固定ページテンプレート (page.php)テンプレートのget_template_part()の第1パラメータは「content」、第2パラメータは「page」なので、「content-page.php」が呼び出されることになります。

4.コメントの出力

赤色のcomments_template()でコメントを出力します。

        <div id="primary">
            <div id="content" role="main">
 
                <?php the_post(); ?>
 
                <?php get_template_part( 'content', 'page' ); ?>
 
                <?php comments_template( '', true ); ?>
 
            </div><!-- #content -->
        </div><!-- #primary -->

コメントは次の赤枠部分が該当します(冒頭のスクリーンショットはディスカッションの設定で非表示にしています)。

コメント

comments_template()はコメントテンプレートを取得する関数で、wp-includes/comment-template.phpに実装されています(長いので掲載は割愛)。

パラメータの意味は次のとおりです。

  • 第1パラメータ:コメントテンプレート名を指定。値が空の場合は「comments.php」を取得
  • 第2パラメータ:コメント分割の要否。ここでは「true」が設定されているのでコメントを分割表示

5.フッター情報の出力

フッター情報は赤枠部分が対応します。

フッター情報

フッター情報は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]
2011年11月 3日

WordPressテーマ(テンプレート)バージョンアップ

November 3,2011 1:33 AM
Tag:[, , ]
Permalink

当ブログで配布中のWordPressテーマをバージョンアップしました。最新バージョンは3.0.20です。

WordPressテーマ

1.変更点

まず、サイドバーのコメント・トラックバック一覧表示用の「Commented entry listプラグイン」の機能をテーマに同梱しました。これで、「Commented entry listプラグイン」をインストールしなくてもすむようにしました。

コメント・トラックバック一覧
コメント・トラックバック一覧

次に、カテゴリーアーカイブのパンくずリスト表示で一部不具合があったため、これを対処しました。

カテゴリーアーカイブのパンくずリスト
パンくずリスト

スタイルも一部変更し、中央カラムのコンテンツのフォントサイズを大きくしています。その他、バージョン3以降で非推奨となったテンプレートタグを推奨テンプレートタグに書き換えました。

2.ダウンロード

バージョンアップしたテーマは以下のエントリーからダウンロードできます。

WordPress テーマ(テンプレート)・3カラム版
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