質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.49%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

Q&A

解決済

1回答

927閲覧

Wordpress : mobileデバイスにおける新着記事「NOW」と「NEW」の表示

Naokoro

総合スコア19

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

0グッド

0クリップ

投稿2018/03/01 15:42

Wordpressについて質問です。
mobileデバイスにおいて記事一覧の新着記事に「NOW」や「NEW」を表示させるには
どのようなコードを記載すればよいでしょうか?

PCにおいては意図通り表示させることが出来ました。
大変お手数ですが、ご教授いただけますと幸いです。
よろしくお願いいたします。

該当HP:http://availability89.com/
テーマ:Simplicity2

【PC】
イメージ説明

【iPhone】
![イメージ説明]

【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);

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2018/03/02 01:48

iPhone実機で確認してみましたが普通に表示されてますね。キャッシュじゃないですか?確認しているiPhoneの日付が正確じゃない、なんてことないですよね?
Naokoro

2018/03/02 13:36

キャッシュが原因でした。ありがとうございます!
guest

回答1

0

自己解決

キャッシュが原因でした。
aozukiさん、ありがとうございました。

投稿2018/03/02 13:37

Naokoro

総合スコア19

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.49%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問