WordPress テーマ作成（カスタマイズ（index.php）HTML投稿１記事を１０件ループさせたい）

Question

WordPressのテーマ作成の中で、現在index.phpの投稿記事をループさせたいのですが上手くいきません。
実現したいのは、とりあえず下記のコードで投稿１記事で10件ループさせたいと思っています。

<?php while ( have_posts() ) : the_post(); // 投稿記事分繰り返し処理と読み込み ?>
<p>ここに投稿記事</p>
<?php endwhile; // 繰り返し処理終了 ?>
<?php else : // 記事がなかった場合 ?>
<p>記事がありませんでした</p>
<?php endif; // 記事があるかどうかの判定終了 ?>

HTMLの雛形の投稿記事　の<div id="topnews"> ループで挟む記述にしています。↓

            <div id="contents" class="clearfix">
                <h2 class="title-archive">月: <span>2021年5月</span></h2>
                <!-- メイン開始 -->
                <div id="main">
					<!-- ループ ここから-->

                    <div class="archive-container">                  
                        <!-- 投稿記事1つ分 ここから-->
<!-- ループ ここから-->
							<?php if ( have_posts() ) : //記事があるかどうかを判定 ?>
<?php while ( have_posts() ) : the_post(); // 投稿記事分繰り返し処理と読み込み ?>
                        <div id="topnews">    
                            <dl class="clearfix" data-href="">							
                                <dt>
                                    <div class="category_info">
                                        <p>テスト</p>
                                    </div>
                                    <div class="trim">
                                        <a href="" class="ripple">
                                            <div class="smanone">
                                                <img width="390" height="220" src="<?php echo get_template_directory_uri(); ?>/images/noimage.jpg" alt="">
                                            </div>
                                        </a>
                                    </div>
                                </dt>
                                <dd>
                                    <div class="blog_info">
                                        <p><i class="fa fa-calendar" aria-hidden="true"></i>&nbsp;
                                            2021/05/03&nbsp;
                                        </p>
                                    </div>
                                    <h3><a href="" class="ripple">
                                            テストテストテストテスト期限が迫ってる </a></h3>
                                </dd>							
                            </dl>
                        </div>
						
<?php endwhile; // 繰り返し処理終了 ?>
<?php else : // 記事がなかった場合 ?>
<p>記事がありませんでした</p>
<?php endif; // 記事があるかどうかの判定終了 ?>
<!-- ループ ここまで-->
                        <!-- ページネーション ここから-->
                        <div class="pagination"><span class="current">1</span><a href="" class="inactive">2</a></div>

                        <!-- ページネーション ここまで-->
                    </div><!-- メイン終了 -->


コード

WordPressのテーマ作成が、初めてで手探り状態です。
ご教示よろしくお願いします。

Answer 1

PHPではスラッシュ2つ以降はコメントになります。
全体的にコメントは次のようにしてください。

<?php while ( have_posts() ) : the_post(); // 投稿記事分繰り返し処理と読み込み ?>
↓
<?php while ( have_posts() ) : the_post(); /* 投稿記事分繰り返し処理と読み込み */ ?>

あと、index.php以外に優先されるテンプレート無いですか？
例えばarchive.phpやhome.phpなど。

Comments

[nori7777]

アドバイスありがとうございます。
以下のように訂正しましたが、変わらないです。

<?php if ( have_posts() ) : /*記事があるかどうかを判定 */?>
<?php while ( have_posts() ) : the_post(); /* 投稿記事分繰り返し処理と読み込み */?>
<div id="topnews">
<dl class="clearfix" data-href="">
<dt>
<div class="category_info">
<p>テスト</p>
</div>
<div class="trim">
<a href="" class="ripple">
<div class="smanone">
<img width="390" height="220" src="<?php echo get_template_directory_uri(); ?>/images/noimage.jpg" alt="">
</div>
</a>
</div>
</dt>
<dd>
<div class="blog_info">
<p><i class="fa fa-calendar" aria-hidden="true"></i>&nbsp;
2021/05/03&nbsp;
</p>
</div>
<h3><a href="" class="ripple">
テストテストテストテスト期限が迫ってる </a></h3>
</dd>
</dl>
</div>
<?php endwhile; /* 繰り返し処理終了 */?>
<?php else : /* 記事がなかった場合*/ ?>
<p>記事がありませんでした</p>
<?php endif; /* 記事があるかどうかの判定終了*/?>

優先されるテンプレートですが、知識が浅くて適切かわかりませんが、元がarchive.phpのフィイルを使い回して、index.phpとして記述を加えています。最終的にfront.page.phpをトップページにしようと思っています。↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

　　　　　　　　　　　　　　　　　　front.page.php
　　　　　　　　　　　　　　　　（WEBサイトトップページ）

page.php（固定ページ）page.php（固定ページ）page.php（固定ページ） index.php（ブログトップ）
案内　　　　　　　　　　　メニュー　　　　　　　Q&A　　　　　　　 webサイト化でhome.pho変更
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　↓
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　アーカイブ
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　（archive.php）
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　カテゴリ・タグ一覧
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　↓
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　投稿ページ
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　（single.php）

[tabuu]

>元がarchive.phpのフィイルを使い回して、index.phpとして記述を加えています。

index.phpは優先するテンプレートが無い場合に利用されます。
archive.phpが残っているのであれば、index.phpは使われていないと思います。

例えば以下のプラグインを使えばどのテンプレートが利用されているか確認できます。
https://ja.wordpress.org/plugins/query-monitor/

[nori7777]

言葉が足りていませんでした。
リネームしてindex.phpにしてるので、ローカルのWordPress内のファイルには現在、言われてるとおりarchive.phpは使われていません。ですのでindex.phpと表示されています。

[tabuu]

そもそも上手くいかないとはどのような状況でしょうか？

Answer 2

10件まで表示させたいという条件をループに記載すればいいので、
ここのコードを

<?php while ( have_posts() ) : the_post(); // 投稿記事分繰り返し処理と読み込み ?>

下記のように修正してみてください。

<?php
  $args  = array(
    'post_type' => 'post',
    'paged' => $paged,
    'posts_per_page' => 10
  );
  $wp_query = new WP_Query( $args );
  if ( $wp_query->have_posts() ) :
  while ( $wp_query->have_posts() ) : $wp_query->the_post();
?>

Comments

[nori7777]

アドバイスありがとうございます！
記述しましたが、変わらないですね。
HTMLをループで、挟むのはアプローチとしては、間違ってないんですね。

[jun26]

そうですね！
ループしたい箇所に挿入する形になります。
変わらない時はwordpressの記事が10件以上ない場合や、wordpressの設定で1ページに表示する最大投稿数なども確認してみるといいかもしれません！

[nori7777]

ありがとうございます。
設定ページは、初めから１０ページで設定してますし最新投稿にしています。
はじめは、投稿の部分はHTMLの記述のみでWordPressの管理画面からの投稿は０だったんですが、２記事投稿にすると、HTMLの記述文と投稿記事２つの３記事分しか表示されていないので、他に原因があるということですね。。