Webの記録

WordPress 新着記事のタイトルを表示する方法。

投稿日:2012年1月13日 更新日:

この記事は約 6 分で読めます。

lwordpress_logo_w200

WordPressのテンプレートタグ、いろいろあって奥が深いです。

今回は、トップページやサイドバーに「新着記事のタイトル」を数件表示したりする時に使いたいなぁと思って、4通りの書き方を試してみました♪

多分、他にも記述方法がいくつもあると思いますが・・・とりあえず4通りをメモしてみます。

(2012.7.25追記)「WordPress 新着記事に「New!」表示をつけたい時」を書きました。



※1つ目だけデザインが全く違います。デザイン部分はCSSで後で整えるというコトでココでは見た目の違いはムシしてください。


記述前に確認。

2つ目と4つ目は、ダッシュボード→「設定」→「表示設定」で「1ページに表示する最大投稿数」で設定されている件数が表示されています。
他は記述内で5件表示と設定しているので、5件表示しています。

見た目で違いが分るようにする為、記述した件数とWordpressで設定した件数を変えています。

表示設定の画面

1つ目の方法

ループの中で日付けとタイトルを書きだしてます。

新着記事のタイトルを表示する方法1

						<h3 class="post_title">新着情報</h3>
							<dl class="feed">

								<?php $posts = get_posts('numberposts=5&order=desc');
								foreach($posts as $post): ?>
									<dt>
									<span class="day">
										<?php echo date("Y年m月d日", strtotime($post->post_date)); ?>
									</span></dt>
									<dd>
									<a href="<?php the_permalink(); ?>" id="post-<?php the_ID(); ?>">
										<?php the_title(); ?>
									</a>
									</dd>

									<?php endforeach; ?>

								</dl>


2つ目の方法

ループの中で日付けとタイトルを書きだしてます。

新着記事のタイトルを表示する方法2

						<h3 class="post_title">新着情報</h3>
							<ul class="feed">
								<?php if(have_posts()): while(have_posts()): the_post(); ?>
									<li>
										<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
										<span>(<?php echo get_the_date(); ?>)</span>
									</li>
								<?php endwhile; endif; ?>
							</ul>


3つ目の方法

ループを使わず、テンプレートタグwp_get_archivesを使ってみました。
参考:WordPressCodex日本語版

新着記事のタイトルを表示する方法3

						<h3 class="post_title">新着情報</h3>
							<ul class="feed">
								<?php wp_get_archives('type=postbypost&limit=5&format=html'); ?>
							</ul>


4つ目の方法

ループを使わず、テンプレートタグwp_get_archivesを使ってみました。
参考:WordPressCodex日本語版

新着記事のタイトルを表示する方法4

						<h3 class="post_title">新着情報</h3>
							<ul class="feed">
							<?php
								query_posts(
									Array(
										'post_type' => 'post',
										'orderby' => 'date',
										'order' => 'DESC'
								              )
							       	          );
								if (have_posts()) : while (have_posts()) : the_post();
							?>
 							<li>
							<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a><br>
 							</li>
							<?php
								endwhile; endif;
								wp_reset_query();
							?>
							</ul>


(2012.7.25追記)「WordPress 新着記事に「New!」表示をつけたい時」もよかったら一緒に見てください。

-Webの記録
-, ,

執筆者:


comment

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

This blog is kept spam free by WP-SpamFree.

関連記事

no image

Webサイト移転の時に自動的にジャンプする方法

この記事は約 1 分で読めます。 たまたまいじっていたサイトでサーバーを移転する事になりました。 そんなワケで、ちょこっとメモ。 今回、独自ドメインをとっていなかった為、URLが変わります。 その場合 …

no image

WordPress カスタムフィールドを使ってみる

この記事は約 1 分で読めます。 WordPressの便利な機能のひとつ「カスタムフィールド」に今回チャレンジします♪ 「カスタムフィールド」は、記事本文とは別に項目を独自で作って表示するものです。

no image

WordPressのオベンキョウ③ アクセス解析ツール導入

この記事は約 1 分で読めます。 「Google Analytics」を先日始めてみて・・・。 少しずつ内容が見えてきました。 でも、まだまだ・・・長期で見ていかないといけないかなぁと思ってます。 今 …

no image

ナビゲーションボタンのコーディングについて考えてみた

この記事は約 1 分で読めます。 ナビゲーションボタンのコーディングをする時に、どんな風にコーディングしていますか? 対応するブラウザとかによっても変わると思うのですが・・・。 今回、ちょっとナビゲー …

no image

【jQuery】PCとiPhone,iPad,Androidを判別してページを切り替え(リダイレクト)したいとき

この記事は約 2 分で読めます。 以前はPCだけを意識してWebサイトを制作してきました。 しかし、最近はだんたんとPC以外(iPhone,iPad,Android)のタブレット系端末のアクセスが増え …