WordPress Customize NOTE > WordPress オリジナルテーマの作り方目次 > 記事の個別ページの作成

WordPress オリジナルテーマを作る記事の個別ページの作成

スポンサードリンク

記事の個別ページとは

通常のブログで、記事のタイトルをクリックして開く、一つの記事をメインとして表示されるページが個別ページですね。

現時点で、作成しているWordpressの記事タイトルをクリックすると、「index.php」と同じデザインで個別ページが表示されると思います。このままではコメントやトラックバックなどの機能が使えません。個別ページにだけ表示するものを分けておくためにも、個別ページ用のテンプレートを用意しておくことがよいでしょう。たとえデザインが「index.php」と同じであっても、個別ページ用のテンプレートを用意しておけばSEO効果も大いに期待できます。

個別ページ用の「single.php」を作成する

個別ページには個別ページ専用のファイル「single.php」を作るのが一般的です。

では、「sample」（任意のテーマフォルダの名前）フォルダに「single.php」というファイルを作成してください。中身は「index.php」と同じ内容をコピー＆ペーストして、これまでと同様にテーマフォルダにアップロードします。アップロード先は、「wp親フォルダ > wp-contet > themes > sample（「sample」は任意のテーマフォルダの名前）」です。パーミッションは「755」または「777」にします。

これで「ダッシュボード > テーマ編集」から編集できます。「単一記事の投稿 (single.php)」となっているのがそうです。クリックすると、以下のような内容になると思います。

作成: single.php: <?php get_header(); ?> <div id="contents"> <?php if(have_posts()): while(have_posts()): the_post(); ?> <div class="entry"> <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> <div class="entry_main"> <?php the_content(); ?> </div> <p class="state"><?php echo get_the_date(); ?> <?php the_time(); ?>　　カテゴリー： <?php the_category(', '); ?></p> </div> <?php endwhile; endif; ?> </div> <?php get_footer(); ?>

個別ページのタイトル

「index.php」のテンプレートが適用されているブログのトップページでは、タイトル（<title>～</title>）部分がブログ名になってブラウザに表示されていると思います。

個別ページの場合、表示している記事のタイトルをタイトルにするのが、SEO的に良いです。
表示している記事のタイトルを表示するテンプレートタグが下記です。

Pick up: <?php wp_title(); ?>

このタグは記事のタイトルだけでなく、表示されるページによっていろいろなページタイトルに変換されます。たとえば、あるカテゴリーのページではそのカテゴリー名が、ある月のアーカイブではその月のアーカイブ名、タグはタグの名前、検索結果では検索ワードなどです。また、トップページの場合は何も表示しないので、「header.php」部分は「index.php」同様に「single.php」でも共有することができます。

ブラウザに表示するとき「記事タイトル名 - ブログ名」といったように、記事タイトルとブログ名の間に記号などの区切りを入れたい場合があると思います。そういったときはパラメータを利用して「<?php wp_title('-', true, 'right'); ?><?php bloginfo('name'); ?>」というように書きます。「<?php wp_title(); ?> - <?php bloginfo('name'); ?>」としてしまう方も多いかもしれませんが、こうするとブログのトップページを表示したときブラウザに「 - ブログ名」のように表示されるからです。

ではタグを「header.php」に追加します。

編集: header.php: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>;charset=<?php bloginfo('charset'); ?>"> <title><?php wp_title('-', true, 'right'); ?><?php bloginfo('name'); ?></title> <meta http-equiv="content-style-type" content="style/css"> <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url') ?>"> <link rel="alternate" type="application/rss+xml" title="RSS フィード" href="<?php bloginfo('rss2_url'); ?>"> <link rel="alternate" type="application/rss+xml" title="RSS フィード" href="<?php bloginfo('atom_url'); ?>"> <?php wp_head(); ?> </head> <body> <div id="container"> <div id="header"> <h1><a href="<?php echo home_url(); ?>"><?php bloginfo('name') ?></a></h1> <p><?php bloginfo('description'); ?></p> </div>

個別ページのタイトルが「記事タイトル名 - ブログ名」になりました。（ブログトップのタイトルは「ブログ名」のみ）

個別ページのタイトルが「記事タイトル名 - ブログ名」に！

前後の記事へのナビゲーションリンク

大抵のブログでは、個別ページをスクロールして下までいくと、「前の記事へ」「次の記事へ」といった便利なナビゲーションリンクがありますね。では、このリンクを作成します。

以下のタグが「前の記事へ」のナビゲーションリンクです。

Pick up: <?php previous_post_link(); ?>

次に、以下のタグが「次の記事へ」のナビゲーションリンクです。

Pick up: <?php next_post_link(); ?>

パラメータにお好みで値を入れます。前の回でも紹介した通り、<?php next_posts_link('« 次の記事') ?>として使うと、リンクは「« 次の記事」といったようになり、<?php next_posts_link('<< Next') ?>としてみると、「<< Next」というようになります。自由にアレンジしてみてください。
では、この2つを、トップページのリンクも交えて（不要な方は消去）個別ページの下部に挿入します。

編集: single.php: <?php get_header(); ?> <div id="contents"> <?php if(have_posts()): while(have_posts()): the_post(); ?> <div class="entry"> <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> <div class="entry_main"> <?php the_content(); ?> </div> <p class="state"><?php echo get_the_date(); ?> <?php the_time(); ?>　　カテゴリー： <?php the_category(', '); ?></p> </div> <?php endwhile; endif; ?> <div class="navi"> <?php next_post_link('%link', '<< 次の記事'); ?> │<a href="<?php echo home_url(); ?>">トップ</a>│ <?php previous_post_link('%link', '前の記事 >>'); ?> </div> </div> <?php get_footer(); ?>

以下が画像です。画像の上半分は今紹介した「次の記事」「前の記事」のような表示です。下半分はこれから紹介する「記事のタイトル」での表示です。

個別ページのナビゲーションリンク

<前後の「記事のタイトル」で表示する方法> 前後の記事タイトルでナビゲーションリンクを表示するには、パラメータの値を替えて「<?php next_post_link('%link', '<< %title'); ?>（次の記事）」「<?php previous_post_link('%link', '%title >>'); ?>（前の記事）」というようにします。「%title」が「記事のタイトル」に入れ替わります。

[PR] 《スマホ広告ならAMoAd》圧倒的な広告数、枠、サイズで高収益！

スポンサードリンク