固定ページの途中に新着記事を表示したい

> 画像が小さかったりと意図しているものではありません。

まず意図としているものがどういうものであるかを書いて下さい。

フロントページを任意の固定ページとしてその間に新着を入れたいということですよね？
それはわかりますが、何が必要でどのようにスタするしたいかそこが重要です。
何が必要とはサムネイル、記事タイトルはもちろん、それ以外に何が必要かという事です。それにそってどうするべきか考える必要があります。

あるいは、現在の新着で画像以外にどういう部分が意図と違うかでも良いです。

> 「固定ページ」の投稿ページに設定した際に
> 表現されるような新着記事一覧と同じものを

ここがちょっとわからなかったもので。

☓ スタするしたい
○ スタイルしたい

返信ありがとうございます。

>まず意図としているものがどういうものであるかを書いて下さい。
→「新着記事一覧」のリンク先と全く同じように表現したいと思っています。
　「任意の固定ページ1」の間に「新着記事一覧」の固定ページが挿入されているようなイメージです。

よろしくお願いいたします。

新着記事に日付を表示したいのトピックでサイドバーに新着を表示するというのを書きましたが、それをちょっと改造してみました。

子テーマfunctions.phpにわかるように追加して、何か問題が出た際はftp等で追加した部分をコメントアウト、あるいは削除すれば良いように準備をしておいて下さい(元の子テーマfunctions.phpをバックアップしておき、下記を追加したものをアップロード。問題があれば、バックアップしておいたものをアップロードして修正という感じで)。

function sc_newPost($opt) {
  extract(shortcode_atts(array(
    'num' => ''
  ), $opt));
  
  $num = (!empty($num)) ? $num : 5;
    
  $args = array(
    'posts_per_page'   => $num,
    'orderby'          => 'date',
    'order'            => 'DESC',
    'post_type'        => 'post',
    'post_status'      => 'publish'
  );

  $posts_array = get_posts( $args );
	
  $out = "";
  $out .= "<ul>";
  foreach($posts_array as $post) {
    setup_postdata( $post );
    $id = $post->ID;
    $title = $post->post_title;
    $post_date = get_the_time( get_theme_text_date_format(), $id);
    $post_modified = $post->post_modified;
    $link = get_the_permalink($id);
    $thumb = get_the_post_thumbnail(
      $id,
      'thumb150',
      array(
        'class' => 'list-thumb',
        'alt' => $title
      )
    );
    $categories = get_the_category($id);
    if ($categories) {
      foreach($categories as $cat) {
        $cats[] = "<a href='".get_category_link($cat->term_id)."' title='".$cat->name."'>"
                . $cat->cat_name . "</a>";
      }
     }
    if (!empty($cats)) {
      $category = "<span class='fa fa-folder fa-fw'></span>".implode(" | ", $cats);
    } else {
      $category = "! Category is not set !";
    }
    unset($cats);
		
    $excerpt = get_the_custom_excerpt( $post->post_content, get_excerpt_length() );
		
    //html出力
    $out .= <<< EOM
<li>
  <div class="thumb">
    <a href="{$link}" title="{$title}">
      {$thumb}
    </a>
  </div>
  <div class="content">
    <h3>
      <a href="{$link}" title="{$title}">
        {$title}
      </a>
    </h3>
    <p>
      <span class="post-date">
        <span class="fa fa-clock-o fa-fw"></span>
        <span class="published">{$post_date}</span>
      </span>
      <span class="category">{$category}</span>
    </p>
    <div class="excerpt">{$excerpt}</div>
    <div class="read">
      <a href="{$link}" title="{$title}">記事を読む</a>
    </div>
  </div>
</li>
<hr>
EOM;
  }

  wp_reset_postdata();
	
  $out .= "</ul>";
	
  return $out;
}
add_shortcode('nwlist', 'sc_newPost');

必要があれば「html出力部分」や、それ以前に書いてある変数部分を変更してください。

サンプル: ショートコードを利用して新着を任意の件数表示する。抜粋付き | codepen
※ cssはscssで書いてます。css欄のview compiledよりcssに変換できます。

表示自体はデフォルトのリストに似せてありますが、中身の書き方は違います。htmlの構造に従ってcssを修正・追加等して下さい。
2列でも3列表示でも可能です。

記事の中には、

<div class="insertList">
[nwlist]
</div>

あるいは、

<div class="insertList">
<h3>何かしらのタイトル</h3>
[nwlist]
</div>

このようにして、

.insertList h3 {
  //何かしらのスタイル
}

という感じでスタイルして下さい。

<div class="insertList">
  <ul>
    <li>
      <div class="thumb">
        <a href="#">
          <img src="#" class="list-thumb wp-post-image" alt="#" width="148" height="150">
        </a>
      </div>
      <div class="content">
        <h3>
          <a href="#" title="#">何かしらのタイトル</a>
        </h3>
        <p>
          <span class="post-date">
            <span class="fa fa-clock-o fa-fw"></span>
            <span class="published">更新日</span>
          </span>
          <span class="category">
            <span class="fa fa-folder fa-fw"></span>
            <a href="#" title="未分類">未分類</a>
          </span>
        </p>
        <div class="excerpt">抜粋部分</div>
        <div class="read">
          <a href="#" title="#">記事を読む</a>
        </div>
      </div>
    </li>
    <hr>
  </ul>
</div>

1つのリストアイテムに付きこんなhtmlが出力されます。

ちなみに、

<div class="insertList">
[nwlist num=10]
</div>

とすれば10件表示されます。

カテゴリのセパレーターは、
$category = "<span class='fa fa-folder fa-fw'></span>".implode(" | ", $cats);
でやってます。
implode(" | ", $cats);　を
implode(“, “, $cats); とすれば，で区切られます。

implode(", ", $cats);

code入れるの忘れてました。

返信ありがとうございました。
いただいたコードでは一部正常に表示されなかったので、なんとか調整しようとしたのですが、できなかったため再度質問させていただきます。

いただいたコードをそのままコピペすると表示は以下のとおりとなります。

http://for-money.com/test-2/

どの当たりを修正すればよろしいのでしょうか。
基本的なことかもしれませんが、よろしくお願いいたします。

サンプルのscssをcssに変換して、子テーマstyle.cssに追記して下さい。

表示(html)は中身をちゃんと見てませんが、classは出力されていたので、たぶんスクリプトのhtmlを触っていないならcssを適用するだけです。

必要な項目は出力されているようなので、サンプルの通りに表示されるだろうと思います。
後はcssでのスタイルの話なので、htmlの構造をデベロッパーツールで確認しながら好きにいじって下さい。

cssについて理解できていませんでした。
cssを追加したところうまく表示されました。

いじり方もわかったので、いろいろ挑戦してみたいと思います。

ありがとうございました。