WordPress 投稿内に JavaScript コードを追加する方法は?

体系的に学んだウェブサイトを構築するテクニカルSEO専門家は、JavaScript プログラムを簡単に使用する方法を知っています。

インターネット上には、他の人が共有している使いやすい JavaScript コードがたくさんあります。

できればWordPress記事に JS コードを追加すると、間違いなく記事がカラフルになります。

WordPress 記事に JS コードを追加する方法

JavaScript コードを WordPress 投稿に追加するのは非常に簡単です。

次、チェン・ウェイリアンあなたと共有します：JavaScript コードを WordPress の投稿に追加するには?

通常、JS コードを追加する方法は 2 つあります。

1. JS コードを WordPress の投稿に直接追加する
2. JSファイルを書いた後、WordPressの記事でJSコードを呼び出す

1) JS コードを WordPress の投稿に直接追加する

最初の方法は、JavaScript を WordPress の投稿に直接記述します。

「Hello World!」の文字を印刷する例 ▼

<script type="text/javascript">// <![CDATA[
document.write("Hello World!")
// ]]></script>

JavaScript実行後に「Hello World!」と表示されるWordPress投稿です ▼

2) JS ファイルを記述したら、WordPress 記事の JS コードを呼び出します。

XNUMX 番目の方法では、JavaScript コードを別のファイルに書き込みます。

次に、JavaScript を挿入する必要がある WordPress 投稿で、WordPress テキスト エディターを介して JavaScript ファイルを呼び出します。

次の例は、WordPress の投稿で、「Hello World」テキストを出力しています ▼

<script type="text/javascript" src="https://img.chenweiliang.com/javascript/hello.js">// <![CDATA[
// ]]></script>

JavaScript ファイル hello.js の内容 ▼

document.write("Hello World");

WordPress 投稿に JavaScript コードを追加すると、結果が表示されます ▼

WordPress は今日の日付の JS コードを呼び出します

インターネット上には、楽しくて便利な JavaScript コードがたくさんあります。

それらの使用方法の例を挙げてください。

WordPress の投稿に今日の日付を表示します。

次の JavaScript の date.js ファイルを WordPress の投稿に挿入します ▼

<script type="text/javascript" src="https://img.chenweiliang.com/javascript/date.js"></script>
<script type="text/javascript">// <![CDATA[
     // call function if required.
// ]]></script>

以下、date.jsファイルのJavaScript内容です▼

var calendarDate = getCalendarDate();

document.write("Today is: " + calendarDate);

function getCalendarDate()
{
   var months = new Array(13);
   months[0]  = "January";
   months[1]  = "February";
   months[2]  = "March";
   months[3]  = "April";
   months[4]  = "May";
   months[5]  = "June";
   months[6]  = "July";
   months[7]  = "August";
   months[8]  = "September";
   months[9]  = "October";
   months[10] = "November";
   months[11] = "December";
   var now         = new Date();
   var monthnumber = now.getMonth();
   var monthname   = months[monthnumber];
   var monthday    = now.getDate();
   var year        = now.getYear();
   if(year < 2000) { year = year + 1900; }
   var dateString = monthname +
                    ' ' +
                    monthday +
                    ', ' +
                    year;
   return dateString;
} // function getCalendarDate()

WordPress の投稿で JavaScript が今日の日付を実行した結果は次のとおりです ▼

以下は、この記事で実行した JavaScript ファイル date.js の結果です ▼

注意事项

JS コードを投稿に挿入するには、WordPress エディターをテキスト モードに切り替える必要があります。

特別な注意和之间不能有换行。

改行がある場合、WordPress は自動的に段落として処理し、JS スクリプト コードが失敗する原因となる p タグを自動的に追加します。

WordPressのJavaScriptコードに関するその他の記事はこちら▼

WordPressは、記事ページがJavaScript / CSSコードをロードすることをどのように指定していますか？

WordPress のテーマを作成する際、WordPress の特定のページに表示される特定の JavaScript や CSS コードがあると、それは XNUMX 回しか使用されません。コードはどこに配置する必要がありますか? Style.css または base.js?しかし、そのためのコストは少し高くなります。 ...

WordPress で JavaScript を遅延ロードして、ページのレンダリングを高速化する方法は?

WordPress は JavaScript を遅延ロードして、ページのレンダリング方法を高速化します。JavaScript の Defer プロパティとは何ですか?誰もがおそらくこの状況に遭遇したことがあります。ヘッドに N 個のスクリプトがあり、スクリプトが読み込まれると、通常は空白のページ レンダリングがブロックされます。 ...

WordPress はどのように JavaScript を適切に導入していますか?JS および CSS ファイルのカスタム読み込み

WordPress で Web サイトを構築するプログラマーは、WordPress プラグインを開発したり、WordPress テーマをカスタマイズしたりする際に、いくつかの JavaScript および CSS スクリプト リソースを参照します。通常、人々は link や script タグを直接 HTML に使用します。実際、WordPress内では…