新着記事に日付を表示したい

Simplicityの特徴 フォーラム 要望・機能追加など 新着記事に日付を表示したい

  • このトピックには4件の返信、1人の参加者があり、最後にkoiitirou2により7年、 12ヶ月前に更新されました。
4件の返信スレッドを表示中
  • 投稿者
    投稿
    • #50539
      koiitirou2
      ゲスト

      こんにちわ。
      いつも楽しく使わせて頂いております。
      新着記事のウィジェットに、日付を表示したいと考えております。

      是非検討して頂けたらうれしいです。

    • #50541
      Hidekichi
      ゲスト
      function getNewPost($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 class='newList'>";
      	
      	foreach ($posts_array as $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
      					)
      				);
      		$category = get_the_category($id);
      		
      		foreach ($category as $cat) {
      			$cat_id = $cat->cat_ID;
      			$cat_name = $cat->name;
      			$cat_link = get_category_link($cat_id);
      			$cats[] = "<a href='".$cat_link."' rel='category tag'>".$cat_name."</a>";
      		}
      		$categorys = implode(", ",$cats);
      		unset($cats);
      $out .= <<< EOD
      
      <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>
      		</p>
      	</div>
      </li>
      <hr>
      
      EOD;
      	}
      	$out .= "</ul>"; //#list
      	
      	return $out;
      }
      add_shortcode('nplist', 'getNewPost');

      書き方は色々ありますが、上記を子テーマfunctions.phpに追記して、ダッシュボード→ウィジェットより、テキストウィジェトに、

      [nplist]

      と書いて下さい。上記の場合5件表示です。

      [nplist num=8]

      とすると8件表示になります。

      サンプル: スタイル例 | codepen
      ※ cssはscssで書いてあります。css欄のview compiledよりcssに変換できます。
      ※ サイドバー用にスタイルしてありますが、#sidebarを取れば他のウィジェットエリアでも使えます(要個別スタイル設定)

      スタイルは他の新着やらの表示と似せてありますがflexで書いてあります。IEとか古めのブラウザでは動作しない場合があります。その場合はfloatなどを利用してスタイルし直して下さい。

      <ul>
        <li>
          <div class="thumb">
            <a><img></a>
          </div>
          <div class="content">
            <h3>
              <a>タイトル</a>
            </h3>
            <p>
              <span class="post-date">
                <span class="fa"></span>
                <span class="publish">日付</span>
              </span>
            </p>
          </div>
        </li>
      <ul>
      <hr>

      こんな感じのhtmlが出力されます。本文の抜粋を拾う場合は別の処理が必要になりますが、とてもめんどくさいと思うのでひとまずこんな感じで。

      個別ページ等で表示したくない場合は、

      .page #sidebar .newList {
        display: none;
      }

      等で非表示にできます。

    • #50556
      koiitirou
      ゲスト

      ありがとうございます!!
      Simplicity風のウィジェットにしたかったので、下記のように実装してみました。
      大変たすかりました。

      function getNewPost($opt) {
      	
      	extract(shortcode_atts(array(
              'num' => ''
          ), $opt));
          
          $num = (!empty($num)) ? $num : 10;
          
          $args = array(
      		'posts_per_page'   => $num,
      		'orderby'          => 'date',
      		'order'            => 'DESC',
      		'post_type'        => 'post',
      		'post_status'      => 'publish'
      	);
      	$posts_array = get_posts( $args );
      	
      	$out = "";
      	$out .= "<aside id='popular_ranking-3' class='widget widget_popular_ranking'>  
      <h3 class='widget_title sidebar_widget_title'>新着投稿</h3><ul class='wpp-list'>";
      	
      	foreach ($posts_array as $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' => 'wpp-thumbnail wpp_cached_thumb wpp_featured',
      						'alt' => $title,
                                               'style'=>'width:75px;height:75px;'
      					)
      				);
      		$category = get_the_category($id);
      		
      		foreach ($category as $cat) {
      			$cat_id = $cat->cat_ID;
      			$cat_name = $cat->name;
      			$cat_link = get_category_link($cat_id);
      			$cats[] = "<a href='".$cat_link."' rel='category tag'>".$cat_name."</a>";
      		}
      		$categorys = implode(", ",$cats);
      		unset($cats);
      $out .= <<< EOD
      
      <li>
      <a href="{$link}" title="{$title}" target="_self">
      {$thumb}</a> 
      <a href="{$link}" title="{$title}" class="wpp-post-title" target="_self">{$title}
      </a> 
            <span class="post-date">
              <span class="fa fa-clock-o fa-fw"></span>
              <span class="published">{$post_date}</span>
            </span>
      </li>
      
      EOD;
      	}
      	$out .= "</ul>"; //#list
      	
      	return $out;
      }
      add_shortcode('nplist', 'getNewPost');
    • #50557
      Hidekichi
      ゲスト

      ちなみに、タイトルはtextウィジェットのタイトルを入れれば反映されますので、別途入れる必要はありません。が、textウィジェットに付くclassを変更できるかは僕は知らないので、textウィジェットを利用する場合は、

      <aside id="text-xx" class="widget text_widget">
        <h3 class="widget_title sidebar_widget_title"textウィジェットで設定したタイトル</h3>
        /*ショートコードの中身*/
      </aside>

      こんな感じになるかと思います。returnで設定したhtmlタグを中身の部分に返すので、上記の中身の中に入ることになります。そうするとasideの中にasideが入ることかと思うので、入れるとしたら、h3から入れてtextウィジェットのタイトルを設定しないというのが良いのではなかろうかと。

      既に親テーマにあるcssを流用するのは手ですが、中身部分の中にdivから始まるブロックを入れて、そこに新たなクラスを付け、既にあるcssのプロパティをそれ用に流用するのが良いのではなかろうかと思います。

      サイドバーでしか使わないならこの全てではないです。ただasideは一応確認しておいて下さい。
      asideは意味合い的に補足情報です。補足情報の補足情報という構造は良くないかも知れません。そのあたりを気にしなければ好きに指定しても良い部分ですけどね。

    • #50560
      koiitirou2
      ゲスト

      丁寧に対応頂きまして、ありがとうございます。
      最終的に以下のように致しました。

      テキストウィジェット内

      <div id='popular_ranking-3' class='widget widget_popular_ranking'>  
      <h3 class='widget_title sidebar_widget_title'>新着投稿</h3>[nplist]
      </div>

      function.php内

      //
      function getNewPost($opt) {
      	
      	extract(shortcode_atts(array(
              'num' => ''
          ), $opt));
          
          $num = (!empty($num)) ? $num : 10;
          
          $args = array(
      		'posts_per_page'   => $num,
      		'orderby'          => 'date',
      		'order'            => 'DESC',
      		'post_type'        => 'post',
      		'post_status'      => 'publish'
      	);
      	$posts_array = get_posts( $args );
      	
      	$out = "";
      	$out .= "<ul class='wpp-list'>";
      	
      	foreach ($posts_array as $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' => 'wpp-thumbnail wpp_cached_thumb wpp_featured',
      						'alt' => $title,
                                               'style'=>'width:75px;height:75px;'
      					)
      				);
      		$category = get_the_category($id);
      		
      		foreach ($category as $cat) {
      			$cat_id = $cat->cat_ID;
      			$cat_name = $cat->name;
      			$cat_link = get_category_link($cat_id);
      			$cats[] = "<a href='".$cat_link."' rel='category tag'>".$cat_name."</a>";
      		}
      		$categorys = implode(", ",$cats);
      		unset($cats);
      $out .= <<< EOD
      
      <li>
      <a href="{$link}" title="{$title}" target="_self">
      {$thumb}</a> 
      <a href="{$link}" title="{$title}" class="wpp-post-title" target="_self">{$title}
      </a> 
            <span class="post-date">
              <span class="fa fa-clock-o fa-fw"></span>
              <span class="published">{$post_date}</span>
            </span>
      </li>
      
      EOD;
      	}
      	$out .= "</ul>"; //#list
      	
      	return $out;
      }
      add_shortcode('nplist', 'getNewPost');
      //

      追加CSS
      #sidebar span.post-date{white-space:nowrap;}

4件の返信スレッドを表示中
  • トピック「新着記事に日付を表示したい」には新しい返信をつけることはできません。
スポンサーリンク
アドセンス(大)
アドセンス(大)