ぶろぐに関連記事を表示させたい。
この場合、single.phpを編集する必要があります。
そこで、chatGPTさんに、聞いてみた。
まずは、関連記事を載せたいのでソースを書いてもらうことに
WordPressで、ブログ本文の下に「関連記事」を載せたい。
質問内容
Wordpressで、ブログ本文の下に「関連記事」を載せたい。single.phpに記載するソースを書いて。
なお、関連記事にはアイキャッチ画像とリンクを入れてほしい。
chatGPTさんの答え
こんにちは。Bingです。WordPressでブログ本文の下に「関連記事」を載せるには、single.phpに以下のソースコードを追加することができます。
<?php
$categories = get_the_category();
$category_ID = array();
foreach($categories as $category):
array_push($category_ID, $category->cat_ID);
endforeach;
$args = array(
'post__not_in' => array($post->ID),
'posts_per_page'=> 3,
'category__in' => $category_ID,
'orderby' => 'rand',
'post_type' => 'post',
'post_status' => 'publish'
);
$my_query = new WP_Query( $args );
if( $my_query->have_posts() ):
?>
<div class="related-articles">
<h3>関連記事</h3>
<ul>
<?php while( $my_query->have_posts() ) : $my_query->the_post(); ?>
<li>
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail('thumbnail'); ?>
<?php the_title(); ?>
</a>
</li>
<?php endwhile; ?>
</ul>
</div>
<?php endif; wp_reset_query(); ?>おお！すらすらと書いてくれました。
しかし、もし失敗すると、最悪ブログが真っ白になって見れなくなる恐れも
さらに、chatGPTさんに聞いてみたところ・・・
WordPress single.php の動作をブラウザでテストする方法
質問内容
WordPress single.php 関連記事 アイキャッチ画像 リンク 動作確認 サイト
chatGPTさんの答え
WordPressの動作確認用のサイトとして、WP Sandboxがあります。WP Sandboxは、WordPressのテスト環境を提供するサービスで、無料で利用できます。また、WP Sandboxは、WordPressのプラグインやテーマをインストールすることもできます。このサイトを利用することで、WordPressの動作確認を行うことができます。なお、WP Sandboxは、一定時間経過すると自動的に削除されるため、データの永続性はありません。
さらに調べてみました。
関連記事のアイキャッチ画像を小さくする方法
質問内容
関連記事のアイキャッチ画像を小さくする方法
chatGPTさんの答え
関連記事のアイキャッチ画像のサイズを変更するには、single.phpに追加したコードを編集する必要があります。以下のコードを追加することで、アイキャッチ画像のサイズを変更することができます。
.related-articles img {
max-width: 100%;
height: auto;
}早速試してみよう
