Warning: count(): Parameter must be an array or an object that implements Countable in /home/zonodesign/zono-design.com/public_html/wp-includes/post-template.php on line 284
Advanced Custom Fields

Advanced Custom Fieldsを使ってトップページにスライダーを設置

  • このエントリーをはてなブックマークに追加

手描きで失礼します。
こんな感じのスライダーをAdvanced Custom Fieldsを設置する作る方法その1です。

Advanced Custom Fields Proの繰り返しフィールドを使います。
スライドさせる内容の数が決まっていたら、繰り返しフィールド使わなくてもいいと思いますが、勝手に増やしたり減らしたし出来る方が便利かなと思うので繰り返しフィールドを使ったやり方にしました。

1.Advanced Custom Fieldsの設定

下記のようなかんじで繰り返しフィールドを使うように登録します。

2.トップページ用のphpファイルに下記のコードを書きます。

トップページ用のphpファイルのスライダーを載せたい場所に下記のコードを書きます。

3.カルーセルプラグイン「slick」を導入

1.slickをダウンロード

slickはここからダウンロードしてください。

2.ファイルをアップする

どこに入れてもいいと思いますが、私はthemes/twentyseventeen/assetsの中にslickというフォルダごと入れました。

3.色々設定する

下記のサイトを参考にSlickを導入しました。
わかりやすく書いてあってとても助かりました。

WordPressにカルーセルプラグイン「slick」を導入する備忘録

しかし色々変更した点もあるので書いておきます。

■ functions.phpへ書く

■ index.jsにコードを書く

上記の4で読み込むコードはindex.jsに他のコードと一緒に書きました。

■ cssをheader.phpに追加する

header.phpの<?php wp_head(); ?>の上あたりにslickのテーマのcssを追加する
これをしないと矢印のアイコンがでなかったんですよね〜。。

ACFの関連を使ってスライドショーを設置

  • このエントリーをはてなブックマークに追加

wordpressサイト制作ならzono design千葉

新着情報やブログを自社で更新したいというお客様のために、世界基準のCMSであるWordPressの導入をオススメしています。
WordPressをカスタマイズすれば、制作実績、物件情報、施工実績など更新が頻繁にあるページでもご自身で更新できて便利です。

wordpressを使用したホームページ制作でお困りの方はお気軽にご相談下さい。

お問い合わせはこちら