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

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

  • 世界一やさしいプラス WordPress 5.x 対応 (インプレスムック)
  • 世界一やさしいプラス WordPress 5.x 対応 (インプレスムック)

    インプレス

    専門的な難しい知識が無くても、カッコイイWebサイトが作れる「WordPress」を、大きな文字と画面でわかりやすく解説する「世界一やさしい」シリーズから発売! レンタルサーバーや独自ドメインの取得、WordPressのインストールから、手順の通りに進めるだけで、映えるWebサイトが作れてしまう♪ お店や会社の宣伝や集客に当たり前になっていますが、まだ無い人は今こそチャレンジするのも良いのでは? 基本が学べる本誌は入門書として最適です!

作者:

☆Wordpressでサイトをカスタマイズしていく上で有用な情報を配信しつつ、このサイトでも使用している【HABONE】テーマの制作と配布を行っています。
☆「ココナラ」でサイトカスタマイズのお手伝い、不具合の修復、サイト引っ越し代行なども行っています。

年齢:40代 趣味/園芸・ペット・卓球