テーマをCocoonに変更しました!

最新記事にNEWマークをつける

wordpress

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("now");
				} else if (check(diff(u)) > 0) {
					insertTarget.prepend("new");
				}
			} else {
				if (check(diff(p)) == 0) {
					insertTarget.prepend("now");
				} else if (check(diff(p)) > 0) {
					insertTarget.prepend("new");
				}
			}
		});

	});
})(jQuery);


style.cssに以下を追加

.now,
.new {
  display: inline-block;
  padding: 0 4px;
  margin-right: 4px;
  border: 1px solid #ccc;
  border-radius: 5px;
  color: #fff;
}

.now {
  background-color: red;
  -webkit-animation-name: shake;
          animation-name: shake;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

.new {
  background-color: #c89600;
}

@-webkit-keyframes shake {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  10%, 20% {
    -webkit-transform: scale(0.9) rotate(-3deg);
            transform: scale(0.9) rotate(-3deg);
  }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale(1.1) rotate(3deg);
            transform: scale(1.1) rotate(3deg);
  }
  40%, 60%, 80% {
    -webkit-transform: scale(1.1) rotate(-3deg);
            transform: scale(1.1) rotate(-3deg);
  }
  100% {
    -webkit-transform: scale(1) rotate(0);
            transform: scale(1) rotate(0);
  }
}

@keyframes shake {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  10%, 20% {
    -webkit-transform: scale(0.9) rotate(-3deg);
            transform: scale(0.9) rotate(-3deg);
  }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale(1.1) rotate(3deg);
            transform: scale(1.1) rotate(3deg);
  }
  40%, 60%, 80% {
    -webkit-transform: scale(1.1) rotate(-3deg);
            transform: scale(1.1) rotate(-3deg);
  }
  100% {
    -webkit-transform: scale(1) rotate(0);
            transform: scale(1) rotate(0);
  }
}


ブログ管理者などによく売れてる本です

コメント

タイトルとURLをコピーしました