「サルワカのトップページのように上部に人気記事一覧を設置したい」という要望を多く頂きましたので、カスタマイズの方法を紹介したいと思います。
よく考えたら、子テーマをいじらなくてもウィジェットだけで、人気記事の設置ができました。というわけで、記事にウィジェットを使った場合の方法の解説も加えました。ただしこの場合、トップの2ページ目以降にも上部に人気記事が表示されることにご注意ください。
子テーマを使ったカスタマイズは、中級者〜上級者向けの内容です。HTMLとCSSの書き方がある程度分かる方のみカスタマイズを行って頂くようお願いします。
目次
カスタマイズの完成イメージ
スマホ表示の場合にも、次のように2列で表示されます（新着記事一覧は、通常通り1列での表示となります）。
事前準備
子テーマ
ここでは、子テーマを使ってのカスタマイズ方法を紹介します。導入方法は次の記事を参考にしてください。
FTPソフト
FTPソフトがないとこのカスタマイズは出来ません。
バックアップ
いざというときのために必ずバックアップは取っておきましょう。
手順1：子テーマフォルダにparts/post-grid.phpを作成
SANGOのトップページの記事一覧部分のコードはpartsというフォルダー内のpost-grid.phpに書かれています。こちらを子テーマの複製すれば良いわけですね。
1-1. 子テーマにpartsディレクトリを作成
まず、子テーマフォルダ（ディレクトリ）の中にpartsという名前のディレクトリを作成します。FTPソフトにもよりますが、右クリックで「ディレクトリを作成」というメニューが表示されるかと思います。名前をお間違えのないように。
1-2. 親テーマのpost-grid.phpをコピー
ここで親テーマディレクトリを開きます。さらに、この中のpartsディレクトリを開きます（さきほど子テーマ内に作ったものとは別です。親テーマの中のpartsです）。すると、post-grid.phpというファイルが見つかるはずです。
このファイルを子テーマのparts内に複製します。そのために一旦post-grid.phpを開いて中身を全部コピーしましょう（一字一句モレのないように）。
1-3. 子テーマのparts内に貼付け
さきほど作った子テーマのpartsディレクトリを開きます。その中にpost-grid.phpという名前のファイルを新規作成し、中身にコピーしたコードを貼り付けます。
これで準備完了。すでに子テーマ内のpost-grid.phpが読み込まれるようになっています。
手順2：子テーマのpost-grid.phpを編集
子テーマ（親テーマではありません）の中のpost-grid.phpを開きます。
2-1. コードを貼付け
ファイルの先頭に以下のコードを貼り付けます。<?php if (have_posts())の前ですね。
<?php if( !is_paged() && is_home() ): //人気記事?>
<p class="center strong top-title"><i class="fa fa-line-chart"></i> 人気記事</p>
<div class="popular-posts cardtype">
<article class="cardtype__article">
<a class="cardtype__link" href="★リンク先URL★">
<p class="cardtype__img">
★<imgタグ>★
</p>
<div class="cardtype__article-info">
<h2>★タイトル★</h2>
</div>
</a>
</article>
<article class="cardtype__article">
<a class="cardtype__link" href="★リンク先URL★">
<p class="cardtype__img">
★<imgタグ>★
</p>
<div class="cardtype__article-info">
<h2>★タイトル★</h2>
</div>
</a>
</article>
</div>
<p class="center strong top-title"><i class="fa fa-thumb-tack"></i> 新着記事</p>
<?php endif; //END 人気記事?>参考：ウィジェットで設置する場合
ウィジェットを使って設置する場合は、「トップページ記事一覧上」のウィジェットに「カスタムHTML」を追加し、下記のコードを貼りつけてください。なお、ウィジェットのタイトルは空欄にしてくださいませ。
<p class="center strong top-title"><i class="fa fa-line-chart"></i> 人気記事</p>
<div class="popular-posts cardtype">
<article class="cardtype__article">
<a class="cardtype__link" href="★リンク先URL★">
<p class="cardtype__img">
★<imgタグ>★
</p>
<div class="cardtype__article-info">
<h2>★タイトル★</h2>
</div>
</a>
</article>
<article class="cardtype__article">
<a class="cardtype__link" href="★リンク先URL★">
<p class="cardtype__img">
★<imgタグ>★
</p>
<div class="cardtype__article-info">
<h2>★タイトル★</h2>
</div>
</a>
</article>
</div>
<p class="center strong top-title"><i class="fa fa-thumb-tack"></i> 新着記事</p>
2-2. articleのカタマリをリンク数ぶん複製
<article...>〜</article>が1つのカードを表現するカタマリです。上のコードでは、2つだけ載せています。必要に応じて複製しましょう。
2-3. コードを書き換え
★の部分を書き換えます。「★リンク先URL★」と「★タイトル★」は説明するまでもないですね。「★<imgタグ>★」には画像のタグを貼り付けます。投稿ページなどで、普段記事を書く時と同じように画像を追加しましょう。このとき、サイズで「520 x 300px」を選ぶようにしてください。
画像を貼り付けたら、ビジュアルではなくテキストエディタを開き、<img …>をコピーしてコードの方に貼れば良いわけですね。★は消すようにしてくださいね。ここまで出来たら一旦保存しましょう。
手順3：CSSを貼付け
子テーマのstyle.cssを開き、下記のCSSを追加します。
子テーマ（post-grid.php）でカスタマイズを行った場合
/*トップに人気記事を設置*/
/*タイトル*/
.top-title {
margin-top: 0;
font-size: 1.45em;
font-weight: bold;
color: #389bff;
}
/*余白調整など*/
.popular-posts .cardtype__article-info {
padding-top: 0.5em;
}
.popular-posts .cardtype__link {
padding-bottom: 10px;
}
@media only screen and (max-width: 480px) {
/*スマホでも2列横並びに*/
.cardtype {
display: -webkit-flex;
display: -ms-flexbox;
display: -moz-box;
display: flex;
flex-direction: row;
-webkit-flex-direction: row;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.popular-posts .cardtype__article {
width: 48%;
}
.popular-posts .cardtype__article:nth-child(odd){
margin-right: 4%;
}
.popular-posts.cardtype h2 {
margin: 0 5px;
font-size: 15px;
}
}
/*END トップに人気記事を設置*/ウィジェットで人気記事を設置する場合
トップページ記事一覧上のウィジェットにより設置する場合にはCSSが上記とは少し異なります。以下のCSSを使うようにしてくださいませ。
/*トップページ人気記事用のウィジェット*/
.popular-posts .cardtype__article-info {
padding-top: 0.5em;
}
.popular-posts .cardtype__link {
padding-bottom: 10px;
}
.popular-posts.cardtype {
display: -webkit-flex;
display: -ms-flexbox;
display: -moz-box;
display: flex;
flex-direction: row;
-webkit-flex-direction: row;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.popular-posts .cardtype__article {
width: 48%;
margin: 0 0 25px;
}
.popular-posts .cardtype__article:nth-child(odd){
margin-right: 4%;
}
.popular-posts .cardtype__article p {
margin: 0;
}
.popular-posts.cardtype h2 {
margin: 0 5px;
font-size: 15px;
}保存すれば、カスタマイズは完了です。ブラウザのキャッシュ削除やキャッシュプラグインのキャッシュ削除をお忘れなく。
ちなみに上のCSSの/*タイトル*/部分で「人気記事」のテキスト装飾を指定しています。好みで変えるようにしましょう。
ノウハウを皆さんで共有するために、この記事に関する質問がある場合にも、コメント欄からお願いします。
さっそく実装してみましたが、カッコよくて気に入ってます♫ただ、２点ほど気になるところがあります。
１，記事一覧の２ページ目以降や、カテゴリーページに行っても、人気記事がずっと表示されっぱなしになっているので、人気記事はトップヘージのみ表示できるような設定にしたいです。
２，スマホで見たときに、記事カードがズレてしまうのと、サンプル完成画像とは違い、カードとカードの間に幅がなくなってします。
すごくいい機能なので、どうにか上の２点を修正したいです！どうぞよろしくお願いします！
1. たしかにその通りですね。上記のコードに修正を加えました。
<?php if( !is_paged() && is_home() ): //人気記事?>
ここにコード
<?php endif; ?>
とすれば、1ページ目のみに表示されます。
2. 拝見しましたが、問題なく表示されていますよ。記事本文にも書いていますが、キャッシュを削除してください。
何度もすみません。スマホからの見た目ですが、ブラウザキャッシュを削除して、プラグインもすべてはずしてみましたが、変わりませんでした。
ちなみに、iPhone 6s Plus を使っていて、google, google chrome, safari のブラウザで試してみましたが、すべて同じように表示されてしまいます。
他にも機種をかえて、iPhone 6 Plus でも同じで、macbook Safari の開発モードからスマホビューで見てみましたが、やっぱりちょっとズレて表示されてしまっています。
ちなみに、なぜかmacbook chrome の開発モードから見たときのみ、正常に表示されていました。。。
お手数おかけいたしますが、どうぞよろしくお願いします。
そういうことですね…。色々と試して頂き、ありがとうございます。
上部のdivタグの中に入っている「cf」というクラス名を消してみて頂けますか？
cfを消すだけで後は何も変えなくてOKです。
お手数をおかけしますがよろしくお願いします。
完璧に直りました！ありがとうございました＼(^o^)／
とても使い勝手が良く、見た目も良くて気に入って使わせていただいています。
ウィジェットでの記事表示についてなのですが、3列にすることはできますか？
また、2列のものと、3列のものと使い分けて表示させたいと思っているのですが、出来るようでしたら教えていただきたいです。
よろしくお願いします。
3列にはやろうと思えばできますが、表示の関係からあまりおすすめしません。
また、かなりたくさんCSSを書き足す必要が出てきます。
申し訳ありませんが、ご自身でカスタマイズして頂くようお願いします。
お忙しいところ回答いただきましてありがとうございました。
いえ、回答できず申し訳ありません。
シンプルで可愛らしいデザインが気に入って愛用させていただいています。
ウィジェットで人気記事を表示させる際、できるだけ多くの記事を表示させたいので「関連記事」のように横スクロールで表示させたいと思っているのですが、出来るようでしたら教えていただきたいです。何卒よろしくお願いします。
できなくはないのですが「右側にサイドバーがある」PC表示の場合はどうするイメージでしょうか。
スマホなら良いのですが、PCでの隠し方に困りますね…。
返信ありがとうございます。
サイドバーに重ならない、サイドバーでは見えない形でメインカラム部分のみでの横スクロールをイメージしていました。これだと見た目がいまいちでしょうか…
サイドバーの手前でブツンと切れてしまうのでは、見た目がイマイチかと思います。
（バグに見えてしまうかもしれません…）
スマホだけスクロールする…という形なら問題なさそうですが。
迅速丁寧な対応、本当にありがとうございます。
なるほど…それではスマホだけスクロール（もしくはトップページを固定ページ１カラム）の場合はどうすればよいでしょうか…？
@media only screen and (max-width: 480px) {
.popular-posts.cardtype {
overflow-x: scroll;
white-space: nowrap;
display: block;
margin: 5px -15px 5px 0;
}
.popular-posts .cardtype__article {
width: 230px;
margin: 0 0 25px;
display: inline-block;
}
}/*消さない*/
上記のCSSをこの記事で貼ったコードのさらに下に貼り付けることで、できるのではないかと思います。
お試し頂けますか？
できました！親切な対応ありがとうございました！
何度もコメントすみません。サルワカくん（https://saruwakakun.com）のトップページのように、『人気記事』『新着記事』の両側にボーダーラインを挿入する方法を教えていただけますか？
よろしくお願いします！
HTMLを下記のようにして
<p class="center strong top-title"><span><i class="fa fa-paw"></i> 人気記事</span></p>CSSを
.top-title {position: relative;
margin: 0 1.5%;
}
.top-title:before {
position: absolute;
content: '';
border-bottom: 2px solid black;
top: 50%;
left: 0;
z-index: -1;
width: 100%;
}
.top-title span {
font-weight: bold;
color: #4d4b4b;
font-family: Quicksand,sans-serif;
display: inline-block;
padding: 1em;
letter-spacing: .05em;
font-size: 17px;
background: #f0ebeb;
}
とすれば、できるかなと思います。
以前もお伝えしておりますが、本来であれば、「◯◯にしたい」というカスタマイズの方法を教えることまではサポートしていないので…。
（「◯◯のように◯◯したい」という1件の要望に対応するのには時間がかかりますし、対応し出すとキリがないので、ご理解頂けると幸いです）
サルワカさん、お忙しいなかありがとうございました m(_ _)m それからカスタマイズの件、ご迷惑おかけ致しました。
いえ、融通が利かなくて申し訳ないです。
どうしても今は細かな+αのサポートまでは手が周らないので、ご容赦頂けると幸いです。
カスタマイズ参考にさせていただきました。
SPだとキレイに表示されるのですが、PCだとボーダーラインが記事２列よりはみ出してしまいます。
（メインコンテンツの幅が記事２列より広いためだと思われます）
お手すきの際で構いませんのでご教示いただけますと幸いです！
カードタイプで確認してみましたが、PCでも問題なく表示されておりました。
横長の記事一覧レイアウトをご利用ですか？
可能であればURLを教えて頂ければと思います。
コメントありがとうございます。
カードタイプを利用しております。
こちらご確認お願い致します。
https://takekoputa.net/
なるほど。下記のCSSを追加して見て頂けますか？
@media only screen and (min-width: 1030px) { #main .top-title { margin: 0 6% 0 0px; } }※ 追加後はキャッシュの削除をお願いします
こちら綺麗に表示することができました！
ありがとうございます。
（いつも丁寧にご対応いただき、本当にテーマを買ってよかったと思います！）
トップページに人気記事、新着記事を設置しましたが、新着記事は時系列で表示されていくことは分かるのですが、人気記事というのはどのような判断基準で表示すれば良いのでしょうか？何かをすれば自動で表示されてるのでしょうか？それとも、自分で勝手に人気を判断し、そのページのアドレスなどをソースコードに書き表示させるのでしょうか？
初歩的な質問で申し訳ありませんがご回答いただけると助かります。
ご自分の好きな順番で並べれば良いと思います。
お忙しい中、ご回答ありがとうございました。
度々失礼致します。人気記事に固定ページも含めた上で表示させたいのですが、投稿一覧の累計になっており何かよい方法は御座いますでしょうか？お手数をおかけいたします。
固定ページは含めることができません・・・。
恐れ入りますが、ご理解の程よろしくおねがいします。
お世話になります。
SANGOの使いやすさに日々楽しくブログ更新ができています。有り難うございました。
整体院をしており、出来ればトップページに様々な情報を載せたいと思い固定ページを作成しておりました。
ただ、トップページ用固定ページですと１カラムで情報が間延びしているように感じています。もし可能でしたら記事ページのように、右側（もしくは左側）に人気記事や固定ページ一覧が載せられると助かるのですが、可能でしょうか？
また、別案でも対応可能でしたらご教授いただけると幸いです。
なるほど。その場合、通常の固定ページ（デフォルトテンプレート）をトップページに固定すると良いのではないかと思います。
トップページ用の固定ページテンプレートでなくても、トップページ固定が可能です。
ご確認よろしくおねがいします。
ちょっと解からないところもありましたが、「ウィジェット→トップページ記事一覧上→テキスト→固定ページで作成していたテキストを貼り付け」でイメージしていた形に近づけられました。
サルワカさんのご指摘と違うかもしれませんが・・・また壁にぶち当たった時に宜しくお願い致します。
なるほど。そのように対処したのですね。
ご報告ありがとうございます。
いつもありがとうございます。
ウィジェットから設定してみたのですが、トップページに設定した記事の大きさが、普段の新着記事より小さく表示されています。
同じサイズにすることはできるのでしょうか？
CSSの
.popular-posts .cardtype__article-info { padding-top: 0.5em; }を
.popular-posts .cardtype__article-info { padding: 1em .5em .5em; }に置き換えます。次に
.popular-posts .cardtype__article { width: 48%; margin: 0 0 25px; }を以下に置き換えます。
@media only screen and (min-width: 480px) { .popular-posts .cardtype__article { width: 48%; margin: 0 0 25px; } }これで同じサイズになるかと思います。
お忙しい中、ありがとうございます！やってみます！
お世話になります。
自分の指定した記事ではなく、sangoのウィジェットの人気記事を固定ページに表示させることはできますか？
要は、「人気記事一覧」という固定ページを作りたいのですが・・・。
ウィジェットを固定ページに表示することができるウィジェットを使用してみましたが、
その場合はかなりレイアウトが崩れるので、CSS編集で可能であれば教えていただけたらと思いました。
お忙しい中恐縮ですが、よろしくお願いいたします。