久しぶりに「Twentyseventeen」を見直して見ようかと思ったけど、気に入ったプラグインの利用で変更する箇所が無いので、アイキャッチ画像で新着情報をフロントページに乗せることを試みた。表示する新着の投稿記事には、一定の期間「NEW!」マークを付けた。
1] functions.phpに記述
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
function getCatItems($atts, $content = null) { extract(shortcode_atts(array( "num" => '2', "cat" => '12' ), $atts)); // 処理中のpost変数をoldpost変数に退避 global $post; $oldpost = $post; // カテゴリーの記事データ取得 $myposts = get_posts('numberposts='.$num.'&order=DESC&orderby=post_date&category='.$cat); $newDispDays = 7 * 24 * 60 * 60; // 「New」を表示する日数（公開日から7日間） $today = date_i18n('U'); // 本日の日付の秒数 if($myposts) { // 記事がある場合↓ $retHtml = '<div class="getPostDispArea">'; // 取得した記事の個数分繰り返す foreach($myposts as $post) : // 投稿ごとの区切りのdiv $retHtml .= '<div class="getPost">'; // 記事オブジェクトの整形 setup_postdata($post); // サムネイルの有無チェック if ( has_post_thumbnail() ) { // サムネイルがある場合↓ $retHtml .= '<div class="getPostImgArea">' . get_the_post_thumbnail($page->ID, 'thumbnail') . '</div>'; } else { // サムネイルがない場合↓※何も表示しない $retHtml .= ''; } // 文章のみのエリアをdivで囲う $retHtml .= '<div class="getPostStringArea">'; // 投稿年月日を取得 $year = get_the_time('Y'); // 年 $month = get_the_time('n'); // 月 $day = get_the_time('j'); // 日 $retHtml .= '<span><font color=#ff0000;">投稿日</font>：[' . $year . '年' . $month . '月' . $day . '日] </span>'; // 投稿日の秒数を取得 $entryDay = get_the_time('U'); // 経過日数を取得 $elapsedDays = $today - $entryDay; // タイトル設定(リンクも設定する) $retHtml.= '<h4 class="title">'; // 7日経過していない？ if( $newDispDays > $elapsedDays ){ $retHtml.= '<span style="color:red">NEW! </span>'; } // タイトル設定(リンクも設定する) $retHtml.= '<span class="getPostTitle">'; $retHtml.= '<a href="' . get_permalink() . '">' . the_title("","",false) . '</a>'; $retHtml.= '</span></h4>'; // 本文を抜粋して取得 $getString = get_the_excerpt(); $retHtml.= '<div class="getPostContent"><font color="#339966">' . $getString . '</font></div>'; $retHtml.= '</div></div>'; endforeach; $retHtml.= '</div>'; } else { // 記事がない場合↓ $retHtml='<p>記事がありません。</p>'; } // oldpost変数をpost変数に戻す $post = $oldpost; return $retHtml; } // 呼び出しの指定 add_shortcode("getCategoryArticle", "getCatItems"); ------------- ＊Shortcode: 投稿・固定ページへ [getCategoryArticle] [getCategoryArticle num="1" cat="5"] |
2] 続きを読む（more）の文字数の調整をfunctions.phpに記述
|
1 2 3 4 5 |
//概要（抜粋）の文字数調整 function my_excerpt_length($length) { return 100; } add_filter('excerpt_mblength', 'new_excerpt_mblength'); |
3] style.cssに記述
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
.getPostDispArea .getPost { border: none; padding: 0.3em; margin: 0.5em 0px; background-color: #fff; font-size: 1.0em; } .getPostDispArea .getPost:after { content: ''; display: block; clear: both; } .getPostImgArea { width: 23%; float: left; } .getPostStringArea { width: 77%; padding-left: 15px; float: left; } h4.getPostTitle { font-weight: bold; } .site-content { padding: 2em 0 0;/*画面幅48em未満*/ } @media screen and (min-width: 48em) { .site-content { padding: 2em 0 0;/*画面幅48em以上*/ } } .single-featured-image-header { background-color: #fff;/*周りの色*/ border-bottom: 0px solid #eee;/*画像下の線*/ padding: 0 0 2em;/*画像下余白*/ } |
サイトを巡って見つけたINCLOOP の「WordPressの固定ページにショートコードで特定のカテゴリーの投稿記事（サムネイル、タイトル、投稿日、記事概要のみ抜粋）の一覧を表示する方法」を参考にした。