wordpress popular posts




ワードプレス プラグイン Web・コンピューター

人気プラグイン WordPress Popular Postsのカスタマイズ!人気記事に順位とview数を設定する方法

人気記事を表示してくれるWordPressの人気プラグイン『WordPress Popular Posts』の人気記事に順位とview数を設定するカスタマイズについて書きました。

プラグイン『WordPress Popular Posts』の導入方法

wordpress popular posts

「プラグイン」→「新規追加」

から「WordPress Popular Posts」を検索しインストールを行います。

プラグインを導入したら、「有効化」します。

ウィジェットの配置と設定

続いてウィジェットから配置した場所に追加します。

ウィジェットの「WordPress Popular Posts」をクリックし、挿入したい場所にドラッグ&ドロップ、またはWordPress Popular Postsを選択ししサイドバーウィジェット『ウィジェットを追加』クリック。

wordpress popular posts

挿入した場所のWordPress Popular Postsを選択し以下のように設定します。

投稿設定

  • タイトルの長さ上限:100
  • 文字
  • アイキャッチ画像を表示にチェック
  • サイズを手動で指定
  • 幅:300px
  • 高さ:188px
  • 統計タグの設定
  • 閲覧数を表示 のみにチェック
  • HTML マークアップ設定
  • カスタム HTML マークアップを使う にチェック
  • タイトルの前 / 後: 空白

投稿の前 :

後:

投稿の HTML マークアップ:

「style.css」を追記してデザインを設定

何も設定していないので、デザインが崩れています。

「style.css」でデザイン崩れを直します。

レスポンシブ対応のコード。

Affinger5の場合はサイドバーの『外観』→『カスタマイズ』の一番仕方の『追加CSS』に上記のコードを入力します。

グーグルマップ wordpress レスポンシブ

以下を設定すれば、デザインが変更できます。

101行目…タイトル文字色

107行目…オンマウス時タイトル文字色

121行目…タイトルエリアのbackgroundカラー

125行目…オンマウス時タイトル文字色(107行目よりこっちの方が優先される)

147行目…各順位の背景色

156行目…1位の背景色

159行目…2位の背景色

162行目…3位の背景色

164~175行目…閲覧数のデザイン

width:横幅
height:高さ
z-index:背面・前面の優先度
position:ポジション設定
top:ポジションの上からいくつズラすか
left:ポジションの左からいくつズラすか
font-size:フォントのサイズ
text-align:フォントのセンタリング
color:フォントのカラー
background-color:背景色
transform:どれほど斜めにするか

以上が設定方法です。

まとめ

サイトのスピードを遅くなる可能性がある『重たい』プラグインという理由で現在はWordPress Popular Postsを使用してません。

また利用するときのための備忘録として残しておきます。

スポンサーズドリンク

-ワードプレス, プラグイン, Web・コンピューター
-

Copyright© すけたろうの雑記帳 , 2020 All Rights Reserved.