javascript web技術 wordpress

slickの配置のしかた WordPress編

完全俺仕様備忘録です。WPに実装することを想定しております。

kenwheeler/slick: the last carousel you'll ever need
まずはともあれダウンロードします。

表示するHTMLを作成。

上のローダーと言うのは、全画像読み込むまで、ローディング画像を表示するというやつです。こちらの方が詳細が解説されており、勉強になりました。更にdata-lazyで画像表示しております。


各設定フォルダの作成

  1. テーマフォルダ最上位ディレクトリに「javascript_conponents」「css_conponents」を作ります。
  2. 「javascript_conponents」にダウンロードしたslickフォルダ一式を入れます。
  3. 「custom_conponents」に「slick」フォルダを作り、その中に「slick_css」「js」フォルダを作ります。

カスタマイズするCSSを作成する

cssフォルダには「slick_style.css」を作成します。そして以下のコードを書き、リンクさせます。面倒くさかったらfront.sassに書いてもいいんですけどね。

実行するjsを記述する

jsフォルダにはmain.jsを作成し、以下のコードを書きます。

実行ファイルなのでお好きな様にしてください。wpデフォルトのjqueryを使っているので、書き方が違っていますので注意。

function.phpで読み込む

function.phpを開いて以下を記述します。

以上です。

続きの記事はこちら

-javascript, web技術, wordpress