福島・埼玉のWEBサイト制作・ホームページ制作会社 キャスパーウゥブデザイン
MENU

Kyasper Note

この記事はNOTE(メモ)として作成された単一記事です。
2013年12月25日

WordPress Plugin Advanced Custom Fields Gallery Field width FlexSlider Carousel

WordPressのカスタムフィールドを便利につかえるようにしてくれるプラグインAdvanced Custom Fields(ACF)の「Gallery(有料)」を使って、レスポンシブ対応のスライダーFlexSliderのCurouselを実装する手順です。

Gallery Fieldは、複数画像を追加・編集・削除・並び替えなどができて、スライダーなどを管理画面から設定できるようになるのでクライアントワークなどには重宝します。

これと、FlexSliderを組み合わせればクライアントが管理画面からスライダーを設定できるようになります。
FlexSliderはシンプルで軽量なスライダーですが、今回はそのオプションである カルーセルタイプ を実装してみます。

  1. FlexSliderのダウンロード
    FlexSliderを http://flexslider.woothemes.com/ からダウンロード、解凍します。
  2. 必要ファイルのアップロード
    必要なファイルは、「jquery.flexslider.js」「flexslider.css」です。解凍フォルダ「flexslider」にこの2つだけを残しフォルダごとテーマフォルダにアップロードします。
  3. アップロードしたファイルのリンク付け
    〜間に以下のコードを記述します。
  4. Advanced Custom FieldsとそのアドオンであるGallery Field(有料)のインストール
    アドオンのインストールも通常のインストールと同じです。
    Advanced Custom Fields:http://www.advancedcustomfields.com/
    Gallery Field:http://www.advancedcustomfields.com/add-ons/gallery-field/
  5. Advanced Custom FieldsとGallery Fieldの設定(ここの説明は省きます)
  6. スライダーを表示したい場所に以下のコードを記述します
カテゴリー: