【サルワカ風】トップページに人気記事を設置する方法

2017/11/12 2018/11/20

「サルワカのトップページのように上部に人気記事一覧を設置したい」という要望を多く頂きましたので、カスタマイズの方法を紹介したいと思います。

カスタマイズの完成イメージ
その1：ウィジェットを使った方法（簡単）
その2：子テーマでカスタマイズする方法

カスタマイズの完成イメージ

スマホ表示の場合にも、次のように2列で表示されます（新着記事一覧は、通常通り1列での表示となります）。

その1：ウィジェットを使った方法（簡単）

ウィジェットで設置する手順1：ウィジェットにコードをコピペ

ウィジェットを使って設置する場合は、「トップページ記事一覧上」のウィジェットに「カスタムHTML」を追加し、下記のコードを貼りつけてください。なお、ウィジェットのタイトルは空欄にしてくださいませ。

カスタム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を使うようにしてくださいませ。

style.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;
}

これでカスタマイズは完了です。キャッシュを削除してご確認ください。

その2：子テーマでカスタマイズする方法

MEMO

子テーマを使ったカスタマイズは、中級者〜上級者向けの内容です。HTMLとCSSの書き方がある程度分かる方のみカスタマイズを行って頂くようお願いします。

HTML&CSS入門： Webデザインをイチから学ぼう

準備１：子テーマ

ここでは、子テーマを使ってのカスタマイズ方法を紹介します。導入方法は次の記事を参考にしてください。

WordPressで子テーマを活用して安全にカスタマイズを行う方法

準備2：FTPソフト

FTPソフトがないとこのカスタマイズは出来ません。

【FileZillaの使い方】WordPressでFTPソフトを使おう

準備3：バックアップ

いざというときのために必ずバックアップは取っておきましょう。

WordPressでバックアップを取る4つの方法（初心者向け）

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())の前ですね。

post-grid.php

<?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」を選ぶようにしてください。

2-6. CSSを追加

子テーマのstyle.cssを開き、下記のCSSを追加します。

style.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の/*タイトル*/部分で「人気記事」のテキスト装飾を指定しています。好みで変えるようにしましょう。

57 COMMENTS

森田 2018/11/26

いつもお世話になってます。新着記事には左上にカテゴリー名のタグが貼り付けられますが、人気記事の方にも貼り付けたいです。どのようにすればよろしいでしょうか？宜しくおねがいします。

回答を見る

大川 2018/09/10

お世話になっております。
何度も申し訳ありません。

パソコンで見ると、人気記事の画像がうまくはまっていない現象に悩んでいます。
(画像が左に寄ってしまい、右に空白が見られる。)
スマホやタブレットは、問題なく表示されていますが・・・。

ご教授お願い致します。

回答を見る

大川 2018/09/02

先日購入させていただきました。
デザイン等、気に入っております。
こちらのページを参考にし、編集を行っています。
しかし、スマホだと２列に表示されません。
また画像がずれてしまいます。
この二点を解決したいと思っています。
この場合どのようにすればいいでしょうか？

この件とは違いますが、もう一点。
新着記事もスマホで２列表示したいのですが、どうすればいいでしょうか・・・。
お忙しい所申し訳ありません。

回答を見る

アキラ 2018/08/14

お世話になっております。
こちらのページを参考にし、編集を行ったのですが、スマホだと２列に表示されませんでした。
この場合どのようにすればいいでしょうか？

回答を見る

近藤 2018/08/10

お世話になります。
素晴らしいテーマありがとうございます。

このページでは指定した記事が
2列で綺麗に配置されるように
説明がされているかと思いますが、
1列にして中央にすることはできますでしょうか？
（1記事だけで綺麗に見えるようにしたいです。）

お忙しい中恐縮ですが、ご回答いただければ幸いでございます。
何卒よろしくお願いいたします。

回答を見る

天野貴文 2018/07/20

SANGO有難く使わせて頂いております。
こちらの人気記事の取り付け方法を実行し、大変見やすいサイトになりました。
それで実行した後ページ下に２．３．４ページへと進むボタンが消えまして、こちらはどう対応したらよろしいでしょうか？

回答を見る

ヨウヘイ 2018/04/10

お世話になります。

「ウィジェットで人気記事を設置する場合」の方法で試したところ２列になりませんでした。

何が間違っているか分からないので教えて頂けないでしょうか？

それとカード(520✖️300)のタイトル余白と上の余白を消したいのですがどうすれば宜しいでしょうか？

宜しくお願い致します。

回答を見る

みこ 2018/03/27

こんにちは！素敵なテーマをありがとうございます。
こちらの記事を見て編集をしたのですが、スマホの表示で2列になりません。
その場合はどうすれば良いでしょうか？？

回答を見る

青ちゃん 2018/02/18

いつもありがとうございます。

ウィジェットから設定してみたのですが、トップページに設定した記事の大きさが、普段の新着記事より小さく表示されています。

同じサイズにすることはできるのでしょうか？

回答を見る

ono 2018/02/09

お世話になります。
SANGOの使いやすさに日々楽しくブログ更新ができています。有り難うございました。

整体院をしており、出来ればトップページに様々な情報を載せたいと思い固定ページを作成しておりました。
ただ、トップページ用固定ページですと１カラムで情報が間延びしているように感じています。もし可能でしたら記事ページのように、右側（もしくは左側）に人気記事や固定ページ一覧が載せられると助かるのですが、可能でしょうか？
また、別案でも対応可能でしたらご教授いただけると幸いです。

回答を見る