WordPressテーマ制作-ステップ12-index.php作成3

投稿日：

前回の更新でindex.phpはこんなソースになっていると思います。

Code example
1
2
3
4
5
6
7
8
9
10
11
12
13
</pre>
<div id="contents"><!--?php if ( have_posts()): ?--><br />
<h2>コンテンツ名</h2>
<ul>
    <li><a href="<?php the_permalink(); ?>"> <!--?php if ( has_post_thumbnail() ) :
the_post_thumbnail('thumbnail');
else :
echo '<img alt="デフォルト画像" src="';  bloginfo( 'template_url' );  echo '/images/the_post_thumbnail_default.png" ?-->'; endif; ?> </a><br />
<h3><a href="#">記事見出し</a></h3>
<br /><span><a href="#">日付</a></span> <span><a href="#">カテゴリー</a></span></li>
</ul>
<br /><!--?php endif; ?--></div>
<pre>

今回は記事見出し、日付、カテゴリーの部分を関数で置き換えていきます。

まずは記事見出しです。行目の

Code example
1
2
3
</pre>
<h3><a href="#">記事見出し</a></h3>
<pre><br />

を次の記述に変更します。

Code example
1
 

<a>タグのhrefは画像のリンクと同じ設定です。こちらには追加でtitleを設定します。

Code example
1
title="<!--?php the_title_attribute(); ?-->"

と記述します。

タイトルの出力にはthe_title関数を使用します。

日付とカテゴリーを出力します。

Code example
1
2
<span>日付：</span>
<span>カテゴリー：</span>

の部分を以下の記述に置き換えます。

Code example
1
<span>日付：</span><br /><br /><span>カテゴリー：<!--?php the_category(','); ?--></span>

日付のリンク設定は今まで同様

Code example
1
<!--?php the_permalink(); ?-->

で問題ありません。

<time>タグとthe_time関数を使い正確な日付を出力しておきましょう。

表示される日付は設定->一般設定->日付のフォーマットで指定した表示にするためthe_time関数のパラメータをget_option(‘date_format’)とします。

次にカテゴリーの出力設定です。カテゴリーはthe_category関数を使用し、カテゴリーが複数選択されている場合の区切り文字をパラメータに設定します。

カテゴリー:WordPress,テーマ タグ: , , , , ,

« »

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Translate »