FIKA.Blog

WordPressBootstrapjQueryについて

Bootstrapでホームページを作りWordPressに載せ替えたんですが、プラグインがうまく動かない問題が発生しました。

WordPressのプラグインについて

外部のjQueryプラグインについて

jQueryの読み込みが被ってWordPressのプラグインが動かない


CDNの仕組み

WordPressでは、<head>内に表記する<?php wp_head(); ?>によってjQueryが自動で読み込まれます
そもそも直接サーバーにダウンロードしたり、リンクを貼る必要がないということです。

Bootstrapのテンプレートでは、下の方にjQueryをCDN(コンテンツを高速で配信するためのネットワーク)で読み込んでいます。

<!-- Optional JavaScript -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

※「jquery-3.3.1.slim.min.js」:3.3.1というのがjQueryのバージョンで、slim.min.はファイルの容量が小さい、というような意味です。

「WordPressが自動でjQueryを読み込んでいる」というのを知らず、読み込みが被っていたようです。
このリンクを削除して、動作を確かめてみます。

読み込まれるライブラリーとバージョンの違い

Bootstrapの他、GoogleなどのライブラリーからもCDNを利用して読み込むことが可能です。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

jQueryを利用したコンテンツを増やすたびに、気づかずに色々なライブラリー、バージョンのjQuery本体のリンクを読み込んでしまうことがあります。
最初、v1.9.0やv3.1.1などの違いがわからず、リンクが被ってしまっていました。(バージョンの系列によって対応ブラウザが違うようです。)※ All Versions jQuery

  • jQuery Core 3.0.0 〜
  • jQuery Core 2.0.0 〜 2.2.4
  • jQuery Core 1.0.0 〜 1.12.4(IE8以下に対応)
  • jQuery Migrate(過去のプログラムや機能を利用するためのプラグイン)

解決方法

Bootstrapや外部ライブラリーからのリンクを削除し、WordPressが読み込むjQueryに一本化することで、プラグインが正常に動くようになりました。
WordPressのプラグインがうまく動かないという方は、余分なjQuery本体のリンクがないか確かめてみてください。

外部のjQueryプラグインが動かないとき

WordPressにjQueryを読み込ませない

古いバージョンのプラグインが動かない時は、<head>内の読み込みを停止することで自分でjQueryを追加できるようになります。
header.phpの<?php wp_head(); ?>の前に次のコードを追加します。

<!-- jqueryの読み込みを停止 -->
<?php wp_deregister_script('jquery'); ?>
<?php wp_head(); ?>

Google Chromeのディベロッパーツールでチェック

Google Chromeの設定ボタン / その他のツール / ディベロッパーツールでエラーをチェックできます。
エラー内容が赤文字で表示されます。右側はファイル名とエラーが発生している行数です。

Googleディベロッパーツール

PHP、JavaScriptについてはもう少し勉強して、また記事にします。

参考書籍

Web制作の現場で使うjQueryデザイン入門[改訂新版] (Web Professional Books)

jQueryの基本が一通り理解できます。レイアウトや内容がわかりやすいので入門編としてとても良いと思います。

« »
Scroll Up