WordPressでテーマを自作する際、ループを用意してその中で必要な情報を出力するための各タグを入れていきます。
あれ、これどうやって出力するんだっけ？ってなった際に個別に調べるのは面倒なので備忘録としてまとめておきます。
ループの準備
主に以下の「ループさせたい投稿内容」の部分に各タグを記述する想定をしています。
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
//ループさせたい投稿内容
<?php endwhile; endif; ?>投稿日の取得
複数取得方法がありますが、出力結果は以下の場合同じになります。
the_date();は同じ日に書かれた記事の日付が一度しか表示されないのでは基本使わないですが念のため記載しておきます。
出力タグ
<p class="date"><?php the_time('Y年n月j日'); ?></p>
<p class="date"><?php echo get_the_date(); ?></p>
<p class="date"><?php echo get_the_date( 'Y年n月j日' ); ?></p>
<p class="date"><?php the_date(); ?></p>出力結果
<p class="date">0000年0月0日</p>ちなみに数字と記号で取得する場合はこのように記述します。
出力タグ
<!-- 月と日にゼロをつけない -->
<p class="date"><?php the_time('Y/n/j'); ?></p>
<!-- 月と日にゼロをつける -->
<p class="date"><?php the_time('Y/m/d'); ?></p>
<!-- 年を二桁で出力 -->
<p class="date"><?php the_time('y/n/j'); ?></p>出力結果
<!-- 月と日にゼロをつけない -->
<p class="date">0000/1/1</p>
<!-- 月と日にゼロをつける -->
<p class="date">0000/01/01</p>
<!-- 年を二桁で出力 -->
<p class="date">00/1/1</p>タイトルの取得
出力タグ
<h1><?php the_title();?></h1>出力結果
<h1>タイトルが入ります</h1>記事ページへのリンクを取得
出力タグ
<a href="<?php the_permalink(); ?>"><?php the_title();?></a>出力結果
<a href="記事ページのURL">タイトルが入ります</a>記事の本文を出力
記事の本文を出力する（全文）
出力タグ
<?php the_content(); ?>出力結果
このように本文が出力されます。
<p>タグなどで囲うのはhtml的におかしくなるので<div>タグなどで囲んで出力します。
記事の本文を出力する（抜粋）
以下の例では100文字までを出力。文字数がオーバーする場合は…で表示されます。
出力タグ
<p><?php echo mb_substr(strip_tags($post-> post_content),0,100).' ...'; ?></p>出力結果
<p>先頭固定表示投稿です。以下を確認してください。先頭に固定表示する投稿は、何らかの形で通常の投稿と差をつけてその違いが認識できるようにしてください。post_class ...</p>アイキャッチ画像を出力
設定内容にもよりますが、概ね以下のようなイメージで使います。
出力タグ
<?php the_post_thumbnail('thumbnail'); ?>出力結果
<img width="150" height="150" src="画像のURL" class="attachment-thumbnail size-thumbnail wp-post-image" alt="">補足ですがアイキャッチ画像を出力するには自作テーマの場合、function.php内に以下の記述が必要です。
// アイキャッチ画像を有効にする。
add_theme_support('post-thumbnails');カテゴリを出力
カテゴリ名をリンク付きで出力
出力タグ
<?php the_category(); ?>出力結果
<ul class="post-categories">
<li><a href="カテゴリアーカイブページのURL" rel="category tag">カテゴリ名</a></li>
</ul>カテゴリ名をリンク付きで出力しつつclassにスラッグ名をつける
出力されたカテゴリを色分けする場合などに使います。
出力タグ
<ul>
<?php
$terms = get_the_terms( $post->ID, 'category' );
if ($terms && ! is_wp_error($terms)): ?>
<?php foreach($terms as $term): ?>
<li class="<?php echo $term->slug; ?>"><a href="<?php echo get_term_link( $term->slug, 'category'); ?>"><?php echo $term->name; ?></a></li>
<?php endforeach; ?>
<?php endif; ?>
</ul>出力結果
<ul>
<li class="カテゴリスラッグ"><a href="カテゴリアーカイブページへのURL">カテゴリ名</a></li>
</ul>カテゴリ名をリンク付きで出力しつつclassにスラッグ名をつける-2
先ほどのものよりスマートなので個人的にはこちらをよく使います。
出力タグ
<ul>
<?php foreach((get_the_category()) as $cat){
echo '<li class="' . $cat->slug . '"><a href="/' . $cat->slug . '">' . $cat->cat_name . '</a></li>';
} ?>
</ul>出力結果
<ul>
<li class="カテゴリスラッグ"><a href="カテゴリアーカイブページへのURL">カテゴリ名</a></li>
</ul>カテゴリ名をリンク無しで出力しつつclassにスラッグ名をつける
出力タグ
<ul>
<?php
$terms = get_the_terms( $post->ID, 'category' );
if ($terms && ! is_wp_error($terms)): ?>
<?php foreach($terms as $term): ?>
<li class="<?php echo $term->slug; ?>"><?php echo $term->name; ?></li>
<?php endforeach; ?>
<?php endif; ?>
</ul>出力結果
<ul>
<li class="カテゴリスラッグ">カテゴリ名</li>
</ul>タグの出力
タグをリンク付きで出力
デフォルトでは出力結果で「タグ：」という見出しが自動挿入。タグアーカイブへのリンクも「,」で区切られます。
出力タグ
<?php the_tags(); ?>出力結果
<div>
タグ: <a href="タグAアーカイブへのURL" rel="tag">タグA</a>, <a href="タグBアーカイブへのURL" rel="tag">タグB</a>
</div>タグをリンク付きで出力（出力形式を変更）
「タグ：」の見出しを削除、区切りを/に変更。
出力タグ
<div><?php the_tags( '', ' / ' ); ?></div>出力結果
<div>
<a href="タグAアーカイブへのURL" rel="tag">タグA</a>/<a href="タグBアーカイブへのURL" rel="tag">タグB</a>
</div>タグをリンク無しで出力(タグをspanなどで囲う場合)
出力タグ
<?php $posttags=get_the_tags();if($posttags){foreach($posttags as $tag){echo '<span class="tag">'.$tag->name.'</span>';}} ?>出力結果
<span class="tag">タグA</span>
<span class="tag">タグB</span>タグをリンク無しで出力(テキストを,で区切る場合)
出力タグ
<?php
$posttags = get_the_tags();
$count = count($posttags);
$loop = 0;
if ($posttags) {
foreach ($posttags as $tag) {
$loop++;
if ($count == $loop){
echo $tag->name . '';
} else {
echo $tag->name . ', ';
}
}
} ?>出力結果
タグA, タグB投稿者の出力
出力タグ
<!-- 投稿者名を取得して表示する -->
<div>この記事の投稿者: <?php the_author(); ?></div>
<!-- 投稿者名とwebサイトのリンクを表示 -->
<div>Written by: <?php the_author_link(); ?></div>
<!-- 投稿者の投稿数を表示 -->
<div>この投稿者の記事数は <?php the_author_posts(); ?> です。</div>
<!-- 投稿者のアーカイブ(author.php)のリンクをつけて表示 -->
<div>Other posts by <?php the_author_posts_link(); ?></div>出力結果
<!-- 投稿者名を取得して表示する -->
<div>この記事の投稿者: 投稿者名</div>
<!-- 投稿者名とwebサイトのリンクを表示 -->
<div>Written by: <a href="投稿者のウェブサイトのURL" title="投稿者 のウェブサイトを表示" rel="author external">投稿者</a></div>
<!-- 投稿者の投稿数を表示 -->
<div>この投稿者の記事数は 3 です。</div>
<!-- 投稿者のアーカイブ(author.php)のリンクをつけて表示 -->
<div>Other posts by <a href="投稿者アーカイブへのリンク" title="投稿者名の投稿" rel="author">投稿者名</a></div>まとめ
このように色々なタグがありますし、それぞれのタグももっと細かく出力内容を設定可能です。
全部は覚えきれないのでよく使うタグだけ覚えておいて、より細かい設定が必要であれば調べれば良いってスタンスです。
最後にテンプレとしてよく使う内容をサクッとまとめておきます。
<ul>
<?php query_posts('posts_per_page=10'); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<li><section class="entry post">
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail('thumbnail'); ?>
<div class="text-area">
<p class="date"><?php the_time('Y年n月j日'); ?></p>
<h2><?php the_title();?></h2>
<div class="entry-content"><p>
<?php echo mb_substr(strip_tags($post-> post_content),0,100).' ...'; ?>
</p></div>
</div>
</a>
</section></li>
<?php endwhile; endif; ?>
<?php wp_reset_query(); ?>
</ul>コピペしてカスタムした方が作業がはかどるって場合に使ってくださいませ。
