佐賀のホームページ制作なら株式会社イン・ザ・コム

2014年版WordPressでjQueryを使う方法

WordPressでかっこいいjQueryを使うにはちょっとしたコツがあります。

jQueryが使えるようになると制作の幅がかなり広がるのでおすすめ。

jquery

FlexSlider2を使ってみよう

FlexSlider2(こちらから)はwooっていう海外の有名なサイトの無料jQueryプラグインです。

命令するコードも簡単なので腕試しとしてはちょうど良いです。

良くあるスライダーです

導入方法

プラグインをダウンロードします。

緑のボタンを押してください。

緑のボタンを押してください。

必要なものを取り出しましょう

flexslider.cssとjquery.flexslider-min.jsをとりだしましょう

flexslider.cssとjquery.flexslider-min.jsをとりだしましょう

header.phpにflexslider.cssとjquery.flexslider-min.jsを挿入しよう!

サーバーに【flexslider.cssとjquery.flexslider-min.js】をアップロードしてください。

そして、header.phpに

の前に書くようにしてください

<?php wp_head(); ?>の前に書くようにしてください

jQueryの書き方は普通の挿入方法ではないんで注目です。

<?php wp_enqueue_script('任意の名前', 'http://置いた場所', array('jquery'));?>

この公式を守ればOK

html側を入力しよう

画像はサイズを合わせて任意で挿入してください。

<div class="flexslider">
  <ul class="slides">
    <li>
      <img src="slide1.jpg" />
    </li>
    <li>
      <img src="slide2.jpg" />
    </li>
    <li>
      <img src="slide3.jpg" />
    </li>
    <li>
      <img src="slide4.jpg" />
    </li>
  </ul>
</div>

【最重要ポイント】命令文を書こう

基本的にjQueryプラグインを使うときは命令文も用意されてますので、コピペしましょう。
FlexSlider2の公式サイトにも命令文が用意されていますね。

で、ここで重要なのが命令文に書いてある$をjQueryと書き換えましょう。

方法はテキストエディタに命令文をコピペして、置換機能で「$」→「jQuery」に一括置換するんです。

<script type="text/javascript">
jQuery(window).load(function() {
  jQuery('.flexslider').flexslider({
    animation: "slide"
  });
});
</script>

でこれをfooter.phpの<?php wp_footer(); ?>より前に挿入してください。

こんなかんじで

こんなかんじで

完成がこちら

  • 梅茶漬け
  • 和牛ステーキ
  • 揚げ出し豆腐

※ここまで書いて気づいたんですが、flexslider専用のfontを入れること忘れていました^^;

このままでは

font入れ忘れました。。。

font入れ忘れました。。。

という風に変になりますので .flex-prevと.flex-nextをdisplay:none;にすることで妥協しました^^;

.flex-prev, .flex-next{
display:none !important;
}

この記事が気に入ったら
いいね!しよう

Twitter で

関連する記事

Copyright © IN THE COM .inc All rights recerved.