Feb 2, 2014

WordPressをコーポレートサイトで利用する場合、新着情報はTOPページの要素として不可欠ですよね。こんな感じ▼




これをそのまま再現するPHPとCSSのコードをご紹介します。

テンプレートファイルにPHPコードを貼り付け

index.phpやhome.phpなど、新着情報を表示したいテンプレートファイルの任意の場所に以下のコードを貼り付けます。
<?php
global $post; $lastposts = get_posts('numberposts=5&cat=0'); //表示件数とカテゴリID
foreach($lastposts as $post) :
setup_postdata($post);
$post_title = $post->post_title;
if(mb_strlen($post_title)>40) { //記事タイトルの文字数
	$post_title = mb_substr($post_title,0,40).'...';
}
?>
<dl class="info_sample">
<dt><?php echo date("Y.m.d  ", strtotime($post->post_date)); ?></dt>
<dd>
<?php
      $days=30; //Newをつける日数
      $today=date_i18n('U'); $entry=get_the_time('U');
      $diff1=date('U',($today - $entry))/86400;
      if ($days > $diff1){
        echo'<font color="ff0000">New!</font>';
         }
?>
<a href="<?php echo get_permalink( get_the_ID() ); ?>" id="post-<?php the_ID(); ?>"> <?php echo $post_title; ?></a></dd>
</dl>
<?php endforeach; ?>

  • 表示件数を指定できます
  • 表示するカテゴリを指定できます(カテゴリIDの調べ方
  • 各記事タイトルの文字数を指定できます
  • Newマークを表示する期間を指定できます

  • スタイルシートで整形

    style.cssなど、任意のCSSファイルに以下のコードを追加します。.info_sampleというクラス名はお好きな文字列に改変してください(上記PHPコード内のクラス名も揃えること)。
    .info_sample {
    	width: 480px;
    	line-height: 150%;
    	font-size: 11px;
    	clear: left;
    }
    
    .info_sample dt {
    	width: 70px;
    	background: #eaeaea;
    	padding-left: 5px;
    	margin: 0 5px 5px 0;
    	float: left;
    	font-weight: bold;
    }
    
    .info_sample dd {
    	width: 393px;
    	background: #e;
    	padding-left: 5px;
    	float: left;
    	color: #42b5d2;
    }
    
    .info_sample dd a {
    	color: #1a83a1;
    	text-decoration: none;
    }
    

    エディタ(記事編集画面)に直接PHPコードを貼る方法

    TOPページをエディタだけで編集していてテンプレートファイルなんて触ったこともない、という場合もままあるかと思います。そんな時の禁じ手として、エディタ内でのPHPコード使用を可能にするプラグインがあります。

    Exec-PHP

    セキュリティ面で問題が指摘されているのでビジネスユースは有り得ないですが、プライベートブログとかならまぁいいかなと。



    今回は以下の記事を参考にさせていただきました:

    WordPress・Premire・Aftereffects備忘録 : WordPress query_postsで新着情報にNEWを付ける。

    

    Leave a Reply

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

    サイト内検索
    • Author

    • Twitter

      Follow @jay0926 (535 followers)
    • Facebook