未分類

ワードプレスで記事のタイトル・コンテンツ・アイキャッチを一覧表示するコード

どうもこんにちは、クスハラです。

今回はワードプレスのコーディングをしていて、いい感じのコードが出来上がったので
自分でも忘れないようにメモっておこうと思います。

スポンサードサーチ

ワードプレスで記事を一覧表示する

phpは触ったことはあるものの、ほとんど初心者みたいなものです。
もともとのコードがあったので、そこから自分でネットを調べたりしつつループ部分に手を加えました。

ループ部分の外に<?php query?>を置くのがわからなくて挫折しかけてました\(^o^)/(そのくらい何も知らなかったけど頑張ったよ、、、)

できたコードはこんな感じ↓
クエリ設定をいじればすぐに使えます。

 

//取得するクエリ設定
<?php query_posts(‘posts_per_page=表示したい投稿数’); ?>
<?php query_posts(‘category_name=カテゴリスラッグ’); ?>

//ループ開始
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

//投稿の表示
<article class=”takasa”>
<h2 class=”cssクラス”><a href=”<?php the_permalink(); ?>”>
<?php echo the_title(); ?></a></h2>
<div class=”cssクラス”> <?php echo the_content(); ?> <?php

//アイキャッチの取得
if (has_post_thumbnail()){
$image_id = get_post_thumbnail_id();
$image = wp_get_attachment_image_src( $image_id, ‘medium’);
$permalink=get_permalink();
echo ‘<a href=”‘.$permalink.'”>’,'<img src=”‘.$image[0].'” alt=”‘.get_the_title().'”></a>’;

//記事本文の最初の画像を取得+アイキャッチも記事本文にも画像がない場合の処理
} else {?>
<a href=”<?php the_permalink(); ?>”><img src=”<?php echo catch_that_image(); ?>” alt=”<?php the_title(); ?>”></a>
<?php } ?>
<?php
if(mb_strlen($post->post_content, ‘UTF-8’)>100){
$content= mb_substr(strip_tags($post->post_content), 0, 100, ‘UTF-8′);
echo $content.’……’;
}else{
echo strip_tags($post->post_content);
}
?></div>
</article>

//ページ表示がないときの文言(おそらく使うことないかと)

<?php endwhile; else : ?>
<p><?php _e( ‘Sorry, no posts matched your criteria.’ ); ?></p>
<?php endif; ?>

<!–ページ送り–>
<div class=”pager”>
<?php if(function_exists(‘wp_pagenavi’)) wp_pagenavi(); ?>
</div>
</div>

 

CSSタグのところで装飾するといい感じに仕上がります。

固定ページに投稿を一覧で埋め込むのにピッタリかと。

それでは!

ABOUT ME
クスハラ ショウゴ
新卒5ヶ月で会社をやめてから、10ヶ月程度プー太郎。 そののち、ウェブ系企業でバイト→エンジニア転職を果たす。 実はTOEICほぼ満点だったりする。 ご連絡は shogo.kusuhara@gmail.com まで

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です