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

slide_wp_02

作業用音楽はロマサガ派ですこんにちは! @dutchisover です!

Slide wp 02

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

※ 前回の記事の続きのコードになるので、今回はループ内での表記になります。今回のコードを前回記事で指定していた記事の数だけ繰り返し取得します。

なので、ループしている前提でお願いします。
 ➝ 前回の記事はコチラです  トップページのスライドショー 記事を並べる1

まずは全体をくくる ” wrapper “ 。

wrapperのなかにスライドショーをするコンテンツを全て入れ込みます。
また、divのid、newIDWrapper のあとに をつけ、前回の連番をループするたびにIDのおしりに付けていくようにしています。

アイキャッチ画像を取得します。無ければダミー

has_post_thumbnail() でアイキャッチがあるかどうかを分岐しています。あれば the_post_thumbnail() で取得します。 アイキャッチが設定されていない投稿の場合は、imgタグで設定した画像を入れます。

タイトルを取ります。

既出ですが、 the_title() でタイトルを取得し、aタグのリンク先を the_permalink() で取得しています。これでタイトルとリンクを同時に取得することができます。

カテゴリーのIDを取得します。

まずはカテゴリーを取得し、各変数に カテゴリーの名前、 親カテゴリーのIDを取得し、親がない (つまり親カテゴリー自信の場合) は今のIDを入れ直します。

これにより、” WordPress ” 関連の記事は全て一緒くたに取得できるようになります。
親の ” WordPress ” というカテゴリーなら LogicAの場合はそのまま ID = 3 を取得します。
子の ” LogicAのテーマの組みかた ” というカテゴリーも、今後増えていくWordPress関連のカテゴリーは全て親カテゴリーの ID = 3 、つまりWordPressのカテゴリーに自動的に組み込まれます。

取得したIDによって表示を分岐させる。

先程取得したIDを単純にifで分岐させます。
LogicAでは一旦カテゴリーnameをHTMLで出力し、テキストを飛ばすやり方をしています。(あまりオススメではないようですが)

画像だけで表記してしまうと、SEOの面やCSSが利かない環境などでの表記に問題がある、とのことでやりましたが、やったあとからいろいろと問題もあることを知りました。今後もっとよい方法を勉強してなおしていこうと思います。

CSSスプライトも使ってます。

CssSprite

画像はCSSスプライトを使用し、基本一枚絵から取っています。LogicAでは他の場所でも、ページ内容で変動するコンテンツの画像は基本CSSスプライトで行なっています。

CssSprite 1

これにより、 1,容量を抑える  2,表示を速くする  3,imagesフォルダをゴチャゴチャにしない
などのメリットがあるとのこと。個人的には 3,のフォルダ内をゴチャゴチャさせないですみことが一番のメリットかな、と思いました。

投稿日時も取得しますよ。

ここは単純に、年、月、日 に分けてそれぞれの投稿日時を取得し、それを最後に繋いだだけです。ハイ。

記事内容の抜粋を取得(表示する文字数も変更可)

抜粋記事は このコードの 180 の部分で文字数を取得しています。ここを調整すると文字数の増減が可能です。

こちらの記事から参考にさせていただきました~(=^・ω・^)_。

WordPressの本文抜粋表示(the_excerpt)で文字数をコントロールする WordPress de SEO をやろう!

以上!スライドショー WordPress編でした。

次回は今回取得したコンテンツをjQueryで動かしてみたいと思います。
にわかワードプレッサーにより解説のため、間違い、曲解やその他もろもろもしなにかお気づきの点があればご教授願います。

最近の記事

Sponsored