記事一覧に「New」アイコンをつけるメモです。
WEBサイト「MacBook Air とWordPressでこうなった」を参考にさせていただきました。。。。というか、そのまま使わせていただきました。
使い方
下記のコードを、functions.php に追加します。
[php highlight=”7″]
function add_new_icon( $val ) {
$days=7;
$today=date(‘U’);
$entry=get_the_time(‘U’);
$diff=date(‘U’,($today – $entry))/86400;
if( $days > $diff ) {
$icon_tag = ‘<img src="’.get_bloginfo(‘template_directory’).’/img/new_icon.png" alt="New" class="new_icon" width="35" height="14" />’;
}
return $val.$icon_tag;
}
add_filter(‘the_date’,’add_new_icon’);
add_filter(‘the_time’,’add_new_icon’);
[/php]
●Newアイコンの格納場所：テンプレートディレクトリーの中のimgディレクトリー
●Newアイコンの名前：new_icon.png（任意）
●Newアイコンにclass指定して調整：class=”new_icon”（任意）
タイトルの後に表示したい時は、add_filterの部分を下記コードに変更します。
[php]
add_filter(‘the_title’, ‘add_new_icon’);
[/php]
※私のサイトでは、何故かタイトルの前に表示してしまうので、使用しませんでした。
Newアイコンを付ける日数は下記の数値を変更
[php]
$days=7; //7日間表示する
[/php]
注意点
- このサイトでは、トップページの記事一覧にサムネイルを表示しているのですが、CSSで「li」タグ（下記コード内参照）に画像の大きさを指定していたので、Newアイコンの大きさがサムネイルと同じ大きさになってしまいました。
対処として、サムネイルを表示するコードを＜div class=”thum”＞で囲って画像の大きさを指定しました。また、Newアイコン自体にCLASS指定して位置を調整しました。 - the_date,the_timeの後にNEWアイコンを表示する場合、エントリーページやカテゴリーページの日付の後にも表示するので、CSSでレイアウトを調整する必要があるかもしれません。私はdisplay:noneで非表示にしました。
記事一覧にサムネイルを表示するコード
参照記事：サムネイル付き記事一覧（特定のカテゴリー）[wordpress]
[php highlight=”5″]
<ul>
<?php $posts = get_posts(‘numberposts=10&cat=-1’); global $post; ?>
<?php foreach($posts as $post): ?>
<li>
<div class="thum"><?php the_post_thumbnail(‘rel_tmn’, array(‘alt’=>get_the_title(), ‘title’=>get_the_title())); ?></div>
<p class="newblog-title"><a href="<?php the_permalink(); ?>" alt="<?php the_title(); ?>"><?php the_title(); ?></a></p><span class="exe"><?php the_excerpt(); ?></span><span class="date"><?php the_time(‘m月d日’); ?></span>
</li>
<?php endforeach; ?>
</ul>
[/php]
サムネイルとNewアイコンのCSS
[css]
ul li div.thum {
float:left;
width:80px;
height:80px;
vertical-align:top;
padding:0px 10px 0px 0px;
}
ul li img.new_icon {
vertical-align:middle;
}
[/css]
[css]
#content .entry-content img.new_icon {
display:none;
}
[/css]