サポート » プラグイン » jQueryプラグインの使い方

  • 公式テーマ「nirvana」を使用中です。
    固定ページの1ページにjQueryプラグインの「Slippry」を使用したいと思います。
    初心者なのでいろいろ調べましたが、ページに表示されません。
    そこで質問があります。
    行ったことは
    子テーマとして「child」をつくりそのフォルダ内のcssフォルダにslippry.css、jsフォルダ内にslippry.jsを置きました。
    1.header.phpの<?php cryout_header_hook();wp_head(); ?>の上段に
    <?php wp_enqueue_style(‘plirray-css’, get_bloginfo(‘template_url’) . ‘/wp-content/themes/child/css/slippry.css’); ?>
    <?php wp_enqueue_script(‘plirray’, get_bloginfo(‘template_url’) . ‘/wp-content/themes/child/js/slippry.js’,array(jquery)); ?>
    と記入。
    2.固定ページにテキストエディタで
    <ul id=”pictures-demo”>
    <li title=”slippryデモキャプション1”>
    <img src=”/wp-content/uploads/2014/09/n_eye.png” alt=”デモ1″>

    <li title=”slippryデモキャプション2”>
    <img src=”/wp-content/uploads/2014/09/e_eye.png” alt=”デモ2″>

    <li title=”slippryデモキャプション3”>
    <img src=”/wp-content/uploads/2014/09/i_eye.png” alt=”デモ3″>

    <li title=”slippryデモキャプション4”>
    <img src=”/wp-content/uploads/2014/09/n_eye.png” alt=”デモ4″>
    <li>←実際は半角です
    <ul>←実際は半角です
    と記入。
    3.footer.phpに
    <script>
    jQuery(‘#pictures-demo’).slippry({
    // general elements & wrapper
    slippryWrapper: ‘<div class=”sy-box pictures-slider” />’, // 画像を囲む要素を指定できる

    // options
    adaptiveHeight: false, // 画像の高さが違う時に自動的にスクロールさせるか
    captions: false, // Position: overlay, below, custom, false | altキャプションの表示方法を指定できる

    // pager
    pager: false, // ページャーを表示するか

    // controls
    controls: false, // 画像左右のコントローラーを表示するか
    autoHover: false,

    // transitions
    transition: ‘kenburns’, // fade, horizontal, kenburns, false | 今回の肝!この指定で写真画像を動かす
    kenZoom: 140, // 拡大幅を指定できる
    speed: 3000 // 表示切り替え速度 ミリ秒
    });
    </script>
    を、<?php wp_footer(); ?>の上段に記入しました。

    固定ページには4枚の写真が縦に並んでいるだけです。
    どうしたら動くのでしょうか?
    こちらのエフェクトの「kenburns」が使いたいのです。
    宜しくお願いします。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • モデレーター gatespace

    (@gatespace)

    まずはブラウザのエラーログ(コンソールログ)などでjavascriptのエラーが出ていないか確認してください。
    エラーが出ていればそれを投稿してください。

    ※ソースコードを投稿するときはコード部分選択して「code」ボタン押してから投稿してください(逆クォートで囲んでくれます)

    ご教授ありがとうございます。
    エラーを確認しました。
    自分でも勉強しなければとおもい、いろいろ試したところ
    すべて解決しました。
    間違っていた点はcssとjsの置き場所が間違っていました。
    質問にある指定の方法ですと、親テーマのcssファイルやjsファイルを読み込みに行く記述でした。
    さらにscriptの記述はfooter.php内の</body>の直前に記述したらうまく行きました。
    超初心者なので変な質問ですみませんでした。
    jqueryプラグインは
    css、jsファイルの読み込み指定はheader.phpの<?php wp_head(); ?>の上段に。
    HTMLは固定ページに。
    scriptは<body>と</body>の間で<?php wp_footer(); ?>より下に。
    以上の3つが分かりました。jqueryプラグインをwordpressに設置のところで初心者にも分かりやすく書いてあるサイトを見つけられなかったので、解決できて良かったです。
    また困ったときは教えてください。ありがとうございました。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • トピック「jQueryプラグインの使い方」には新たに返信することはできません。