WordPress テーマの詳説:第四章

テーマの総仕上げ

私たちのテーマはもう完成しようとしている。重要なすべての要素は完成し、あとは、2、3整理するだけだ。私たちのテーマディレクトリを覗いてみると、まだ何も触っていないファイルがあることに気づくだろう:

  • 404.php
  • archive.php
  • comments-popup.php
  • search.php

404.php

このファイルによってWordPressに表示させるカスタムな404エラーページを作成することができ、他のページと同じレイアウトとスタイルを保つことができる。これを表示させるためには404エラーをWordPressにリダイレクトさせる必要がある。リダイレクトさせる方法はホスティングサービスやウェブサーバーによってまちまちだ。管理機能の提供されていないApacheベースのウェブサイトの場合、.htaccessに次の行を追加すればよい:

ErrorDocument 404 /index.php?error=404

このURLはあなたのWordPressのパスに合わせて変更すること。これですべてのエラーがWordPressにリダイレクトされ、私たちのテーマの404.phpファイルがその作業を受け持つ。

<?php get_header(); ?><div id=“content” class=“narrowcolumn”>

<h2 class=“center”>Error 404 – Not Found</h2>

</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

これも悪くは無いが、もっと良くすることができる:

<?php get_header(); ?><div id=“wrapper”>

<div id=“content” class=“narrowcolumn”>

<div class=“post”>

<h2>Error 404 – Not Found</h2>

<img style=“float: left; width: 128px” xsrc=“<?php bloginfo(’template_url’) ?>/images/error.png”/>

<p>You have tried to access something that doesn‘t exist. It may have been moved or you may have been directed here in error.</p>

<p>You can search the website here, or return to the front page and try again.</p>
<p><?php include (’searchform.php‘) ?></p><br/>

<div style=”clear: left”></div>

<p>Alternatively you might find what you need in this list of recent posts:</p>
<p><?php wp_get_archives(’type=postbypost&limit=10‘) ?></p>

</div>

</div>

<?php get_sidebar(); ?>

</div>

<?php get_footer(); ?>

これで検索部分はこのようになった:

ユーザーにとってさらに役立つようになった!

archive.php

サイドバーのアーカイブのところからリンクを選ぶと、WordPressはその作業をarchive.phpファイルに受け渡す。レイアウトの一貫性を保つためラッパー要素を含めるようにこのファイルもアップデートする必要がある。

<?php get_header(); ?><div id=“wrapper”>

<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 echo single_cat_title(); ?>’ Category</h2>
<?php /* If this is a daily archive */ } elseif (is_day()) { ?>

<h2 class=“pagetitle”>Archive for <?php the_time(‘F jS, Y’); ?></h2>

<?php /* If this is a monthly archive */ } elseif (is_month()) { ?>

<h2 class=“pagetitle”>Archive for <?php the_time(‘F, Y’); ?></h2>

<?php /* If this is a yearly archive */ } elseif (is_year()) { ?>

<h2 class=“pagetitle”>Archive for <?php the_time(‘Y’); ?></h2>
<?php /* If this is a search */ } elseif (is_search()) { ?>

<h2 class=“pagetitle”>Search Results</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’]) && !empty($_GET[‘paged’])) { ?>

<h2 class=“pagetitle”>Blog Archives</h2>

<?php } ?>

<div class=“navigation”>
<div class=“alignleft”><?php posts_nav_link(‘’,‘’,‘« Previous Entries’) ?></div>

<div class=“alignright”><?php posts_nav_link(‘’,‘Next Entries »’,‘’) ?></div>

</div>

<?php while (have_posts()) : the_post(); ?>

<div class=“post”>
<h3 id=“post-<?php the_ID(); ?>”><a xhref=“<?php the_permalink() ?>” rel=“bookmark” title=“Permanent Link to <?php the_title(); ?>”><?php the_title(); ?></a></h3>

<small><?php the_time(‘l, F jS, Y’) ?></small>
<div class=“entry”>

<?php the_excerpt() ?>

</div>
<p class=“postmetadata”>Posted in <?php the_category(‘, ‘) ?> <strong>|</strong> <?php edit_post_link(‘Edit’,‘’,‘<strong>|</strong>’); ?> <?php comments_popup_link(‘No Comments »’, ‘1 Comment »’, ‘% Comments »’); ?></p>
<!–
<?php trackback_rdf(); ?>

–>
</div>

<?php endwhile; ?>

<div class=“navigation”>
<div class=“alignleft”><?php posts_nav_link(‘’,‘’,‘« Previous Entries’) ?></div>

<div class=“alignright”><?php posts_nav_link(‘’,‘Next Entries »’,‘’) ?></div>

</div>

<?php else : ?>

<h2 class=“center”>Not Found</h2>

<?php include (TEMPLATEPATH . ‘/searchform.php’); ?>

<?php endif; ?>
</div>

<?php get_sidebar(); ?>

</div>

<?php get_footer(); ?>

これは前述のファイルと似ていて、ループとテンプレート関数を前述したのと同じように使用している。唯一変更が必要なのは「pagetitle」へのスタイルの追加だ:

.pagetitle
{color: #bd492a;
}

comments-popup.php

これは前に簡単に触れたが、ポップアップウインドウでコメントを表示するのに用いられる。デフォルトではindex.phpで無効になっている。

search.php

WordPressではこのsearch.phpファイルを使用して検索結果を表示させている。ここでも次のようにラッパー要素を追加する必要がある:

<?php get_header(); ?><div id=“wrapper”>

<div id=“content” class=“narrowcolumn”>

<?php if (have_posts()) : ?>

<h2 class=“pagetitle”>Search Results</h2>
<div class=“navigation”>

<div class=“alignleft”><?php posts_nav_link(‘’,‘’,‘« Previous Entries’) ?></div>

<div class=“alignright”><?php posts_nav_link(‘’,‘Next Entries »’,‘’) ?></div>

</div>

<?php while (have_posts()) : the_post(); ?>
<div class=“post”>
<h3 id=“post-<?php the_ID(); ?>”><a xhref=“<?php the_permalink() ?>” rel=“bookmark” title=“Permanent Link to <?php the_title(); ?>”><?php the_title(); ?></a></h3>

<small><?php the_time(‘l, F jS, Y’) ?></small>
<div class=“entry”>

<?php the_excerpt() ?>

</div>
<p class=“postmetadata”>Posted in <?php the_category(‘, ‘) ?> <strong>|</strong> <?php edit_post_link(‘Edit’,‘’,‘<strong>|</strong>’); ?> <?php comments_popup_link(‘No Comments »’, ‘1 Comment »’, ‘% Comments »’); ?></p>
<!–
<?php trackback_rdf(); ?>

–>
</div>

<?php endwhile; ?>

<div class=“navigation”>
<div class=“alignleft”><?php posts_nav_link(‘’,‘’,‘« Previous Entries’) ?></div>

<div class=“alignright”><?php posts_nav_link(‘’,‘Next Entries »’,‘’) ?></div>

</div>

<?php else : ?>

<h2 class=“center”>Not Found</h2>

<?php include (TEMPLATEPATH . ‘/searchform.php’); ?>

<?php endif; ?>
</div>

<?php get_sidebar(); ?>

</div>

<?php get_footer(); ?>

コードは前のセクションとほとんど同じで、ループも標準的な方法で使用している。

「WordPress テーマの詳説:第四章」への5件のフィードバック

  1. 突然の書き込みすいません。
    実は、以下の点に関して教えていただければと思います。
    WordPressで、各投稿の「コメント」を見ると、「古いコメント」が一番最初に来て、「新しいコメント」が一番最後に来ます。
    これを逆にするには、comments.phpにある以下のものをどう修正すればいいのでしょうか。
    教えていただければ幸いです。

コメントは停止中です。