WordPress Popular Postsをgrid表示してみる
この記事は約 5 分で読めます。
WordPress Popular Posts の作者
Hector Cabrera さんのブログで
WordPress Popular Posts の
レスポンシブグリッドを
サムネイルで作成する方法が
紹介されていたので試してみました。
先ずは結果を表示
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.
Before we start
( このチュートリアルでは、
Internet Explorer 8 以上の
古いブラウザで正しく動作しない
CSS3 の機能をいくつか使用しています。)
HTMLマークアップ
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マークアップの準備が整えば、
後は投稿リストの画像グリッドに
スタイル設定するだけです。
以下のリンクを参照の事。
当ブログは、CSSを少々カスタマイズしています。
注意すべき点
While image grids are quite the eye-candy, there are a couple of issues I must point out:
Things to keep in mind
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).
画像グリッドは非常に魅力的ですが、
注意しなければならない問題がいくつかあります。
- ホバー効果はタッチデバイス
（タブレット、スマートフォンなど）では機能しません。 - ここで実装されているCSS3アニメーションの
いくつか/すべては、古いブラウザでは動作しません。
（私はすでにこれについて言及しましたが、
私は十分に強調することはできません）
https://cabrerahector.com/wordpress/how-to-make-a-grid-of-po...最後まで
ご高覧いただきまして
有難うございました
