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>
<?php
echo $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)の画像比の物があればそれを使用してもらっても大丈夫です。(130×80で切り抜くので

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

で、以下のようにアイキャッチがセットされていいなかった場合に呼び出す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: "";
}

テーマによってはスタイルが崩れるかもしれませんが、適宜変更してください。

動作の確認

間違いなく記述できていたら、投稿ページで同じカテゴリの新着が表示されます。

それではまた!(`・ω・´)ゞ

スポンサーリンク

この記事をかいた人

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

コメントを閉じる

コメントを残す

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


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