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

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

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

Simple GA RankingでGoogle Analyticsを利用した人気記事ウィジェットを作ってサイトを高速化する（Cocoon完全対応）

Simple GA Rankingを使ってサイドバーに人気記事を表示する方法を紹介します。Google Analyticsのデータを利用しているため、他のWordPressプラグインと比較すると負担が軽く、サイトの高速化に役立ちます。導入手順は面倒ですが本記事通りにすればきっとできます。

kimoota.net

2016.12.24

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

Luxeritasの「スクロール追従サイドバー」に関連記事ウィジェットを入れる

Luxeritasには「スクロール追従サイドバー」というウィジェットスペースがあるのを御存知でしょうか？ 知らない、使い途がわからない。 そういう方は多かろうと...

kimoota.net

2017.03.15

Luxeritasのトップ・カテゴリページの記事カード（タイル）の枠線カスタマイズ

2020.02.032021.04.25

帯状メニューに「サイトマップ」と「問い合わせ」ボタンを追加する　～Luxeritasカスタマイズ

2017.02.242021.04.25

Twitterカードのタイプが変更できない問題の修正　～Luxeritas

2016.12.132021.04.25

Luxeritasのサイドバー用関連記事ウィジェットを作ってみる

2017.03.112021.04.25

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

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

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

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

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

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

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

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

Luxeritasの記事一覧「続きを読む」にはてなブックマークとPocketボタンを追加する（2020年、v3.x対応）

WordPressテーマLuxeritasの記事一覧（リスト）の「続きを読む」に、「はてなブックマーク」と「Pocket」のボタンを追加するカスタマイズを紹介し...

kimoota.net

2017.03.15

完成見本

サイドバー300pxの場合です。
タイトルの３行目以降は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を作成し、子テーマ直下へアップロードします。
手順はこちらを。

Luxeritasの記事一覧「続きを読む」にはてなブックマークとPocketボタンを追加する（2020年、v3.x対応）

WordPressテーマLuxeritasの記事一覧（リスト）の「続きを読む」に、「はてなブックマーク」と「Pocket」のボタンを追加するカスタマイズを紹介し...

kimoota.net

2017.03.15

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ファイルをインクルードしてウィジェット化する

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

WordPressの記事やテキストウィジェットの中でPHPを使えるようにする

テキストウィジェットに PHPの実行コード 書いても 動かないよ～ それWordPressの仕様だから だけどPHPファイルをテキストウィジェットにインクルード...

kimoota.net

2017.03.11

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

まとめ

新着記事をどうカスタマイズするかは好みと用途の問題
著者と同じ状況にある方は使ってみて