WordPressのループ内でよく使う要素の出力方法一覧

WordPressのループ内では、投稿や固定ページで設定した様々な要素を出力することができます。

ループ内で出力するための要素は、、アーカイブ・投稿・固定ページ関係を触るときは、必ずといって良いほど使用する内容なので、よく使うものをピックアップしてまとめておきます。

※下記のコードは、全てHTMLとして出力される状態のサンプルコードです。

投稿・ページのタイトル

the_title();

投稿・ページのタイトルをhtmlで出力します。

タイトルを編集して出力する

例えば、タイトルを20文字で省略して出力したい場合は

$title = get_the_title();

$title_count = mb_strlen($title, 'utf8');

if($title_count > 20) {
  $title = mb_substr($title, 0, 20, 'utf8').'…';
}

echo $title;

タイトルを編集して出力したい場合は、『get_the_title()』でタイトルの文字列を取得して一度変数に格納し、もろもろの処理が完了してから出力しましょう。

ページの本文

the_content();

ページの本文をhtmlで出力します。出力時にwpautop関数が実行されるため、クラシックエディターを使用している場合は、エディタのhtml補正も合わせて適応されます。

純粋な本文を取得する

$content = get_the_content();
echo $content;

補正なしの本文を取得したい場合は『get_the_content()』を使用すると、本文の文字列を取得することができます。

出力せずに『the_content()』と同じく補正済みの本文を取得したい場合は、下記のソースで取得することができます。

$content = get_the_content();
$content = wpautop($content, true);

抜粋

the_excerpt();

抜粋欄に入力された内容があればそのまま、空欄の場合は本文から最初の55個の単語までを抜粋します。HTMLタグと画像は取り除かれ最初と最後に自動で『<p></p>』が付与されます。

抜粋を編集して出力する

例えば、抜粋を120文字で切り取って出力したい場合は

$excerpt = get_the_excerpt();

$excerpt_count = mb_strlen($excerpt, 'utf8');

if($excerpt_count > 20) {
  $excerpt = mb_substr($excerpt, 0, 120, 'utf8').'…';
}

echo '<p>'.$excerpt.'</p>';

抜粋を文字列で取得する場合は『get_the_excerpt()』を使用します。この関数を使用すると『the_excerpt()』との違いは、出力されずに文字列で取得されることと、最初と最後のpタグの付与がないことです。

アイキャッチ画像

if(has_post_thumbnail()) {
 
  the_post_thumbnail('medium'); 
 
} else {
 
  echo '<img src="'.get_template_directory_uri().'/images/no-image.gif">';
 
}

『if(has_post_thumbnail()){～}』でアイキャッチ(サムネイル)画像が登録されているかどうかを判別し、登録されている場合は『the_post_thumbnail()』でアイキャッチ画像を出力します。

ない場合は代替画像を出力するようにしておきましょう。上記のコードでは、Wordpressテーマ内のimageフォルダ内に予めアップしておいた画像を呼び出しています。

アイキャッチ画像を細かく指定する

the_post_thumbnail($size(string), $attr(array));

『the_post_thumbnail()』関数は、アイキャッチ画像をhtmlのimgタグ付きで出力しますが、引数を入れることで画像のサイズや属性等を細かく指定することができます。

第一引数($size)

文字列	出力される画像のサイズ
thumbnail	「サムネイル」で指定したサイズ(上限のデフォルト：150px x 150px)
medium	「中サイズ」で指定したサイズ(上限のデフォルト：300px x 300px)
large	「大サイズ」で指定したサイズ(上限のデフォルト：640px x 640px)
full	画像の元サイズ
array(100, 200)	直接指定したサイズ(幅, 高さ)

サムネイル以外は画像のアスペクト比は維持されます。デフォルトサイズを変更する場合は、『管理画面 > 設定 > メディア』から変更してください。

第二引数($attr)

配列のキー	設定できる属性
class	imgタグにセットするclass
alt	alt属性(画像を説明する代替テキスト)
loading	画像の読み込み設定 lazy：遅延読込（デフォルト） eager：即時読込

日付

記事の投稿日

echo get_the_date();

記事の更新日

echo get_the_modified_date();

新規追加日・更新日をそれぞれ文字列で取得します。引数で日付のフォーマットを指定することで、取得する日付形式を変更することができます。

echo get_the_date('Y-m-d'); //2023-01-01

echo get_the_date('Y/n/j'); //2023/1/1 

echo get_the_date('Y年n月j日'); //2023年1月1日

引数を指定していない場合は、『設定 > 一般 > 日付形式』で設定した形式で出力されます。

カテゴリー

if(has_category()) {

  $post_cats = get_the_category();

  //リンク付きでカテゴリーを全て出力
  foreach($post_cats as $key => $post_cat) {
    echo '<a href="'.get_category_link($post_cat->term_id).'" >'.$post_cat->name.'</a>';
  }

  //カテゴリー名を全て出力
  foreach($post_cats as $key => $post_cat) {
    echo '<span>'.$post_cat->name.'</span>';
  }

  //リンク付きでカテゴリーを一つだけ出力
  echo '<a href="'.get_category_link($post_cats[0]->term_id).'" >'.$post_cats[0]->name.'</a>';

  //カテゴリー名を一つだけ出力
  echo '<span>'.$post_cats[0]->name.'</span>';

}

上記では4パターンのカテゴリーの出力方法を紹介していますので、必要なものだけ利用してください。

カテゴリーが設定されているかどうかの条件分岐『if(has_category()) {}』とカテゴリーの情報を取得する『get_the_category()』はどのパターンでも共通です。

リンク付きでカテゴリーを全て出力する

上記のソースでもリンク付きでカテゴリーを全て出力できますが、この場合は関数が用意されているため、関数一つで出力することもできます。

if(has_category()) {
  echo get_the_category_list('');
}

『get_the_category_list(”)』はリンク付きでカテゴリーを全て取得します。引数で各リンクの区切り文字をしてください。引数に空文字『”』を入れるとhtmlのリスト形式『<ul><li></li></ul>』で出力されます。

タグ

if(has_tag()) {

  $post_tags = get_the_tags();

  //リンク付きでタグを全て出力
  foreach($post_tags as $key => $post_tag) {
    echo '<a href="'.get_tag_link($post_tag->term_id).'" >'.$post_tag->name.'</a>';
  }

  //タグ名を全て出力
  foreach($post_tags as $key => $post_tag) {
    echo '<span>'.$post_tag->name.'</span>';
  }

  //リンク付きでタグを一つだけ出力
  echo '<a href="'.get_tag_link($post_tags[0]->term_id).'" >'.$post_tags[0]->name.'</a>';

  //タグ名を一つだけ出力
  echo '<span>'.$post_tags[0]->name.'</span>';

}

上記では4パターンのタグの出力方法を紹介していますので、必要なものだけ利用してください。

タグが設定されているかどうかの条件分岐『if(has_tag()) {}』とタグの情報を取得する『get_the_tags()』はどのパターンでも共通です。

リンク付きでタグを全て出力する

if(has_tag()) {
  the_tags('<ul><li>', '</li><li>', '</li></ul>');
}

『the_tags(‘前に出力する要素’, ‘区切り要素’, ‘後に出力する要素’)』はリンク付きでタグを全て取得します。引数でリンクをどのように出力するかhtmlを指定することもできます。

上記のソースでは、htmlのリスト形式で出力されるように引数を指定してます。

著者(ユーザー情報)

著者一覧へのリンク付きのブログ上の表示名

the_author_posts_link();

ブログ上の表示名

echo get_the_author_meta('display_name');

//または

the_author();

メールアドレス

echo get_the_author_meta('email');

サイトのURL

echo get_the_author_meta('url');

プロフィール情報

echo get_the_author_meta('description');

上記で紹介した以外にも、様々な項目・出力方法があります。全く同じものを出力する場合でも様々な出力方法があるので迷ってしまいますよね。。。

これもよく使うというものがあれば適宜追加していこうと思いますので、ぜひ参考にしてみてください。