【レスポンシブ対応】新着情報欄にカスタム投稿の記事を表示する方法

 2014/10/21

インフォメーション

コーポレートサイトでよく見るトップページにある新着情報一覧が載っている表。企業ブログとは別にカスタム投稿タイプで新着情報の記事を作った場合、そのカスタム投稿の記事を一覧表に反映させる方法をご紹介します。一覧表はレスポンシブに対応、STINGER5の説明もあります。

スポンサーリンク

レスポンシブの新着情報一覧表

目指すのはこんな感じです。記事を公開してから何日間はNewと表示されます。Newは設定の期間を過ぎると自動的に非表示となります。日付の隣の項目をクリックするとカスタム投稿の記事に飛ぶようにできています。

PCでの表示イメージ

新着情報PCでの表示

スマホでの表示

新着情報スマホでの表示

レスポンシブの表をつくる方法は以前書いたエントリーでご紹介しています。

プラグインなしでカスタム投稿の記事を表示する

テーマファイルにphpコードをコピペ

index.phpやhome.phpに以下のコードをコピペします。

<table  class="info">
<?php
$myposts = get_posts('numberposts=5&post_type=information'); //表示数&カスタム投稿名
foreach($myposts as $post) :
?><tr>
<th><?php echo date("Y年m月d日", strtotime($post->post_date)); ?></th>
<td><?php
$days=14; //Newをつける日数
$today=date_i18n('U'); $entry=get_the_time('U');
$diff1=date('U',($today - $entry))/86400;
if ($days > $diff1){
echo'<span style="color:#ff0000;">New!</span>';
}
?>
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></td></tr><?php endforeach; ?>
</table>

コードの黄色でマークアップされている行はご自身のサイトに合わせて書き換えていただく必要があります。

3行目でnumberpostsは一覧表に表示する件数、post_type=の後にカスタム投稿名を、8行目に$days=●●; は【New】を表示し続ける日数です。

Memo

カスタム投稿を作らず、投稿ページのカテゴリを表示したいという場合は get_posts(‘numberposts=5&cat=0′)としてcat=の後にカテゴリIDを入力するとOKです!

STINGER5の場合

home.phpではブログの新着記事一覧が表示される設定になっています。phpを理解できる方はこのファイルをごにょごにょっとやるだけだと思うのですが、そうでない方は固定ページをトップページに設定し、この新着情報はpage.phpファイルに置くといいのではないかと思います。以下手順です。

  1. トップページ用の固定ページを作る
  2. 固定ページをトップページに設定する
    【設定】→【表示設定】→【フロントページの表示】を上で作った固定ページを表示
  3. page.phpファイルに分岐条件を置き、上のコードを記述する
<h1 class="entry-title"><?php the_title(); //タイトル ?></h1>
<!--is_front_pageの分岐条件を追記 -->
<?php if(is_front_page()) : ?>
<!--ココに上記コードを記述 -->
<?php else : ?>
<?php endif ?>
<!--is_front_pageの分岐条件ここまで -->
<?php the_content(); //本文 ?>

スタイルシートに記述する

/*STINGER5エディタのテーブルのスタイル解除*/
.info td,.info th  {
border:none;
background-color:#FFF;
}
main .post .info{
border:none;
}
/*!STINGER5エディタのテーブルのスタイル解除ここまで*/	
.info{
width:95%;
margin:2em auto;
border:#f48881 2px solid !important;/*!importantはSTINGER5の時のみ記述*/
text-align:left;
}
.info tr{
border-bottom:#f48881 1px dotted;
}
.info tr:last-child{
border:none
}
.info th{
padding:2px 0 0 10px;
display:block;
font-size:80%;
font-weight:normal;
}
.info td{
padding:2px 10px;
display:block;
}	
.info tr td a{
text-decoration:none;
}
/*media Queries PCサイズ
----------------------------------------------------*/
@media only screen and (min-width: 780px) {
.info{
width:100%
margin:5px auto;
font-size:90%;
border:#f48881 1.5px solid;   
}
.info tr th{
width:30%;   
padding:5px 10px;
border-right:#f48881 1px solid;
background-color:#ffe7e5;
font-size:100%;
text-align:center;
display:table-cell;
}
.info tr td{
width:70%;   
padding:5px 10px;
display:table-cell;
}
.info tr td a{
text-decoration:none;
}
}

※STINGER5に必要な記述を一緒に記載しているので、利用していない方は削除して使ってください。

Stinger5では

/*media Queries PCサイズより上の部分はstyle.cssの/*レイアウト スマートフォンよりもに、エディタ用記載してよりに記述してください。

これでレスポンシブに対応している新着情報の表が完成です!

まとめ

今回ご紹介した一覧表はtable-cellを使っているためIE8以下は無視してますのでご了承ください。

それではちゅんこ@shufulifeがお送りしましたー

WordPress

Please comment!

  

Messege




現在トラックバックはありません。