「よく読まれている記事」のコーナーを「今日」「今週」「今月」とタブ型式で表示する
参考にさせていただきました。
https://simplicity-hacks.tokyo/?p=862
当サイトはKATAWARA（株式会社ベクトル製）で作成しており、トップページ左にメニューがきます。その下に[よく読まれている記事]のコーナーを表示させていますが、いまは累計で表示するようになっています。
アクセス数がまだまだ少ないのでいまのままで良いのですが、ちょっと作成してみようかなと思います。
WordPressのプラグイン
・WordPress Popular Posts
・Shortcodes Ultimate
の2つを使います。
ヘッダーサイドウィジェットにショートコードを入力します
管理画面－「外観」－「ウィジェット」と進みます。
設定する場所は、「ヘッダーサイドウィジェット（PCのみ）」です。
Titleの前に「ブロックを追加」のボタンをクリックし、「Shortcodes Ultimate」を選択します。
「Shortcodes Ultimate」を選択します。
[ショートコードを挿入]ボタンを押してタブのショートコードを挿入するか、入力エリアに直接ショートコードを入力します。
[ショートコードを挿入]ボタンを押します。
「タブ」をクリックすると、下のほうに「ショートコードを挿入」ボタンがありますのでクリックします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
[su_tabs active="1"] [su_tab title="今日"] [wpp post_type="post,page,tips,iwant-to-write" thumbnail_width=75 thumbnail_height=75 limit=10 post_html=' <ul><li>{thumb} {title}</li></ul>'] [/su_tab] [su_tab title="今週"] [wpp post_type="post,page,tips,iwant-to-write" thumbnail_width=75 thumbnail_height=75 limit=10 post_html=' <ul><li>{thumb} {title}</li></ul>' range="weekly"] [/su_tab] [su_tab title="今月"] [wpp post_type="post,page,tips,iwant-to-write" thumbnail_width=75 thumbnail_height=75 limit=10 post_html=' <ul><li>{thumb} {title}</li></ul>' range="monthly"] [/su_tab] |
Shortcodes Ultimateのタブのショートコードです。
|
1 2 3 4 5 |
[su_tabs active="1"] [su_tab title="Day"]タブコンテンツ[/su_tab] [su_tab title="Week"]タブコンテンツ[/su_tab] [su_tab title="Month"]タブコンテンツ[/su_tab] [/su_tab] |
タブのタイトルはそれぞれ、 “ Day ” を今日、“Week”を今週、 “ Month ” を今月と変更しました。
Shortcodes Ultimateのタブのショートコードに挟まれている
|
1 2 |
[wpp post_type="post,page,tips,iwant-to-write" thumbnail_width=75 thumbnail_height=75 limit=10 post_html=' <ul><li>{thumb} {title}</li></ul>'] |
がWordPress Popular Postsの基本のショートコードになります。
このショートコードをShortcodes Ultimateのショートコード「タブコンテンツ」に挿入します。
post_type=”post”は表示する投稿タイプですが、当サイトではpost_type=”post,page,tips,iwant-to-write”としています。
できました。が、ページビュー数が表示されません
順位に①②③を付けているのはCSSでスタイル設定しています。
ページビュー数が表示されるよう設定しているのですが、表示されませんでした。
「WordPress Popular Posts」だけで「よく読まれている記事」を設定しますと、ベージビュー数が表示されましたが、タブ型式にするために「Shortcodes Ultimate」を使用したところ表示されなくなりました。
ここは解決して次に記事にしたいと思います。
今回は「KATAWARA」のトップページ「ヘッダーサイド」のグローバルメニューの下に「よく読まれている記事」を配置しました。
この「ヘッダーサイド」にメニュー以外のコンテンツを配置する場合は「ウィジェット」を挿入します。「ヘッダーサイドウィジェット（PCのみ）」に配置しましたので、スマホではグローバルメニューしか表示されていません。
そこで、ウィジェット「モバイルナビ下部」にも同じように「よく読まれている記事」を配置し、スマホでも見られるようにしました。
