[Ha-Basic] How to display "Recently renewed articles" in the theme sidebar widget

【ha-Basic】テーマのサイドバーウィジェットに「最近リニューアルした記事」を表示する方法

公開日:2019年8月16日 カスタマイズ
Knowledge Base Wordpress ha-Basic テーマ

テーマカスタマイズって面白い!!特にオリジナルテーマだと構造も分かっているのでやりがいがありますね。

そんなのを目指したテーマ【ha-Basic】を使っていただいている方向けのカスタマイズ記事になります。

【ha-Basic】テーマに限らずほとんどのテーマでは「新着記事」をサイドバーへ表示するためのウィジェットって備わってますよね?ない場合にはプラグインなどで追加したりして表示されることもあるかも知れません。

もちろん「新着記事」をアナウンスすることは大事だと思います。が、本当に知らせたいのは過去に書いた解説記事などをリニューアルしたときの「この記事更新しましたよ~~」というのを表示する「更新記事の一覧」なのではないでしょうか(私だけかな)?

ちょうど→に表示されている「新着&リニューアル記事」というウィジェットを追加する方法の紹介です(何かの事情で移動してたり削除してたりしたらごめんなさい・・・)

【ha-Basic】なら比較的簡単に実装できますので、「更新記事一覧」をサイドバーウィジェットへ追加する方法を紹介していきます。残念ながらある機能をテーマへ追加しないと他のテーマでは使えませんので、他のテーマを使っている方はご自身で研究くださいませ。

【ha-Basic】テーマのサイドバーウィジェットに「最近リニューアルした記事」を表示する手順

「最近リニューアルした記事」を表示するコード(ファイル)を作る

テキストエディタを開き、以下のコードを貼り付けます。

<?php
// ① ↓ 今現在のページ位置を取得
$paged = (int) get_query_var('paged');
$args = array(
// ② get_option('posts_per_page') ← で管理画面で設定した、記事一覧で表示するページ数を取得
//'posts_per_page' => get_option('posts_per_page'),
//記事数を指定する
	'posts_per_page' => 5,
// ③ (int) get_query_var('paged') ← で取得した、$pagedを挿入
	'paged' => $paged,
	'orderby' => 'post_modified',
	'order' => 'DESC',
	'post_type' => array('post'),
	'post_status' => 'publish'
	);
	$the_query = new WP_Query($args);
	?>
<div id="news-list-wg">
		<?php
		// 記事一覧のループスタート
			 if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
		<!– ここにループを回して表示させるhtmlを –>
	<div class="news-card-wg">
		<a href="<?php the_permalink(); ?>">
			<div class="news-thumb-wg">
				<?php if( has_post_thumbnail() ): ?>
					<?php the_post_thumbnail(array(75,75)); ?>
					<?php else: ?>
					<img src="<?php echo get_template_directory_uri(); ?>/images/no-image.gif" alt="no-img"/>
				<?php endif; ?>
			</div>
			<div class="news-content-wg">
				<p class="ncwg-title"><?php the_title(); ?></p>
				<div class="clear-element-wg"></div><!– 空要素 –>
			</div>
		</a>    	</div>
			<?php endwhile; endif;
			// 記事一覧のループ終わり
				wp_reset_postdata(); ?>
			<!– entry-list –>
</div>

ファイル名を「news-list-widget」拡張子を「.php」形式にして保存します。
※このとき文字コードが「UTF-8(BOMなし)」になっているかを必ず確認ください

文字コードについて詳しく書いた記事がありますので

を参照ください。

テキストウィジェットからコードを呼び出す

テキストウィジェットを追加し、以下のショートコードを貼り付けて保存します

[myphp file='news-list-widget']
※ウィジェットタイトルは適当なものにしてください

これでサイドバーの指定位置に「更新した記事の一覧」が表示されるようになります
※【ha-Basic】テーマでは記事の公開と同時に「公開日」と「更新日」がセットされますので、更新記事と新着記事が混在して表示されます。

私のように書きっぱなしにする記事だけでなく、比較的頻繁に更新日の変更を伴う記事の更新をするサイトでは結構重宝する表示機能かと思いますので、そうしたサイトの場合には新着記事ウィジェットを外し、こちらのウィジェットだけにしてもいいのではないかと思います。

デザインの調整

上の手順で表示はされましたがデザインが変ですね。以下のコードをテーマの「a-insert-css.css」末尾へ追加するときれいに表示されるようになります。

/************* 最近リニューアルした記事一覧(news-list-widget.php) ***************/
.news-content-wg {display: block;padding:2px;min-height: 80px;}
#news-list-wg {width: 100%;}
.news-thumb-wg {float: left;}
.news-card-wg a {text-decoration: none;color:#333;}
.news-card-wg :hover {background-color: #eee;}
p.ncwg-title {margin-top: 0;margin-left: 80px;margin-bottom: 5px;}

CSSを編集したら、キャッシュのクリアをお忘れなく!!クリアしないと一定期間デザインが反映されません。

キャッシュのクリア?どうやるの?

キーボードからブラウザのスーパーリロード(キャッシュクリア)をする方法(Windows用)

CSSの編集後すぐに変更が適用されないときに以下の方法で一時保存されている情報をクリアします

  • Google Chrome/Microsoft Internet Exproler/Mozilla Firefox
  • ctrlを押しながらf5
  • Microsoft EDGE
  • F5を押す、またはctrlを押しながらR
  • Apple Safari
  • ctrlを押しながらR
ひまあーと(管理人)
  • 記事の作者: ひまあーと(管理人)

  • ☆最後までお読みいただきありがとうございました。記事作者のひまあーとです。
    ☆Wordpressでサイトをカスタマイズしていく上で有用な情報を配信しつつ、「ココナラ」でサイトカスタマイズのお手伝い、不具合の修復、サイト引っ越し代行などをさせていただいております。
    ☆Wordpressネタが多いですが、趣味の「園芸」「卓球」などの情報や日々の出来事などもどんどん増やしていきますのでよろしくお願いいたします。


いつでもご相談・サイトカスタマイズの依頼を受け付けています

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。

※一度もココナラを使ったことがない方はココナラへの無料登録が必要です。こちらから登録後、上のリンクをクリックする、またはココナラトップページから「ひまあーと」を検索してお問い合わせください。


【スポンサーリンク】


記事の拡散にご協力をお願いします

閲覧いただきありがとうございました。役に立つ情報でしたら是非SNSでシェアをお願いします

関連情報