2018.08.16

[WordPress]人気記事スライダーをつくる方法

こんにちは、ゾノ( @ozonosho )です。

さて、今日のブログではWordPressで人気記事スライダーをつくる方法を紹介いたします。

WordPressにはスライダーのプラグインは数多くあれど人気記事を表示してくれるものは無いんですよね。そのためこの記事では「Googleアナリティクスのデータを元に人気記事を抽出し、抽出した人気記事をスライダー表示させる方法」を解説していきます。

尚、人気記事スライダーは自動表示されるので一度つくってしまえば一切メンテナンスする必要がなくラクチンです!

目次
1.【デモ】こんなスライダーが完成します!
2.まずはプラグイン「Simple GA Ranking」を導入する
3.次にJQuery「slick.js」を導入する
4.人気記事スライダーを実装する
5.おわりに

【デモ】こんなスライダーが完成します!

まずは論より証拠!
完成形はこのようなスライダーになります。

よく見かけるタイプのスライダーですね。

僕のこのサイトで直近1週間分のアクセスを元に人気記事10件をピックアップしてスライダー表示しています。

完成形のイメージがついたと思いますので、それでは実装方法を見ていきましょう。

まずはプラグイン「Simple GA Ranking」を導入する

実装のための最初のステップはプラグイン「Simple GA Ranking」を導入することです。

このプラグインを利用すると、Googleアナリティクスと連携して自分のサイトでアクセスの多い記事をさまざま条件で取得することができるようになります。

導入方法は下記のブログにまとめたので参照ください。

wordpress人気記事プラグインはPopular Postsよりも「Simple GA Ranking」がおすすめ!設定手順から利用方法まで解説

こんにちは、ゾノ( @ozonosho )です。 さて、今日のブログではWordpressの人気記事表示プラグイン「Simple......

→この記事を読む

次にJQuery「slick.js」を導入する

次にスライダー機能を利用できるようにするためにJQuery「slick.js」を導入します。

このJQueryを利用すると、簡単にスライダー機能を実装できます。
しかもWordpressのプラグインにあるスライダーに比べて動作が非常に軽く、表示方法もさまざまなテンプレートが用意されているのでとても使いやすいです。

導入方法は下記のブログにまとめたので参照ください。

人気のスライダーjQuery「slick.js」をWordpressで利用する方法

こんにちは、ゾノ( @ozonosho )です。 さて、今日のブログでは人気のスライダーjQuery「slick.js」をWor......

→この記事を読む

人気記事スライダーを実装する

プラグイン「Simple GA Ranking」とJQuery「slick.js」の2つが導入できたら、いよいよ人気記事スライダーの実装です!

実装方法はさまざまありますが、今回はどのページでも簡単に利用できるようにショートコードを作ってみましょう。

下記のコードをfunctions.phpに追加してください。

あとはスライダーを表示させたい場所で[mainslider]と書くだけでスライダーを表示することができます。

尚、post_typeは投稿タイプの指定、display_countは表示件数の指定、periodはアクセス数の抽出期間(何日分のアクセスを元に人気記事を表示するか)の指定をそれぞれおこなえるので、ご自身の用途に合わせて編集してください。

おわりに

以上、今回の記事ではWordPressで人気記事スライダーをつくる方法を紹介いたしました。

利用するうえで設定が少し面倒な箇所もありますが、一度導入してしまえばあとは自動でデータを取得しスライダーを表示してくれるので、つくる甲斐は十分にあると思います。

自サイトで人気記事スライダーを導入したい方はぜひ活用ください。

当サイトではWordPressのカスタマイズ依頼を請け負っています。実現したい機能・要望がある方はぜひ下記ページよりご相談ください。

あなたのサイトに理想の機能を実装!WordPressカスタマイズサービス

本サービスはあなたのWordPressサイトに理想の機能を実装するサービスとなります。 どのような機能・要望でも実現可能です! Wo......

→この記事を読む