[WordPress] 固定ページ・投稿ページのテンプレート作成

  WordPress ,

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
wordpress theme テーマ 作成 PHP

WordPressには固定ページ・投稿ページがあり、ブログやWEBページの役割を担うものがある。
そこで今回は、以前ご紹介した「[WordPress] 静的HTMLサイトを使ったテンプレートテーマ作成~共通部分の読み込み~」の発展版として、WordPressのテンプレートテーマ作成においても重要である、固定ページ・投稿ページのテンプレートを作成する方法をご紹介したいと思います。

主要なページのPHPファイル

WordPressにおいての主要なページのファイルは下記の4つにより構成されます。

  • トップページ:index.php
  • 投稿ページ:single.php
  • 固定ページ:page.php
  • カテゴリー別ページ:archive.php

投稿ページはブログ形式の時系列記事であるのに対し、固定ページは時系列ではないWEBページ形式の記事です。

固定ページのテンプレートの作成

以前ご紹介したトップページファイルindex.phpを元に固定ページのテンプレートを作成すると下記のようになります。

<?php get_header(); ?>
      <article>
<?php
if (have_posts()):
  while (have_posts()):
    the_post();
    get_template_part('content');
  endwhile;
endif;
?>
      </article>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

上記のようなWordPressのループにより、処理すべき記事がなくなるまで固定ページ・投稿ページを出力する処理を行います。

WordPressのループ

if (have_posts()):

endif;

上記により、処理する記事が残っているかを判断しています。

while (have_posts()):

endwhile;

上記により、カウンタから処理すべき記事が残っているかを判断しています。

the_post();

上記により、処理すべき記事を1つWordPress内部にセットして、内部カウンタをすすめてテンプレートタグなどで情報を取り出せるようにする。

get_template_part('content');

上記により、任意のテンプレートを読み込むテンプレートタグでcontent.phpを読み込んでいます。

<?php the_content(); ?>

上記により、投稿内容を表示させる。

投稿ページのテンプレートの作成

固定ページと同様にindex.phpを元に投稿ページのテンプレートを作成すると下記のようになります。

<?php get_header(); ?>
      <article>
<?php
if (have_posts()):
  while (have_posts()):
    the_post();
    get_template_part('content');
  endwhile;
endif;
?>
      </article>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

コンテンツ部分のテンプレートの作成

固定ページ・投稿ページの共通部分であるコンテンツを別ファイルとして下記のように用意します。

<h2><?php the_title(); ?></h2>
<?php the_content(); ?>
<?php the_title(); ?>

読み込んでいるページのタイトルを出力します。

<?php the_content(); ?>

読み込んでいるページの記事を出力します。

アーカイブのテンプレートの作成

カテゴリー別ページのテンプレートを作成すると下記のようになります。

<?php get_header(); ?>
      <article>
	<header class="page-header">
	<h1 class="page-title">
<?php
if (is_author()) : 
  echo esc_html(get_the_author_meta('display_name', get_query_var('author')));
else :
  single_cat_title();
endif;
?>
        </h1>
        </header>
        <div class="posts">
<?php
if (have_posts()):
  while (have_posts()):
    the_post();
    get_template_part('content-archive');
  endwhile;
  if (function_exists('page_navi')) :
    page_navi('elm_class=page-nav&edge_type=span');
  endif;
endif;
?>
        </div>
      </article>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
<?php
if (is_author()) : 
(作成者のアーカイブページがある場合)
else :
(作成者のアーカイブページがない場合)
endif;
?>

上記により、作成者のアーカイブページがあるかを判断しています。

get_query_var('author')

ユーザID取得によりユーザーを識別

echo esc_html(get_the_author_meta('display_name', get_query_var('author')));

投稿の各ページに作成者名と日付を表示させる。

single_cat_title();

現在のカテゴリー名を出力するテンプレートタグです。

if (function_exists('page_navi')) :
    page_navi('elm_class=page-nav&edge_type=span');
endif;

ページャーの設置、一覧ページを使いやすくしてくれるプラグイン「Prime Strategy Page Navi」。

アイキャッチ画像の設定

functions.phpにアイキャッチ画像に関する設定を行います。

// アイキャッチ画像を利用できるようにします。
add_theme_support('post-thumbnails');

// アイキャッチ画像サイズ設定・切り抜き許可
set_post_thumbnail_size(90, 90 ,true);

//下記に任意の画像サイズ設定
// サイドバー用画像サイズ設定・切り抜き許可
add_image_size('small_thumbnail', 61, 61, true);

// アーカイブ用画像サイズ設定・切り抜き許可
add_image_size('large_thumbnail', 120, 120, true);

// サブページヘッダー用画像サイズ設定・切り抜き許可
add_image_size('category_image', 658, 113, true);

// モールイメージ用画像サイズ設定・切り抜き許可
add_image_size('pickup_thumbnail', 302, 123, true);

アーカイブのコンテンツ部分のテンプレートの作成

アーカイブの共通部分であるコンテンツを別ファイルとして下記のように用意します。

<article <?php post_class(); ?>>
	<a href="<?php the_permalink(); ?>">
	<?php the_post_thumbnail('large_thumbnail', array('alt' => the_title_attribute('echo=0'), 'title' => the_title_attribute('echo=0'))); ?>
	</a>
	<header class="entry-header">
		<time pubdate="pubdate" datetime="<?php the_time('Y-m-d'); ?>" class="entry-date">
			<?php the_time(get_option('date_format')); ?>
		</time>
		<h1 class="entry-title"><a href="<?php the_permalink(); ?>">
			<?php the_title(); ?>
		</a></h1>
	</header>
	<section class="entry-content">
		<?php the_excerpt(); ?>
	</section>
</article>
<?php the_post_thumbnail('large_thumbnail', array('alt' => the_title_attribute('echo=0'), 'title' => the_title_attribute('echo=0'))); ?>

カテゴリーの各記事のアイキャッチ画像を「large_thumbnail」のサイズで表示する。altとtitleは記事のタイトルを使用するように設定する。

<?php post_class(); ?>

投稿に関するクラスを出力します。

<?php the_time('Y-m-d'); ?>

記事が投稿・更新された時間を引数の形式で出力します。

get_option('date_format')

管理画面で設定している日付のフォーマットを取得します。

<?php the_time(get_option('date_format')); ?>

取得したフォーマットを渡して出力する。

<?php the_permalink(); ?>

取得した記事ページのURLを出力する。

<?php the_excerpt(); ?>

取得した記事ページの抜粋文110文字を出力する。

次回は、WordPressのテンプレートタグについてご紹介していきたいと思います。

SNSでもご購読できます。

コメントを残す

*