テーマを一から作成する 第5回目
前回はフロントページ（ブログのトップページ）にて、投稿した記事一覧ページを作成しました。今回は一覧ページではなく、個別記事のページを作成します。
第4回目
スポンサーリンク
個別記事ページを表示させるテンプレートは以下の4つありますが、今回はsingle.phpを利用します。
関連ページ
個別記事ページのテンプレート階層[single-投稿タイプ.php]
1 single-投稿タイプ名.php
2 single.php
3 singular.php
4 index.php
今回作成する個別記事ページの構成は、基本的にindex.phpと変わりません。
まずはsingle.phpテンプレートを作成し、テーマディレクトリ（/wp-content/themes/sample/以下）にアップロードして下さい。外観＞テーマの編集 で見てみると個別投稿として認識されていることが分かります。
single.phpが用意できたら、下記のコードを記述して下さい。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<?php get_header(); ?> <main> <?php if(have_posts()): while(have_posts()):the_post(); ?> <h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1> <time datetime="<?php the_time('Y-m-d'); ?>"><?php the_time('Y.m.d'); ?></time> <p><?php the_category(', '); ?></p> <p><?php the_content('Read more'); ?></p> <?php endwhile; endif; ?> <?php previous_post_link('%link','古い記事へ'); ?> <?php next_post_link('%link','新しい記事へ'); ?> </main> <?php get_sidebar(); ?> <?php get_footer(); ?> |
基本的にindex.phpと変わりませんが、ページ送りの部分だけタグに変更があります。個別記事ページ（single.php等）で利用するページ送りのための previous_post_link とnext_post_link タグは、記事一覧ページで利用されるprevious_posts_link とnext_posts_link タグとは別のタグです。postの後にsがあるかないかの違いです。
追記
本記事の趣旨と関係ありませんが、どのページにおいてもトップページに戻れるようにヘッダー部分を変更しておきました。ブログのタイトルにリンクが貼ってあります。
header.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title><?php bloginfo('name'); ?></title> <meta name="description" content="<?php bloginfo('description'); ?>" /> <?php wp_head(); ?> </head> <body> <header> <h1><a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a></h1> </header> |
個別記事画面
今回作成したテーマファイルは以下のリンクからダウンロードできます。
次回はカテゴリーページを作成します。
第6回目
参照ページ
WordPress
Codex日本語版
テンプレートタグ/previous post link
テンプレートタグ/next post link
