WordPressとjQueryでアイキャッチをスライドショーさせるまとめ

こんにちは! 初級jクエリストの @dutchisover です!

当ブログのトップページでは、新着記事のアイキャッチ画像と タイトルや日付などなどを並べて、スライドショーにしております。

これを思いついたのはいいんですが、なにぶん初級jクエリストなもので、jQueryのいろはをやっと使えるようになってきた身分ではなかなかの難題だったわけで。

まずはWordPressで新着記事を横一列に並べる

まずは基本の、新着記事の取得と その記事を横に並べていく方法です。ただそのまま横に並べていくと、逆回転するときに記事が無い状態になってしまうので、左右に記事を振り分けるように設定しました。その際は 記事の数が奇数と偶数どちらでも対処できるようにある程度均等に配分するようにしました。

さあ、jQueryで動かしますよ バグも取りますよ

試行錯誤のうえ なんとかスライドすることに成功しましたが、致命的なバグも付いてきてしまいました。初級jクエリストには何をしていいのやらチンプンカンプンな状況で、ナポレオンが辞書に不可能を追加するレベルでした。
しかしそこはWeb業界。Google先生に聞いてみたらいろんな方々の珠玉の知識の塊、すばらしいブログの数々のおかげでなんとか乗り切ることができました!ありがとうございます!

仕上げにスライドショーを装飾してみました

そのまんまアイキャッチの画像だけをならべてもなんだかなぁ、というのと、毎回アイキャッチ画像を丁寧にタイトルとか入れたり何だりしたくないなぁ
的なところで ある程度をオートマチック化させてみました。

MarsEdit仕様!アイキャッチの設定もオート化を

実は別ブログでMarsEdit愛用者なものですので、なんでもMarsEditで済ましたい派なんです。そして今回これだけいろいろと手を加え、愛着のあるアイキャッチの設定も、なんとかMarsEditだけで完了させてみたかったわけです。はい。

アイキャッチとスライドショーが大好きです!

WordPressの技術も自分の限界まで駆使して出来上がったこのブログのなかでも、このスライドショーには並々ならぬ想いが込められていたりもしたりします。このブログを起ち上げてから、まず真っ先に取り掛かったテーマであり、それがひと通りまとまったので書き記してみました。
もし、何か ご意見・指示・助言・訂正・苦言・罵倒 などなどなんでも結構です。頂ければ幸いな所存でございます。

@dutchisover

よろしくお願いします~(=^・ω・^)_。

Sponsored