PR
広告

WordPress Popular Postsを綺麗に表示するCSSカスタマイズ

ブログ
2017.06.24

WordPress Popular Postsを綺麗に表示するCSSカスタマイズを紹介しています。
パソコン初心者の方でも出来るように、カスタマイズはコピペのみの内容なので簡単です。

紹介しているのは、記事本文中(投稿・固定ページ)にWordPress Popular Postsを綺麗に表示するCSSカスタマイズです。
1つのページとして、人気記事一覧を作成したい方におすすめです。

具体的なカスタマイズ方法は、

  • PC・モバイルの表示を分けるショートコードの作成
  • 人気記事表示用のCSSをスタイルシートへ追記
  • ショートコードを貼り、人気記事を表示する

の簡単3ステップです。

WordPress Popular Postsの基本的な使い方については、他のサイトでさんざん紹介されているので割愛させて頂きます。

このカスタマイズは、初心者が色んなサイトを見て調べて作ったものです。
環境によっては上手くいかずレイアウトが崩れる等もあると思うので、このカスタマイズをした際には各自動作確認をしっかりと行って下さい。
当サイトは、WordPressテーマSimplicityを使用しております。
一部、Simplicityの機能を使用しているものもあるため、適宜読み替えていただきますようお願い致します。
広告

人気記事の表示例

この記事で紹介しているカスタマイズを行うと、このようになります。

PCでの表示例

単純ににWordPress Popular Postsのショートコードを貼り付けただけでは表示されない、記事抜粋を表示出来るようにしました。

人気記事のPCでの表示例

モバイル・スマホでの表示例

画面が小さくて逆に見づらくなるので、こちらでは記事抜粋は表示させておりません。

人気記事のモバイル・スマホでの表示例

タブレットの場合はPCの表示が適用されます。

それでは、実際のCSSカスタマイズ方法を説明していきます。

PC・モバイルの表示を分けるショートコードの作成

より綺麗に人気記事を表示させるために、PCとモバイルで使用するCSSを分けています。

投稿記事内でPC・モバイルの表示を分けるためには、ショートコードを使う方法があるので、今回はそれを行いました。

記事内でpcとスマホ（タブレット）の表示内容を切り替えるwordpressのショートコード
久しぶりの更新です^O^ 「pc」と「スマートフォン」で表示を切り替える方法はいくつかありますが、”意図した部分だけ”をショートコードで簡単に内容を切り替えられるようにする手順
kawatama.net

自作のショートコードを使うためには、function.phpに記述を追加する必要があります。
そのため、function.phpに以下の内容をコピペして、PC・モバイルの表示を分けるショートコードを作成して下さい。

// モバイルとPCで表示を分けるショートコードの作成
// PCでのみ表示するコンテンツ
function if_is_pc($atts, $content = null )
{
$content = do_shortcode( $content);
    if(!is_mobile())
        {
        return $content;
        }
}
add_shortcode('pc', 'if_is_pc');

// スマートフォン・タブレットでのみ表示するコンテンツ
function if_is_nopc($atts, $content = null )
{
$content = do_shortcode( $content);
    if(is_mobile())
        {
        return $content;
        }
}
add_shortcode('nopc', 'if_is_nopc');

これを追記することにより、

  • [ pc ][ pc ]で囲った範囲は、PC画面でのみ表示
  • [ nopc ][ /nopc ]で囲った範囲は、モバイル・スマホでのみ表示

されるようになります。

サイトで表示させるために半角スペースを入れています。
実際に使う際には、半角スペースは不要です。
広告

人気記事表示用のCSSをスタイルシートへ追記

人気記事の表示を綺麗にするために、CSSの編集を行います。
編集と言っても、以下に示すCSSを該当する箇所へコピペするだけなので簡単です。

PC表示用CSS。style.cssにコピペ。

/*--------------------------------------
  WP Popular Posts ここから
--------------------------------------*/
#main ul.wpp-list {
  padding: 10px;
}

#main ul.wpp-list li {
  border-bottom: 1px dashed #bbb;
  counter-increment: wpp-count;
  position: relative;
  margin-bottom: 6px;
}
#main ul.wpp-list li:before {
  display: block;
  padding: 1px 11px;
  color: #fff;
  background-color: #333;
  content: counter(wpp-count);
  position: absolute;
  opacity: 1;
  z-index: 10000;
  border-radius: 6px;
  top: 6px;
  left: 6px;
}
#main ul.wpp-list li:last-child {
  border-bottom: none;
}
#main ul.wpp-list li:nth-child(1):before{
  background-color: #FBCC54;
}
#main ul.wpp-list li:nth-child(2):before{
  background-color: #B7BFC1;
}
#main ul.wpp-list li:nth-child(3):before{
  background-color: #D47B16;
}
#main ul.wpp-list li img {
  margin: 5px 10px 5px 5px;
  padding: 3px;
  border: 1px solid #ddd;
}
#main ul.wpp-list li a.wpp-post-title {
position: absolute;
    font-size: 24px;
    font-weight: bold;
    padding: 12px;
    text-decoration: none;
    color: #333;
	line-height: 28px;
}
#main ul.wpp-list li p {
font-size: 16px;
    font-size: 16px;
    padding: 12px;
    text-decoration: none;
    color: #333;
    position: absolute;
    top: 45px;
    left: 165px;
}
/*--------------------------------------
  WP Popular Posts ここまで
--------------------------------------*/

モバイル・スマホ表示用CSS。mobile.cssにコピペ。

/*--------------------------------------
  WP Popular Posts ここから
--------------------------------------*/
#main ul.wpp-list {
  padding: 10px;
}

#main ul.wpp-list li {
  border-bottom: 1px dashed #bbb;
  counter-increment: wpp-count;
  position: relative;
  margin-bottom: 6px;
}
#main ul.wpp-list li:before {
  display: block;
  padding: 1px 11px;
  color: #fff;
  background-color: #333;
  content: counter(wpp-count);
  position: absolute;
  opacity: 1;
  z-index: 10000;
  border-radius: 6px;
  top: 6px;
  left: 6px;
}
#main ul.wpp-list li:last-child {
  border-bottom: none;
}
#main ul.wpp-list li:nth-child(1):before{
  background-color: #FBCC54;
}
#main ul.wpp-list li:nth-child(2):before{
  background-color: #B7BFC1;
}
#main ul.wpp-list li:nth-child(3):before{
  background-color: #D47B16;
}
#main ul.wpp-list li img {
  margin: 5px 10px 5px 5px;
  padding: 3px;
  border: 1px solid #ddd;
}
#main ul.wpp-list li a.wpp-post-title {
	position: absolute;
    font-size: 15px;
    font-weight: 700;
    padding: 5px 1px;
    text-decoration: none;
    color: #333;
    line-height: 19px;
}
/*--------------------------------------
  WP Popular Posts ここまで
--------------------------------------*/

※mobile.cssはSimplicityの機能なのでおそらく他のテーマにはないと思います。とは言っても最近のテーマであれば、モバイルページにのみに適用するCSSを記述する場所はあると思うので、各自で対応をお願い致します。

このCSSカスタマイズは、こちらのサイトを参考にしています。

http://vdeep.net/wp-popular-posts
vdeep.net

ショートコードを貼り、人気記事を表示する

最後に、WordPress Popular Postsのショートコードを貼り、人気記事を表示させます。

以下のコードを新規投稿や、固定ページにコピペして下さい。
ちなみに、私は固定ページに人気記事を設定しました。

当ブログの人気記事です。

[ pc ][ wpp header="人気記事ランキングTOP30(週間)" header_start="<h2>" header_end="</h2>" range="weekly" post_type="post" excerpt_length=90  post_html="<li>{thumb}{title}<p>{summary}</p></li>" thumbnail_width=150 thumbnail_height=150 limit=30 stats_views=0 ][ /pc ]

[ nopc ][ wpp header="人気記事ランキングTOP30(週間)" header_start="<h2>" header_end="</h2>" range="weekly" post_type="post" post_html="<li>{thumb}{title}</li>" thumbnail_width=75 thumbnail_height=75 limit=30 stats_views=0 ][ /nopc ]
サイトで表示させるために、[ wpp ]や[ pc ]等に半角スペースを入れています。
実際に使う際には不要なので、コピペする際に取り除いて下さい。

ショートコードの中身は各自適宜修正してお使い下さい。

変更する部分としては、

  • header・・・人気記事一覧のタイトル
  • header_start、header_end・・・見出しレベル
  • range・・・人気記事の集計単位
  • post_type・・・表示する投稿タイプの種類
  • excerpt_length・・・記事抜粋の文字数
  • thumbnail_width、thumbnail_height・・・サムネイルのサイズ
  • limit・・・表示する人気記事の数
  • stats_views・・・view数を表示するかどうか

くらいかと思います。

おわりに

人気記事を確認するのに、Googleアナリティクスを開いたり、サイドバーにあるWordPress Popular Postsウィジェットの設定を変更するのが面倒だったので、「人気記事ページを作ってしまえ！」と思ったのがきっかけです。

ただ、微妙に見た目が悪かったので、CSSカスタマイズで綺麗にすることにしました。
そして、WordPress Popular Postsの見た目を綺麗にするCSSカスタマイズを紹介しているサイトが少なかったので、公開することにしました。

何かあれば極力答えようとは思いますが、CSSやPHPのカスタマイズは初心者なので返答できない場合があります。ご了承下さい。

タイトルとURLをコピーしました