WordPress の JavaScript
公開: 2023-02-12WordPress ユーザーとして、テーマを壊すことなく、テーマで許可されている範囲を超えてページや投稿を微調整したいと思うことがあるかもしれません。 たとえば、サイトにインタラクティブな要素を追加したい場合がありますが、WordPress は変更を保存するときにコーディングを削除します。
コードをページや投稿に直接追加するのは簡単ではないため、これはイライラする障壁になる可能性があります。 ただし、それを克服する方法があります。 WordPress プラットフォーム内で JavaScript を使用して、ページや投稿、または Web サイト全体に動的要素を追加できます。
この記事では、JavaScript とは何か、そして JavaScript を使用して WordPress のデジタル エクスペリエンスを強化する方法について説明します。 また、Web サイトに JavaScript を実装するのに役立ついくつかのプラグインも確認します。 素晴らしいウェブサイトのアイデアをすべて集めて、始めましょう!
JavaScript とは
JavaScript は、最も人気のあるプログラミング言語の 1 つです。 Web サイトに動的機能のレイヤーを追加できます。 ほとんどのサイトの基本要素は HTML と CSS でまとめられていますが、JavaScript は魅力的なオプションを多数提供します。 これには、インタラクティブな計算機からリアルタイムの情報フィードまで、あらゆるものを含めることができます。
JavaScript の利点の 1 つは、通常、クライアント側のプログラミングとして展開されることです。 これは、訪問者がページを表示すると、スクリプトが訪問者のブラウザから実行されることを意味します。 HTML と CSS を展開してページの構造を作成すると、JavaScript を他の要素の上で実行して、何らかの動的な目標を達成できます。
JavaScript は何をしますか?
したがって、JavaScript は主に、サイトの既存の HTML および CSS を変更できるクライアント側のプログラミング要素であることがわかっています。 しかし、他に何ができるでしょうか？ JavaScript を使用すると、次のような便利なことがいくつかあります。
- Web ページでのイベントの実行
- 変数内に値を格納する必要があるフォーム検証
- ページまたは投稿に配置できるサードパーティ API
JavaScript はユーザーのブラウザーによって実行されるため、そのブラウザーからデータを収集することもできます。 これは、画像をすばやく読み込み、モバイル デバイスに適切に対応する高速で効率的な Web サイトを作成する場合に不可欠です。
WordPress に JavaScript を追加する必要があるのはいつですか?
JavaScript を追加すると、WordPress ページに要素を追加したい場合に便利です。そうしないと、展開時にサーバーが停止する可能性があります。 これには、オーディオやビデオ プレーヤーなどの複雑な機能が含まれる場合があります。 また、多くのサードパーティ製アプリケーションを使用している場合、サイトに JavaScript を追加して機能させる必要がある場合があります。
JavaScript は HTML ページに書き込まれるため、それをどう処理するかはユーザーのブラウザー次第です。 したがって、JavaScript はサーバー側で使用できますが、その真のスーパーパワーはクライアント側の実装にあります。
JavaScript 実装のその他の機会には、イベントベースのアクションが含まれます。 これは、マウスのクリックやウィンドウのサイズ変更など、ユーザーのアクションに応じてサイトで何かを行う必要がある場合です。
6 トップ JavaScript WordPress プラグイン
JavaScript が提供するものの基本を説明したので、Web サイトにスクリプトを安全に展開するのに役立つ WordPress プラグインをいくつか見てみましょう。 以下では、さまざまなオプションと機能を提供する WordPress 用の 6 つのプラグインを確認します。
1.ヘッダーとフッターを挿入する
この WordPress プラグインは、WordPress サイトにコードを追加する最も簡単な方法であると自称しています。 Insert Headers and Footers は、WPBeginner によって提供され、ソーシャル メディア プラットフォームなどからサードパーティ API を統合するのに役立ちます。 これはすべて、WordPress テーマを直接編集しなくても可能です。
主な特長:
- ワンストップのヘッダーまたはフッター スクリプトの編集と挿入のためのシンプルなインターフェイスを提供します
- ヘッダーまたはフッターに JS コードを挿入するかどうかを選択できます
- Google アナリティクスを任意のテーマに追加できます
- HTML、CSS、JavaScript など、複数の種類のコードを操作できるようにします
価格:これは無料のプラグインです。
2. シンプルなカスタム CSS と JS
シンプル カスタム CSS および JS プラグインは、開発者ツールとして便利で、プロ バージョンにアップグレードすると最も効果的です。 主に、サイトの外観の変更に焦点を当てています。 さらに、WordPress のテーマやプラグイン ファイルを変更することなく、カスタム CSS とカスタム JavaScript を追加できます。 コードの変更を特定のページまたは URL に適用できるため、要素を公開する前にテストできます。
主な特長:
- シンタックス ハイライト付きのテキスト エディターが含まれています
- コードをインラインまたは別のファイルに出力できます
- サイトのヘッダーまたはフッターへのコード配置を有効にします
- フロントエンドまたは管理側に必要な数のコードを追加できるようにします
- テーマを変更したときに変更を保持します
価格:このプラグインは無料のオプションです。
3.そごうヘッダーフッター
SOGO ヘッダー フッターは、サードパーティの API 機能を利用するのに最適です。 一例を挙げると、Google リマーケティング コードを含むページのヘッダーとフッターに JavaScript を追加できます。 広告を削除したり、プレミアム オプションにアクセスしたりするには、プロ バージョンを購入する必要がある場合があることに注意してください。
主な特長:
- WooCommerce ショップページのサポートを含む
- すべてのページと投稿に JS コードを適用したり、特定のものを指定したりできます
- グーテンベルクに対応
- 用語とカテゴリページをサポート
価格:無料版と 7.90 ドルからのプレミアム版があります。
4.フッターへのスクリプト
この強力な WordPress プラグインは、重要なスクリプトをサイトのフッターに移動します。 読み込み時間を短縮したり、テーマが多くのスクリプトを実行する場合に画像読み込みのボトルネックを解消したりするために、これを行うことができます。 Scripts to Footer は、プラグインと wp_enqueue_scripts を正しく使用するテーマがある場合にのみ機能することに注意してください。
主な特長:
- 投稿/ページ編集画面のメタボックスを介して、特定のページや投稿でプラグインの機能を直接無効にすることができます
- 設定ページから特定のアーカイブ ページでプラグインを無効にできます
- サイトのヘッダーに保持するスクリプトを選択できるようにします
価格:このプラグインは 100% 無料です。
5. CSS & JavaScript ツールボックス
次に、CSS & JavaScript Toolbox は、サイトのすべてのコードとスニペットを管理するためのダッシュボード オプションを提供します。 コードを細かく制御したい開発者向けの強力なツールであるこのツールボックスを使用すると、サイトで使用するコード ブロックを作成できます。 コード ブロックに固有の CSS、JavaScript、HTML、および PHP コードを追加および管理し、どこにでも追加できます。
主な特長:
- ページ、投稿、カスタム投稿タイプ、タグ、カテゴリ、URL などに CSS、JavaScript、PHP、HTML を追加できます
- テーマ ファイルを変更せずにフロントエンド スタイルを追加できます
- 機能を追加するための余分なカスタム プラグインやハックの必要性を排除します
- 広告や訪問者の追跡、またはソーシャル メディア チャネル用のサードパーティ スクリプトを追加するのに役立ちます
- FTP の使用を回避し、ダッシュボード内ですべてのコードの追加と変更を管理できるようにします
価格:無料のプラグインを試すか、29 ドルのプレミアム バージョンを入手できます。
6.スクリプトとスタイル
最後に、Scripts n Styles を使用すると、カスタム CSS と JavaScript を個々の投稿、ページ、またはその他の登録済みカスタム投稿タイプに直接追加できます。 JavaScript の領域では、このプラグインにはいくつかの組み込みのセキュリティ機能も付属しています。 これは、WordPress サイトで多くの人が作業している場合に役立ちます。
主な特長:
- body タグと投稿コンテナにクラスを追加できます
- グローバル設定ページからサイト全体のスクリプトを作成できます
- TinyMCE フォーマット ドロップダウン メニューに新しいクラスを追加して、投稿とページを直接スタイリングします
- 特定のユーザー タイプに使用を制限するオプションを提供します
価格:このプラグインの使用に費用はかかりません。
WordPress に JavaScript を簡単に追加する (2 ステップ)
サイト全体に JavaScript を含める最も簡単な方法の 1 つは、プラグインを介してコードをヘッダーまたはフッターに挿入することです。 例としてヘッダーとフッターの挿入を使用して、これがどのように機能するかを見てみましょう。
ステップ 1: プラグインをインストールしてアクティブ化する
最初のステップは、Web サイトの[プラグイン]タブからプラグインを検索してインストールすることです。
完了すると、 Activateボタンが表示されます。 プラグインを有効にしてプロセスを完了するまで、プラグインは完全には機能しません。
ステップ 2: ヘッダーまたはフッターに JavaScript コードを挿入する
プラグインが有効になると、WordPress ダッシュボードの[設定]メニューの下に、 [ヘッダーとフッターの挿入]というラベルの付いた新しい項目が表示されます。
ここで、ヘッダー、フッター、またはその両方で実行するすべてのスクリプトを追加できます。 これには、テーマの微調整、サードパーティ API との統合、および CSS の変更が含まれます。
それはとても簡単です！ 完了したら変更を保存することを忘れないでください。プラグインは JavaScript コードを適切な場所に自動的にロードします。
WP Engine を使用した開発者の秘訣
JavaScript を使用して WordPress サイトに独自のカスタム変更を加えるのは、最初は戸惑うかもしれません。 ただし、この主要なプログラミング言語をうまく実装する方法がわかれば、テーマと統合を完全に制御できるようになります。
WordPress Web サイトの所有者または開発者として、質の高いリソースは仕事に大きな違いをもたらします。 WP Engine では、すべての予算に対応するプランとソリューションを用意しています。 私たちは最高の WordPress ソリューションを提供し、サイトを新たな限界に引き上げるお手伝いをするためにここにいます!