トップページのスライドショー 記事を並べる1

2012.4.16 WordPress align

こんにちは @dutchisover です!

Align

今回は自分への覚え書きと、「オレ ガンバッタ!」 を残しておきたいので、このブログを作成したときに使用したコードやらを書き起こしてみます。

アイキャッチを並べてみる

トップページのスライドショーにはWordPressで新着記事のアイキャッチと、そのタイトルやら本文抜粋やらの情報が表示されるようになっています。そしてその新着記事をjQueryを使って自動でスライドして、さらに ” < ” と ” > ” のボタンをクリックすると左右にスライドするようにしてみました。

まずはWordPress側での、記事の取得とスライドするために横並べしておくやりかたを説明します。

記事を並べるコード

まずは新着記事の取得です。 $manyPost の中に自動で取得したい新着記事の数を入れます。あとあとこの数値を入れ替えるだけで残りの処理を自動でやってくれるようにしてます。

query_post を使い、新着記事をループで取ります。そのときに先ほど指定した $manyPost の数値分だけ記事を取得します。

$newID には0からスタートしてループするたびに1ずつ増えていく数値を入れます。これを記事のIDのおしりに付けて、IDを新着の順で連番を付けて管理します。

記事の初期位置の設定

$slideID では記事の初期位置を設定します。

アイキャッチ初期値

①の太枠のエリアが、実際に表示されるエリアになります。それ以外は overflow: hidden で隠します。

①の太枠に position: relative をかけて、ここを基準にします。
それ以外の要素を position: absolute でそれぞれの位置へ配置しています。
単純に連番でつけたID分を横にずらしているだけです。

アイキャッチ初期値 2

最新記事の①の記事は、初期の位置が枠と同じ位置、つまり top: 0px left: 0px です。そして$newIDでつけた連番が 1 なので、現在のIDから1を引いた数値に1000(PX)をかけています。

記事の半分を反対へまわす

そして実際は端までいったらループしてエンドレスにスライドし続けられるように、半分以上の記事は ①の記事よりも左へまわします。

$round で記事の表示数を半分に割って四捨五入させます。つまり、5記事であれば、3記事目まではそのまま右へ並べていって、4記事目以降は左へまわすようにします。

今日はおわり!

いったんこれでループして記事を配置する準備は整いました。次では実際にループ内でのコンテンツの配置をまとめてみようと思います。

最近の記事

Sponsored