公開日時：2022.09.01
最終更新日:2022/10/10
WordPressでブログ記事を表示させよう！
こんにちは！
台風の影響からか、すごい雨で雷うるさいなと思ってるGlobal Web Designの福田です(笑)
前回WordPressでよく使うPHPタグをご紹介しました！
私が初めてフリーランスになってから受けた案件がWordPressでしたが、その時とても苦戦したのがブログ記事を表示させることでした。
最初だったのでネットで調べまくったり、本を買って見たりと、とても苦戦したのを覚えています(笑)
そこで今回はブログ記事を表示についてご紹介します！
目次
WordPressループ
WordPressでブログの一覧を表示させるには、ループというPHPを使わないといけません。
WordPressのループは
<?php
query_posts();
if ( have_posts() ) : while ( have_posts() ) : the_post();
?>
//タイトルや記事が入る
<?php endwhile;
wp_reset_postdata();
else :
?>
<p><?php _e( '記事が見つかりません。' ); ?></p>
<?php endif; ?>このようになります。
条件分岐「if ( have_posts() ) : while ( have_posts() ) : the_post();」で記事があった場合「//タイトルや記事が入る」の部分が出力されて、記事がないときは「記事が見つかりません。」と出力されます。
ブログを表示させるためのWordPressタグ
「//タイトルや記事が入る」部分ではループ内で使えるWordPressタグを使って記事を出力していきます。
ここからはループ内で使えるWordPressでよく使うタグをご紹介していきます！
the_title()
「<?php the_title(); ?>」はブログのタイトルを出力してくれます。
<?php
query_posts('posts_per_page=1');
if ( have_posts() ) : while ( have_posts() ) : the_post();
?>
<div>
<!-- タイトル -->
<p><?php the_title(); ?></p>
</div>
<?php endwhile;
wp_reset_postdata();
else :
?>
<p><?php _e( '記事が見つかりません。' ); ?></p>
<?php endif; ?>
<?php the_title(); ?>ループ内に入れることでタイトルが出力されます。
タイトルの文字が長い場合、文字数制限をすることもできます。
<?php
if ( mb_strlen( $post->post_title, 'UTF-8' ) > 30 ) {
$title = mb_substr( $post->post_title, 0, 30, 'UTF-8' );
echo $title . '…';
} else {
echo $post->post_title;
}
?>このように書くと30文字以上を超えると「…」がタイトルにつき、30文字だけ表示されます。
「30」の箇所を変更することで、タイトルを省略するまでの文字数を変更できます。
the_content()
「<?php the_content(); ?>」で記事の本文を出力できます。
<?php
query_posts('posts_per_page=1');
if ( have_posts() ) : while ( have_posts() ) : the_post();
?>
<div>
<!-- タイトル -->
<p><?php the_title(); ?></p>
<!-- 本文 -->
<p><?php the_content(); ?></p>
</div>
<?php endwhile;
wp_reset_postdata();
else :
?>
<p><?php _e( '記事が見つかりません。' ); ?></p>
<?php endif; ?>
<?php the_title(); ?>と書くことで本文が出力されます。
記事一覧などで本文の文字数を制限したいときにはこのように書きます。
<?php
if ( mb_strlen( $post->post_content, 'UTF-8' ) > 100 ) {
$content = mb_substr( strip_tags( $post->post_content, '<span><br>' ), 0, 100, 'UTF-8' );
echo $content . '…';
} else {
echo strip_tags( $post->post_content, '<span><br>' );
}
?>100文字を超えると「…」が表示され文字数を制限できます。
「strip_tags」はHTML、PHPのコードを除外してくれるPHPですが、引数を渡して「<span><br>」と書くことで、spanタグとbrタグは除外されなくなります。
the_post_thumbnail()
「<?php the_post_thumbnail(); ?>」で記事のアイキャッチ画像を出力できます。
<?php
query_posts('posts_per_page=1');
if ( have_posts() ) : while ( have_posts() ) : the_post();
?>
<div>
<!-- アイキャッチ -->
<?php the_post_thumbnail(); ?>
<!-- タイトル -->
<p><?php the_title(); ?></p>
<!-- 本文 -->
<p><?php the_content(); ?></p>
</div>
<?php endwhile;
wp_reset_postdata();
else :
?>
<p><?php _e( '記事が見つかりません。' ); ?></p>
<?php endif; ?>WordPressをインストールして投稿ページを見ても、アイキャッチ画像を入れる部分はありません。
WordPressの機能などをつかさどる、functions.phpに以下のPHPを書くことで、アイキャッチ画像を入れる部分を出力することができます。
<?php
add_theme_support('post-thumbnails');the_time()
「the_time()」で投稿した日付を出力できます。
<?php
query_posts('posts_per_page=1');
if ( have_posts() ) : while ( have_posts() ) : the_post();
?>
<div>
<!-- アイキャッチ -->
<?php the_post_thumbnail(); ?>
<!-- 日付 -->
<small><?php the_time('Y年m月d日'); ?></small>
<!-- タイトル -->
<p><?php the_title(); ?></p>
<!-- 本文 -->
<p><?php the_content(); ?></p>
</div>
<?php endwhile;
wp_reset_postdata();
else :
?>
<p><?php _e( '記事が見つかりません。' ); ?></p>
<?php endif; ?>「<?php the_time(‘Y年m月d日’); ?>」と書くことで「2022年09月02日」と表示されます。
「<?php the_time(‘Y/m/d’); ?>」と変更すると「2022/09/02」と出力されます。
「the_time()」のフォーマットはPHPのドキュメンテーションに載っています。
よく使うフォーマットは
日付
d 日付を2桁の数字で表記。「01」〜「31」
D 日付を3文字のテキストで表記。「Mon」〜「Sun」
j 日付。先頭に0を付けない。 「1」〜「31」
l (Lの小文字) 曜日をフルスペル形式で表記。「Sunday」〜「Saturday」
月
F 月のフルスペル表記。「January」〜「December」
m 月の数字、先頭に0が入る。「01」〜「12」
M 月のスペル3文字形式。「Jan」〜「Dec」
n 月の数字、0を付けない。「1」〜「12」
年
Y 年の4桁の数字。「2022」
y 年の2桁の数字。「22」
時
a 午前、午後表記(小文字)。「am」「pm」
A 午前、午後表記(大文字)。「AM」「PM」
g 時間の12時間単位、0を付けない。「1」〜「12」
G 時間の24時間単位、0を付けない。「0」〜「23」
h 時間の12時間単位。「01」〜「12」
H 時間の24時間単位。「00」〜「23」
i 分。「00」 〜「59」
s 秒。「00」 〜「59」
になります。
「the_permalink()」
「<?php the_permalink(); ?>」で投稿のパーマリンクのURLを表示します。
aタグのhref属性の中に入れることで、投稿ページにリンクをはれます。
<?php
query_posts('posts_per_page=1');
if ( have_posts() ) : while ( have_posts() ) : the_post();
?>
<div>
<!-- パーマリンク -->
<a href="<?php the_permalink(); ?>">
<!-- アイキャッチ -->
<?php the_post_thumbnail(); ?>
<!-- 日付 -->
<small><?php the_time('Y年m月d日'); ?></small>
<!-- タイトル -->
<p><?php the_title(); ?></p>
<!-- 本文 -->
<p><?php the_content(); ?></p>
</a>
</div>
<?php endwhile;
wp_reset_postdata();
else :
?>
<p><?php _e( '記事が見つかりません。' ); ?></p>
<?php endif; ?>投稿の記事ページにリンクをはる場合、single.phpが必要になります。
the_category()
「<?php the_category(); ?>」でリンク付きのカテゴリー名を出力します。
「<?php the_category(); ?>」のカテゴリーはul liタグで出力されます。
<?php
query_posts('posts_per_page=1');
if ( have_posts() ) : while ( have_posts() ) : the_post();
?>
<div>
<!-- パーマリンク -->
<a href="<?php the_permalink(); ?>">
<!-- アイキャッチ -->
<?php the_post_thumbnail(); ?>
<!-- 日付 -->
<small><?php the_time('Y年m月d日'); ?></small>
<!-- タイトル -->
<p><?php the_title(); ?></p>
<!-- 本文 -->
<p><?php the_content(); ?></p>
</a>
<!-- カテゴリー -->
<?php the_category(); ?>
</div>
<?php endwhile;
wp_reset_postdata();
else :
?>
<p><?php _e( '記事が見つかりません。' ); ?></p>
<?php endif; ?>リンクなしのカテゴリー出力は
<?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?>になります。
また、カテゴリーは親カテゴリーと子カテゴリーを作ることができます。
その時に子カテゴリーのみを出力したいときは
<?php
$cats = get_the_category();
foreach($cats as $cat){
if($cat->parent){
echo $cat->cat_name;
}
}
?>のように書きます。
まとめ
いかがでしたでしょうか？
今回はブログ記事を表示についてご紹介しました！
ループ機能はWordPressでのサイト制作をするにあたって避けては通れない道です。
いろいろなWordPressのタグがありますが、ブログを表示させる時によく使うものばかりなので、慣れていけると思います。
何度も書くことによってWordPressのタグも覚えていけるので、皆さんバンバンコーディングしてWordPressでサイトを作っていきましょう(笑)
