MENU
  • ホーム
  • プログラミング
  • ワードプレス
    • プラグインプラグイン関連記事
    • 賢威賢威のカスタマイズ
    • CSSCSSの関連記事
  • サイト情報
    • プライバシーポリシー
  • ツール
    • メルエディター
    • フリマスパイダー – 疾風
    • フリマスパイダー
    • -ポイ活くんα-
  • お問い合わせ
あらゆるモノにHackする、探究者の読み物。
Let's Hack Tech
  • ホーム
  • プログラミング
  • ワードプレス
    • プラグインプラグイン関連記事
    • 賢威賢威のカスタマイズ
    • CSSCSSの関連記事
  • サイト情報
    • プライバシーポリシー
  • ツール
    • メルエディター
    • フリマスパイダー – 疾風
    • フリマスパイダー
    • -ポイ活くんα-
  • お問い合わせ
Let's Hack Tech
  • ホーム
  • プログラミング
  • ワードプレス
    • プラグインプラグイン関連記事
    • 賢威賢威のカスタマイズ
    • CSSCSSの関連記事
  • サイト情報
    • プライバシーポリシー
  • ツール
    • メルエディター
    • フリマスパイダー – 疾風
    • フリマスパイダー
    • -ポイ活くんα-
  • お問い合わせ
  1. ホーム
  2. プログラミング
  3. 言語別
  4. JavaScript
  5. ワードプレスでJQueryを動かすための記述方法

ワードプレスでJQueryを動かすための記述方法

2019 8/02
JavaScript ワードプレス
2019-06-05 2019-08-02
JQuery

ワードプレス上でJQueryを動かしたいけど、どんな記述の仕方をすればいいのかわからない。

そんな方向けの記事です。

目次

そもそもJQueryって?

JQueryというのは、簡単にサイト内で動的な動き/アニメーションができるようにJavaScriptで書かれたライブラリのことです。

入力を受け付けて、その結果を返したり、特定の位置までスクロールジャンプさせたりと、色々便利な機能を、非常に簡素な記述で実装できます。

世界的にも非常に普及しており、本家のJavaScriptを書くタイミングが思いつかないレベルで便利な、Webサイトのフロントエンドの事実上の標準言語。

実はワードプレスは標準でJQueryを読み込んでいる

ワードプレスは標準の状態でvar.1系のJQueryを読み込んでいます。

「var3系が使いたい!」などの特別な要望がない場合はそのまま標準読み込みのJQueryを使うことができます。

ワードプレスのJQueryは独自仕様

ワードプレスのJQueryにはコンフリクト回避の機能が備わっていて、CMSを使わず自前で作ったサイトなどで動くJQueryと少し仕様が異なります。

ワードプレス内ではいつもの「$」を使ってJQueryを記述しようとすると、上手く動かない場合があります。(テーマなどによるかもしれませんが)

ワードプレス標準のJQueryを使う記述法

//以下の記述でカプセル化
jQuery(function ($) {
	//この中ではいつも通りの「$」が使えます。以下テスト
	console.log($('h1').text()); //ページのh1タグを取得してコンソールに出力
});

この記述方法を使えば、いつも通りの「$」を使って記述することが可能です。

基本は<head>~</head>内への記述です。

ワードプレスの標準JQueryの読み込み位置は<head>タグ内の

<?php wp_head(); ?>

の位置で読み込まれますので、任意のJQueryコードはそれより下の位置に記述する必要があります。

それでも上手くJQueryが動かない

プラグインなどの関係で、標準JQuery読み込み位置が変わっていたり、高速化処理のために[async / defer]属性が振られていたりする場合、上手く動かないパターンも考えられます。

その場合は以下の記述でほぼ動きます。

//さっきの記述を更にwindow.onloadで囲む
window.onload = function() {
    jQuery(function ($) {
        //この中ではいつも通りの「$」が使えます。以下テスト
        console.log($('h1').text()); //ページのh1タグを取得してコンソールに出力
    });
}

window.onload は 「全てのDOMの準備が終わり、描画が終わった後に処理してね」という命令です。

つまり、確実に標準のJQueryが読み込まれた後で自作JQueryを読み込むことが可能になります。

JQueryによる動きを付ける部分がファーストビュー内にある場合は、一瞬改変前のDOMが出力されてしまいますので、注意が必要です。

まとめ

生のJavaScriptでも出来なくはないですが、ソースコードが冗長になるので、あまり僕は好きじゃありません。

ワードプレスのサイトで会員登録をさせたい場合など、ユーザーの入力を受け付ける場合はJQueryは非常に便利です。

リンク
JavaScript ワードプレス
JavaScript JQuery ワードプレス
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする コメントをキャンセル

email confirm*

post date*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

シンプル美と機能性を両立させた、国内最高峰のWordPressテーマ『SWELL』
人気記事
  • IQテストいくつか受けてみました
    ネット上で信憑性がありそうなIQテスト、5種類まとめて受けた結果…
  • hayate
    メルカリの商品を世界最速で購入するためだけのアラートツール
  • 【Python】BeautifulSoupの使い方・基本メソッド一覧|スクレイピング
  • Pythonファイルのexe化
    【悲報】PyInstallerさん、300MBのexeファイルを吐き出すようになる
  • Amazon Echo アレクサのコマンドまとめ
    AmazonEchoの使い方とできる事、アレクサへの指示コマンド一覧
最近の投稿
  • PyQt5 QListWidget の item削除でtextBoxのフォーカスが奪われる2023-03-05
  • WordPressからのメールが届かない時の調査と解決法2023-02-27
  • 保護中: メルカリアラートツール「疾風」v22022-12-01
  • 保護中: メルカリアラートツール【疾風】カスタマイズオプション一覧2021-03-22
  • 保護中: メルカリアラートツール【疾風】インストール手順2021-03-22
目次
目次