Wordpressについて質問です。
mobileデバイスにおいて記事一覧の新着記事に「NOW」や「NEW」を表示させるには
どのようなコードを記載すればよいでしょうか?
PCにおいては意図通り表示させることが出来ました。
大変お手数ですが、ご教授いただけますと幸いです。
よろしくお願いいたします。
該当HP:http://availability89.com/
テーマ:Simplicity2
【style.css】
【mobile.css】
【responsive.css】
.now{ display: inline-block; padding: 0 4px; margin-right: 4px; border: 1px solid #FF0000; border-radius: 5px; color: #fff; } .new { display: inline-block; padding: 0 4px; margin-right: 4px; border: 1px solid #FFA500; border-radius: 5px; color: #fff; } .now { background-color: rgba(255,0,0,1); animation-name: shake; animation-duration: 0s; animation-fill-mode: both; animation-iteration-count:infinite; } .new { background-color:#FFA500; /*background-color: rgba(255,0,0,1);*/ } @keyframes shake { 0% {transform: scale(1);} 10%, 20% {transform: scale(0.9) rotate(-3deg);} 30%, 50%, 70%, 90% {transform: scale(1.1) rotate(3deg);} 40%, 60%, 80% {transform: scale(1.1) rotate(-3deg);} 100% {transform: scale(1) rotate(0);} }
【javascript.js】
(function($) { var new_span = 7; //newを表示する期間 /* * 今日の日付から投稿(更新)日の差を計算して返す * return int */ function diff(checkDate) { var d1 = new Date(), d2 = new Date(checkDate), d_diff = d2.getTime() - d1.getTime(), daysDiff = Math.floor(d_diff / (1000 * 60 * 60 * 24)); return ++daysDiff; } /* * 表示する期間の日付差から期間中かを返す * return 0 now * return 1 new * return -1 それ以外 */ function check(diffday) { var diff_absoluteValue = Math.abs(diffday); if (diff_absoluteValue === 0) { return 0; } else if (diff_absoluteValue < new_span) { return 1; } else { return -1; } } $(function() { /* * 各post-meta内の投稿(更新)日よりnew等をつける処理 * updateがある場合は更新日よりチェック * それ以外は投稿日からチェック */ $(".entry .post-meta").each(function() { var p = $(this).find(".post-date .published").text(), u = $(this).find(".post-update .updated").text(), insertTarget = $(this).closest(".entry").find(".entry-card-content h2"); if (u.length > 0) { //更新日がある時 if (check(diff(u)) == 0) { insertTarget.prepend("<span class='now'>NOW</span>"); } else if (check(diff(u)) > 0) { insertTarget.prepend("<span class='new'>NEW</span>"); } } else { if (check(diff(p)) == 0) { insertTarget.prepend("<span class='now'>NOW</span>"); } else if (check(diff(p)) > 0) { insertTarget.prepend("<span class='new'>NEW</span>"); } } }); }); })(jQuery);
回答1件
あなたの回答
tips
プレビュー