3ヶ月前に投稿

WordPress Popular Postsをgrid表示してみる

2019年6月13日

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

4

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.
( このチュートリアルでは、
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_startwpp_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

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

  • ホバー効果はタッチデバイス
    (タブレット、スマートフォンなど)では機能しません。
  • ここで実装されているCSS3アニメーションの
    いくつか/すべては、古いブラウザでは動作しません。
    (私はすでにこれについて言及しましたが、
    私は十分に強調することはできません)

貴重なお時間を割き、
最後まで
ご高覧いただきまして
有難うございました

WordPress Popular Postsをgrid表示してみる