WordPress Customize NOTE > WordPress オリジナルテーマの作り方 目次 > エントリー(記事)部分の作成 その2

WordPress オリジナルテーマを作る エントリー(記事)部分の作成 その2

スポンサード リンク

01

各記事の投稿日時を表示する

「style.css」を編集して、現在は以下のようになっています。(詳しくは前回で)
今回も記事部分の作成の続きをします。

※縮小表示しています。クリックで拡大。
デザインサンプル…ヘッダー部分

「index.php」を編集して、記事ごとの投稿日時を表示します。
以下のテンプレートタグが記事ごとの投稿日を表示してくれます。

Pick up
<?php echo get_the_date(); ?>

続いて、以下のテンプレートタグは、記事ごとの投稿時間を表示します。

Pick up
<?php the_time(); ?>

この2つのタグを使って「index.php」を編集します。これで画像のようになりました。

編集: index.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(); ?></p>
</div>
<?php endwhile; endif; ?>

</div>

<?php get_footer(); ?>

記事本文の下に、投稿日時が表示される!

今回は記事の投稿日時を「2012年2月5日」「5:04 PM」といったような形で表示させましたが、違う形で自由に表記することもできます。そこもまた、柔軟なWordPressの魅力のひとつです。くわしくはこちらで→「記事の投稿日時をカスタマイズして表示するには

02

各記事のカテゴリーを表示する

それぞれの記事が属しているカテゴリーを表示します。カテゴリーを表示するタグは以下です。

Pick up
<?php the_category(); ?>
ですが、このままでは使いにくいので少し付け足ししてから使います。というのも、WordPressでは一つの記事を複数のカテゴリーに分類することができます。なのでこのタグはそのままだと<ul>, <li>タグを使い、各カテゴリー名を<li>で囲んだリスト形式で表示されてしまうからです。
<?php the_category(); ?>」から「<?php the_category(', '); ?>」とすることで、複数のカテゴリーに属している場合も「A, B」(AとBが各カテゴリー名)といったように、「,(コンマ)」で区切られて表示されます。

WordPressのテンプレートタグについているカッコ「()」の中の文字を、パラメータの値と呼びます。テンプレートタグには、パラメータの値を入れることによって、違う使い方ができるものもあります。今回の場合は「<?php the_category(', '); ?>」の「', '」がパラメータの値です。値が文字列の場合は「'(シングルクォート)」で囲みます。数値の場合はそのままで構いません。

パラメータをつけたテンプレートタグを「index.php」に書き加えます。以下のようになりました。

編集: index.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(); ?>

カテゴリーも表示されるようになりました

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

スポンサード リンク

Wordpress 関連書

Amazonより激選したWPオススメ関連書。

[PR] 冷え性・便秘にお悩みの方向け「ほっと熟成発酵しょうが」

エントリー(記事)部分の作成 その1 TOP[WordPress Customize NOTE] 前後の記事へのリンク
Wordpress無料テーマ配布中!

WordPress Customize NOTE > WordPress オリジナルテーマの作り方 目次 > エントリー(記事)部分の作成 その2



スポンサード リンク

ライセンスフリー 無料素材「ばじねこ茶店」