MENU
HOME
TOP
WhiteTiger Ver 1.2.1に更新しました。確認よろしくお願いします。

プラグインなし!アイキャッチ付き最近の更新記事ウィジェットを追加する方法

以前にサムネイル画像付きのカテゴリー別新着ウィジェットの追加方法を紹介しました。

サムネイル付きカテゴリ別新着ウィジェットをプラグインなしで追加する方法
サムネイル付きカテゴリ別新着ウィジェットをプラグインなしで追加する方法
うっかり忘れておりましたが、今回のテーマの更新で気付きました。 サイドバーにカテゴリ別新着一覧はいるよ。というのは回遊率向上の話。まぁ、これはGoogleやらYahoo!で検索してくるユーザー目線から言うとですが。 普通は興味あるジャンルのキーワードで検索します。ですよね??ということは単純に考えれば、今閲覧されている投稿は興味のあるジャンルでございます。だからそのジャンルの新着をサイドで教えてあげるんですよ。 以前に、柿の種ばっかり書いてるブログを見たけど そのサイドバーの投稿一覧が全部柿の種で震えた。でもまぁ、好きな人にはたまらんぴよ!!それはそれで正解。 前置きなっが!!ピッ!とパッ!とコピペするだけにしましょう。 完成イメージ とりあえず、完成イメージはこんな感じです。 functions.phpの編集 ウィジェットの追加 とくに難しいことはしておりませんのでコピペするだけでよいです。ただ関数なので確実に全部コピペしてくださいね。 class MyWidgetRecentPost extends WP_Widget { function __construct() { parent::__construct( 'recent_entries', '*カテゴリ別新着記事*', array('description' => 'カテゴリ別の新着記事一覧を表示するウィジェット※フロントやアーカイブスページは非表示') ); }function widget($args, $instance) { extract( $args ); if($instance['title'] != ''){ $title = apply_filters('widget_title', $instance['title']); } echo $before_widget; $cat = get_the_category(); $cat = $cat[0]; if ( is_single() ): if( $title ){ echo $before_title . $title . $after_title; }else { echo '<h3 class="widget-title">カテゴリ別新着記事</h3>'; }?><ul> <?php query_posts($query_string . '&category_name='.$cat->slug.'&posts_per_page='.$instance['limit'].'&offset=0');?> <?php if(have_posts()):while(have_posts()):the_post(); ?> <li class="clr"> <a class="clr" href="<?php the_permalink(); ?>"> <?php if (has_post_thumbnail()): ?> <figure class="eyecatch"> <?php the_post_thumbnail( 'bycategory-thum' ); ?> </figure> <?php else: ?> <figure class="eyecatch noimg"> <img src="<?php echo get_template_directory_uri(); ?>/images/no-image.jpg" width="130" height="80" alt="NO_IMAGE" /> </figure> <?php endif; ?> <div class="widget-new-entry-title"> <?php the_title(); ?> <span class="cat-data"> <?php if( has_category() ): ?> <?php $postcat=get_the_category(); echo $postcat[0]->name; ?> <?php endif; ?> </span> <span class="widget-new-entry-date"> <time class="entry-date datepublished" itemprop="datePublished" datetime="<?php the_time('c') ;?>"> <?php the_time('Y年n月j日') ;?> </time> </span> </div> </a> </li> <?php endwhile; endif; ?> <?php endif; ?> </ul><?phpecho $after_widget;}function update($new_instance, $old_instance) { $instance = $old_instance; $instance['title'] = strip_tags($new_instance['title']); $instance['limit'] = is_numeric($new_instance['limit']) ? $new_instance['limit'] : 5; $instances['othertitle'] = strip_tags($new_instance['othertitle']); return $instance;}function form( $instance ) { ?> <p> <label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title:'); ?></label> <input type="text" class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" value="<?php echo esc_attr( $instance['title'] ); ?>"> </p> <p> <label for="<?php echo $this->get_field_id('limit'); ?>"><?php _e('表示する投稿数:'); ?></label> <input type="number" min="1" max="10" id="<?php echo $this->get_field_id('limit'); ?>" name="<?php echo $this->get_field_name('limit'); ?>" value="<?php echo esc_attr( $instance['limit'] ); ?>" size="3"> </p><?php}}add_action('widgets_init', create_function('', 'return register_widget("MyWidgetRecentPost");')); さてこれでウィジェットが追加されていればOKです。 アイキャッチの追加 これで終わりでもいいですがスタイルがあたってないので、グッシャ!グシャ!!になります。functionsの編集中なので、ついでに横長タイプのアイキャッチを生成します。 add_image_size( 'bycategory-thum', 130, 80, true ); ※それ相当(上記の比率、多少大きくてもOK)の画像比の物があればそれを使用してもらっても大丈夫です。(130x80で切り抜くので 新たに生成するよりか既存に似てるアイキャッチを使った方がサーバーなりには良いかと。 で、以下のようにアイキャッチがセットされていいなかった場合に呼び出すNO_IMAGEな画像を配置してください。 <?php else: ?><figure class="eyecatch noimg"> <img src="<?php echo get_template_directory_uri(); ?>/images/no-image.jpg" width="130" height="80" alt="NO_IMAGE" /></figure> 画像の置き場所は/テーマ/images/no-image.jpg です。 画像は僕が使っているのでも良かったら保存して使ってください。 右クリックして「名前を付けて保存」でいけます。 スタイルを整える では仕上げにstyle.cssに以下のコードをコピペしてください。 .widget_recent_entries ul{ padding: 0; list-style: none;}.widget_recent_entries ul li{ position: relative;}.widget_recent_entries ul li a{ text-decoration: none; padding: 10px 5px; display: block; color: #23282d;}figure.eyecatch img { float: left; margin-right: 1.6%; object-fit: cover; width: 128px; height: 80px;}.widget-new-entry-title { font-size: 13px; margin-left: 130px; line-height: 1.6; font-weight: bold;}.widget_recent_entries .cat-data { position: absolute; top: 11px; left: 6px; background: #3f51b591; color: #fff; padding: 0 2px; font-size: 10px;}.widget-new-entry-date { position: absolute; bottom: 0; right: 0; color: #808080; font-size: 80%;}.clr { display: block; clear: both;}.clr::after { height: 0; clear: both; font-size: 0; display: block; content: "";} テーマによってはスタイルが崩れるかもしれませんが、適宜変更してください。 動作の確認 間違いなく記述できていたら、投稿ページで同じカテゴリの新着が表示されます。 それではまた!(`・ω・´)ゞ
ただこれだけだとまだダメだす。アナリティクス等の解析ツールの結果から過去記事にアクセスがあったら、それはリライトしますよね??

過去記事をリライトしたらアクセスアップ!なんて言う投稿をよく見かけます。

ですが、どうでしょう?検索からの流入は確かに上がるはずです(その時以上にライティング力が上がっていれば)

んで、今回の問題はコレだす。

過去記事が最近の投稿に埋もれて何処にあるのか分からないぜっ!!

なので、最近更新した投稿一覧を表示して欲しいと思っての紹介です。

完成イメージ

とりあえず、完成形のイメージ画像です。

functions.phpの編集

さてさて、前置きが長かったのでぺぺっ!っとコピペで済むようにします。

ウィジェットの追加

まず、以下のコードをfunctions.phpに追記しておくれやす。

/*  最近の更新記事ウィジェット
---------------------------------------------*/
class widget_modify_update extends WP_Widget {
/*コンストラクタ*/
function __construct() {
parent::__construct(
'widget_modify_update',
'*最近の更新記事ウィジェット*',
array( 'description' => '最近更新した記事一覧を表示' )
);
}
/*ウィジェット追加画面でのカスタマイズ欄の追加*/
function form($instance) {
?>
<p>
<label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('タイトル:'); ?></label>
<input type="text" class="widefat" id="<?php echo $this->get_field_id('title'); ?>"
name="<?php echo $this->get_field_name('title'); ?>"
value="<?php echo esc_attr( $instance['title'] ); ?>">
</p>
<p>
<label for="<?php echo $this->get_field_id('number'); ?>"><?php _e('記事表示件数:'); ?></label>
<input type="number" min="1" max="10" id="<?php echo $this->get_field_id('limit'); ?>"
name="<?php echo $this->get_field_name('number'); ?>"
value="<?php echo esc_attr( $instance['number'] ); ?>" size="3">
</p>
<?php
}
/*カスタマイズ欄の入力内容が変更された場合の処理*/
function update($new_instance, $old_instance) {
$instance = $old_instance;
$instance['title'] = strip_tags($new_instance['title']);
$instance['number'] = is_numeric($new_instance['number']) ? $new_instance['number'] : 5;
return $instance;
}
/*ウィジェットに出力される要素の設定*/
function widget($args, $instance) {
extract($args);
echo $before_widget;
if(!empty($instance['title'])) {
$title = apply_filters('widget_title', $instance['title'] );
}
if ($title) {
echo $before_title . $title . $after_title;
} else {
echo '<h3 class="widget-title">最近の更新記事</h3>';
}
$number = !empty($instance['number']) ? $instance['number'] : get_option('number');
?>
<!-- ウィジェットとして呼び出す要素 -->
<aside class="widget_modify_update">
<ul>
<?php
$args = array(
'order' => 'DESC',
'orderby' => 'modified',
'posts_per_page' => $number
);
$my_query = new WP_Query( $args );?>
<?php
$posts = get_posts($args);
if($posts) : ?>
<?php while ( $my_query->have_posts() ) : $my_query->the_post(); ?>
<li class="clr">
<a href="<?php the_permalink(); ?>">
<!--サムネイル画像の追加-->
<?php if (has_post_thumbnail()): // Check if Thumbnail exists?>
<figure class="eyecatch">
<?php the_post_thumbnail(array(130,80)); ?>
</figure>
<?php else: ?>
<figure class="eyecatch noimg">
<img src="<?php echo get_template_directory_uri(); ?>/images/no-image.jpg" width="130" height="80" alt="NO_IMAGE" />
</figure>
<?php endif; ?>
<div class="widget_modify_update-title">
<?php the_title(); ?>
<!--カテゴリ-->
<span class="cat-data">
<?php if( has_category() ): ?>
<?php $postcat=get_the_category(); echo $postcat[0]->name; ?>
<?php endif; ?>
</span>
<span class="modify_date">
<i class="fa fa-history fa-fw"></i><?php the_modified_date( 'Y年n月j日', '更新日: ' ); ?>
</span>
</div>
</a>
</li>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
<?php endif; ?>
</ul>
</aside>
<?php echo $after_widget;
}
}
register_widget('widget_modify_update');
えっと、特に難しい事はしていませんが注意点が二つござります。
アイキャッチ画像は無理くり切り抜ているのと画像がセットされていない時のNO_IMEGEな画像のパスは変更して下さい。
記述できていたら画像のように「*最近の更新記事ウィジェット*」が追加されているので確認してください。

アイキャッチの追加

特に真ん中から切り抜かれるのが気にならなければそのままでいいです。ただfunctionsの編集中なので、ついでに横長タイプのアイキャッチを生成します。

add_image_size('oblong-thumb',130,80,true);
それ相当(上記の比率、多少大きくてもOK)の画像比の物があればそれを使用してもらっても大丈夫です。(130×80で切り抜くので

新たに生成するよりか既存に似てるアイキャッチを使った方がサーバーなりには良いかと。

生成したアイキャッチにする場合

サムネイルはこのように呼び出していますので、アイキャッチ画像を書き換えます。

<?php if (has_post_thumbnail()): // Check if Thumbnail exists?>
<figure class="eyecatch">
<?php the_post_thumbnail(array(130,80)); ?>
</figure>

生成した方に変える場合は以下のように書き換えてください。

<?php if (has_post_thumbnail()): // Check if Thumbnail exists?>
<figure class="eyecatch">
<?php the_post_thumbnail( 'oblong-thumb' ); ?>
</figure>

NO_IMAGEな画像のパス

で、以下のようにアイキャッチがセットされていいなかった場合に呼び出すNO_IMAGEな画像を配置してください。

<?php else: ?>
<figure class="eyecatch noimg">
<img src="<?php echo get_template_directory_uri(); ?>/images/no-image.jpg" width="130" height="80" alt="NO_IMAGE" />
</figure>

子テーマを利用している場合は、ここの部分を

get_template_directory_uri()

こちらに変更して下さい。

get_stylesheet_directory_uri()

画像の置き場所は/テーマ/images/no-image.jpg です。NO_IMAGEな画像は僕が使っているので良ければ使ってください。

右クリックして「名前を付けて画像を保存」でいけます。

更新日のアイコンはFont Awesomeを使っていますので、functions.phpで呼び出してください。
//レンダリングブロックが気になるのでフッターで読み込む
function add_footer_styles(){
    wp_enqueue_style('font-awesome', '//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css');
};
add_action( 'wp_footer', 'add_footer_styles' );

スタイルを整える

style.cssに以下のコードをコピペしてください。

/*  最近の更新記事ウィジェット
---------------------------------------------------*/
.widget_modify_update ul{
padding: 0;
list-style: none;
}
.widget_modify_update ul li{
position: relative;
}
.widget_modify_update ul li a{
text-decoration: none;
padding: 10px 5px;
display: block;
color: #23282d;
}
figure.eyecatch img {
float: left;
margin-right: 1.6%;
object-fit: cover;
width: 128px;
height: 80px;
}
.widget_modify_update-title {
font-size: 13px;
margin-left: 130px;
line-height: 1.6;
font-weight: bold;
}
.widget_modify_update .cat-data {
position: absolute;
top: 11px;
left: 6px;
background: #3f51b591;
color: #fff;
padding: 0 2px;
font-size: 10px;
}
.modify_date {
position: absolute;
bottom: 0;
right: 0;
color: #808080;
font-size: 80%;
}
.widget_modify_update li:hover {
opacity: .7;
transition: .6s;
}
.clr {
display: block;
clear: both;
}
.clr::after {
height: 0;
clear: both;
font-size: 0;
display: block;
content: "";
}

動作の確認

全て記述できていたら以下の画像のようになるかと思います。

それでは、過去記事バンバン修正してください。(`・ω・´)ゞ

スポンサーリンク

この記事をかいた人

閲覧どうもありがとうございます。当サイトキャンディースタイルとWordPressテーマのWhite Tigerというサイトを運営しています。まだまだ初心者なので、お見苦しいとこがありますがどうぞよろしく。

コメントを閉じる

コメントを残す

メールアドレスが公開される事はございませんが*の付いている欄は必須項目となります。
なおコメントの反映にお時間がかかる場合があります事をご了承ください。


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