WordPressとjQueryでアイキャッチをスライドショーさせるまとめ
当ブログのトップページでは、新着記事のアイキャッチ画像と タイトルや日付などなどを並べて、スライドショーにしております。
これを思いついたのはいいんですが、なにぶん初級ｊクエリストなもので、jQueryのいろはをやっと使えるようになってきた身分ではなかなかの難題だったわけで。
まずはWordPressで新着記事を横一列に並べる
トップページのスライドショーにはWordPressで新着記事のアイキャッチと、そのタイトルやら本文抜粋やらの情報が表示されるようになっています。そしてその新着記事をjQueryを使って自動でスライドして、さらに ” ＜ ” と ” ＞ ” のボタンをクリックすると左右にスライドするようにしてみました。
wrapperのなかにスライドショーをするコンテンツを全て入れ込みます。
また、divのid、newIDWrapper のあとに をつけ、前回の連番をループするたびにIDのおしりに付けていくようにしています。
まずは基本の、新着記事の取得と その記事を横に並べていく方法です。ただそのまま横に並べていくと、逆回転するときに記事が無い状態になってしまうので、左右に記事を振り分けるように設定しました。その際は 記事の数が奇数と偶数どちらでも対処できるようにある程度均等に配分するようにしました。
さあ、jQueryで動かしますよ バグも取りますよ
アニメーションの主な機能としては
1，ボタン ( ＜ 、＞ ) を押す度にスライド (clickイベント)
2，一定時間ごとにスライド (setIntervalイベント)
の2つになります。実際のアニメーションは、横に順番に並べていって、それをずらしているだけです。
本番では枠(id=”hogeCase”)に overflow: hideen をかけて隠しているだけです。
それだけです。
前回の トップページのスライドショー アニメーションさせる でアニメーションのしくみを書き残しました。
しかし動かすだけならある程度すぐにできたのですが、
ボタン連打でバグるという難関に、どうにも立ち往生してしまいました。
試行錯誤のうえ なんとかスライドすることに成功しましたが、致命的なバグも付いてきてしまいました。初級ｊクエリストには何をしていいのやらチンプンカンプンな状況で、ナポレオンが辞書に不可能を追加するレベルでした。
しかしそこはWeb業界。Google先生に聞いてみたらいろんな方々の珠玉の知識の塊、すばらしいブログの数々のおかげでなんとか乗り切ることができました！ありがとうございます！
仕上げにスライドショーを装飾してみました
今回はアイキャッチのお話しです。 当ブログをはじめるにあたって、アイキャッチは必ず導入したい！と心に決めてみたりしたのですが、毎回 Fireworksとかでタイトルを入れたり、色々作ったりしないといけなくなるなら たぶん続かないことはブログ始めるまえから自信たっぷりでした。
なので、タイトルとか日付とかカテゴリーやらを自動で配置させてしまおうかと。
そしてそれだけだと面白くないし、写真の色合いによっては字が見えづらくなると思い、白ぼかしをかけてみることにしました。
そのまんまアイキャッチの画像だけをならべてもなんだかなぁ、というのと、毎回アイキャッチ画像を丁寧にタイトルとか入れたり何だりしたくないなぁ
的なところで ある程度をオートマチック化させてみました。
MarsEdit仕様！アイキャッチの設定もオート化を
しかし、MarsEditからは直にアイキャッチを投稿する項目というものがないのですよ。カスタムフィールドやらカテゴリーやら何やらは記事とまとめて一気に投稿できてしまうスーパーアプリなのに、結局 一度Draft(下書き)にしてからブラウザで最終設定をしてからの投稿になってしまうわけです。
実は別ブログでMarsEdit愛用者なものですので、なんでもMarsEditで済ましたい派なんです。そして今回これだけいろいろと手を加え、愛着のあるアイキャッチの設定も、なんとかMarsEditだけで完了させてみたかったわけです。はい。
アイキャッチとスライドショーが大好きです！
WordPressの技術も自分の限界まで駆使して出来上がったこのブログのなかでも、このスライドショーには並々ならぬ想いが込められていたりもしたりします。このブログを起ち上げてから、まず真っ先に取り掛かったテーマであり、それがひと通りまとまったので書き記してみました。
もし、何か ご意見・指示・助言・訂正・苦言・罵倒 などなどなんでも結構です。頂ければ幸いな所存でございます。
@dutchisover
よろしくお願いします~(=^･ω･^)_｡
