目標10,000記事!

目標10,000記事!

logwはInternet Explorerには対応しておりません。

logwはInternet Explorerには対応しておりません。

このスライドは、ブログとは何の関連もありません。

このスライドは、ブログとは何の関連もありません。

WordPressでNewマークを表示させる方法

WordPRessで記事を投稿したさいに●日間だけ「New」マークをつけてみたいと思います。

ソースはまるパクリ

WordPressでNew!を表示するパターン別4つの方法記事を公開してからn日間はNew!を表示させたい場合を丸パクリします。

<?php
$days = 7; //Newを表示させたい期間の日数
$today = date_i18n('U');
$entry = get_the_time('U');
$kiji = date('U',($today - $entry)) / 86400 ;
if( $days > $kiji ){
echo 'New!';
}
?>

この状態だと7日間NEWマークがでます。

表示させたい箇所を確認する

今回表示させたい箇所は投稿日+記事タイトルの投稿日の前とします。

<li>2015年2月5日&nbsp;<a href="#">あああああああ</a></li>


このように投稿日+記事タイトルがあり、投稿日の前にNEW!と表示したいとします。

<li>NEW! 2015年2月5日&nbsp;<a href="#">あああああああ</a></li>


理想はこんな感じをイメージ。こうすると1行でliタグに自動ではいるので楽。

見た目は1行でNEW 2015年2月5日 あああああとなります。

WordPRessのコードを確認する

今回はサイトラボのトップページのお知らせ部分に表示したいと思います。まずはソース確認してみます。

<h2>サイトラボからのお知らせ</h2>
<div class="detail"><!-- detail_start -->
<ul>
<?php
   $newslist = get_posts( array(
    'category_name' => 'information', //特定のカテゴリースラッグを指定
    'posts_per_page' => 5 //取得記事件数
  ));
    foreach( $newslist as $post ):
    setup_postdata( $post );
?>
<li><?php the_time('Y年n月j日'); ?>&nbsp;<a href="<?php the_permalink(); ?>"> <?php the_title(); ?></a></li>
<?php
  endforeach;
  wp_reset_postdata();
?>

ふむふむ。自分で作って置いてなんですがしばらく触っていないと忘れますね。さっきのコードをこの中に入れればいいのかな?と思いますがプログラムが苦手な僕の頭ではどうすることもできません。

独自関数を作成することにする

僕の頭ではどうやっていいのかわかんなかったので、まず独自関数を作成し、その関数をthe_time()関数の前に持ってくるようにしました。

function.phpを編集

function.phpを開きさきほどのソースを丸パクリします。

$days = 3; //Newを表示させたい期間の日数
$today = date_i18n('U');
$entry = get_the_time('U');
$kiji = date('U',($today - $entry)) / 86400 ;
if( $days > $kiji ){
echo 'New!';
}

表示させたい期間を7から3に変更します。3日たったらNEWマークはきえるということになります。
独自関数にするので以下のように追加しました。

function new_mark(){
$days = 3; //Newを表示させたい期間の日数
$today = date_i18n('U');
$entry = get_the_time('U');
$kiji = date('U',($today - $entry)) / 86400 ;
if( $days > $kiji ){
echo '<span class="new">New!</span> ';
}
}

new_markという独自関数にし、spanを追加してCSSで若干編集できるようにしました。

TOPのファイルを編集

先ほどの

<h2>サイトラボからのお知らせ</h2>
<div class="detail"><!-- detail_start -->
<ul>
<?php
   $newslist = get_posts( array(
    'category_name' => 'information', //特定のカテゴリースラッグを指定
    'posts_per_page' => 5 //取得記事件数
  ));
    foreach( $newslist as $post ):
    setup_postdata( $post );
?>
<li><?php the_time('Y年n月j日'); ?>&nbsp;<a href="<?php the_permalink(); ?>"> <?php the_title(); ?></a></li>
<?php
  endforeach;
  wp_reset_postdata();
?>

を独自関数を追加した物に変更します。

<h2>サイトラボからのお知らせ</h2>
<div class="detail"><!-- detail_start -->
<ul>
<?php
   $newslist = get_posts( array(
    'category_name' => 'information', //特定のカテゴリースラッグを指定
    'posts_per_page' => 5 //取得記事件数
  ));
    foreach( $newslist as $post ):
    setup_postdata( $post );
?>
<li><?php new_mark(); the_time('Y年n月j日'); ?>&nbsp;<a href="<?php the_permalink(); ?>"> <?php the_title(); ?></a></li>
<?php
  endforeach;
  wp_reset_postdata();
?>

new_mark();という関数を追加しました。これで完成です。ファイルをアップロードすればNEWマークが表示されるようになります。

引用元

サイトラボではお仕事募集しています。WEBサイトの制作、サーバーの構築などしています。是非お問い合わせください。

管釣り.com-KANTSURI-公開中。ゆっくり作っていきます。

この記事が役に立ったと思って頂けましたらシェア御願い致します。

  • このエントリーをはてなブックマークに追加