更新記事を一覧表示させる方法（wordpress）

2016/4/7 カスタマイズ

更新記事一覧表示

この記事は2016年4月7日に更新しました。
情報が古くなっている可能性があるのでご注意ください。

この記事の読了時間は約3分です。

wordpressブログにて更新した記事一覧を表示させる方法を調べた。

新着記事一覧、人気記事一覧はWordPress Popular Postsを利用すれば簡単ですが、更新した記事を一覧表示することは難しい。

プラグインを使わない方法もあるようだけど上手くいかず。

ウィジェットとして更新記事を表示させることができたのでメモ。

目次(クリックでワープ)

1 プラグインを使わない方法
- 1.1 表示画面
- 1.2 コピペしたが表示されなかったコード
2 更新記事表示をウィジェットとして追加する方法

プラグインを使わない方法

参考WordPressの投稿記事を、最新の更新時間順に表示したい | WordPress（ワードプレス）とプラグイン

このサイトにwordpressの関数？を利用したHTMLコードが紹介されている。

3番目に紹介されているコードをコピペして、試してみたが「更新」と表示されるだけで上手く表示されなかった。記事を更新しても、更新した記事は表示されなかった。

表示画面

ブログに表示されたのは「更新」のみ。記事は表示されず。

コピペしたが表示されなかったコード

1

2

3

4

5

6

7

8

<h3>更新履歴</h3>

<ul>

<?php query_posts($query_string .'&orderby=modified&posts_per_page=5'); ?>

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<li><?php echo get_the_modified_date(); ?> 更新<br /><a href="<?php the_permalink(); ?>"><?php the_title();?></a></li>

<?php endwhile; endif; ?>

<?php wp_reset_query(); ?>

</ul>

simplicityとの相性が悪いのかな。

更新記事表示をウィジェットとして追加する方法

外観＞ウィジェットに「更新記事表示ウィジェット」を追加することができる。

その方法を解説しているのが

参考ウィジェットの作り方：新着・更新記事ウィジェットの機能追加 – ブログ工房

導入手順

上記サイトの「機能を追加したコード」にかかれてあるコードをコピーする
子テーマの「function.php」に追加する。
Simplicityであれば「Simplicity child: テーマのための関数 (functions.php)」がそれ。
すると外観＞ウィジェットに「僕のウィジェット」が追加されている。
そのウィジェット設定をして、表示したい場所に置けばOK

推奨カスタマイズ

コードのことはよくわかっていないので間違っているかも。

僕には必要だったカスタマイズ。

「僕のウィジェット」を「更新記事表示ウィジェット」に変える

表示されるウィジェット名をわかりやすくする。

<li style=”clear:both;”>～</li> を<div style=”clear:both;”>~</div>に

そのままコードをコピペしてサイドバーに表示させるなら問題はない。

が、関連記事下に表示させるとリンクの・（黒マル）が表示されてしまう。

そこで＜li＞タグを取り除いた。

<br style=”clear:both;”>だとモバイル表示したときにsimplicityのテンプレートでbrを無視するためかレイアウトが崩れた。

なので<div style=”clear:both;”>を使った。

サムネイルサイズ75×75を100×100に

CTRL＋F　で　75と検索すると2件ヒットするので、そこを100×100に変えた。

サイドバーに表示させるなら75のままでOK

margin-bottom:13pxを23pxに、margin-right:13pxを追加

記事の上下の空白を広く、文字の画像回りこみ開始位置を少し右にする。

希望としては関連記事ウィジェットと同じように表示させたいけど、僕の知識じゃ無理なので、できるだけ似るようにカスタマイズした（文法的に正しいかは不明）

更新記事を一覧表示した様子

個別記事の下に表示される関連記事の下に表示してみました。

2016年4月7日スクリーンショット。

この記事をブログ等で紹介する際は下のHTMLコードをコピペしてお使い下さい。
泣いて喜びます。

<a href="http://49hack.jp/howto-display-update-articles/">更新記事を一覧表示させる方法（wordpress）</a>

コード, 更新記事, コピペ, 解決方法 @49hackJp

コメントをどうぞコメントをキャンセル

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。