新着記事ウィジェットを差し替えて、人気記事・関連記事もあわせてSNS付にする ~Luxeritasカスタマイズ

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

2017-03-20Luxeritas, WordPressカスタマイズ

本記事ではLuxeritasの新着記事ウィジェットを先頭固定記事が反映されないように差し替えて、人気記事と関連記事ウィジェットを追加し、デザインを統一した上でSNS付の物にします。

なお、関連記事のソースをお使いのテーマの物に差し替えれば、他のWordPressテーマでも使えます。

新着記事ウィジェットを差し替える。

私の不満

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

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

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

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

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

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

本サイトではトップページの記事カードに「はてなブックマーク」と「Pocket」ボタンを付けています。
この二つは記事を読まなくても付く可能性がありますので。
(私の場合、「はてなブックマーク」は本来のブックマーク代わりに使っています。少数派だとは思いますが)

なので、新着記事ウィジェットにも同じようにつけてしまいます。
記事を読んでる途中で「いいな」と思っても移動しないのが普通。
Pocket付けておけば入れて後で読んでくれるかなというのが狙いです。

完成見本

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

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

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

実装手順

表示部分のPHPファイルを作成する。

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

<div id="n-p-r">
<?php
 $wp_query = new WP_Query();
 $my_posts = array(
 'post_type' => 'post',
 'posts_per_page'=> '5',
'cat' => -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という名前でファイルを作成し、次のコードを記述します。

<div class="snsf-w">
<ul class="snsfb">
<!--hatena-->
<li class="hatena"><a href="//b.hatena.ne.jp/add?mode=confirm&amp;url=<?php the_permalink(); ?>&amp;title=<?php the_title; ?>" title="Bookmark at Hatena" target="_blank" rel="nofollow"><i class="fa fa-hatena">B!</i>&nbsp;後で</a></li>
<!--pocket-->
<li class="pocket"><a href="//getpocket.com/edit?url=<?php the_permalink(); ?>" title="Pocket: Read it Later" target="_blank" rel="nofollow"><i class="fa fa-get-pocket">&nbsp;</i>後で</span></a></li>
<li class="tuzuki"><a class="tuzukia" href="<?php the_permalink() ?>">読む</a>
</li>
</ul>
</div>

「後で」は削除してアイコンマークだけでもいいと思います。
他のテーマで使う場合はクラス名を変更して、テーマのSNSボタンのCSSがあたるようにしてください。

作成したら子テーマフォルダ直下にアップロードします。

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

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

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

SNS付の人気記事ウィジェットを追加する

導入手順は以下の記事を参考にしてください。

表示部分のコードの次の箇所を変更します。

<a href="<?php the_permalink(); ?>" class="n-p-r-titlea><?php the_title(); ?></a>
</div>

<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>

cssは新着記事と共通です。

SNS付の関連記事ウィジェットを追加する

related-widget.phpという名前でファイルを作成し、Luxeritasのrelated.phpのクラス名などを変更した次のコードを記述します。

<?php
/**
 * Luxeritas WordPress Theme - free/libre wordpress platform
 *
 * This program is free software; you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation; either version 2 of the License, or
 * (at your option) any later version.
 *
 * @copyright Copyright (C) 2015 Thought is free.
 * @license http://www.gnu.org/licenses/gpl-2.0.html GPL v2 or later
 * @author LunaNuko
 * @link http://thk.kanzae.net/
 * @translators rakeem( http://rakeem.jp/ )
 */

?>
<div id="n-p-r">

<?php
global $luxe;

$categories = get_the_category($post->ID);
$category_ID = array();

foreach( $categories as $category ) {
 $category_ID[] = $category->cat_ID;
}

$args = array(
 'post__not_in' => array( $post->ID ),
 'posts_per_page'=> 5,
 'category__in' => $category_ID,
 'orderby' => 'rand',
);
$st_query = new WP_Query($args);

if( $st_query->have_posts() === true ):
 while( $st_query->have_posts() === true ):
 $st_query->the_post();
?>
<div class="toc clearfix n-p-r-card">
<?php
 if( isset( $luxe['thumbnail_visible'] ) ) {
?>
<div class="term n-p-r-img"><a href="<?php the_permalink() ?>"><?php
 $post_thumbnail = has_post_thumbnail();
 $ws = 100;
 $hs = 100;

 if( !empty( $post_thumbnail ) ) { // サムネイル
 the_post_thumbnail( 'thumb100' );
 }
 else {
?><img src="<?php echo TURI; ?>/images/no-img-100x100.png" alt="No Image" title="No Image" width="<?php echo $ws; ?>" height="<?php echo $hs; ?>" />
<?php
 }
?></a>
</div>
<?php
 }
?>
<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;
else:
?>

<p class="no-related"><?php echo __( 'No related posts yet.', 'luxeritas' ); ?></p>
<?php
endif;
wp_reset_postdata();
?>
</div>

新着記事と同じ要領でインクルードしてウィジェット化します。
cssは共通です。

他のWordPressテーマで実装する場合

他のWordPressテーマの場合は、新着記事で説明したcardsns.phpを作った上でタイトルやメタ情報の下に、次のコードを記述してください。

<div class="n-p-r-sns">
<?php
 get_template_part('cardsns');
?>
</div>

あとはクラス名をテーマのcssが適用されるように変更して、微調整してください。

まとめ

解答者の写真
はてなはともかくPocket使ってる人には重宝すると思うんだけど、どうかな?
1つでも押してもらえればラッキーということで