いつまで経ってもわからない、WEBってやつは・・・(´・ω・`)

【WordPress】横幅いっぱい使った風にできるwidesliderをWPに入れるメモ(*´∀`*)

どうも、ヨーグルトって美味しいですね、と再確認したゆでです(ΦωΦ)。

さて、WordPressのスライドショーのプラグインはいっぱい出ているのですが、プラグイン化になっていない、前の画像と次の画像をちょっと出して、画面横いっぱい使った風に表示できるスライダー「wideslider」を手動でWordPressに入れる場合のメモです。

wideslider_img01

↑こんな感じになるステキなやつです(*´ω`*)<ありがとうございます!
widesliderサイトにある順番を追って説明します。

HTMLを書く

上記を表示したい場所に書きますが、注意点があります。

  • 横幅が指定されている枠の外に書くこと

横幅いっぱいつかいますからね(*´∀`*)

<li>を増やしていくつでも入れられます。(ゆではクライアントが更新できるように読み込み専用の固定ページに上記を書いて表示側で呼び出すいつものやり方にしてます)。

固定ページ読み込み

cssを読み込ませる

サイトに書かれているCSSを追加します。(ゆではめんどいので外部cssにして読み込ませてます(ΦωΦ)+

注意点があります。

  • 「slider_prev」「slider_next」の画像の参照先を変える

jsを読み込ませる

サイトに書かれているjsを追加します。(ゆではめんどいので外部jsにして読み込ませて以下略)

注意点があります。

  • jQueryのバージョンは1.9.3以降
  • 他のjQueryとコンクリフト(衝突)しないように『$(』の部分を『jQuery(』に変更
  • 設定を変更する(ベースの画像の幅とか高さとかautoPlayどうするとか)

※外部ファイルにする場合は

として保存する。