Default/archive.php

「アーカイブテンプレート(archive.php)」は「カテゴリー」「日付」「ユーザ」「タグ」などの投稿記事に付けられる属性によって、分類表示しようとする時に利用されるテンプレートファイルです。テンプレートファイルの階層としては「記事用テンプレート(single.php)」と同じく、最も汎用性のある階層の「メインテンプレート(index.php)」に次いで、汎用性の高いファイルです。

「アーカイブテンプレート(archive.php)」では投稿記事に付いている属性(「カテゴリー」「日付」「ユーザ」「タグ」など)別の表示を条件式で、全て表現することもできますが、「カテゴリー別」や「日付別」、「ユーザー別」、「タグ別」などの個別テンプレートを作成して、属性別のページを作成することできます。

ブログなどの構造が比較的に単純なものは「アーカイブテンプレート(archive.php)」のみで運用するほうが分かりやすく良いかと思いますが、構造が複雑であろうWebサイトでの利用の際は、個別テンプレートを作成して、構築する方が、分かりやすいテーマになるでしょう。

「アーカイブテンプレート(archive.php)」から派生できる主なテンプレートは次のとおりです。

  • 1.category.php :カテゴリ用テンプレート/カテゴリー別のコンテンツ一覧表示
  • 2.author.php :著者用テンプレート/ユーザ別のユーザ・筆者紹介
  • 3.date.php :日時用テンプレート/年月別のコンテンツ一覧表示

*「Default_Theme(英語版)」の「アーカイブテンプレート(archive.php)」をコメント文(//説明文)を使って機能解説してみましょう。

Default_Theme/archive.php


<?php
/**
 * @package WordPress
 * @subpackage Default_Theme
 */
get_header();?>          //インクルードファイル:header.phpを読み込みます

	<div id="content" class="narrowcolumn">

		<?php if (have_posts()) : ?>     //属性別の条件式の開始

 	  <?php $post = $posts[0]; // Hack. Set $post so that the_date() works. ?>

      //「カテゴリー」アーカイブの際のタイトル・コメント表示(カテゴリー別一覧表示に使用)
 	  <?php /* If this is a category archive */ if (is_category()) { ?>
		<h2 class="pagetitle">Archive for the ‘<?php single_cat_title(); ?>’ Category</h2>

      //「タグ」アーカイブの際のタイトル・コメント表示(タグ別一覧表示に使用)
 	  <?php /* If this is a tag archive */ } elseif( is_tag() ) { ?>
		<h2 class="pagetitle">Posts Tagged ‘<?php single_tag_title(); ?>’</h2>

      //「日別」アーカイブの際のタイトル・コメント表示(xx年xx月xx日別一覧表示に使用)
 	  <?php /* If this is a daily archive */ } elseif (is_day()) { ?>
		<h2 class="pagetitle">Archive for <?php the_time('F jS, Y'); ?></h2>

      //「月別」アーカイブの際のタイトル・コメント表示(xx年xx月別一覧表示に使用)
 	  <?php /* If this is a monthly archive */ } elseif (is_month()) { ?>
		<h2 class="pagetitle">Archive for <?php the_time('F, Y'); ?></h2>

      //「年別」アーカイブの際のタイトル・コメント表示(xx年別一覧表示に使用)
 	  <?php /* If this is a yearly archive */ } elseif (is_year()) { ?>
		<h2 class="pagetitle">Archive for <?php the_time('Y'); ?></h2>

      //「投稿者(著者)別」アーカイブの際のタイトル・コメント表示(投稿者(著者)別一覧表示に使用)
	  <?php /* If this is an author archive */ } elseif (is_author()) { ?>
		<h2 class="pagetitle">Author Archive</h2>

      //属性分類がない場合のタイトル表示
 	  <?php /* If this is a paged archive */ } elseif (isset($_GET['paged']) <amp;<amp; !empty($_GET['paged'])) { ?>
		<h2 class="pagetitle">Blog Archives</h2>
 	  <?php } ?>

      //投稿前後のナビゲーションの表示
		<div class="navigation">
			<div class="alignleft"><?php next_posts_link('? Older Entries') ?></div>
			<div class="alignright"><?php previous_posts_link('Newer Entries ?') ?></div>
		</div>

		<?php while (have_posts()) : the_post(); ?> //コンテンツデータを取得する・ループのPHPコードの開始
		<div <?php post_class() ?>>

                //投稿(コンテンツ)タイトル名の表示
				<h3 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>
				<small><?php the_time('l, F jS, Y') ?></small>

                //投稿(コンテンツ)内容の表示
				<div class="entry">
					<?php the_content() ?>
				</div>

                //投稿タグ・カテゴリー・編集リンク・コメントの表示
				<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments ?', '1 Comment ?', '% Comments ?'); ?></p>
			</div>

		<?php endwhile; ?>          //コンテンツデータを取得する・ループのPHPコードの終了

        //投稿前後のナビゲーションの表示
		<div class="navigation">
			<div class="alignleft"><?php next_posts_link('? Older Entries') ?></div>
			<div class="alignright"><?php previous_posts_link('Newer Entries ?') ?></div>
		</div>

    //コンテンツデータがないときのメッセージ表示
	<?php else :

		if ( is_category() ) { // If this is a category archive
			printf("<h2 class='center'>Sorry, but there aren't any posts in the %s category yet.</h2>", single_cat_title('',false));
		} else if ( is_date() ) { // If this is a date archive
			echo("<h2>Sorry, but there aren't any posts with this date.</h2>");
		} else if ( is_author() ) { // If this is a category archive
			$userdata = get_userdatabylogin(get_query_var('author_name'));
			printf("<h2 class='center'>Sorry, but there aren't any posts by %s yet.</h2>", $userdata->display_name);
		} else {
			echo("<h2 class='center'>No posts found.</h2>");
		}
		get_search_form();

	endif;
?>  //属性別の条件式の終了

	</div>

<?php get_sidebar(); ?>          //インクルードファイル:sideber.phpを読み込みます

<?php get_footer(); ?>          //インクルードファイル:footer.phpを読み込みます
  • 1.ヘッダー(header)部分、サイドバー(sidebar)部分、フッター(footer)部分は共通部品として、それぞれのインクルードファイルが読み込まれています。
  • 2.コンテンツデータを取得するループのPHPコードによって、DBからコンテンツデータを取得して、タイトルと内容を表示しています。
  • 3.コンテンツデータに関する投稿日付、投稿者、タグ、カテゴリー等を表示しています。
  • 4.仮にコンテンツデータがないときにはメッセージを表示します。

2009.04.14 03;18

Default/header.php

「パーツテンプレート」はテーマを構成するファイルの共通部品ファイルとして引用されます。例えば、header.phpは各ページの共通した「ヘッダー部分」を記述して、DOCTYPE宣言、文字コード、タイトル、リンクなどを、各ページにインクルードします。

各テンプレートの「ヘッダー部分」は別に「パーツテンプレート」を使わずに、各テンプレートに、個々に記述されれば、それで良いのですが、「パーツテンプレート」を使用することによって、管理がheader.phpに一元化され、また、〈?php wp_head(); ?〉を使用することで、「プラグイン」や「関数ファイル」の制御を受けることができるようになります。また、各ページによって、「ヘッダー部分」の記述が異なる場合はPHP関数(条件文)を使用して、ページごとの記述に変更することも可能です。

「パーツテンプレート」のテンプレートへのインクルードはもともと、WordPress関数によって決められています。例えば、「header.php」は各テンプレートに〈?php get_header(); ?〉、「footer.php」は〈?php get_footer(); ?〉と記述することで、インクルードされます。

〈?php wp_head(); ?〉はプラグイン・関数ファイルに対してのフックです。この記述は重要で、記述がない場合、プラグイン・関数ファイルが動かない場合があります。特にjavascriptのリンク先追加がおこなわれないので、注意が必要です。

*「Default_Theme(英語版)」の「header.php」をコメント文(//説明文)を使って機能解説してみましょう。

Default_Theme/header.php


<?php
/**
 * @package WordPress
 * @subpackage Default_Theme
 */
?>

//ヘッダー情報の開始・DOCTYPE宣言・言語、文字コード指定
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

//「サイトタイトルの表示」サイトページ名とサイト名
<title><?php wp_title('?', true, 'right'); ?> <?php bloginfo('name'); ?></title>

//「CSSファイルURLの指定」
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

//「フィード・ピングURLの表示」
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="<?php bloginfo('name'); ?> Atom Feed" href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

<style type="text/css" media="screen">

//サイドバー部分の可否によっての表示画像の切り替え
<?php
// Checks to see whether it needs a sidebar or not
if ( !empty($withcomments) &amp;amp;&amp;amp; !is_single() ) {
?>
	#page { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbg-<?php bloginfo('text_direction'); ?>.jpg") repeat-y top; border: none; }
<?php } else { // No sidebar ?>
	#page { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbgwide.jpg") repeat-y top; border: none; }
<?php } ?>

</style>

//記事単体ページの場合のJSファイル引用
<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>

//プラグイン・関数ファイルに対してのフック
<?php wp_head(); ?>

</head>          //ヘッダー情報の終了

<body>
<div id="page">

//サイトの共通ヘッダータイトル部分
<div id="header">
	<div id="headerimg">
		<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
		<div class="description"><?php bloginfo('description'); ?></div>
	</div>
</div>
<hr />

2009.04.16 17;47

Default/sidebar.php

Webサイトのサイドバー用の「パーツファイル」が「sidebar.php」です。テンプレートタグの〈?php get_sidebar(); ?〉を記述することで、各テンプレートファイルに読み込まれます。

また、「sidebar.php」は「ウィジェット(Widget)」用の「パーツファイル」として使用することができます。

「ウィジェット(Widget)」はWordPress本体に組み込まれた機能で、管理画面の「外観」-「ウィジェット」画面で、配置を選択すると、「フィード表示」「最近の投稿」「カレンダー」などの機能が使用できるようになります。

「ウィジェット(Widget)」を使用できるテーマにはsidebar.phpとfunctions.php(関数ファイル)に「ウィジェット対応用コード」が必要になります。

ウィジェット対応用コード(functions.php)

*ウィジェットの前後に〈li〉〈/li〉を入れ、タイトルを〈h2〉にする場合

if ( function_exists('register_sidebar') )
    register_sidebar(array(

        'before_widget' => '<li id="%1$s" class="widget %2$s">',
        'after_widget' => '</li>',
        'before_title' => '<h2 class="widgettitle">',
        'after_title' => '</h2>',

    ));

ウィジェット対応用コード(sidebar.php)

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>

// ウィジェットがない場合のサイドバー表示

<?php endif; ?>

*「Default_Theme(英語版)」の「サイドバーテンプレート(sidebar.php)」をコメント文(//説明文)を使って機能解説してみましょう。

Default_Theme/sidebar.php

<?php
/**
 * @package WordPress
 * @subpackage Default_Theme
 */
?>
	<div id="sidebar">
		<ul>

      //ウィジェット対応用コード(sidebar.php)開始
			<?php 	/* Widgetized sidebar, if you have the plugin installed. */
					if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>

      // 以下、ウィジェットがない場合のサイドバー表示
			<li>
				<?php get_search_form(); ?>      // 検索表示
			</li>

			<!-- Author information is disabled per default. Uncomment and fill in your details if you want to use it.
			<li><h2>Author</h2>
			<p>A little something about you, the author. Nothing lengthy, just an overview.</p>
			</li>
			-->

      // アーカイブ(404、カテゴリー他)の場合の条件でのサイドバーコメント表示
			<?php if ( is_404() || is_category() || is_day() || is_month() ||
						is_year() || is_search() || is_paged() ) {
			?> <li>

			<?php /* If this is a 404 page */ if (is_404()) { ?>
			<?php /* If this is a category archive */ } elseif (is_category()) { ?>
			<p>You are currently browsing the archives for the <?php single_cat_title(''); ?> category.</p>

			<?php /* If this is a yearly archive */ } elseif (is_day()) { ?>
			<p>You are currently browsing the <a href="<?php bloginfo('url'); ?>/"><?php echo bloginfo('name'); ?></a> blog archives
			for the day <?php the_time('l, F jS, Y'); ?>.</p>

			<?php /* If this is a monthly archive */ } elseif (is_month()) { ?>
			<p>You are currently browsing the <a href="<?php bloginfo('url'); ?>/"><?php echo bloginfo('name'); ?></a> blog archives
			for <?php the_time('F, Y'); ?>.</p>

			<?php /* If this is a yearly archive */ } elseif (is_year()) { ?>
			<p>You are currently browsing the <a href="<?php bloginfo('url'); ?>/"><?php echo bloginfo('name'); ?></a> blog archives
			for the year <?php the_time('Y'); ?>.</p>

			<?php /* If this is a monthly archive */ } elseif (is_search()) { ?>
			<p>You have searched the <a href="<?php echo bloginfo('url'); ?>/"><?php echo bloginfo('name'); ?></a> blog archives
			for <strong>'<?php the_search_query(); ?>'</strong>. If you are unable to find anything in these search results, you can try one of these links.</p>

			<?php /* If this is a monthly archive */ } elseif (isset($_GET['paged']) &amp;&amp; !empty($_GET['paged'])) { ?>
			<p>You are currently browsing the <a href="<?php echo bloginfo('url'); ?>/"><?php echo bloginfo('name'); ?></a> blog archives.</p>

			<?php } ?>

			</li> <?php }?>

      // 固定ページタイトル、リンクの表示
			<?php wp_list_pages('title_li=<h2>Pages</h2>' ); ?>

      // アーカイブ(月別)リンクの表示
			<li><h2>Archives</h2>
				<ul>
				<?php wp_get_archives('type=monthly'); ?>
				</ul>
			</li>

      // カテゴリータイトル、リンクの表示
			<?php wp_list_categories('show_count=1&amp;title_li=<h2>Categories</h2>'); ?>

      // ブックマークリンクの表示
			<?php /* If this is the frontpage */ if ( is_home() || is_page() ) { ?>
				<?php wp_list_bookmarks(); ?>

      // サイト情報(ログイン、リンク情報)の表示
				<li><h2>Meta</h2>
				<ul>
					<?php wp_register(); ?>
					<li><?php wp_loginout(); ?></li>
					<li><a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional">Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a></li>
					<li><a href="http://gmpg.org/xfn/"><abbr title="XHTML Friends Network">XFN</abbr></a></li>
					<li><a href="http://wordpress.org/" title="Powered by WordPress, state-of-the-art semantic personal publishing platform.">WordPress</a></li>

					<?php wp_meta(); ?>      // サイドバー用のフック
				</ul>
				</li>
			<?php } ?>

			<?php endif; ?>      //ウィジェット対応用コード(sidebar.php)終了
		</ul>
	</div>

2009.04.19 02;14

Default/footer.php

Webサイトのフッター用の「パーツファイル」が「footer.php」です。テンプレートタグの〈?php get_footer(); ?〉を記述することで、各テンプレートファイルに読み込まれます。

*「Default_Theme(英語版)」の「footer.php」をコメント文(//説明文)を使って機能解説してみましょう。

Default_Theme/footer.php

<?php
/**
 * @package WordPress
 * @subpackage Default_Theme
 */
?>

<hr />
<div id="footer">
<!-- If you'd like to support WordPress, having the "powered by" link somewhere on your blog is the best way; it's our only promotion or advertising. -->
	<p>

     //WordPress情報へのリンク
		<?php bloginfo('name'); ?> is proudly powered by
		<a href="http://wordpress.org/">WordPress</a>

     //RSS情報へのリンク
		<br /><a href="<?php bloginfo('rss2_url'); ?>">Entries (RSS)</a>
		and <a href="<?php bloginfo('comments_rss2_url'); ?>">Comments (RSS)</a>.
		<!-- <?php echo get_num_queries(); ?> queries. <?php timer_stop(1); ?> seconds. -->
	</p>
</div>
</div>

//テーマ作成者(感謝!!)表示
<!-- Gorgeous design by Michael Heilemann - http://binarybonsai.com/kubrick/ -->
<?php /* "Just what do you think you're doing Dave?" */ ?>

		<?php wp_footer(); ?>        //プラグイン・関数ファイルに対してのフック
</body>
</html>

2009.04.19 02;54

Default/comments.php

ブログ記事に対して、関連した意見、注釈などを投稿することを「コメント(comments)」といいます。コメント欄は通常、「記事用テンプレート(single.php)」を使った、投稿記事ページに表示されますが、その他のページでも、コメント欄を追加することもあります。また、「トラックバックURL」や「コメントフォーム」のなどの記述もあるため、パーツテンプレート化しておくほうが便利です。

「コメントテンプレート(comments.php)はテンプレートタグの〈?php comments_template(); ?〉を記述することで、各テンプレートファイルに読み込まれます。

もしテーマ内にcomments.phpがない場合は「Defaultテーマ」のcomments.phpが呼び出されて代用するようになっています。もちろん、wp-contents/themes/の中に「Defaultテーマ」がない場合は表示されません。

Default_Theme/comments.php

<?php
/**
 * @package WordPress
 * @subpackage Default_Theme
 */

// Do not delete these lines
	if (!empty($_SERVER['SCRIPT_FILENAME']) &amp;&amp; 'comments.php' == basename($_SERVER['SCRIPT_FILENAME']))
		die ('Please do not load this page directly. Thanks!');

	if ( post_password_required() ) { ?>
		<p class="nocomments">This post is password protected. Enter the password to view comments.</p>
	<?php
		return;
	}
?>

<!-- You can start editing here. -->

//コメントが許可されていて、ある場合の表示
<?php if ( have_comments() ) : ?>
	<h3 id="comments"><?php comments_number('No Responses', 'One Response', '% Responses' );?> to “<?php the_title(); ?>”</h3>

	<div class="navigation">
		<div class="alignleft"><?php previous_comments_link() ?></div>
		<div class="alignright"><?php next_comments_link() ?></div>
	</div>

	<ol class="commentlist">
	<?php wp_list_comments(); ?>
	</ol>

	<div class="navigation">
		<div class="alignleft"><?php previous_comments_link() ?></div>
		<div class="alignright"><?php next_comments_link() ?></div>
	</div>
 <?php else : // this is displayed if there are no comments so far ?>

//コメント投稿が許可されていない場合の表示
	<?php if ('open' == $post->comment_status) : ?>
		<!-- If comments are open, but there are no comments. -->

	 <?php else : // comments are closed ?>
		<!-- If comments are closed. -->
		<p class="nocomments">Comments are closed.</p>

	<?php endif; ?>
<?php endif; ?>

//コメントが許可されていて、ある場合の表示
<?php if ('open' == $post->comment_status) : ?>

<div id="respond">

<h3><?php comment_form_title( 'Leave a Reply', 'Leave a Reply to %s' ); ?></h3>

<div class="cancel-comment-reply">
	<small><?php cancel_comment_reply_link(); ?></small>
</div>

<?php if ( get_option('comment_registration') &amp;&amp; !$user_ID ) : ?>
<p>You must be <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?redirect_to=<?php echo urlencode(get_permalink()); ?>">logged in</a> to post a comment.</p>
<?php else : ?>

<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">

<?php if ( $user_ID ) : ?>

<p>Logged in as <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. <a href="<?php echo wp_logout_url(get_permalink()); ?>" title="Log out of this account">Log out ?</a></p>

<?php else : ?>

//コメント欄の表示
<p><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" tabindex="1" <?php if ($req) echo "aria-required='true'"; ?> />
<label for="author"><small>Name <?php if ($req) echo "(required)"; ?></small></label></p>

<p><input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="22" tabindex="2" <?php if ($req) echo "aria-required='true'"; ?> />
<label for="email"><small>Mail (will not be published) <?php if ($req) echo "(required)"; ?></small></label></p>

<p><input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="22" tabindex="3" />
<label for="url"><small>Website</small></label></p>

<?php endif; ?>

<!--<p><small><strong>XHTML:</strong> You can use these tags: <code><?php echo allowed_tags(); ?></code></small></p>-->

<p><textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4">

2009.04.20 17;57

スクリーンショット(screenshot.png)

WordPressテーマ選択の画面で(「外観」-「テーマの管理」)で、サムネイル画像を表示するファイルが「スクリーンショット(screenshot.png)」です。

また、サムネイル画像とともに、表示される「テーマの説明」は「スタイルシート (style.css)」に記述された「テーマ説明(コメントヘッダ)」で、「テーマの画像」と同じく、テーマ選択の目印になります。当然ですが、「スクリーンショット(screenshot.png)」がなければ、サムネイル表示はなく、「テーマ説明(コメントヘッダ)」がなければ、「テーマの説明」もなく、選択が不明瞭なものになってしまいます。

「スクリーンショット(screenshot.png)」はPNGフォーマットで、300 x 226ピクセルの大きさで作成し、テーマフォルダの中に保存します。テーマフォルダの中にscreenshot.pngがあると、WordPressは自動的に読取り、「外観」-「テーマの管理」で表示できるようになります。

screenshot表示例

screenshot.png実物画像サンプル(300x226)

2009.04.22 14;46

このページのトップへ