「サルワカのトップページのように上部に人気記事一覧を設置したい」という要望を多く頂きましたので、カスタマイズの方法を紹介したいと思います。
目次
カスタマイズの完成イメージ
スマホ表示の場合にも、次のように2列で表示されます（新着記事一覧は、通常通り1列での表示となります）。
その1：ウィジェットを使った方法（簡単）
ウィジェットで設置する手順1：ウィジェットにコードをコピペ
ウィジェットを使って設置する場合は、「トップページ記事一覧上」のウィジェットに「カスタム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★">
<div class="cardtype__img">
★<imgタグ>★
</div>
<div class="cardtype__article-info">
<h2>★タイトル★</h2>
</div>
</a>
</article>
<article class="cardtype__article">
<a class="cardtype__link" href="★リンク先URL★">
<div class="cardtype__img">
★<imgタグ>★
</div>
<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：articleのカタマリをリンク数ぶん複製
<article...>〜</article>が1つのカードを表現するカタマリです。上のコードでは、2つだけ載せています。必要に応じて複製しましょう。
ウィジェットで設置する手順3：コードを書き換え
上で貼り付けたコードのうち、★の部分を書き換えます。「★リンク先URL★」と「★タイトル★」は説明するまでもないですね。「★<imgタグ>★」には画像のタグを貼り付けます。投稿ページなどで、普段記事を書く時と同じように画像を追加しましょう。このとき、サイズで「520 x 300px」を選ぶようにしてください。
画像を貼り付けたら、ビジュアルではなくテキストエディタを開き、<img …>をコピーしてコードの方に貼れば良いわけですね。★は消すようにしてくださいね。ここまで出来たら一旦保存しましょう。
ウィジェットで設置する手順4：CSSを追加
トップページ記事一覧上のウィジェットにより設置する場合には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: flex;
-webkit-flex-direction: row;
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;
}これでカスタマイズは完了です。キャッシュを削除してご確認ください。
その2：子テーマでカスタマイズする方法
子テーマを使ったカスタマイズは、中級者〜上級者向けの内容です。HTMLとCSSの書き方がある程度分かる方のみカスタマイズを行って頂くようお願いします。
準備１：子テーマ
ここでは、子テーマを使ってのカスタマイズ方法を紹介します。導入方法は次の記事を参考にしてください。
WordPressの子テーマとは？安全にカスタマイズを行う方法準備2：FTPソフト
FTPソフトがないとこのカスタマイズは出来ません。
準備3：バックアップ
いざというときのために必ずバックアップは取っておきましょう。
2-1. 子テーマにpartsディレクトリを作成
まず、子テーマフォルダ（ディレクトリ）の中にpartsという名前のディレクトリを作成します。FTPソフトにもよりますが、右クリックで「ディレクトリを作成」というメニューが表示されるかと思います。名前をお間違えのないように。
2-2. 親テーマのpost-grid.phpをコピー
ここで親テーマディレクトリを開きます。さらに、この中のpartsディレクトリを開きます（さきほど子テーマ内に作ったものとは別です。親テーマの中のpartsです）。すると、post-grid.phpというファイルが見つかるはずです。
このファイルを子テーマのparts内に複製します。そのために一旦post-grid.phpを開いて中身を全部コピーしましょう（一字一句モレのないように）。
2-3. 子テーマのparts内に貼付け
さきほど作った子テーマのpartsディレクトリを開きます。その中にpost-grid.phpという名前のファイルを新規作成し、中身にコピーしたコードを貼り付けます。
これで準備完了。すでに子テーマ内のpost-grid.phpが読み込まれるようになっています。
2-4. コードを貼付け
子テーマ（親テーマではありません）の中のpost-grid.phpを開きます。このファイルの先頭に以下のコードを貼り付けます。<?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 人気記事?>2-5. コードを書き換え
★の部分を書き換えます。「★リンク先URL★」と「★タイトル★」は説明するまでもないですね。「★<imgタグ>★」には画像のタグを貼り付けます。投稿ページなどで、普段記事を書く時と同じように画像を追加しましょう。このとき、サイズで「520 x 300px」を選ぶようにしてください。
画像を貼り付けたら、ビジュアルではなくテキストエディタを開き、<img …>をコピーしてコードの方に貼れば良いわけですね。★は消すようにしてくださいね。ここまで出来たら一旦保存しましょう。
2-6. CSSを追加
子テーマのstyle.cssを開き、下記のCSSを追加します。
/*トップに人気記事を設置*/
/*タイトル*/
.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の/*タイトル*/部分で「人気記事」のテキスト装飾を指定しています。好みで変えるようにしましょう。
カスタムHTMLで作った「おすすめ記事」の並びが崩れてしまう
お世話になっております。 こちらの1の方法(カスタムHTMLブロックを直接挿入する方式)でおすすめ記事をトップページに表示させようとしたのですが、四つ目の記事の位置がパソコン・モバイル共に同じように崩れてしまいます。 改行が入ってるのかといじってみても変わらないです。 2×2で表示ささらにはどうしたら良いでしょうか。 やはり、2カラムブロック内での表示がネックなのでしょうか…
ウィジェットの背景を無色にしたい
コメント失礼します。 こちらの記事を参考にウィジェットを使って人気記事を表示したのですが、ウィジェットの背景が白いので浮いてしまいます。 背景はグレーなのですが、特定のウィジェットの背景を透明に出来ないでしょうか？ ご教授いただけると嬉しいです。
ウィジェットを使った方法でカスタマイズできたが、下の新着記事との大きさが違う
お世話になっております。 SANGOいつも利用させていただいてます。 こちらの記事にあるように、ウィジェットで人気記事を作成しましたところ、表示されましたが、PC表示の際、下の新着記事とのサイズ感がどうにも気になり,,,解消する方法を教えていただければ幸いです。 ちなみにスマホではちょうど良いサイズ感で表示されてます。
ウィジェットのおすすめ記事の隙間を消したい
以下３点についてお聞きしたいです。 ・トップページに「おすすめ記事」と「ヘッダー」の間に隙間が空いてしまいます。どうすれば隙間を無くせるでしょうか。 ・おすすめ記事に掲載した記事の画像とタイトルの間に１行空白ができてしまいます。空白を無くす方法を教えてください。 ・サルカワさんと同じように、「ーーーーおすすめ記事ーーーー」のように、横に線をつけたい場合はどうすればいいのでしょうか。 よろしくお願い…
カスタムHTML上での画像サイズの変更
＞ウィジェットで設置する手順3：コードを書き換え ＞「★★」には画像のタグを貼り付けます。投稿ページなどで、普段記事を書く時と同じように画像を追加しましょう。このとき、サイズで「520 x 300px」を選ぶようにしてください。 こちらhtmlでしか表示されず投稿ページのように「添付ファイルの表示設定」の表示が出ないのですがどの様に設定すればよろしいでしょうか？
トップページに人気記事を設置する方法で「カードタイプ」に変更したい
お世話になります。 「SANGOのショートコード一覧」で紹介されていたcard2の形を表示させたいのですが可能でしょうか？
おすすめ記事や関連記事のアイコンが表示されない
サイトは非公開でお願いします。 タイトルのとおり、トップのおすすめ記事と新着記事の横のアイコンや、個別記事下の関連記事のアイコンが表示されません。 どうしてなのでしょうか？
画像や人気記事一覧は手動ですか？
一応手順通りやり、2列できちんと一覧で表示させることができました。 しかし、画像URLやページURLを直接打ち込んでいることから、自動化できず、人気のものを都度自分で変更しないといけないという仕様なのでしょうか。 また、デモサイトのようにトップの左右に新着記事と人気の記事のボタンがあり、ボタンを押したらそれに対応した記事が出るようにしたいのですが、どうすればいいでしょうか。 何卒よろしくお願いいた…
人気記事にもカテゴリーのラベルを表示したい
いつもお世話になってます。新着記事には左上にカテゴリー名のタグが貼り付けられますが、人気記事の方にも貼り付けたいです。どのようにすればよろしいでしょうか？宜しくおねがいします。
人気記事の画像が小さく表示されてしまう
お世話になっております。 何度も申し訳ありません。 パソコンで見ると、人気記事の画像がうまくはまっていない現象に悩んでいます。 (画像が左に寄ってしまい、右に空白が見られる。) スマホやタブレットは、問題なく表示されていますが・・・。 ご教授お願い致します。
https化しているのに「接続は保護されていません」「安全ではありません」と表示される
先日購入させていただきました。 デザイン等、気に入っております。 こちらのページを参考にし、編集を行っています。 しかし、スマホだと２列に表示されません。 また画像がずれてしまいます。 この二点を解決したいと思っています。 この場合どのようにすればいいでしょうか？ この件とは違いますが、もう一点。 新着記事もスマホで２列表示したいのですが、どうすればいいでしょうか・・・。 お忙しい所申し訳ありませ…
人気記事カスタマイズがスマホでは2列に表示されない
お世話になっております。 こちらのページを参考にし、編集を行ったのですが、スマホだと２列に表示されませんでした。 この場合どのようにすればいいでしょうか？
人気記事カスタマイズで1列で中央表示にしたい
お世話になります。 素晴らしいテーマありがとうございます。 このページでは指定した記事が 2列で綺麗に配置されるように 説明がされているかと思いますが、 1列にして中央にすることはできますでしょうか？ （1記事だけで綺麗に見えるようにしたいです。） お忙しい中恐縮ですが、ご回答いただければ幸いでございます。 何卒よろしくお願いいたします。
『人気記事』『新着記事』の文字の両側にボーダーラインを挿入したい
何度もコメントすみません。サルワカくん（https://saruwakakun.com）のトップページのように、『人気記事』『新着記事』の両側にボーダーラインを挿入する方法を教えていただけますか？ よろしくお願いします！
人気記事を横スクロールできるようにしたい
シンプルで可愛らしいデザインが気に入って愛用させていただいています。 ウィジェットで人気記事を表示させる際、できるだけ多くの記事を表示させたいので「関連記事」のように横スクロールで表示させたいと思っているのですが、出来るようでしたら教えていただきたいです。何卒よろしくお願いします。