WordPress Javascript：ビギナーズガイド

100万人のWeb開発者にJavaScriptとは何かを尋ねると、100万の異なる回答が返されます。 Web上でインタラクティブなほとんどすべてがJavaScriptを使用して行われます。

最新のコンテンツ管理システム（CMS）として、WordPressとそのプラグインの多くは、作業を完了するためにJavaScriptに部分的に依存しています。 それがどのように聞こえるかに反して、JavaScriptはJavaプログラミング言語とは関係がありません。 それはマーケティング目的のためだけにそれと呼ばれています。

JavaScriptとWordPressの総合力を活用するために、知っておく必要のあるすべてのことを詳しく見ていきましょう。

JavaScriptとは何ですか？

昔、インターネットはHTMLとCSSだけに依存していました。 この組み合わせにより、コンテンツの非常に基本的なスタイリングが可能になります。 ただし、コンテンツを動的にするためにできることはほとんどなく、Webアプリケーションの作成は問題外でした。

サーバーの保守にははるかに費用がかかるため、開発者はクライアントマシンで動作するJavaScriptを作成することにしました。 JavaScriptは、他の関数型プログラミング言語と同様の方法で記述されており、データを関数に取り込んで処理し、データを出力できます。

Webブラウザーには、JavaScriptコードの実行方法を知っているJavaScriptエンジンがあります。 たとえば、ChromeのJavaScriptエンジンはv8ですが、FireFoxJavaScriptエンジンはSpiderMonkeyです。 このため、Javascriptは、データの表示を解釈、処理、および操作する方法を「理解」するためにブラウザーに依存しています。

JavaScriptの技術的側面

JavaScriptの背後にある技術についてもっと知りたいですか？ 他のタイプの開発の経験がある人のために知っておくべきいくつかの重要な差別化要因があります。 まず、JavaScriptはPHPのように型に依存しません。 つまり、その変数には定義されたタイプがなく、任意の変数をほぼすべてのタイプの値に割り当てることができます。

最新の言語のほとんどは「オブジェクト指向」です。つまり、リテラルオブジェクトを表す再利用可能な「クラス」に依存しています。 JavaScriptがこれに最も近いのは、「プロトタイプ」です。 これらのデータ構造は再利用でき、特定の値を保持できますが、その機能と使いやすさは、Javaなどのオブジェクト指向の概念に基づいて構築された言語よりもはるかに制限されています。

JavaScriptは何をしますか？

FacebookやNetflixのような大企業からの大規模なコミュニティのサポートと投資により、JavaScriptはWebブラウザ内で動作する以上のことができます。 JavaScriptは、ウェブサイトの著作権記号の横に表示するために今年を取得するのと同じくらい簡単なことや、オンライン画像エディターの処理の大部分を行うなどのより複雑な作業を行うことができます。

一言で言えば、JavaScriptは、開発者がクライアントのマシンで実行したいことをほぼすべて実行します。 JavaScriptは、クライアントがJavaScriptを使用するサイトにアクセスすると、クライアントマシンにローカルにキャッシュされます。

機密データはサーバー上で処理する必要がありますが、多くのWebベースのアプリケーションは、クライアントマシンの処理能力を活用するためにJavaScriptを多用しています。 さまざまな種類のコンテンツの開発をはるかに高速化する無限の「フレームワーク」の時代になりましたが、その可能性は無限大です。

JavaScriptは安全ですか？

大多数のプロトコルや古い言語と同様に、JavaScriptは当初セキュリティを念頭に置いて構築されていませんでした。 サイバー攻撃がどのように蔓延しているのかを考えると、これは不思議に思うのに完全に合理的なことです。

すべてのJavaScriptコードの実行を単にブロックする「NoScript」のようなブラウザ拡張機能があります。 Webの一般的なルールに従い、信頼できないサイトにアクセスしない限り、JavaScriptの実行を許可しても問題ありません。

これはプログラミング言語であるため、もちろん悪意のあるユーザーがそれを悪用してコンピューターを攻撃する可能性があります。 最新のブラウザは、これらの攻撃のほとんどを自動的に検出します。 WordPress JavaScriptのセキュリティが心配な場合は、ウェブサイトのセキュリティのほとんどの側面を自動操縦に設定するWordPressセキュリティプラグインで安心できるかもしれません。

2つの主要なJavaScript攻撃タイプ

開発とセキュリティに関しては、「友達と敵を近づけてください」という格言が適切です。 悪意のあるユーザーがJavaScriptをどのように利用しているかを理解することは非常に重要です。そうすれば、悪意のあるユーザーの努力を阻止できます。

クロスサイトスクリプティング（XSS）

クロスサイトスクリプティング（XSS）は、WordPressサイトのクロスサイトの脆弱性を悪用することによって実行されるマルウェア攻撃の一種です。 実際、XSSの脆弱性を持つWordPressプラグインが非常に多いため、WordPressサイトがハッキングされる最も一般的な方法です。

クロスサイトスクリプティング攻撃は、ページでデータの送信が許可されている場合に使用されます。 この攻撃では、悪意のあるユーザーがデータにJavaScriptコードを配置して、一般に公開されているページに送信します。

緩和策が講じられていない場合、この悪意のあるコードは、実際には、そのページにアクセスするすべてのコンピューターでJavaScriptコードを実行します。 これが、入力を「サニタイズ」することが重要である理由です。 つまり、投稿する前に、コードを役に立たなくする括弧や引用符などを削除します。

クロスサイトリクエストフォージェリ（CSRF）

このタイプの攻撃は、すでにログインしている可能性のあるWebページを利用します。 最も一般的なシナリオは、銀行にログインしていることです。

銀行口座にログインしているが、CSRFの準備ができているトレントWebサイトにアクセスすることにしたとします。 CSRFは、ブラウザの緩和策がない場合、リンクパターンを採用して、すべての主要銀行の銀行振込などを実行し、それらをバックグラウンドでマシン上で実行します。

アカウント$ 1,000を転送するwww.bankwithbadsecurity.com/transfer&amount=1000&toAccount=12345 12345番：実際には、主要なサイトと大手銀行で起こったことを1つのシナリオは、のように見えた転送お金に銀行のリンクがあることでした。

銀行にとって、あなたがそれを要求したように見えます、そして、要求はあなたのIPアドレスから来るので、あなたがそれを開始しなかったことを証明するのは難しいです。 幸いなことに、最近のほとんどのブラウザはこれを自動的に検出して防止します。

WordPress内でJavaScriptを使用できますか？

はい、WordPress用に開発しているときにJavaScriptを使用できます。 WordPressは、2つの編集モードを備えた柔軟なコンテンツ管理システムであることに注意してください。 1つはコードを直接編集することを可能にし、もう1つは「WYSIWYG」エディターとしても知られるワードプロセッサーで見られるものと同様のエディターを使用することを可能にします。 WordPressの最新バージョンでは、WYSIWYGエディターはGutenbergと呼ばれています。

WordPressの拡張機能を開発するときは、JavaScriptも使用できることに注意してください。 WordPressのサーバー側はPHPですが、クライアント側はほぼ100％JavaScriptです。

WordPressのJavaScriptを学ぶ必要がありますか？

これらの質問への答えは、WordPressで何をしようとしているのかによって異なります。 プラットフォームを使用して生成する静的ページがいくつか必要な場合は、JavaScriptを学習しなくても問題ない可能性があります。

利点として、JavaScriptを使い始めるのは非常に簡単であり、HTMLとCSSがどのように機能するかについても多くを学ぶことができます。 ただし、WordPressのトレーニングに加えて、ダイナミックで記憶に残るサイトを作成したい場合は、JavaScriptの学習に取り組む必要があります。

簡単な警告：Web開発を始めたばかりの場合は、数日のうちにJavaScriptを習得することを期待しないでください。 JavaScriptは、非常にあいまいなエラーメッセージがあることで有名であり、「スパゲッティコード」であると批判されることがよくあります。 これは、何年にもわたって、開発者が適切に編成せずに多くのコードを積み上げてきたことを意味します。 その上、ほとんどの開発者は、JavaScriptを使用するフレームワークでプログラミングする方法を学びますが、構文は少し異なります。

クライアントのサイトを管理するフリーランサーまたは代理店の場合は、JavaScriptの学習に特に時間を費やす必要があります。 複数のWordPressサイトを管理できる一流のツールがありますが、プラグインでサイトを作成することはできません。

さらに、Web開発者になりたいという願望がある場合、JavaScriptを学ぶことはこれらのキャリアにとって有益です。

• フロントエンドの開発者
• バックエンド開発者
• フルスタック開発者

さらに、JavaScriptを学習することは、より高度なHTML、CSS、およびPHPとともに、オーバーヘッドコストを削減する可能性のある堅固なWP基盤として機能します。 実際には完了するのに数分かかる可能性のあるタスクを実行するために、外部の請負業者に支払いをして、収益を削減する必要がなくなります。 JavaScriptをマスターしたら、ReactやAngularなどの一般的なフレームワークに移行して、WordPress内で真にユニークで応答性の高いアプリケーションを作成できます。

WordPressでコーディングするときにJavaScriptを作成するにはどうすればよいですか？

WordPressサイトにJavaScriptを追加することは、CSSやHTMLを追加することほど簡単ではありませんが、始めるのにそれほど時間はかかりません。 アプローチには2つの異なる方法があり、それぞれに異なる目的があります。

方法1：すべてのページで

WordPressサイトのすべてのページで同じスクリプトを実行する場合、控えめに言っても、各ページにコードを手動で追加するのはかなり面倒です。 HTML内にJavaScriptを挿入する適切な場所は、ページのヘッダーとフッター内です。

カスタマイズしたJavaScriptを取得して、WordPressサイトのすべてのページのヘッダーやフッターにドロップする無料のプラグインがいくつかあります。 WordPress管理者は、これらのプラグインがGoogle Analyticsと完全に連携し、すべてのページヒットがカウントされるようにして、SEOランクをより速く上げるのに役立つため、これらのプラグインを気に入っています。

方法2：ページごとに異なるJavaScript

機能するために少なくとも1つの「ライブラリ」に依存する各ページに異なるツールがあるWordPressサイトを実行しているとしましょう。 すべてのJavaScriptをすべてのページに強制的にロードすると、特に不要な場合は、サイトへのアクセスが遅くなります。 常識によれば、訪問者の体験を遅くすることは、ビジネスを勝ち取るための最良の方法ではありません。

このプロセスを実行するためのめちゃくちゃ複雑な方法を持っているチュートリアルがウェブ上にたくさんあります。 これはfunctions.phpファイル内で複雑な編集を行うことで実行できることは事実ですが、頭痛の種を楽しんでいない限り、このアプローチを採用する必要はありません。

代わりに、CodeEmbedプラグインをサイトにインストールしてください。 これにより、JavaScriptを追加して、ページ内の好きな場所に埋め込むことができます。

CodeEmbedプラグインの使用

コード埋め込みプラグインをインストールした後、[画面オプション]に移動し、[カスタムフィールド]というチェックボックスを押します。 これにより、JavaScriptをページに追加できるようになります。

編集ページに、「カスタムフィールド」というボックスが表示され、カスタムフィールドを「新規入力」するオプションがあります。 それをクリックすると、JavaScriptコードの名前と、コード自体を入力するための空のテキストボックスが表示されます。

既存のWordPressコードとの競合を避けるために、JavaScriptコードの名前は大文字の「CODE」で始める必要があります。 「CODEtimer」のようなもので十分でしょう。 次に、実際のJavaScriptを他のボックスに追加します。 スクリプトの開始タグと終了タグを必ず含めてください。

完了したら、「カスタムフィールドの追加」というボタンをクリックするだけです。 最後に、JavaScriptコードを実行するページの場所を特定します。 たとえば、コードがタイマーをロードする場合、ページのどこにそのタイマーを挿入するかを見つけます。 次に、正確な構文[[CODEtimer]]を使用して、WordPressにJavaScriptを挿入させます。これで完了です。

JavaScriptとCSSファイルをWordPressに含めるにはどうすればよいですか？

WordPressには組み込みのテーマがありますが、多くのWeb開発者は、よりユニークなデザインを好み、独自のCSSを使用します。 これらのJavaScriptファイルを保存する方法も必要です。

この部分では、ファイルマネージャーに移動して、「functions.php」というファイルを見つける必要があります。 これは、サイトの基本テーマが配置されているフォルダーにあることに注意してください。

Functions.phpへのCSSの追加

関数.phpファイルに移動したら、次の手順に従います。

1. 新しい行で、コード関数を追加して空の関数を作成します
   addMyCSS（）{＃Fill This In Later}
2. 次のステップでwp_register_styleという組み込み関数を使用して、WordPressでCSSファイルを「登録」します。
3. コードに挿入したフィラーを削除し、代わりにwp_register_style（ 'name_of_css_style'、plugins_url（ 'file-location.css'、__ FILE__））;を配置します。
4. これで、CSSスタイルの名前と場所をWordPressに伝えました。 次に、スタイルを「キューに入れる」か、WordPressに使用する準備ができていることを伝えます。
5. addMyCSS関数ブロック内にとどまり、コードwp_enqueue_style（ 'name_of_css_style'）;を追加します。 最後のステップで入力したコードのすぐ下。
6. 最後のステップが1つありますが、最初に、作成した関数全体の外側にあり、PHPファイルの一般的な部分にいることを確認してください。
7. addMyCSSの外に、次の行を追加するだけです。add_action（ 'wp_enqueue_scripts'、 'name_of_css_style'）; 。 これは、ページの読み込み時にこのファイルの読み込みをトリガーするようにWordPressに指示します。

スタイルシートのadd_action関数にwp_enqueue_scriptsがあるのはなぜか疑問に思われるかもしれません。 これは、WordPressが常に機能を実装してきた方法です。

WordPressへのJavaScriptファイルの追加

関数の生成、ファイルの登録、アクションの追加のプロセスを終えたので、この部分は簡単なことです。

1. addMyCSSで行ったのと同じように、 functions.phpにaddMyJSという関数を作成します。
2. 関数wp_register_scriptを利用しますが、もう少し複雑です。 5つの「パラメータ」（括弧内の項目）があります。 以下を見て、各パラメータが何であるかを確認してください。
3. wp_register_script（1。スクリプト名、2。plugins_url（location_of_script.js、__ FILE __）、3。JS依存関係の配列、通常はarray（jquery）、4。（オプション）JSファイルのバージョンを一重引用符で囲みます。5。フッターにJSが必要な場合はtrue、ヘッダーにJSが必要な場合はfalse）。
4. テーマのフッターで実行するJavaScriptの実際的な例を次に示します。wp_register_script（ 'timer_js'、plugins_url（ 'timer_file.js'、__ FILE __）、array（ 'jquery'）、 '1.0'、true）;
5. 繰り返しますが、 addMyJS関数の外で、これをPHPの一般的な領域に配置して、スクリプトを「キューに入れます」 。add_action（ 'wp_enqueue_scripts'、 'addMyJS'）;

複雑に見えるかもしれませんが、一度コツをつかめば、1分もかからないので心配いりません！

JavaScriptをWordPressに追加するために使用できるプラグインは何ですか？

この目的のためだけに、完全に無料のプラグインがたくさんあります。 それぞれの動作はわずかに異なるため、コミットする前にいくつか試してみてください。 ここに試してみる5つの主要なものがあります。

• ASync –ユニークなことに、このプラグインはJSファイルとCSSファイルの両方をページの他の部分とは別にロードします。 これは、ページの読み込みを無期限に停止するコーディングエラーがある場合に特に役立ちます。

• ウィジェットのJS– Google Analyticsのようなものに数行のコードを追加する必要がありますか？ このプラグインは面倒な作業を取り除き、WordPressサイトに小さなスニペットを追加できるようにします。

• Zia CSS / JS Helper –これは古典的なHTML / CSS / JSWeb開発の経験がある人にとっては断然最高です。 これにより、WordPressの編集機能がcPanelのファイルマネージャーを使用してサイトを編集するのと同じようになります。 インラインCSSとJavaScriptを利用して、コードをすばやく追加したり、外部ファイルを作成および管理したりできます。

常に最初にサイトをバックアップしてください！

WordPressプラグインの大部分はサイトに害を及ぼすことはありませんが、問題が発生する可能性は常にあります。 追加のプラグインをインストールしたり、サイトを変更したりする前に、BackupBuddyなどのWordPressインストールの完全なバックアップを処理できるWordPressバックアッププラグインを使用してサイトのバックアップを作成してください。 可能なやり直しの時間を節約し、すべてのハードワークが無駄にならないようにします。

JavaScriptを使用してWordPressAPIを利用できますか？

ご存知かもしれませんが、WordPressには広範な一連のAPI、つまりアプリケーションプログラミングインターフェイスがあります。 APIは基本的に、JavaScriptなどの言語で利用できるサーバー側の関数です。 開発者がWordPressAPIの機能を学ぶための新しい、より現代的な方法は、WordPress WordPressAPIコードリファレンスページを使用することです。

ここで、以前に使用した「組み込み関数」を入手しました。 APIの各関数と、それらがJavaScriptと連携してどのように機能するかについて何日も続けることができました。 しかし、それは高度なトピックであり、学ぶために個々の時間と献身が必要です。

WordPress用に調整されたJavaScriptライブラリはありますか？

はい！ 多くの開発者がWordPressAPIコンテンツ全体を習得していないことを認識し、多くのプログラマーは、前に説明したプラグインのいずれかを使用して、簡単に埋め込むことができるJavaScriptライブラリを作成しました。

ほとんどのJavaScriptライブラリはGitHubにあり、完全に無料です。 WordPressと互換性のあるJavaScriptライブラリは数十万あり、WordPressに楽しい効果を追加するものから、Pinterestと非常によく似たレイアウトのサイトを作成できるものまであります。

WordPress（およびほとんどのサイト）で使用される最もよく知られているライブラリは、jQueryと呼ばれます。 jQueryはJavaScriptの複雑さを取り除き、コツをつかめば、関数をすばやく簡単に作成できるようになります。

ヘルプ！ WordPress JavaScriptが機能していません！

JavaScriptの不幸な部分の1つは、エラーが明白ではないことです。 その上にWordPressを追加すると、かなり混乱する可能性があります。

一部のエラーは、引用符を忘れた場合と同じくらい簡単に発生する可能性があります。 その他は、それほど簡単に特定できない主要なコーディングエラーによって引き起こされる可能性があります。 では、プロの開発者はどのように違いを見分けるのでしょうか？

トラブルシューティングには、 console.logJavaScript関数とブラウザーデバッグコンソールの2つの主要なキーがあります。 特にChromeのコンソールはこれに最適です。

console.log

これを使用して、関数内の特定のポイントでの変数の値を確認し、関数の一部に実際に到達していることを確認できます。 JavaScriptファイル内に、 console.log（ "test"）;のようなものを置くだけです。 。

デバッグコンソール

使用しているブラウザによって、コンソールの設定は異なります。 通常は、F12キーを押して開き、[コンソール]タブをクリックするだけです。

コンソールには、エラーが発生したJavaScriptファイルの行が表示されます。 通常、完全な「スタックトレース」、つまり原因にぶつかるまでに通過する一連のファイルが表示されます。 これは、 console.logメッセージが出力される場所でもあります。

まとめ：JavaScript + WordPress

あなたにはるかに多くの洞察を与えるプロのツールがありますが、これらは通常かなりの費用がかかります。 幸いなことに、世界で次に優れたWordPress JavaScript開発者としてスケールアップすると、ツールもそれに合わせてスケールアップします。

クリステンライト

Kristenは、2011年からWordPressユーザーを支援するチュートリアルを作成しています。通常、彼女はiThemesブログの新しい記事に取り組んでいるか、＃WPprosperのリソースを開発しています。 仕事以外では、クリステンはジャーナリング（2冊の本を書いています！）、ハイキングやキャンプ、料理、家族との毎日の冒険を楽しんでおり、より現代的な生活を送っています。