Box系の仕様から、スライドして見れるようにカスタマイズしました。使用するjQueryプラグインは「FlexSlider2」。WordPressプラグインのように頻繁な更新もなく、レスポンシブ対応なので導入してみました。今回はそのカスタマイズの備忘録。簡単なメモになります。スポンサーリンク目次FlexSlider2を導入するとどうなるの?FlexSlider2をダウンロードjQuery本体を読み込んでWordPressでjQueryを動かすjQuery.flexslider-min.jsとflexslider.cssを読み込むflexslider.cssを編集FlexSliderを動かすscriptを記述するwc_single_item.phpを編集ひとことFlexSlider2を導入するとどうなるの?画像をクリックすると拡大表示します。導入後の見た目は、大きな画像がひとつとその下に小さいサムネイルが4つ並ぶかたち。サムネイルをクリック、またはメイン画像の両端の矢印をクリックするとメインの画像がスライドします。FlexSlider2をダウンロードjQueryプラグイン「FlexSlider2」は、ショッピングカートのプラグイン「wooCommerce」で有名なwooThemes社のサイトhttp://flexslider.woothemes.com/からダウンロードできます。ダウンロードしたファイルを解凍するとたくさんのファイルがありますが、使用するのは・jQuery.flexslider-min.js・flexslider.css・fontsフォルダになります。これらを子テーマのフォルダに入れます。Basicの子テーマについての詳細はこちらをご覧ください。子テーマの作り方jQuery本体を読み込んでWordPressでjQueryを動かすWordPress内に標準でjQueryのライブラリが用意されていますが、初期設定ではjQueryは読み込みされませんので、<head>~</head>内に、ライブラリを読み込むための関数を追加する必要があります。?>の前に追加します。?>;追加したら読み込まれているかを確認します。実際のページのソースで、下記の一行があるかどうかを確認してください。src='http://sample.com/wp-includes/js/jquery/jquery.js?ver=1.4.2'></script>jQuery.flexslider-min.jsとflexslider.cssを読み込む先ほど設置したFlexSlider2のjQuery.flexslider-min.jsとflexslider.cssのファイルを読み込む命令を追加します。is_single()の条件分岐で、商品ページのみ読み込まれるようにしています。'my_scripts');追加したら、css、jsがきちんと読み込まれるパスになっているか確認します。記述上は相対パスにしていますが、ブラウザにURLのhttp://sample.com/wp-content/themes/●テーマ名/css/flexslider.cssを入力してcssファイル内容が表示されるか確認します。jsファイルも同様にチェックします。今の段階ではデフォルトと設置位置が違うので、cssファイルからfontsフォルダの画像を読み込めるように設定を編集します。flexslider.cssファイルの@font-faceの箇所。fontsファイルの読み込みパスを下記のように変えておきます。normal;}FlexSliderを動かすscriptを記述する下記のFlexSlider2を動かすscriptをheader.phpファイル内</head>の直前に記述します。商品詳細ページのテンプレートwc_single_item.phpファイルをカスタマイズしていきます。id=”img-box”>内の記述を変更します。-->を↓以下と差し替えます。-->ひとこと以上がFlexSlider2の導入の方法になります。個人的なメモになるので、やってみると実際と異なる箇所もあると思いますが、参考程度にお役に立てればと思います。最近は扱うことが多くなり、人気が高まっているのを感じるカラーミーショップ。カスタマイズカラーミーショップの別ページにリンクされているレビュー一覧を商品詳細ページに表示する方法についてです。コメントをキャンセルメールアドレスが公開されることはありません。名前・コメント・画像認証が必須となっています。検索:Profile管理人:モフェ音楽、パソコン、サイト好き。