Simplicityの特徴 › フォーラム › 要望・機能追加など › 新着記事に日付を表示したい
- このトピックには4件の返信、1人の参加者があり、最後に
koiitirou2により7年、 12ヶ月前に更新されました。
-
投稿者投稿
-
-
2017年2月23日 11:46 PM #50539
koiitirou2
ゲストこんにちわ。
いつも楽しく使わせて頂いております。
新着記事のウィジェットに、日付を表示したいと考えております。是非検討して頂けたらうれしいです。
-
2017年2月24日 5:13 AM #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; }
等で非表示にできます。
-
2017年2月24日 3:16 PM #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');
-
2017年2月24日 4:05 PM #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は意味合い的に補足情報です。補足情報の補足情報という構造は良くないかも知れません。そのあたりを気にしなければ好きに指定しても良い部分ですけどね。 -
2017年2月24日 4:47 PM #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;}
-
-
投稿者投稿
- トピック「新着記事に日付を表示したい」には新しい返信をつけることはできません。