Wordpress 投稿の一覧ページ作成（日付降順）

Question

前提・実現したいこと

######実装内容
Wordpress 投稿の一覧ページ作成
日付順に表示させるのですが、上部のみ少し違うレイアウトにしたいと考えております。
・上部に最新の記事表示
・下部（アーカイブ）最新記事以外の記事を日付順に並べる

想定しているデザイン▼

実装されている参考サイト▼
https://www.boel.co.jp/tips?category=design

######問題点
現在下部（アーカイブ）に投稿一覧を表示することはできましたが、
実装希望のデザインをする方法がわからず困っております。
何かアドバイス頂けたら幸いです。

上部の箇所をhtmlで指示しておりますが、
そこをphpに変換できたらと思います。

php

          <div class="journal-contents__column">
　　　　　　　//▼上部の指示
              <ul class="cmn-journal__list cmn-journal__list--pickup">
	      <?php
              $arg = array(
                     'posts_per_page' => 1,
                     'orderby' => 'date',
                     'order' => 'DESC',
               );
	      $post_id = $arg->ID;//★追記した箇所
              $posts = get_posts( $arg );
              if( $posts ): ?>
	　　　<?php
                  foreach ( $posts as $post ) :
                  setup_postdata( $post ); ?>
              <li class="cmn-journal__listitem" id="journal_a">
                <a href="<?php the_permalink(); ?>">
                  <div class="cmn-journal__listitem--img cmn-img__wrap"></div>
                  <div class="cmn-journal__listitem--txt">
                    <p class="cmn-label-01"><?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?></p>
                    <time><?php the_time( 'Y.m.d' ); ?></time>
                    <p class="cmn-txt-02"><?php the_title(); ?></p>
                  </div>
                </a>
              </li>
	　　　<?php endforeach; ?>
              <?php
                endif;
                wp_reset_postdata();
              ?>
            </ul>
　　　　　　//▼下部の指示
            <div class="cmn-journal__list cmn-journal__list--archive">
              <h2>Archive</h2>
              <ul class="cmn-journal__list">
              <?php
              $arg = array(
                     'posts_per_page' => 8,
                     'orderby' => 'date', 
                     'order' => 'DESC', 
		　　　'tag_slug__in'=> array( $post_id ),//★追記した箇所
               );
              $posts = get_posts( $arg );
              if( $posts ): ?>
               <ul class="cmn-journal__list">
              <?php
                  foreach ( $posts as $post ) :
                  setup_postdata( $post ); ?>
                <li class="cmn-journal__listitem" id="journal_a">
                  <a href="<?php the_permalink(); ?>">
                  	<div class="cmn-journal__listitem--img cmn-img__wrap">
                      <p class="cmn-label-01"><?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?></p>
                    </div>
                  	<div class="cmn-journal__listitem--txt">
                      <time><?php the_time( 'Y.m.d' ); ?></time>
                      <p class="cmn-txt-02"><?php the_title(); ?></p>
                    </div>
                  </a>
                </li>
                <?php endforeach; ?>
                    </ul>
                <?php
                  endif;
                  wp_reset_postdata();
                ?>
              </ul>
            </div>
          </div>

### 補足情報
使用しているPC：Windows 10

Comments

[CHERRY]

どのテンプレートを編集して、実現しようとしているのでしょうか？

アーカイブテンプレートですか？　固定ページテンプレートですか？

[OHIRA_web]

ご質問ありがとうございます。
こちらは既に既存のサイトがありまして、blogディレクトリーを作成しそこにワードプレスを入れいている状況です。（Wordpressの上層箇所：https:xxxxxxx/blog）その為、テンプレートはfront-page.phpを使用しております。

Answer 1

foreach()の1つ目を判定して上部用にするか、追加で上部用にget_posts()で1件だけ取得し、下のget_posts()にパラメータpost__not_inを追加して上部用のIDを渡して下部から上部用の記事を非表示にするか、かな。

Comments

[OHIRA_web]

ご回答ありがとうございます。
何度か試したのですが非表示にならなかった為私の知識不足で質問失礼致します。
上部用のIDは投稿記事が新しくなったら随時変更になるかと思うのですが、どのように上部用のidを取得し下部に非表示にするのか、大変恐縮ですが教えて頂けたら幸いです。

[退会済みユーザー]

上用、下用でget_posts()を別々に実行するとしたら
上用で1件だけget_posts()で最新の投稿を取得して、そのIDを変数に格納して下用のget_posts()のパラメータに渡す。

[OHIRA_web]

丁寧にご回答ありがとうございます。
度々質問をしてしまい申し訳ありません。
ご提案頂きました内容は理解したのですが、phpの知識が無知な為タグを追記しても表示されることができませんでした。修正したものを貼りつけましたので大変お手数ではありますが、修正指示頂けたら幸いです。

[退会済みユーザー]

やってることは大体合ってるが違う。

これ要らない
$post_id = $arg->ID;//★追記した箇所

$posts = get_posts( $arg );
最初のここで1件取得してるので
$posts[0]->IDでIDが取れる。
これを変数に格納してもしなくても良いがこれをを利用する。

tag_slug__inではなくpost__not_in

'tag_slug__in'=> array( $post_id ),//★追記した箇所
↓
'post__not_in' => [$posts[0]->ID]
こんな形に直す。

本件とは無関係だが$postsとか$postという変数はWordPress自体が使うのでユーザーが定義して使わん方が無難。
あと、変数名は分けた方が良いんじゃないの？
後から見たらこんがらがるぞ。

ホントはループの最初で分岐したやり方の方がスマートだけどな。

[OHIRA_web]

何度も丁寧且つ迅速に対応頂きありがとうございました。
無事に想定していた表示をすることができました。
大変助かりました。

また、指示のご指摘ありがとうございます。
これから勉強し記述方法も運用しやすいものへ変換していける知識をつけていきたいと思います。
この度は、本当にありがとうございます。