【WordPress】オリジナルのテーマを作成する。 その4

雑記

はじめに

今までWordPressのテーマは無料のテーマをダウンロードして使っていたのですが、自分でもオリジナルのテーマを作ってみたくなったので勉強し始めました。今回はアーカイブ(一覧)ページのテンプレートファイルを作成して表示してみます。

サムネイル画像を有効にする

アーカイブページを作成する前にサムネイル画像のサポートを有効にします。これを有効にすることで、投稿画面でアイキャッチ画像を登録できるようになります。
下記の手順でサムネイル画像を有効にすることができます。

1.オリジナルテーマのフォルダに「functions.php」ファイルを作成します。このファイルはテーマ固有の機能を実装するファイルになります。

2.1で作成した「functions.php」にコードを記述します。


<?php
// サムネイル画像を有効にする
add_theme_support('post-thumbnails');
?>

これでサムネイル画像を有効にすることができました。
投稿画面を表示すると、「アイキャッチ画像を設定」が追加されています。

アーカイブページを作成する

下記の手順でアーカイブページを作成することができます。

1.オリジナルテーマのフォルダに「archive.php」ファイルを作成します。

どのページにどのファイル名を使用するかは下記のリンクを確認すると分かります。
テンプレート階層 – WordPress Codex 日本語版

2.1で作成した「archive.php」にコードを記述します。
今回は下記のように記述しました。


<!-- ヘッダーを表示 -->
<?php get_header(); ?>

<!-- 投稿ページのレイアウト -->
<?php while(have_posts()): the_post(); ?>
	<h2><?php the_title(); ?></h2>
	<div>投稿日時:<?php the_time("Y/m/d"); ?></div>
	<div>カテゴリー:<?php the_category(', '); ?></div>
    <?php the_post_thumbnail(); ?>
    <?php the_excerpt(); ?>
	<div><?php edit_post_link(); ?></div>
	<hr />
<?php endwhile; ?>

<!-- フッターを表示 -->
<?php get_footer(); ?>

新しい関数部分の説明は下記の通りです。

the_post_thumbnail():投稿のサムネイル画像を表示する。
the_excerpt():投稿の抜粋を表示する。

以上でアーカイブページを作成することができました。
ブラウザで確認すると下記のように表示されます。

まとめ

今回はアーカイブページのテンプレートを作成しました。これでオリジナルテーマに必要なテンプレートファイルはほとんど揃った感じがします。これからは必要そうな機能ごと勉強していこうと思います。

参考URL

テンプレート階層 – WordPress Codex 日本語版
抜粋 – WordPress Codex 日本語版

検証環境

Windows 10 Pro
WordPress 4.9.5

WordPressのツボとコツがゼッタイにわかる本
中田 亨
秀和システム
売り上げランキング: 186,546

コメント

  1. […] オリジナルのテーマを作成する。 その4 […]