「新着記事」のウィジェットを、更新日順にしたい。

#50669 にスクリプトがありますが、これはショートコードで日付順の新着を表示するものです。

使い方は、カラのテキストウィジェットに[nwlist]と書けば、スクリプトの最後の方に書いてある「html出力部分」以下のhtmlが出力されます。

このスクリプトのままでは更新日順にはできませんが、スクリプトの上の方にある

$args = array(
  'posts_per_page'   => $num,
  'orderby'          => 'date',
  'order'            => 'DESC',
  'post_type'        => 'post',
  'post_status'      => 'publish'
);

この部分のorderbyをdateからmodifiedに変更します。そのままでは、単純にhtmlが出力されるだけですからスタイルしないといけません。またhtmlに不要な部分があれば取り除く必要もあります。

リンクのトピックは、新着を任意の箇所に表示したいという内容でしたので、トップの記事一覧のスタイルにしてありますが、不要なhtml部分を取り除き、かつサイドバーに置くということでしたので、ショートコードを何かしらのブロックで囲み、

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

とすれば、

#sidebar .test 出力されたhtmlのセレクタ {
  //プロパティ
}

という感じにしてスタイルできます。

既存の新着ウィジェットの構造をデベロッパーツールなどで調べて、それになぞってhtmlとそのセレクタを入れて出力すればデフォルトで既にあるcssが適用されますし、新たに自分流にスタイルすることもできます。
トップの記事一覧に表示されるおおまかな項目が出力されるので既存の新着ウィジェットよりも表示できる項目は多く、それをどうするかはカスタマイズされる人のアイデア次第です。

新着のウィジェットを変更することも可能かとは思いますが、別途ウィジェットを作るということになり思いの外難しいと思うので、ショートコードを利用するほうが比較的簡単で、また別の何かしらにも応用が効くという点からオススメします。

ショートコードなので、記事中にも書くことができますし、ウィジェットエリアを作れば大体の所に入れることも可能です(表示スタイルはショートコードを囲むブロックのセレクタで新たにスタイルできます)。また内容を変更したショートコード取得用のスクリプトを書けばその内容に沿った出力をすることもでき、アイデア次第で色々なことができることが予想されます。

ウィジェットを継承してそのためだけの新しいウィジェットを作りというのはどちらかと言うとプラグインでやった方が良いです。そう考えると自力でするよりは、そういったプラグインを導入したほうが早いと言えばそうなんですけどね(笑)

Hidekichi さま、早速の回答ありがとうございます。
教えてもらいましたコードを使いまして、欲しい機能の表示ができるようになりました。
とても参考になる回答ありがとうございました。

質問の内容的には解決していますが、「新着記事」のウィジェットの見た目に近づけたいため、追加で質問をいたします。
お手数ですが、よろしくお願いします。

１．アイキャッチ画像がないときの、サムネイル画像（ＮＯ　ＩＭＡＧＥ）の表示方法は、どうすればいいでしょうか。
if構文を使用して行うのを思いつくのですが、もしかして既に関数として実装されているのかも思いますし、今回もサムネイルの大きさを７５＊７５にするのにも、トライ＆エラーで時間がかかりましたので、頼りきりの質問ですがお願いします。

//更新日順記事取得
function sc_newPost($opt) {
  extract(shortcode_atts(array(
    'num' => ''
  ), $opt));
  
  $num = (!empty($num)) ? $num : 5;
    
  $args = array(
    'posts_per_page'   => $num,
    'orderby'          => 'modified',
    'order'            => 'DESC',
    'post_type'        => 'post',
    'post_status'      => 'publish'
  );

  $posts_array = get_posts( $args );
	
  $out = "";
  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,
      'thumb75',
      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
<table style="height: 80px;" width="300" ><tbody><tr>
<td style="width: 80px;">
      <a href="{$link}" title="{$title}">
      {$thumb}
      </a>
</td>
<td style="width: 220px;" valign="top">
      <a href="{$link}" title="{$title}">
        {$title}
</a>
</tr></tbody></table>
EOM;
  }

  wp_reset_postdata();
  
  return $out;
}
add_shortcode('nwlist', 'sc_newPost');

教えてもらいましたコードを参考に、枠なしテーブルで見た目を調整しています。

http://sorogita-nosirabe.com/sorogita-/category/practice/

もし、サムネイルがあれば$thumbにimgタグが入るはずですから、それが無いというのは中身が空、つまりemptyなわけです。

if (empty($thumb)) {
  $thumb = get_template_directory_uri() . '/images/no-thumb.jpg'
}

を$categories = get_the_category($id);の前ぐらいに入れてみてはどうでしょうか？
試してないですが、上手く行くかと思います。

親テーマのimagesディレクトリには他にもいくつか画像無し用に画像が用意されています。
もし独自に画像を作るのであれば、子テーマのimagesにその画像を入れて、get_template_directory_uri()をget_stylesheet_directory_uri()に変更し、その画像のファイル名をno-thumb.jpgの代わりに入れます。

> サムネイルの大きさを７５＊７５にするのにも…

これはどんなサムネイルを作っているかは人それぞれで設定によって異なります。wordpressの設定や後々functions.phpにサポートするサムネイルのサイズを追加したりと色々考えられます。その為テーマがデフォルトで持っているサイズを指定しています。
100、150、320はSimplicityのデフォルトのサムネイルのサイズです。これらより小さくする場合はcssでやるのが良いです。

方法的には、imgをdisplay: blockにして、width: 100%; height: auto;としておき、imgタグが入る親要素にサイズを仕込みます(おそらく.thumb)。

こうしておくと、サイズを変更したくなったら(例えば75→90とか)親のサイズを変えるだけでimgは触らなくても良くなります。
スクリプトで150サイズのサムネイルが設定してある時、200pxが欲しいとなるとこれは問題です。特にjpgは拡大されると極端に画質が落ちますから(元々圧縮されているのでしょうがなしなんですけれども)、その場合は320のサムネイルを使用するべきです。縮小される分には大きく問題になることは少ないです。

おそらく、見た目をデフォルトと同じように見えるように考えられたと思いますが、tableはレスポンシブではないので、サイドバーが下に落ちた時、つまり画面幅が狭い端末で見た時にtableをレスポンシブにするほうがかえって難しい為、できるならulのリスト構造を使うほうが手っ取り早いです。

ulは必ずliがその子になりますので、liは常にulに囲まれているということになります。
liはulのサイズに伸び縮みすればよく、これらは今時のflexやgridでスタイルしても、あるいは前時代的にfloatでスタイルしたとしてもわかりよい構造になります。
※ floatでやる場合はclearfixが必要

<div class="parent">
  <div class="child"></div>
</div>

これと同じ関係がulとliでは既にあるわけです。

サンプル: ショートコードを利用して新着を任意の件数表示する。抜粋付き(サイドバーに入れた時、かつサムネイルとタイトルだけを利用する場合) | codepen
※ cssはscssで書いてあります。css欄の下向き三角からview compiledでcssに変換できます。
※ サイドバー用のcssは#main用の下に書いてあります。一番下までもっていくとサンプル上でメディアクエリを実現するための記述がありますがその上です。#sidebarから始まるものが全部必要という感じです。

[注意] このサンプルは、#50669(このトピック最初の返信時に書いたサンプルへのリンクと同じ)のスクリプトから、html出力部分にて、サムネイルとタイトル(h3とその親のa)だけ必要な記述をした場合に適用できるサンプルです。

<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>
    </div>
  </li>
  <hr>
</ul>

こんな感じのhtmlが出力された場合の想定です。

あぁやってしまった。

#51718の最初のコード内、

$thumb = ....,no-thumb.jpg';

と最後に必ず;を付けて下さい。これがないとエラーになります。functions.php内のものなので、画面が真っ白になるかも。

あれから、自分で頑張ってみましたが、基本の記述方法が悪いのか、ループの構造を理解していないのか、うまくif構文で実現できませんでした。

・ＮＯ　ＩＭＡＧＥ（ＮＯ　サムネイル）の画像は、画面上から名前を付けてコピー、メディアにアップして、アドレスをゲット。
・ＥＯＭ－ＥＯＭ；のループの中で、ＩＦ（＄ＴＨＵＭＢ＝’’）｛＄ＴＨＵＭＢ＝’画像のアドレス　７５＊７５指定’　｝

として見ましたが、ＰＨＰコードを無視しているような表示（＄ＴＨＵＭＢの画像がいっぱい出る）。
もとの＄ＴＨＵＭＢにサムネイルの情報を入れているコードの下に、同じようなＩＦ構文を入れると、なにも画像が表示されないとなり、どうにもお手上げ状態です。

お手が空いた時にでもご教授いただけると幸いです。

あっ、返信ありがとうございます。
こちらが戸惑っている間に、返信をしたら回答が来ていました。
ありがとうございます。
早速、頂いた回答で試してみます。

Hidekichiさん、詳細な回答ありがとうございます。
ご提示いただいた、空だった場合のＩＦ構文が、アドレスだけの代入でしたので、

    if (empty($thumb)) {
  $thumb = '<img width="75" height="75" src="'.get_template_directory_uri() . '/images/no-thumb.jpg'.'" class="list-thumb wp-post-image" alt="新しいテスト投稿" />';
}

と変更してみました。

おかげさまで、無事目的は達成しました。

テーブルを用いた場合、レスポンシブ的にあまりよろしくないのですね。
今回は画像が小さいので、テーブルの横幅を１００％にして調整して、うまい事にパソコンとアイホンで表示されていますが、ulとliでデザインするのも今後勉強してみます。
今までにulとliは、float以上に使ってこなかったので、最初に教えてもらいましたphpコードから抜いてしまいました。今後のためにもコツコツ勉強してみます。

今回は、親切な回答ありがとうございました。
まだまだ、ホームページの移行途中ですので、また何かわからないことがありましたら、ご教授をお願いします。

> 空だった場合のＩＦ構文が、アドレスだけの代入でしたので

すみません、完全に忘れてました。その前にはimgの事書いてたのに(笑)

> テーブルを用いた場合、レスポンシブ的にあまりよろしくない

良くないわけではないですが、応用が効きにくいという点と、効かせるためにはcssが難しいと言う感じです。

<table>
 <tr>
  <td></td>
 </tr>
</table>

と、構造がulやdivに比べるとtr分複雑です。仮に、タブレットなどでサイドバーが下に落ちた時、リストをカード型にして(上にサムネイル、下にタイトルと)表示したいと考えた時にどのようにして作るかを予め考えないといけません。できないわけではないかと思いますがhtmlの構造を変化させるか、その他諸々の手を加えないといけませんよね。
それらを考慮せず、現在の横並びのまま幅が広がるとする場合は、tableでも良いです。

ただし、tableは表のために用いるべきで、レイアウトに使う場合は注意が必要です。htmlタグには役割があって、その役割以外の使い方というのは一般的には好きにすれば良いですが、厳密には間違いです。
変にfloatなどを使ってレイアウトが崩れてしまうのを嫌ってtableでかっちりと組むというのは間違いではありません。

幅が広く使える場合は良いですが、幅が使えない場合を上手く考えて下さい。

>幅が広く使える場合は良いですが、幅が使えない場合を上手く考えて下さい。

次回、固定記事等に同じような記事一覧（縦に配列）や、何かしらのレイアウトを考えるときに、色々と勉強してみます。

あと初歩的な質問ですが、この質問自体を「解決済み」にチェックするのは、管理人さんがするのでしょうか？
そのようなチェック項目が表示されないので、放置していいものなのでしょうか。

解決済みはわいひらさんがされますので放置しておいて大丈夫です。