WordPressテーマ作成《連載3》single.php、page.phpを用意

IVORYフレームワークを使って作る、シンプルで軽量なWordpressテーマを作成「連載3」

固定ページと投稿の個別ページを表示するpage.phpとsingle.phpを作成します。
店舗や会社向け仕様のテーマでは、page.phpとsingle.phpはとても重要となります。

いずれも「index.php」をもとに、アレンジして作成します。

「page.php」に記載する内容は「index.php」とほぼ同じです。

page.php

<?php get_header(); ?>

<!-- Main Column -->
<div id="main" class="c9">
<?php if ( have_posts() ): while ( have_posts() ): the_post(); ?>
<article id="page">
<h2><?php the_title(); ?></h2>
<?php the_content(); ?>
<?php wp_link_pages(); ?>
<?php edit_post_link(); ?>
<?php endwhile; // end of the loop. ?>
</article>
<?php endif; ?>
</div>

<!-- sidebar.phpの読み込み -->
<?php get_sidebar(); ?>

<!-- footer.phpの読み込み -->
<?php get_footer(); ?>

  • 「title」に対するパーマリンクは不要となるので削除しています。
  • 「title」と「content」は記事にあたるので「article」で囲んでいます。

右サイドバーのないバージョンも作っておきます。

page-full.php

<?php
/*
Template Name: Full Width
*/
?>
<?php get_header(); ?>

<!-- Main Column -->
<div id="main" class="c12">
<?php if ( have_posts() ): while ( have_posts() ): the_post(); ?>
<article id="page">
<h2><?php the_title(); ?></h2>
<?php the_content(); ?>
<?php wp_link_pages(); ?>
<?php edit_post_link(); ?>
<?php endwhile; // end of the loop. ?>
</article>
<?php endif; ?>
</div>

<!-- sidebar.phpは読み込まない -->

<!-- footer.phpの読み込み -->
<?php get_footer(); ?>

  • ファイル名は「page-full.php」とします。(page-wide.phpでも構いません)
  • テンプレートネームをコメントスタイルで記述します。(必須)
  • テンプレートネームを設定することで、固定ページのテンプレートとして選択可能になります。
  • グリッドのivoryのクラスは「c12」となります。
  • sidebar.phpは読み込みません。

「single.php」に記載する内容は「index.php」に、「meta」情報を付けたものです。

single.php

<?php get_header(); ?>

<!-- Main Column -->
<div id="main" class="c9">
<?php if ( have_posts() ): while ( have_posts() ): the_post(); ?>
<article id="page">
<h2><?php the_title(); ?></h2>
<?php the_content(); ?>
<?php wp_link_pages(); ?>
<?php edit_post_link(); ?>
<ul class="meta">
<li class="time"><?php the_time('Y/n/j') ?></li>
<li class="category"><?php the_category('/'); ?></li>
</ul>
</article>
<?php endwhile; // end of the loop. ?>
<?php endif; ?>
</div>

<!-- sidebar.phpの読み込み -->
<?php get_sidebar(); ?>

<!-- footer.phpの読み込み -->
<?php get_footer(); ?>

  • 「title」に対するパーマリンクは不要となるので削除しています。
  • 「title」と「content」は記事にあたるので「article」で囲んでいます。
  • 「mete」は「time」と「category」のみを表示させます。
  • 前後の記事へのナビゲーションは、このテーマでは付けません。

前後の記事へのナビ(参考程度)

<div class="single-navi">
<div class="nav-next">
<?php next_posts_link('&laquo; Prev &middot;') ?>
</div>
<div class="nav-prev">
<?php previous_posts_link('&middot; Next &raquo;') ?>
</div>
</div>
  • 「endwhile」の直前に書きます。
  • 「next」と「prev」は逆に配置しています。