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

Slide wp 02

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

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

[php]

<?php
if( have_posts() ) : query_posts("posts_per_page=$manyPost");
while( have_posts() ) : the_post();

/*　ここに今回のコードが入ります。　*/

endwhile; endif;
?>

[/php]

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

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

[php highlight=”1,5″]

<div id="newIDWrapper<?php echo $newID; // 連番を振る ?>" class="newID" style="position: absolute; top: 0px; left: <?php echo $slideID; ?>px; width: 1000px;">

/*　ここに各パーツを入れます　*/

</div> <!– /#newIDWrapper –>

[/php]

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

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

[php highlight=”2,3,4,5,6,7,8″]

<div class="topImageMain">
<?php // アイキャッチ画像
if ( has_post_thumbnail()) {
the_post_thumbnail();
} else {
?> <img src="<?php bloginfo(‘template_url’); ?>/images/eyeCatch.jpg" alt="eyeCatch" width="1000" height="400" /> <?php
}
?>
</div> <!– /#topImageMain –>

[/php]

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

タイトルを取ります。

[php highlight=”2,3″]

[/php]

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

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

[php]

<?PHP
/* 現在のカテゴリ－の取得 */
$cat_now = get_the_category();
$cat_now = $cat_now[0];

/* カテゴリーの名前を取得 */
$catId = $cat_now->cat_name;

/*親カテゴリーのID取得*/
$parent_id = $cat_now->category_parent;

/* 親カテゴリーのときに記事IDを代入 */
if ($parent_id == 0 || $parent_id == 15){
$parent_id = $cat_now->cat_ID;
}
?>

[/php]

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

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

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

[php]

<?php
if ($parent_id == 3): /* カテゴリーがWordPress */
?>
<a href="<?php $nw = get_category_link(‘3’); echo $nw; ?>" style="text-indent: -9999px;"><?php echo $catId; ?></a></p>

<?php elseif ($parent_id == 4): /* カテゴリーがjQuery */ ?>
<a href="<?php $nw = get_category_link(‘4’); echo $nw; ?>" style="background-position-y: -42px; text-indent: -9999px;"><?php echo $catId; ?></a></p>

<?php elseif ($parent_id == 5): /* カテゴリーがHTML・CSS */ ?>
<a href="<?php $nw = get_category_link(‘5’); echo $nw; ?>" style="background-position-y: -84px; text-indent: -9999px;"><?php echo $catId; ?></a></p>

<?php elseif ($parent_id == 16): /* カテゴリーがブログ */?>
<a href="<?php $nw = get_category_link(‘5’); echo $nw; ?>" style="background-position-y: -999px;"><?php echo $catId; ?></a></p>

<?php endif; ?>

[/php]

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

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

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

CssSprite

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

CssSprite 1

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

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

[php]

<?php // 投稿時間
$Y_date = date(‘Y’, get_post_time() );
$M_date = date(‘n’, get_post_time() );
$D_date = date(‘j’, get_post_time() );
echo "$Y_date.$M_date.$D_date";
?>

[/php]

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