好きなもの、好きなだけ、盛り合わせ

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

   

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

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

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

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

どんなに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; ?>
  1. 表示する記事の数(3、20、100など)
  2. 追加するタグの名前(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'); //ピックアップ記事 ?>

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

  1. 記事上
  2. 記事下

のどちらかがおすすめです。僕は、上記のコードを「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();
            }
        });
  });

カスタマイズ後の画面

カスタマイズが終わったら、記事に「pickup」のタグを追加して確認してみましょう。

▼こんな感じで表示されます。順番はランダム。(ファーストビューでは左のボタンが非表示)

 

▼少しでも右にスクロールすると(左右にスクロールできる状態であれば)、左右にボタンが表示されます。

 

▼1番右までスクロールすると、右のボタンが隠れます。

スクロールの仕様

  1. ボタンをタッチ(すべてのデバイス)
  2. タッチパッドでスクロール(PC)
  3. 画面をタップしてスクロール(スマホ・タブレット)

でスクロールさせることができます。「慣性スクロール」になっているので、ヌルヌル動きます。

まとめ

以上、プラグインなしでピックアップ記事を表示するカスタマイズでした!

少なからず、回遊率のアップにもつながると思うので、興味がある方はぜひ試してみてはいかがでしょうか?

(`・ω・´)ゞ

 - WordPressカスタマイズ

この記事が気に入ったらいいね!しよう

最新情報をお届けします

閉じる

CLOSE
CLOSE