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

WordPressサイトでRSSフィードボタンを設置してみた♪

この記事は約 1 分で読めます。 何気にWebサイトで、オレンジ色のRSSフィードボタンを見掛けます。 Webサイトの新着情報配信をする為のものなんですが、私のサイトでは今までボタンを設置してませんで …

no image

easySlider1.7.jsを使ってFlashのようなスライドショーにチャレンジ♪

この記事は約 1 分で読めます。「easySlider1.7.js」を使って、数枚の画像のスライドショーを作りたいと思います。 自動で画像がスライドしますが、見ている人の意思で前後の画像へ戻したり進め …

no image

透明画像を置いて画像をコピーガードする。

この記事は約 2 分で読めます。 今回は画像の上に透明画像を置く事で元の画像を右クリックで保存出来ないようにするテクニックです。 まずは、デモ画面を見て頂きましょうか・・・。 【2016.6.2】一部 …

エックスサーバーの無料独自SSL「Let’s Encrypt」をWordPressに設定して、カンタンhttps対応

この記事は約 1 分で読めます。 2016年6月30日から、「エックスサーバー」の全プランにおいて、「Let’s Encrypt」によるドメイン認証型SSL証明書の無料発行および設定機能の …

no image

WordPressログイン画面にオリジナルロゴを表示させる

この記事は約 1 分で読めます。 パッとひと目でそのサイトだと分かりやすくしたいなぁと思って、ログイン画面のロゴをオリジナルに変更してみました。 WordPressのバージョンによって、ロゴ部分のサイ …