WP 新着一覧をプラグインなしでつける方法(サムネイル写真、New、記事抜粋も付くよ!)

WP 新着一覧をプラグインなしでつける方法(サムネイル写真、New、記事抜粋も付くよ!)

●まず、表示させたい固定ページなどのphpファイルに以下を記載

<dl class=”feed”>
<?php
$postslist = get_posts(‘numberposts=6&orderby=post_date&order=DESC’);
foreach ($postslist as $post) : setup_postdata($post);
?>
<dd>
<div class=”day”><?php echo date(“Y年m月d日”, strtotime($post->post_date)); ?>

<div class=”new_iconBox”>
<?php
$days = 7; //Newを表示させたい期間の日数
$today = date_i18n(‘U’);
$entry = get_the_time(‘U’);
$kiji = date(‘U’,($today – $entry)) / 86400 ;
if( $days > $kiji ){
echo ‘<span class=”new_icon”>New!</span>’;
}
?>
</div>

</div>
<div class=”newbox”>
<div class=”new_main”>
<div class=”new_title”>
<a href=”<?php the_permalink(); ?>” id=”post-<?php the_ID(); ?>”>
<?php if (strlen($post->post_title) > 40) {echo mb_substr(the_title($before = ”, $after = ”, FALSE), 0, 25) . ‘…’; } else {the_title();} ?>
</a>
</div><!– new_title –>
<div class=”bassui”><?php echo mb_substr(get_the_excerpt(),0, 60);?></div>
</div><!– new_main –>
<div class=”newimg”><a href=”<?php the_permalink(); ?>” id=”post-<?php the_ID(); ?>”><img src=”<?php echo catch_that_image(); ?>” alt=”” height=”60px” /></a></div>
</div><!– newbox –>
</dd>
<?php endforeach; ?>
</dl>

 

 

●CSSに以下を記載

/* 新着情報一覧プラグインを使わないもの */
.feed dd{
width:660px;
overflow:hidden;
padding:5px 0;
border-bottom:dotted 1px #ccc;
}
.day{
overflow:hidden;
width:120px;
float:left;
margin-right:20px;
}
.newbox{
width:520px;
overflow:hidden;
float:left;
}
.new_main{
width:430px;
float:left;
margin-right:20px;
}
.new_title{
width:450px;
font-size:14px;
}
.new_title a{
color:#4392E0;
text-decoration:none;
}
.new_title a:hover{
color:#8CBCEC;
text-decoration:underline;
}

.bassui{
font-size:12px;
line-height:16px;
margin-top:5px;
}
.newimg{
width:70px;
overflow:hidden;
float:right;
}
.new_icon{
background:#ba0000;
color:#fff;
padding:1px 35px;
text-align:center;
}
.new_iconBox{
margin-top:10px;
}
/* 新着情報一覧プラグインを使わないもの */

 

 

●functions.phpに以下を追記する。

// 新着情報一覧に画像取得
function catch_that_image() {
global $post, $posts;
$first_img = ”;
ob_start();
ob_end_clean();
$output = preg_match_all(‘/<img.+src=[\'”]([^\'”]+)[\'”].*>/i’, $post->post_content, $matches);
$first_img = $matches [1] [0];

if(empty($first_img)){ //Defines a default image
$first_img = “images/no_image.jpg”;
}
return $first_img;
}

ポチッ☆とクリックお願いします!
↓ ↓ ↓

  • にほんブログ村 IT技術ブログ ホームページ・サイト制作支援へ

コメントは受け付けていません。

サブコンテンツ

TOP