WordPress Popular Postsをgrid表示してみる

2019年6月3日2019年6月13日

DISCLAIMER: This article is more than a year old and may not be current.

この記事は約 5 分で読めます。

WordPress Popular Posts の作者
Hector Cabrera さんのブログで
WordPress Popular Posts の
レスポンシブグリッドを
サムネイルで作成する方法が
紹介されていたので試してみました。

1. 先ずは結果を表示
2. HTMLマークアップ
3. グリッドのスタイル
4. 注意すべき点

先ずは結果を表示

Vue.jsのv-forでTableを表示させてみた

HTMLとCSSだけでコンテンツが表示・非表示になるボタン

Vue.js + vue-good-table でテーブルを表示する

Google Fonts のパフォーマンスを最適化する

夏の思い出 2020 (太子駅跡) feat.空倶楽部 2020/09/29

ちょっと驚き！な CSSを非同期でロードする方法

A nice image grid with a cool overlay that displays upon mouseover. Neat, huh?
( マウスオーバー時に表示されるクールなオーバーレイを備えた、
素晴らしい画像グリッドです。きれいだろ? )
Before we start

This tutorial uses some CSS3 features that won’t work properly / at all on outdated browsers such as Internet Explorer 8 or older.
( このチュートリアルでは、
Internet Explorer 8 以上の
古いブラウザで正しく動作しない
CSS3 の機能をいくつか使用しています。)
Before we start

HTMLマークアップ

The HTML Markup

WordPress Popular Posts widget、
wpp_get_mostpopular() template tag 、
[wpp] shortcode と
それぞれの方法が紹介されていますが、

[wpp] shortcode で試してみます。

HTML Markupをカスタムするために、
パラメータ wpp_start と wpp_end 、
post_htmlを使用します。

If you’re using the wpp_get_mostpopular() template tag and/or the [wpp] shortcode, use the parameters wpp_start, wpp_end and post_html to customize the output (see wp-admin > Settings > WordPress Popular Posts > Parameters for documentation and examples).
WPP’s custom HTML markup options

wpp_start で
画像グリッドの開始HTMLタグを設定します。
wpp_end で
画像グリッドの終了HTMLタグを設定します。
( 元記事では設定していませんが、設定しないとエラーが出ます。)
post_html で
それぞれのHTMLマークアップを設定します。

[wpp limit=6 range='last7days' post_type='post' thumbnail_width=225 thumbnail_height=135 wpp_start='<ul class="wpp-grid">' wpp_end='</ul>' post_html='<li>{thumb_img}<div class="wpp-grid-overlay"></div>{title}</li>']

グリッドのスタイル

HTMLマークアップの準備が整えば、
後は投稿リストの画像グリッドに
スタイル設定するだけです。
以下のリンクを参照の事。

Styling the grid

当ブログは、CSSを少々カスタマイズしています。

注意すべき点

While image grids are quite the eye-candy, there are a couple of issues I must point out:
The hover effects won’t work on touch devices (tablets, smartphones, etc.)
Some / all of the CSS3 animations implemented here won’t work on older browsers (I know I already mentioned this but I cannot stress it enough).
Things to keep in mind

画像グリッドは非常に魅力的ですが、
注意しなければならない問題がいくつかあります。