QR Code Business Card

スマホ・タブレットだけミニ人気記事ランキングを表示する方法!

スマホ・タブレットだけミニ人気記事ランキングを表示する方法!
 ブログのタブレットとスマホ表示のみ、よく見てもらえるヘッダー部分に、小さく表示する人気記事ランキングを設置したいと思っています。これをプラグインのWordPress Popular Postsを使って作成します。より興味が引けるように、カテゴリーを指定してランキングを生成します。


概要


 スマホやタブレットサイトは、画面をスワイプして必ずヘッダー部分に視線が通るのが特徴です。そんなヘッダー部分にブログの関連記事や人気記事ランキングを置くのは、アクセスアップに有効な方法です。そしてさらにカテゴリを指定することによって、表示している記事と似ているジャンルの記事をランキング表示することができます。より訪問者の興味を引くランキングができると思います。


完成イメージ


スマホ 人気記事ランキング

 ウェブソクをスマホで見たところです。今回は横に3つ並んだ人気記事ランキングを作ります。



WordPress Popular Posts


インストール


WordPressプラグイン 新規追加

 まずはWordPressプラグインのWordPress Popular Postsをインストールします。管理画面左メニュー、「プラグイン」>「新規追加」から「WordPress Popular Posts」を検索して下さい。


WordPress Popular Posts

 表示された「WordPress Popular Posts」を「インストール」 → 「有効化」して下さい。

 インストール後、各ページの表示数のカウントなどが始まります。



使い方


PC・タブレット・スマホで表示を部分的にPHPで切り替える方法 | ウェブソク

 前記事のPC・タブレット・スマホで表示を切り替える方法を応用して、人気ランキングを作成します。前記事の「ua.class.php」を使いますので、記事をご覧いただいてphpファイルの作成をお願いします。



WordPressテンプレート – header.php




 WordPressテンプレートの「header.php」に記事の都合上「function()」まで書いていますが、テンプレート内のどこに書いてもokです。「ua.class.php」は必ず読み込むようにして下さい。

 基本的にパラメータ用の配列「$***_prm」を作って、「wpp_get_mostpopular($***_prm);」とすればタグが表示されます。

 スマホ用とタブレット用に、それぞれサムネイルの大きさを変えたりして、2種類ランキングを生成しています。





 cssは単純にスマホは合計で幅320px、タブレットは幅600pxとなるように、「float:left;」で並べています。あとは適宜「clear:both;」を入れて調整して下さい。





 最後に人気記事ランキングを表示したいところに、こちらを追加すればokです。





 タグはこのようにulタグで表示されます。



まとめ


 スマホやタブレットサイトは、上から順番に強制的に見てもらえますので、ヘッダーにアクセスアップの工夫は必須事項です。そんなページ内で注目される場所に、ブログの人気記事ランキングを設置できれば、訪問者を別の記事にも誘導し、ブログ内でアクセスの循環が生まれます。一人が複数ページを閲覧することによって、再びアクセスが生まれページビューが上がることにつながりますので、ぜひこの人気記事ランキング作成に挑戦してみて下さい。

SNSでもご購読できます。

コメントを残す

*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)