プラグインなしでもっと見るをクリックで表示される記事リストのサンプル

10分

もっと見る

SHARE

最近のことで言うとWordPressのバージョンアップデートで、できることがさらに拡充されており、ノーコードで色々できることが増えているのは嬉しいところです。

そんなアップデートでできることが増えている今日この頃ですが、WordPressの関数も使いこなせればWordPress本体の機能でできないこともでき、カスタマイズの自由度も高くなるので、慣れてきたら覚えておくのもいいことです。

この記事では、そんな関数を使って「もっと見るをクリックで表示される記事リストのサンプル」の作り方について解説しています。

困ってしまった人
困ってしまった人

トップページやサイドに使えそうなテキストベースの記事一覧を設置したい。

そんな方にオススメの内容です。是非最後までご覧ください。

記事リストのサンプル

早速、記事リストのサンプルです。

投稿日付の新しい順に、「投稿日付」「記事カテゴリ」「記事タイトル」が3件表示され、「もっと見る」をクリックすることで、さらに3件づつ表示されます。

かかかず
かかかず

JSONは使わずに、ループで記事一覧を出力してjQueryで表示・非表示をいじっているオブジェクトです。

記事リスト実装の方法と手順

手順と方法

それでは、実装の手順と方法についてです。言語は、PHP・jQuery・CSSの3種で、5つの手順です。

これらを順に説明していきます。

PHPのファイルを使えるよう準備

記事ページにPHPのコードをそのまま記述をしても、表示されません。

その為、PHPをショートコードで好きな場所で使用できるように準備しておく必要があるので、以下の記事を参考に準備しておきましょう。

phpのショートコードのイラスト プラグインなしでページ内にPHPを読み込む方法
かかかず
かかかず

これでウィジェットや記事内など、好きな場所にPHPを設置する事ができます。

PHPを記述

次に、記事一覧を表示させたい場所。もしくはショートコードで読み込みさせるPHPのファイルに以下のコードを記述します。

PHP 

<!-- NEWS -->
<section>
	<div class="catListBlock">
		<div class="catListInner">
			<div class="catListInnerBlock">
				<ul class="catList">
                    <?php
                    global $post;
                    $lastposts = get_posts( array(
                        'posts_per_page' => 18,
                        'post_type'      => 'post'
                    ) );
                    foreach ( $lastposts as $post ) :
                        setup_postdata( $post );
                        ?>
					<li>
						<a href="<?php the_permalink(); ?>">
							<div class="catTop">
								<p class="catDate"><?php the_date(); ?></p>
								<p class="catName"><?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?></p>
							</div>
							<p class="catTitle"><?php
    $limit = 40; // 表示させる文字数の上限
    if (mb_strlen($post->post_title)>$limit) {
      $title= mb_substr($post->post_title,0,$limit) ; echo $title. '…' ;
    } else {
      echo $post->post_title;
    }
  ?></p>
						</a>
					</li>
<?php
                    endforeach;
                    wp_reset_postdata();
                    ?>
				</ul>
				<div class="more">
					<button>もっと記事を見る</button>
				</div>
			</div>
		</div>
	</div>						
</section>
<!-- NEWS -->

jQueryの記述

次に「もっと見る」の挙動を作る為、jQueryのコードを記述します。

以下のコードを<body>〜</body> のクロージングタグ直前に記述します。

jQuery 

var show = 3; //最初に表示する件数
var num = 3;  //もっと見るで表示する件数
var contents = '.catList li'; // 対象のlist
$(contents + ':nth-child(n + ' + (show + 1) + ')').addClass('is-hidden');
$('.more').on('click', function () {
  $(contents + '.is-hidden').slice(0, num).removeClass('is-hidden');
  if ($(contents + '.is-hidden').length == 0) {
    $('.more').fadeOut();
  }
});

CSSを記述

最後に、見た目を整える為にCSSをコピペします。

CSS 

/* もっと見る */
.catListInnerBlock {
    background: #FFF;
    border-radius: 3px;
}
ul.catList {
    border: none;
    list-style: none;
    padding: 0;
    margin: 0;
}
ul.catList li {
    padding: 0;
    margin: 0;
}
ul.catList li a {
    display: block;
    border-bottom: dotted 2px #ddd;
    padding: 22px 20px 20px;
    text-decoration: none;
}
ul.catList li:last-child a {
    border: none;
}
ul.catList li a p {
    font-size: 0.95rem;
    font-family: Helvetica;
    font-weight: 300;
    margin-bottom: 0px;
    line-height: 1.3;
}
.catTop {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-content: center;
    margin-bottom: 5px;
}
p.catDate {
    color: #aaa;
}
ul.catList li a p.catTitle {
    font-size: 1.05rem;
    margin: 0;
    font-weight: 400;
    line-height: 1.6;
    color: #313131;
}
ul.catList li a:hover {
    background: #fafafa;
}
ul.catList li a p.catName {
    margin-left: 10px;
    background: #fafafa;
    color: #707070;
    font-size: 0.8rem;
    padding: 2px 12px;
    border-radius: 9999px;
    vertical-align: 1px;
    display: inline-block;
}


/* もっと見るのボタン */
.catListInnerBlock .more {
    text-align: center;
    padding-top: 15px;
    cursor: pointer;
    position: relative;
    padding-bottom: 15px;
}
.catListInnerBlock .more:hover {
    background: #fafafa;
}
.more button {
    position: relative;
    border: none;
    background: none;
}
.more button:after {
    color: #2165c0;
    position: relative;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 1em;
    content: "\f055";
    padding-left: 10px;
}	

/* もっと見るの非表示 */
.catList li.is-hidden {
  visibility: hidden;
  opacity: 0;
  height: 0;
  margin: 0 10px;
  padding: 0;
}

かかかず
かかかず

「もっと見る」のアイコンはFontAwesomeを使っているので、そのまま使う場合はFontAwesome本体も読み込むようにしましょう。

表示させたい場所に記述

最後に、記事一覧を表示させたい場所に、ショートコードを記述します。

STEP.1 でPHPを読み込ませる設定をして、そこで「textlist.php」というPHPファイルを作った場合は、HTMLに以下のような記述をすればOKです。

ショートコード 

[call_php file='textlist']

かかかず
かかかず

これで完了です！

コピペ用コード一式

上記の「手順と方法」で紹介した同じコードです。

「詳しい説明等は不要でコピペして使いたい」方は、こちらのコードをそれぞれまるっとコピペすれば完了です。

コードを表示する

PHP 

<!-- NEWS -->
<section>
	<div class="catListBlock">
		<div class="catListInner">
			<div class="catListInnerBlock">
				<ul class="catList">
                    <?php
                    global $post;
                    $lastposts = get_posts( array(
                        'posts_per_page' => 18,
                        'post_type'      => 'post'
                    ) );
                    foreach ( $lastposts as $post ) :
                        setup_postdata( $post );
                        ?>
					<li>
						<a href="<?php the_permalink(); ?>">
							<div class="catTop">
								<p class="catDate"><?php the_date(); ?></p>
								<p class="catName"><?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?></p>
							</div>
							<p class="catTitle"><?php
    $limit = 40; // 表示させる文字数の上限
    if (mb_strlen($post->post_title)>$limit) {
      $title= mb_substr($post->post_title,0,$limit) ; echo $title. '…' ;
    } else {
      echo $post->post_title;
    }
  ?></p>
						</a>
					</li>
<?php
                    endforeach;
                    wp_reset_postdata();
                    ?>
				</ul>
				<div class="more">
					<button>もっと記事を見る</button>
				</div>
			</div>
		</div>
	</div>						
</section>
<!-- NEWS -->

jQuery 

var show = 3; //最初に表示する件数
var num = 3;  //もっと見るで表示する件数
var contents = '.catList li'; // 対象のlist
$(contents + ':nth-child(n + ' + (show + 1) + ')').addClass('is-hidden');
$('.more').on('click', function () {
  $(contents + '.is-hidden').slice(0, num).removeClass('is-hidden');
  if ($(contents + '.is-hidden').length == 0) {
    $('.more').fadeOut();
  }
});

CSS 

/* もっと見る */
.catListInnerBlock {
    background: #FFF;
    border-radius: 3px;
}
ul.catList {
    border: none;
    list-style: none;
    padding: 0;
    margin: 0;
}
ul.catList li {
    padding: 0;
    margin: 0;
}
ul.catList li a {
    display: block;
    border-bottom: dotted 2px #ddd;
    padding: 22px 20px 20px;
    text-decoration: none;
}
ul.catList li:last-child a {
    border: none;
}
ul.catList li a p {
    font-size: 0.95rem;
    font-family: Helvetica;
    font-weight: 300;
    margin-bottom: 0px;
    line-height: 1.3;
}
.catTop {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-content: center;
    margin-bottom: 5px;
}
p.catDate {
    color: #aaa;
}
ul.catList li a p.catTitle {
    font-size: 1.05rem;
    margin: 0;
    font-weight: 400;
    line-height: 1.6;
    color: #313131;
}
ul.catList li a:hover {
    background: #fafafa;
}
ul.catList li a p.catName {
    margin-left: 10px;
    background: #fafafa;
    color: #707070;
    font-size: 0.8rem;
    padding: 2px 12px;
    border-radius: 9999px;
    vertical-align: 1px;
    display: inline-block;
}


/* もっと見るのボタン */
.catListInnerBlock .more {
    text-align: center;
    padding-top: 15px;
    cursor: pointer;
    position: relative;
    padding-bottom: 15px;
}
.catListInnerBlock .more:hover {
    background: #fafafa;
}
.more button {
    position: relative;
    border: none;
    background: none;
}
.more button:after {
    color: #2165c0;
    position: relative;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 1em;
    content: "\f055";
    padding-left: 10px;
}	

/* もっと見るの非表示 */
.catList li.is-hidden {
  visibility: hidden;
  opacity: 0;
  height: 0;
  margin: 0 10px;
  padding: 0;
}

ざっくりとしたコードの解説

先生

ざっくりながらコードの解説です。

PHP：記事一覧のループ

記事一覧は、グローバル変数とforeach文を使って出力します。

グローバル変数とは？

グローバル変数とは、コンピュータプログラムで使用される変数のうち、プログラム中のどこにあるコードからでも同じように値の読み取りや書き換えが可能なものを指します。

そこでパラメータを指定して、この記事では以下のようにして「18件」「投稿タイプは通常の投稿」を指定して出力しています。

PHP 

$lastposts = get_posts( array(
  'posts_per_page' => 18,
  'post_type'      => 'post'
) );

これ以外にも、パラメータを指定することで例えば「並び順を古い順」「ランダムに出力」など色々な条件を設定して出力することができるので、パラメータをいじれるとサイト構築の自由度が上がります。

パラメータについては、関数リファレンス/WP Queryにて詳しい情報が書かれていますが、以下はよく使う内容の抜粋をしているので、気になった方は参考にしてみてください。

関数のアイキャッチ $args = array での指定とパラメータ

jQuery：もっと見る

記事一覧は、PHPで事前に取得した数の記事を展開してjQueryで設定した「表示数」以外の記事に is-hidden のclass名をつけて非表示にしています。

jQuery 

var show = 3; //最初に表示する件数
var num = 3;  //もっと見るで表示する件数

「最初に表示する件数」と、「もっと見るで表示する件数」はコメントアウトで記載している通り、冒頭の関数宣言で指定すると、その通りの挙動になります。

前の記事

拡大される検索フォーム
プラグインなしでアイコンをクリックすると WordPressの…

次の記事

JavaScriptのsetTimeout()でフェードさせな…
画像のフェードアウト

関連記事

カテゴリーのイラスト

同じカテゴリの記事一覧

ボタンの影

まとめ記事

Article

About

Summary

OTHER

DUB DESiGNはデザインをテーマにしたメディアです。Webデザインに関するHow-toや、WordPressのスニペットなど、デザインの話を中心に、仕事を楽しむすべての方を対象に記事を配信しています。

＞＞ 詳しくはこちら