レンタルサーバにファイルをアップロードしたりせずにスクリプト(jQuery プラグイン)を動かす

adsgadgads

レンタルサーバ等にインストールして使うタイプの WordPress では、プラグインを使う以外にも、レンタルサーバに js ファイルをアップロードするなどして、jQuery プラグインも使うことができるようなのですが、レンタルサーバにファイルをアップロードしたりするのがなんか嫌だな、と思っている方もいると思うので、その方法について検討してみました。ちなみに私自身は、「functions.php をいじるのが怖くて嫌だ派」です。

教材としては、コリス さんのところで使っている、ボタンなどをプルプル震えさせるスクリプト「jQuery Vibrate」を使ってみました。

adsgagads
[JS]ページ上のさまざまな要素をぷるぷる振動させるスクリプト -jQuery Vibrate | コリス

まず、以下のリンクをクリック。

adfadaf

すると、プルプル震わせるためのスクリプトがダウンロードできるサイトに飛びます。

afdgasdgsd
jQuery Vibrate Plugin

以下のリンクをクリックすると、

adgadads

私の mac の safari の場合、以下のようにファイルが開きますので、

adfadfas

全部、指定してコピー。

sdfgadfgasfgd

これをプラグイン「Enhancing JavaScript」の欄内にそのまま貼り付けます。

adsgadgads

このプラグインは、WordPress の検索機能から探し出して、インストールすることができます。

sfgadgad

インストールすると、「外観」のところに「拡張 JavaScript」というメニューが追加されるので、そこから任意のスクリプトを登録できるようになります。

Safari

私自身も含めて、JavaScript になじみのない人にとっては、おそらく、ここからがひとつの壁です。

結論は以下のページに書いてありますので、とりあえず、そこの部分をそのままコピーして、

sfgsdfgsd
WordPressでjQueryが動かないという人へ – WordPressにイメージスライダーを付けてみよう

プラグイン「Enhancing JavaScript」の欄内の下に貼り付けます。

adsgasga

スクリプト「jQuery Vibrate Plugin」のサイトに戻り、以下の部分をコピーし、

rsgsdgfddsf
jQuery Vibrate Plugin

中身の部分を差し替えます。

adgagasd

記事「WordPressでjQueryが動かないという人へ – WordPressにイメージスライダーを付けてみよう」で説明してあるとおりに、「$」を「jQuery」に修正し、

image

「変更を保存」ボタンをクリック。

adgfasfasd

以上で、下準備は完了です。

次に記事作成。

例えば、以下のような記述を投稿記事に貼って、公開すると、

<a href="#" class="vibrate">ぷるぷる</a>

<hr style="visibility:hidden;clear:both;" />

<span class="button icon search pill vibrate">search</span>

ブログ上では以下のような感じで表示されます。カーソルを当てたときにプルプル震えたら成功です。なお、文字のリンクはボタンの設置の仕方がよくわかっていない人でも、とりあえず、プルプルさせることが成功したかどうかを確認できる用ですので、プルプルするときに表示が乱れていますが、これはもともとボタン用に作られたものだからであって不具合ではないものと思われます。

なお、ここの例で使っているボタンの設置方法については、以前、以下の記事を作成しました。

 

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。