サイトからのおしらせ(クリックで一覧)

Luxeritasの新着記事サイドバーウィジェットを差し替える

この記事は約6分で読めます。

本記事ではLuxeritasの新着記事ウィジェットから先頭固定記事を除外し、抜粋を削除するカスタマイズです。
CSSを調整すれば他のテーマでも使えます。

Luxeritasの人気記事ウィジェットカスタマイズはこちら。

Luxeritasの関連記事ウィジェットカスタマイズはこちら。

Luxeritasの新着記事ウィジェットに対する不満

Luxeritasの新着記事だと先頭固定記事まで表示

あくまで「私が使う上で」、ですがとなります。
それは、

・先頭固定記事まで新着として表示されてしまう。
・ウィジェットだけの抜粋表示を切り替えられない(他には表示したいが、新着には表示したくない)。

後者は好みですが、前者は正直ちょっと問題かな……と。

私の場合、別途運営しているサイトでは最初の4つを先頭固定記事(sticky)機能を使って「おすすめ」コーナーを作っています。
また本サイトでは最初の3つが先頭固定記事。
普段は新着順なのでいいのですが、たまに過去記事をおすすめとして推したいときに困ります。

というわけで、別の物に差し替えます。
元のを触るよりも楽なので^^;

せっかくなのでSNS付にする

具体的には「続きを読む」に加えて「はてなブックマーク」と「Pocket」ボタンを付けます。

完成見本

サイドバー300pxの場合です。
タイトルの3行目以降はoverflow:hidden;で隠しています。
(行を増やしたい場合はcssを調整してください)

モバイルのサイドバーはこんな感じ。

サイドバーが使われることはほとんどないでしょうが、ボタン押せるくらいの実用性はあります。

実装手順

html

「news.php」という名前でPHPファイルを作成し、次のコードを記述します。

<div id="n-p-r">
<?php
 $wp_query = new WP_Query();
 $my_posts = array(
 'post_type' => 'post',
 'posts_per_page'=> '5',
'category__not_in' => array( 60 ), 
'ignore_sticky_posts' => true,
 );
 $wp_query->query( $my_posts );
 if( $wp_query->have_posts() ): while( $wp_query->have_posts() ) : $wp_query->the_post();
?>
<div class="n-p-r-card toc clearfix">
<div class="term n-p-r-img"><a href="<?php the_permalink() ?>"><?php if ( has_post_thumbnail() ): ?>
 <?php the_post_thumbnail( 'thumb100' ,array( 'alt' =>get_the_title())); ?>
 <?php else: ?>
 <img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt="<?php the_title(); ?>" width="100" height="100" />
 <?php endif; ?></div>
<div class="n-p-r-title">
<a href="<?php the_permalink(); ?>" class="n-p-r-titlea"><?php the_title(); ?></a>
</div>
<div class="n-p-r-sns">
<?php
 get_template_part('cardsns');
?>
</div>
</div>
<?php endwhile; endif; ?>
<?php wp_reset_postdata(); ?>
</div>

以下、コードの説明します。

記事の個数は、posts_per_pageで調整します。

 'posts_per_page'=> '5',

category__not_inを使って、お知らせカテゴリを新着から除外します。
array()の中の数値はカテゴリIDです。

'category__not_in' => array( 60 ),

ignore_sticky_postsを指定することで、先頭固定記事を除外できます。
(新着順で範囲内にある場合は、ちゃんと表示されます)

'ignore_sticky_posts' => true,

SNS部のPHPファイルを作成する

パーツファイルとしてcardsns.phpを作成し、子テーマ直下へアップロードします。
手順はこちらを。

CSS

子テーマのstyle.cssに次のコードを記述します。

.n-p-r-img{
float:left;
 margin-right:10px !important;
 width:100px;
 height:100px;
}
.n-p-r-img img{
max-width:100px;
width:100%;
height:auto;
}
.n-p-r-title{
width:auto;
height:64px;
overflow:hidden;
}
.n-p-r-sns{
width:185px;
float:right;
}
.n-p-r-titlea{
color:#333;
 text-decoration: none !important;
 font-size: 1.4rem !important;
}
.n-p-r-card{
margin-bottom:7px;
border: 1px solid #ddd;
padding:5px;
border-radius: 4px;
}

行を増やしたい場合は、次の箇所のheightの数字を変更してください。

.n-p-r-title{
width:auto;
height:64px;
overflow:hidden;
}

PHPファイルをインクルードしてウィジェット化する

手順はこちらの記事を参考にしてください。

終わったらサイドバーの新着記事を表示したい場所にテキストウィジェットを置きます。
ショートコードを記述すれば完成です。

まとめ

解答者の写真
新着記事をどうカスタマイズするかは好みと用途の問題
著者と同じ状況にある方は使ってみて
 
この記事を書いた人:天満川 鈴

広島市内のパチンコホール勤務。
3号機時代からのパチンカス。

ADHD、精神障害者手帳3級所持。

慶應義塾大学商学部→国家一種経済職→公安調査庁。
在職時は国際テロ、北朝鮮を担当。

「小説家になろう」の底辺作者。
朝鮮総聯へのスパイ工作を描いた小説「キノコ煮込みに秘密のスパイスを」はアマチュア小説ながら週刊誌報道され、話題となった。