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

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

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

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

1556閲覧

ワードプレスのサイトタイトルに、時間を表示させたい

shingm

総合スコア12

WordPress

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2018/04/07 16:25

編集2018/04/08 00:12

質問の仕方が変な部分もあるかも知れませんが、ご了承ください。

ワードプレスのサイトタイトルを、1時なら「1時だよ!全員集合」、20時なら「20時だよ!全員集合」というように表示したいです。
(※サイトタイトルというのは、<tilte></title>の中身のことです)

テーマの改造(PHP)は難易度が高いので、javascriptで置換を行い、例えば、サイトタイトルを

『〇△〇だよ!全員集合』

と設定して、

〇△□ → H時

に置換して実現しようと考えています。

また、ワードプレスでjavascriptを動かすのは『CSS & JavaScript Toolbox』というプラグインを使います。

リンク内容

[Javascript] ページ内の文字列の置換 replace
リンク内容

こちらを参考に

window.onload = function(){
document.body.innerHTML = document.body.innerHTML.replace(/〇△□/g."置換後の文字列");
}

を動かそうと試みましたが、上手くいきません。
(本文・タイトル・記事タイトルにそれぞれ〇△□を書きましたが、置換されません)

イメージ説明

そこで質問なのですが

①もし『CSS & JavaScript Toolbox』でJavascriptを動かすやり方が間違っているのであれば、正しいやり方を教えて頂きたいです。

②Javascriptが動いて、置換が成功したとして、次に問題になるのが、"置換後の文字列"にH時(PHPを使った変数)はそもそも使えるのか?
という疑問があります。
アクセスした時の時間を表示させるには、"置換後の文字列"に何と記述すれば良いのでしょうか?

質問が読みづらくてすみません。
よろしくお願いします。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
↓↓↓追記↓↓

ありがとうございます!

あとは

document.addEventListener("DOMContentLoaded", e => {
const date = new Date(document.querySelector("time").dateTime);
[].forEach.call(document.querySelectorAll("title,h1"),
elem => elem.textContent = elem.textContent.replace(/○/,
${date.getFullYear()}年${date.getMonth()+1}月
));
});

をワードプレスのサイトで動かせば良い、という事でしょうか。
JSを動かせるプラグイン『CSS & JavaScript Toolbox』に記述しましたが、エラーがでます。

イメージ説明

イメージ説明

もう1押しで上手く行きそうですが…

(ここから先は、プラグインの使い方とか、ワードプレスでJavaScriptを動かす質問になってくるので…一旦ここで質問を終えた方が良いかもしれませんね。すみません)

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

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

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

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

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

guest

回答1

0

ベストアンサー

例えばこんな.

  • document.bodyを書き換えるのではなく, 必要となるノードのみを書き換える
  • 現在時刻はtime要素のdatetime属性(もしくはそれに準じたもの)に(PHPで)書き込んでおき, そこから取得する.

HTML

1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>○時だよ!全員集合</title> 6 <script> 7document.addEventListener("DOMContentLoaded", e => { 8 const hours = new Date(document.querySelector("time").dateTime).getHours(); 9 [].forEach.call(document.querySelectorAll("title,h1"), 10 elem => elem.textContent = elem.textContent.replace(/○/, hours)); 11}); 12 </script> 13 </head> 14 <body> 15 <time datetime="2018-04-08T08:00:00"/> 16 <h1>○時だよ!全員集合</h1> 17 </body> 18</html>

すみません、もう1つ教えて頂きたいのですが…これがもし

「2018年4月だよ!全員集合」
だった場合はどんな感じになりますか?

Dateの文字列変換なのであとはどうとでも

<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>○時だよ!全員集合</title> <script> document.addEventListener("DOMContentLoaded", e => { const date = new Date(document.querySelector("time").dateTime); [].forEach.call(document.querySelectorAll("title,h1"), elem => elem.textContent = elem.textContent.replace(/○/, `${date.getFullYear()}年${date.getMonth()+1}月` )); }); </script> </head> <body> <time datetime="2018-04-08T08:00:00"/> <h1>○だよ!全員集合</h1> </body> </html>

NOTE:
Chrome/Safariでは2018-04-08T08:00:00と言ったように0fillしないとnew Dateに失敗します.

投稿2018/04/07 22:23

編集2018/04/07 23:46
defghi1977

総合スコア4756

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

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

shingm

2018/04/07 22:46

ありがとうございます! かなり、私のやりたい事に近づいている気がします。 すみません、もう1つ教えて頂きたいのですが…これがもし 「2018年4月だよ!全員集合」 だった場合はどんな感じになりますか? 見よう見まねで書いてみたので、構文がかなり間違っているかも知れませんが <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>●年▲月だよ!全員集合</title> <script> document.addEventListener("DOMContentLoaded", e => { const yesr = new Date(document.querySelector("time").dateTime).getYear(); const month = new Date(document.querySelector("time").dateTime).getmonth(); [].forEach.call(document.querySelectorAll("title,h1"), elem => elem.textContent = elem.textContent.replace(/●/, year)); elem => elem.textContent = elem.textContent.replace(/▲/, month)); }); </script> </head> <body> <time datetime="2018-4-8T8:00:00"/> <h1>●年▲月だよ!全員集合</h1> </body> </html> なんとなく、こんな感じだとは思うのですが…どうでしょうか。
shingm

2018/04/07 23:41

ありがとうございます。 また基本的な質問になってしまいますが、この動作確認はどのようにすれば良いのでしょうか? 試しに、書いて頂いたコードを「index.html」に全コピペして、アップロードしたのですが NaN年NaN月だよ!全員集合 と表示されてしまいます。
defghi1977

2018/04/07 23:44

> NaN年NaN月だよ!全員集合 これは失礼. FireFoxでしか確認してなかった. Chromeで死んでるね…
shingm

2018/04/08 00:13

おお、すごい! 2018年4月だよ!全員集合 と表示されました。ありがとうございます。 あとは document.addEventListener("DOMContentLoaded", e => { const date = new Date(document.querySelector("time").dateTime); [].forEach.call(document.querySelectorAll("title,h1"), elem => elem.textContent = elem.textContent.replace(/○/, `${date.getFullYear()}年${date.getMonth()+1}月` )); }); のスクリプト(javascriptですよね?)を、ワードプレスのサイトで動かせば良いのでしょうか?
defghi1977

2018/04/08 00:16

あとは、ワードプレスの構造に合わせてカスタマイズすればよいでしょう.
shingm

2018/04/08 00:17

わかりました! もう少し頑張ってみます。ありがとうございました!
shingm

2018/04/08 00:34 編集

できました!! もう1つだけ教えて頂きたいのですが タイトルタグやh1以外でも置換したければ、 [].forEach.call(document.querySelectorAll("title,h1"), の行にある"title,h1"を"title,h1,h2,h3,h4,h5,h6" とすれば良いと思うのですが、サイト全体(本文や、ウィジェットなど) でも置換することは可能でしょうか。 もし可能なら、教えて頂きたいです。 何度もすみません。
defghi1977

2018/04/08 00:37

試してみりゃいいじゃん. でも, 年月コメントを挿入したい箇所が不定なのであればPHP側で専用の「年月出力関数」を作って, サーバー側で出力するほうが自然な気がします.
shingm

2018/04/08 00:52

あ、いや"title,h1,h2,h3,h4,h5,h6"だと 見たとおり、本文に適用されないのは理解できるのですが、 本文・ウィジェットでも適用するには何と記述すれば良いか分からないので… >年月コメントを挿入したい箇所が不定なのであればPHP側で専用の >「年月出力関数」を作って, サーバー側で出力するほうが自然な気がします. そうなんですね。ただ、ちょっと私にはレベルが高い話で、すぐには理解できそうにないです…すみません。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問