single.phpのソースを編集後の動作確認方法 テスト環境などを調べてみました

ぶろぐに関連記事を表示させたい。
この場合、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;
}

早速試してみよう