お知らせ「WEXAL導入およびテーマ変更作業に伴う不具合について」

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

Luxeritas
この記事は約6分で読めます。
スポンサーリンク

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

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

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

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

Luxeritasの「スクロール追従サイドバー」に関連記事ウィジェットを入れる
Luxeritasには「スクロール追従サイドバー」というウィジェットスペースがあるのを御存知でしょうか? 知らない、使い途がわからない。 そういう方は多かろうと思います。 そこで私から同スペースの使い途を提案させていただきます。 ス...
スポンサーリンク

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

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

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

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

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

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

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

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

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

Luxeritasの記事一覧「続きを読む」にはてなブックマークとPocketボタンを追加する(2020年、v3.x対応)
WordPressテーマLuxeritasの記事一覧(リスト)の「続きを読む」に、「はてなブックマーク」と「Pocket」のボタンを追加するカスタマイズを紹介します。 SNSボタンの拡張と言ってもいいでしょう。 もしかしたら導線を太くす...
スポンサーリンク

完成見本

サイドバー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を作成し、子テーマ直下へアップロードします。
手順はこちらを。

Luxeritasの記事一覧「続きを読む」にはてなブックマークとPocketボタンを追加する(2020年、v3.x対応)
WordPressテーマLuxeritasの記事一覧(リスト)の「続きを読む」に、「はてなブックマーク」と「Pocket」のボタンを追加するカスタマイズを紹介します。 SNSボタンの拡張と言ってもいいでしょう。 もしかしたら導線を太くす...

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ファイルをテキストウィジェットにインクルードしちゃえばショートコードで実行できるわ ...

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

スポンサーリンク

まとめ

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

広島市内のパチンコホール勤務。
3号機時代からのパチンカス。
ADHD、精神障害者手帳3級所持。
慶應義塾大学商学部→国家一種経済職→公安調査庁。
在職時は国際テロ、北朝鮮を担当。
「小説家になろう」の底辺作者。朝鮮総聯へのスパイ工作を描いた小説「キノコ煮込みに秘密のスパイスを」はアマチュア小説ながら週刊誌報道され、話題となった。
WordPress記事は素人の備忘録です。

天満川鈴をフォローする
Luxeritas
スポンサーリンク
きもおたねっと。
タイトルとURLをコピーしました