dl,dt,ddでカテゴリ付きの横並びメニューをコーティングしてみた。&WordPressでも使えるコードあり。

オリジナルデザインで、サイトを作っている時にかなり高い確率でデザインする「お知らせ」欄。

日付と見出しタイトルを横並びにして、最新5件だけを表示するアレですがあわよくばカテゴリも付けたい時。
結構使うことが多いので「あれ、何のサイトで使ったかな？」とならないために自分用にメモしておきます。

HTML側

2016/01/01カテゴリ名
記事のタイトルを入力します。
2016/01/01カテゴリ名
記事のタイトルを入力します。
2016/01/01カテゴリ名
記事のタイトルを入力します。
2016/01/01カテゴリ名
記事のタイトルを入力します。
2016/01/01カテゴリ名
記事のタイトルを入力します。

CSS側

.news_dl dd {

	width: 60%;

	margin-left:35%;

	border-bottom: dotted 1px #e2e2e2;

	padding: 5px 0px;

}

.news_dl dt {

	float: left;

	clear: both;

	width: 35%;

	border-bottom: dotted 1px #e2e2e2;

	padding: 5px 0px;

}

.news_dl span{

	background-color: #e2e2e2;

	text-align: center;

	padding: 1px 7px;

	margin-left: 10px;

}

そして、実際にこちらが表示した内容。

2016/01/01カテゴリ名

記事のタイトルを入力します。

2016/01/01カテゴリ名

記事のタイトルを入力します。

2016/01/01カテゴリ名

記事のタイトルを入力します。

2016/01/01カテゴリ名

記事のタイトルを入力します。

2016/01/01カテゴリ名

記事のタイトルを入力します。

んで、更にWordpressでテンプレートファイルに埋め込む場合がこちら。

$args = array(

'posts_per_page'   => 10,

'orderby'          => 'post_date',

'order'            => 'DESC',

'post_status'      => 'publish',

'suppress_filters' => true );

$post_list = get_posts($args);

if($posts):foreach($post_list as $post):

	$getid =  get_the_ID();

	$permalink = get_permalink($getid);

	$cat =  get_the_category($getid);

	$cat = $cat[0];

?>


name; ?>
 post_title), 0, 30); ?>

表示件数を変えたい場合はposts_per_pageのパラメーターを10件から変えて、タイトルの文字を途中で切らない or 切る文字数を変えたい場合はmb_substr(strip_tags($post-> post_title), 0, 30)の30の文字を変えましょう。

このコードをテンプレートファイルに埋め込んで、CSS読みこめば、ほら簡単に投稿ページとカテゴリ＆日付が横並びになったでしょ！

ではでは、今日もいいコーティングを。

最新投稿された記事はいかがですか？

• 南野どうなる?2015年冬から4大リーグにいったザルツブルクの選手をリストアップ！
• 毎日25分のオンライン中国語レッスンサイトまとめ。結構サイトによって金額と時間が違ってます。
• 中国語で覚えておきたい接続詞まとめ。
• [サッカーまとめ]2007-2016に欧州のクラブチームに移籍して日本人選手リスト。