WordPressプラグインなし！ピックアップ記事を表示する方法！

「この記事読んで欲しいなぁ」と思っても、期待通りの結果にならないのが、サイト運営の難しいところ。

SEOの知識が豊富であれば、狙って検索エンジンに上位表示させることができるかもしれませんが、ほとんどの人にとっては至難の業であることは言うまでもありません。。

1
読まれる記事を経由して読んでもらう
2
カスタマイズ内容
3
pickup.phpの作成
4
functions.phpにサムネイル画像を生成するコードを追加
5
ピックアップ記事を表示させる場所にテンプレートを読み込む
6
スタイルシートにコードをコピペ
7
JSファイルにコードをコピペ
8
カスタマイズ後の画面
9
まとめ

読まれる記事を経由して読んでもらう

ただ、その問題を解決する簡単な方法があります。それは、よく読まれる記事を経由して読んでもらうこと。

どんなにPV数が少ないサイトにも、「他の記事よりも読まれる記事」というのは存在するので、PV数関係なく、どのサイトでもできる方法です。

ちなみに、トラフィックの多いサイトであれば、「トップページ（サイドバー）の一覧表示の先頭に固定する」という方法も効果的ですが、ほとんどのサイトでは効果がない方法です。

カスタマイズ内容

さて、先述のようなサイト構造にするためにはいくつか方法がありますが、今回は、「プラグインなしでピックアップ記事を表示するカスタマイズ」をご紹介します。

このカスタマイズをすると、“任意のタグ”を記事に追加するだけで”任意の場所”に”任意の記事”を横並びで表示させることができます。

そういったプラグインもありますが、非常に簡単なカスタマイズ（コピペOK！）ですので、プラグインを使う必要もないのかなと思います。

（プラグイン専用のスタイルシートを読み込まないのもポイント）

では早速、カスタマイズを始めましょう:D

pickup.phpの作成

まずは、管理しやすいように、お使いのテーマの中に、空のファイル「pickup.php」を作成し、下記のコードをコピペします。

<?php $args = array(
    'numberposts' => 10,//表示する記事の数
    'post_type' => 'post',
    'orderby' => 'rand',//ランダム表示
    'tag' => 'pickup'//追加するタグの名前
);
$pickupPosts = get_posts($args);
if($pickupPosts) : ?>

<div id="pickup" class="clearfix">
<p id="pickup-title">ピックアップ記事</p>
<div class="scroll-wrapper">
<div class="scroll-left">
<div class="scroll-content">

<?php foreach($pickupPosts as $post) : setup_postdata( $post ); ?>
<article class="pickup-content">
<figure class="pickup-thumbnail">
<a title="<?php the_title_attribute(); ?>" href="<?php the_permalink(); ?>"><?php the_post_thumbnail( 'thumb150' ); ?></a>
</figure>
<div class="post-info">
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</div>
</article>
<?php endforeach; ?>
<?php wp_reset_postdata(); ?>
    
</div><!--/scroll-content-->
</div><!--/scroll-left-->
<a class="leftbutton" href="#"><i class="fa fa-angle-double-left" aria-hidden="true"></i></a>
<a class="rightbutton" href="#"><i class="fa fa-angle-double-right" aria-hidden="true"></i></a>
</div><!--/scroll-wrapper-->
</div><!--/pickup-->
<?php endif; ?>

表示する記事の数（3、20、100など）
追加するタグの名前（recommend、osusume、など）

は変更しても大丈夫です。

使用中のテーマで表示されているサムネイルが正方形の場合

今お使いのWordPressテーマのサムネイルが正方形の場合、先述のコードの「thum150」の部分を「thumbnail」にすればOKだと思います。

（その場合、次の項目はスキップしてもOK）

どんなサイズのサムネイルの画像を生成しているか調べる場合は「functions.php」を確認してみましょう。

functions.phpにサムネイル画像を生成するコードを追加

「横150px,縦113pxのサムネイル画像」を生成するために、fuctions.phpに下記のコードを追加します。（すでにコードがあれば、追加する必要はありません）

add_image_size('thumb150',150,113,true);

また、ほとんどのテーマでサムネイル画像の表示をサポートしているはずですが、下記のコードがなければ追加する必要があります。

add_theme_support('post-thumbnails');

ピックアップ記事を表示させる場所にテンプレートを読み込む

次に、ピックアップ記事を表示させる場所に下記のコードを追加します。

<?php get_template_part('pickup'); //ピックアップ記事 ?>

ピックアップ記事を表示させる場所は、

記事上
記事下

のどちらかがおすすめです。僕は、上記のコードを「single.php」に追加して、「記事下」に表示させています。

▼ちなみに、記事上には「人気記事」を表示させています。

スタイルシートにコードをコピペ

次に、スタイルシートの全体に影響する部分（基本的に前半部分）に下記のコードをコピペします。

/*-------------------
    ピックアップ記事
--------------------*/
#pickup {
    margin-bottom: 20px;
}
#pickup-title {
    margin: 0.8em 0;
    font-size: 20px;
    font-weight: bold;
    background-color: #00a0e9;
    color: #fff;
    padding: 0.4em;
    border-radius: 3px;
    text-align: center;
}
.pickup-content {
    display: inline-block;
    margin-right: 10px;
    width: 150px;
    vertical-align: top;
}
.pickup-content:last-child {
    margin-right: 0;
}
.pickup-thumbnail {
    margin: 0 0 10px;
    width: 150px;
    height: 113px;
}
.pickup-thumbnail:last-child {
    margin-right: 0;
}
.pickup-thumbnail img {
    width: 100%;
    height: 100%;
}
#pickup .post-info {
    margin: 0;
    white-space: normal;
    font-size: 12px;
    line-height: 1.6;
}
#pickup .post-info a {
    color: #000;
}
/* 横スクロール */
.scroll-wrapper {
    position: relative;
}
.scroll-left {
    overflow-x: scroll;
    overflow-y: hidden;
    padding-bottom: 10px;
    -webkit-overflow-scrolling: touch;
}
.scroll-content {
    display: inline-block;
    white-space: nowrap;
}
/* 左右のボタン */
.leftbutton,.rightbutton {
    font-size: 26px;
    position: absolute;
    top: 40%;
    background-color: #fff;
    color: #000;
    padding: 20px 10px;
}
.leftbutton {
    display: none;
    left: 0;
    border-radius: 0 3px 3px 0;
    box-shadow: 1px 1px 1px #888;
}
.rightbutton {
    right: 0;
    border-radius: 3px 0 0 3px;
    box-shadow: -1px 1px 1px #888;
}

サムネイル画像を正方形にした場合は、「width」と「height」を適宜変更する必要があります。デザインなどは微調整していただければと思います。

JSファイルにコードをコピペ

最後にJSファイル（jquery）に、下記のコードをコピペして終わりです。

/*--------------------------
    ピックアップ記事スクロール
--------------------------*/

$(function() {
    var rightButton = $('#pickup .rightbutton'),
        leftButton = $('#pickup .leftbutton'),
        scroll = $('#pickup .scroll-left'),
        scrollContent = $('#pickup .scroll-content'),
        scrollWrapper = $('#pickup .scroll-wrapper');
        if (scrollContent.width() < scrollWrapper.width() ) {
            rightButton.hide();
        } else {
        }
        //右へ
        rightButton.click(function () {
        scroll.animate({
            scrollLeft: scroll.scrollLeft() + scroll.width()
        }, 300);
        return false;
        });
        //左へスクロールで表示
        scroll.scroll(function () {
            if($(this).scrollLeft() < scrollContent.width() - scroll.width()) {
                rightButton.fadeIn();
            } else {
                rightButton.fadeOut();
            }
        });
        //左へ
        leftButton.click(function () {
        scroll.animate({
            scrollLeft: scroll.scrollLeft() - scroll.width()
        }, 300);
        return false;
        });
        //右へスクロールで表示
        scroll.scroll(function () {
            if($(this).scrollLeft() > 0) {
                leftButton.fadeIn();
            } else {
                leftButton.fadeOut();
            }
        });
  });