MENU
HOME
TOP
WhiteTiger Ver 1.2.1に更新しました。確認よろしくお願いします。

WordPressの投稿記事一覧にNewマークをPHPの条件で付ける方法

質問があったのでNewマークの簡単な付け方書きます。とりあえず、CSSでもなんでもいいんですけどWordPressの場合、テンプレートタグで付けちゃった方がスマートでナウいです。

てなわけで「NewマークをPHPの条件で付ける方法」スタートです。

テンプレートに追記

えっと、テーマによって違うのでアレですが、、大抵は「home.phpかfront.php」もしくは一個のindex.phpです。その辺はプラグインでも調べられます。

参考:WordPressで使用されているテンプレートファイル名を管理バーに出力するプラグイン

で、以下のコードをループ内に貼り付けます。

<?php if( time() - get_the_time('G') < 259200 ): ?>   
    <div class="New-caption"></div> 
<?php elseif( time() - get_the_time('G') < 604800 ): ?>  
    <div class="StillHot-caption"></div>    
<?php endif; ?>

ループ内ならどこでもいいです。タイトルの下とかが無難。 WhiteTigerだとここがいいです。sectionの閉じタグ手前辺り。

やってることは単純なことで、秒数で指定してあるだけです。

if(三日以内)elseif(一週間以内)であれば表示、切り替えみたいな条件です。カプセルにしてないのは分かりやすいようにというイラン気遣いからです。

テンプレートタグとか引数はCodexにも載ってるのでたまに見てくださいね。

参考:テンプレートタグ/get the time – WordPress Codex 日本語版

style.cssに追記

これでスタイルを整えます。以下をstyle.cssに追記してください。

/*NEW!マーク*/
/*共通*/
.Latest-caption::before, .New-caption::before, .StillHot-caption::before {
    border-style: solid;
    border-width: 0 50px 50px 0;
    content: "";
    height: 0;
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
}
.Latest-caption::after,.New-caption::after,.StillHot-caption::after{
    position: absolute;
    transform: rotate(45deg);
    z-index: 999;
    color: #fff;
    font-size: 12px;
}
/*一日*/
.Latest-caption::before {
    border-color: transparent #e94234 transparent transparent;
}
.Latest-caption::after {
    content: "Latest!";
    top: 10px;
    right: -1px;
}
/*三日*/
.New-caption::before {
    border-color: transparent #ff560d transparent transparent;
}
.New-caption::after {
    content: "New!";
    top: 10px;
    right: 3px;
}
/*一週間*/
.StillHot-caption::before {
    border-color: transparent #3f51b5 transparent transparent;
}
.StillHot-caption::after {
    content: "StillHot!";
    top: 10px;
    right: -4px;
}

これでだいたいはイケてます。ただテーマにもよるので参考までにどうぞ。

動作の確認

間違いなく記述できていたらこうなります。

三日以内と一週間以内で「New!」「StillHot!」を切り替えています。スタイルとかは適当に変更してみてください。

今日のところはこの辺で勘弁してください。(〃艸〃)

スポンサーリンク

この記事をかいた人

閲覧どうもありがとうございます。当サイトキャンディースタイルとWordPressテーマのWhite Tigerというサイトを運営しています。まだまだ初心者なので、お見苦しいとこがありますがどうぞよろしく。

コメントを閉じる

コメントを残す

メールアドレスが公開される事はございませんが*の付いている欄は必須項目となります。
なおコメントの反映にお時間がかかる場合があります事をご了承ください。


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください