うらなか書房のあやしいグッズあり〼うらなか書房と申します。Yahoo、Tシャツトリニティなどで、ちょっとあやしいTシャツやグッズの販売をしています。このブログでは、おすすめの映画や漫画、本、その他風変わりなもの・場所などの紹介をしています(たまにお役立ち情報や陰気な話も書きます)。@uranakashobou//padding-left本ページはプロモーションが含まれています。Posts」――ワードプレスのブログに人気記事を表示できる代表的なプラグインなので、使用している方も多いと思います。Posts」を外してJetpackの人気記事を表示する機能に切り替えました。その結果――表示速度は若干速くなったようなのですが、期待したほど劇的には改善されず......。Posts」の方が高機能だし、使い勝手も断然いいのですよね......。Posts」のカスタマイズ、ウィジェット以外の場所(記事上や記事の中)に人気記事ランキングを表示カテゴリー別人気記事ランキングを表示サムネイル画像に順位を表示させる方法などを備忘録的に書き留めておきたいと思います。注意テーマファイルなどのカスタマイズを行う際は必ずバックアップをとって、恐れ入りますが自己責任でお願い致します。Posts」の設定画面に「パラメーター」というページがありまして、それを参考にしました。このコードを、人気記事ランキングを表示させたい場所――記事上なら「header.php」や「single.php」などのテーマファイルに載せます。class=”main”」のすぐ下に載せていました(グローバルメニューの下)。「header」(12行目)人気記事ランキングの上に文字を表示させたい時にその文言を「header」に記入します。上の例だと「人気記事TOP3」と表示されます。「header_start」と「header_end」(13、14行目)上の「header」の文言を囲むhtmlコードになります。上の例だと「div」だけですが、スタイルシートで好きな見た目にするといいと思います。「wpp_start」と「wpp_end」(15、16行目)人気記事ランキング全体を囲むhtmlコードです。Posts」のもともとのCSSのclass名で、そこに「tpop」というclassを足して表示を横並びにしました。「tpop」のCSSはこの少し下に載せます。「post_html」(17行目)人気記事ランキングの中身部分の表示のさせ方です。上の例だとサムネイル画像と記事タイトルを「tpop」というclass名のリストで囲って、その中で更に記事タイトルを「tpop」というclass名のpタグで囲っています。CSS上で出てきた「tpop」というclass名のCSSです。inline-block;」でランキングを横並び表示にしています。それと「margin」で間隔の調整をしたり「background」で背景色を変えたりしています。お使いになる場合は数字やカラーコードをお好みのものに変更してください。今後リストなどを横並びにするには「display:flex」を使った方がいいかもしれません。検索してみてこちらの方がよさそうであれば書き換えてください。応用のコード(カテゴリー別)上のコードはブログ全体の人気記事ランキングでしたが、カテゴリー別の人気記事を表示させることも可能です。記事ページではその記事が属するカテゴリーの人気記事TOP3を、カテゴリーページではそのカテゴリー(子・孫カテゴリーを含む)の人気記事TOP3を、その他の固定ページなどでは記事全体の人気記事TOP3を表示するコードです。カテゴリーページの「子カテゴリーや孫カテゴリーを含ませる」ようにする設定にものすごく手間取った記憶があります......。これをやらないと親カテゴリーページのランキングがスカスカになってしまったのでやったのですが、今考えるとそこまでこだわる必要もなかったかも......。記事の中に人気記事ランキングを表示こんな感じで表示されますこれはショートコードで実現可能です。stats_views=0]こういった感じのショートコードを記事の投稿内に書けばOKです。これも詳しい書き方は設定画面の「パラメーター」に載っています。カテゴリー別人気記事ランキングを載せるショートコード上のものにカテゴリーIDを足せばカテゴリー別人気記事ランキングを表示させることもできます(カテゴリーIDの調べ方はこちら)。cat=108]複数のカテゴリーを指定することも可能です。cat=105,319,320,327]CSSあとはCSSで見た目をいじります。「.content-box」(記事の投稿部分のclass名)はお使いのテーマによって異なると思いますので、F12ボタンなどを利用して調べてみてください。Widget」というプラグインを使用して載せていました(通常だとウィジェットにPHPコードを書くことはできないため)。外す前に気付いたのですが、プラグインを入れてまでPHPコードを書くより、ショートコードを使った方がよかったかも......。'do_shortcode');を追加すれば機能するようになるとのこと。位置の入れ替えなどをしないのであれば、「sidebar.php」などのテーマファイルに直接PHPコードを書くのが一番よかったのかもしれません(なぜやらなかったのだろうか......)。サムネイル画像に順位を表示こんな感じで表示されます以前別のブログの記事を参考にしてサムネイル画像に順位を表示するカスタマイズを行ったのですが、そのブログが閉鎖されてしまったのでこのブログで使っていたCSSを下に載せておきます。「記事タイトルが何文字以上だったら、それ以降を省略して『...』をつけてね」という設定をしているにもかかわらず、短いタイトルの時に末尾に「...」が表示され、逆に長いタイトルの時には省略もされず「...」もつかない、という問題が起きて困っていました。調べたら以下のようなフォーラムの質問を見つけました。Postsのタイトル抜粋がおかしい。サポートフォーラムここに書いてある通りに、「wordpress-pupolar-posts.php」というファイルの、strlen($title_sub)という部分を、mb_strlen($title_sub)に直した所、上記の問題はみごとに解決しました。Posts」がアップデートされると上のファイルも上書きされてしまうのでまた元通りに......。面倒なので私はその内書き直さなくなりましたが、気になる方は上記の方法を試してみてください(ただプラグインのファイルをいじることになるので、くれぐれもご注意ください)。書いている人うらなか書房あやしい絵を描いて、それをTシャツやグッズにしています。ホラー映画、カルト映画、その他ちょっと奇妙なものや風変わりなものを見たり読んだりすることが好きです。34マスコットキャラ当ブログのマスコットキャラ「たまに毒吐くちゃん」。Reserved.プライバシーポリシーarrowuphome。