パソコン画像
WordPress・ホームページ

WordPressに独自jQueryの組込み方法(初心者向け)

ワードプレスロゴの画像

ホームページ作成の依頼があり、ホーム画面のスライドショーを自作したのですが、イマイチだったので、WordPressにslickと言うプラグインを導入してスライドショーを表示させたいと思いましたが、実走させるのに一苦労しました。
以前ブログでも書きましたが、当店はホームページ作成は発展途上です。
しかしお客様にはそんなことは関係ありませんから頑張りますよ!

■目次■ 文字をクリックするとジャンプします。

初めに

初心者向けとしていますが、記事を読むにあたり初級程度のWordPress、jQueryの知識は必要です。ですから基本的なWordPress、jQuery等の説明は致しません。詳しく知りたい方はお調べ下さい。

実走させるのに一苦労と書きましたが、初歩的な事から始めると簡単に設置できました。今回はslick自身の設置方法の紹介ではありません。
※slickについても詳しく知りたい方はお調べ下さい。
簡単なjQueryの命令文を活用します。
自分で作成したjQueryの命令文はWordPressを使用しないホームページでは比較的実走は容易ですが、WordPressで実走させるには簡単な事から始めた方がわかりやすかったです。

一体何がややこしいのか
jQueryはWordPressのものを使用しなければいけない。
※必ずではないですよ、WordPressのものを使用しない方法もあります。今回はWordPressのものを使用します。
命令文をWordPressのjQuery用に書き換えしなければいけない。

あと環境ですが、プロトタイプ作成ですのでローカル環境です。
ちなみにローカル環境で使用しているアプリは「Local」です。
以前は「XAMPP」を使用していましたが、圧倒的に「Local」の方が簡単です。

Htmlと命令文

HTML文は以下を使用します。
「front-page.php」テンプレート<body>内に以下を記述
<div class=”test”>
Test jQuery
</div>

命令文は以下を使用します。
jQuery(function () {
jQuery(‘.test’).on(‘mouseover’, function(){
jQuery(‘.test’).css(‘color’, ‘#ebc000’);
});
});
クラスtestで指定している文字Test jQueryをdivのブロック上(文字の上等)にマウスが重なった時に文字色をebc000に変更すると言う内容です。
今回の様にWordPresのjQueryを使用する場合「$」は「jQuery」と書き換えが必要です。
WordPressではテンプレートに<script>を記述し、直接スクリプトを読み込む事は推奨されていませんので外部ファイル「main.js」を作成してそこに記述し読み込みます。

JQueryとmain.jsの読込みを記述

WordPressの作成中テーマ内フォルダにjsフォルダを作成して、その内に「main.js」ファイルを格納します。

読み込むための記述を「header.php」テンプレートの<head>内「<?php wp_head(); ?>」の上に以下を記述します。

<?php
wp_enqueue_script(‘jquery’);
wp_enqueue_script(‘st-main’, get_template_directory_uri() . ‘/js/main.js’);
?>

WordPressのjQueryは基本的には自動で読込みするらしいのですが(「<?php wp_head(); ?>」の記述は必須
wp_enqueue_script(‘jquery’);の制御文は必須でした。削除すると動作しませんでした。

wp_enqueue_script(‘st-main’, get_template_directory_uri() . ‘/js/main.js’);で命令文の書かれた「main.js」を読み込みます。

マウスボインタをかざすと色が指定色に変化しました。

今回はテスト動作なので、読込みの記述は「header.php」に書き込みましたが、本体は「functions.php」に記述して一元管理するのが望ましいです。

slickを実走させる場合は上部の読込み記述をslickを動作させるファイル
「slick.css」
「slick-theme.css」
「slick.min.js」
これらのファイルの読込みを記述します。

slickはこれだけでは動作しません念の為に
時間があればslickについてもいつか記事にしようと思います。

当店は出張サポート専門です。
作業についての詳細を教えてほしい等、記事内容のお問い合わせ受付はしておりません。
そのような場合は出張サポートをご依頼下さい。
またこの記事を参考に、ご自分で作業された場合での損害や障害が発生しても当店は一切責任は負いませんのでご了承下さい。
この記事の内容は投稿日時点での内容です。時期によっては仕様などの変更により、この記事のとおりではない場合もございます。