SANGOのカスタマイズイメージ

SANGO
カスタマイズガイド

テーマの更新情報

Ver1.5 Released !

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

SHARE

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

2017/11/13 追記

よく考えたら、子テーマをいじらなくてもウィジェットだけで、人気記事の設置ができました。というわけで、記事にウィジェットを使った場合の方法の解説も加えました。ただしこの場合、トップの2ページ目以降にも上部に人気記事が表示されることにご注意ください。

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

PCでの表示サンプル

スマホ表示の場合にも、次のように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★">
			<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：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デザインをイチから学ぼう
HTML&CSS入門： Webデザインをイチから学ぼう

準備１：子テーマ

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

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

準備2：FTPソフト

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

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

準備3：バックアップ

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

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

2-1. 子テーマにpartsディレクトリを作成

まず、子テーマフォルダ（ディレクトリ）の中にpartsという名前のディレクトリを作成します。FTPソフトにもよりますが、右クリックで「ディレクトリを作成」というメニューが表示されるかと思います。名前をお間違えのないように。

partsディレクトリを作成

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

画像サイズ

画像を貼り付けたら、ビジュアルではなくテキストエディタを開き、<img …>をコピーしてコードの方に貼れば良いわけですね。★は消すようにしてくださいね。ここまで出来たら一旦保存しましょう。

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

51 Comments

Taka

さっそく実装してみましたが、カッコよくて気に入ってます♫ただ、２点ほど気になるところがあります。

１，記事一覧の２ページ目以降や、カテゴリーページに行っても、人気記事がずっと表示されっぱなしになっているので、人気記事はトップヘージのみ表示できるような設定にしたいです。

２，スマホで見たときに、記事カードがズレてしまうのと、サンプル完成画像とは違い、カードとカードの間に幅がなくなってします。

すごくいい機能なので、どうにか上の２点を修正したいです！どうぞよろしくお願いします！

返信する
サルワカくん

1. たしかにその通りですね。上記のコードに修正を加えました。
<?php if( !is_paged() && is_home() ): //人気記事?>
ここにコード
<?php endif; ?>
とすれば、1ページ目のみに表示されます。

2. 拝見しましたが、問題なく表示されていますよ。記事本文にも書いていますが、キャッシュを削除してください。

返信する
Taka

何度もすみません。スマホからの見た目ですが、ブラウザキャッシュを削除して、プラグインもすべてはずしてみましたが、変わりませんでした。

ちなみに、iPhone 6s Plus を使っていて、google, google chrome, safari のブラウザで試してみましたが、すべて同じように表示されてしまいます。

他にも機種をかえて、iPhone 6 Plus でも同じで、macbook Safari の開発モードからスマホビューで見てみましたが、やっぱりちょっとズレて表示されてしまっています。

ちなみに、なぜかmacbook chrome の開発モードから見たときのみ、正常に表示されていました。。。

お手数おかけいたしますが、どうぞよろしくお願いします。

返信する
サルワカくん

そういうことですね…。色々と試して頂き、ありがとうございます。
上部のdivタグの中に入っている「cf」というクラス名を消してみて頂けますか？
cfを消すだけで後は何も変えなくてOKです。
お手数をおかけしますがよろしくお願いします。

返信する
ミント

とても使い勝手が良く、見た目も良くて気に入って使わせていただいています。

ウィジェットでの記事表示についてなのですが、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をこの記事で貼ったコードのさらに下に貼り付けることで、できるのではないかと思います。
お試し頂けますか？

返信する
Taka

何度もコメントすみません。サルワカくん（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件の要望に対応するのには時間がかかりますし、対応し出すとキリがないので、ご理解頂けると幸いです）

返信する
Taka

サルワカさん、お忙しいなかありがとうございました m(_ _)m それからカスタマイズの件、ご迷惑おかけ致しました。

返信する
サルワカくん

いえ、融通が利かなくて申し訳ないです。
どうしても今は細かな+αのサポートまでは手が周らないので、ご容赦頂けると幸いです。

返信する
Kaz

カスタマイズ参考にさせていただきました。
SPだとキレイに表示されるのですが、PCだとボーダーラインが記事２列よりはみ出してしまいます。
（メインコンテンツの幅が記事２列より広いためだと思われます）

お手すきの際で構いませんのでご教示いただけますと幸いです！

返信する
サルワカくん

カードタイプで確認してみましたが、PCでも問題なく表示されておりました。
横長の記事一覧レイアウトをご利用ですか？
可能であればURLを教えて頂ければと思います。

返信する
サルワカくん

なるほど。下記のCSSを追加して見て頂けますか？

@media only screen and (min-width: 1030px) {
  #main .top-title {
      margin: 0 6% 0 0px;
  }
}

※ 追加後はキャッシュの削除をお願いします

Kaz

こちら綺麗に表示することができました！
ありがとうございます。
（いつも丁寧にご対応いただき、本当にテーマを買ってよかったと思います！）

もりたとしや

トップページに人気記事、新着記事を設置しましたが、新着記事は時系列で表示されていくことは分かるのですが、人気記事というのはどのような判断基準で表示すれば良いのでしょうか？何かをすれば自動で表示されてるのでしょうか？それとも、自分で勝手に人気を判断し、そのページのアドレスなどをソースコードに書き表示させるのでしょうか？
初歩的な質問で申し訳ありませんがご回答いただけると助かります。

返信する
転職キャンパス

度々失礼致します。人気記事に固定ページも含めた上で表示させたいのですが、投稿一覧の累計になっており何かよい方法は御座いますでしょうか？お手数をおかけいたします。

返信する
サルワカくん

固定ページは含めることができません・・・。
恐れ入りますが、ご理解の程よろしくおねがいします。

返信する
ono

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

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

返信する
サルワカくん

なるほど。その場合、通常の固定ページ（デフォルトテンプレート）をトップページに固定すると良いのではないかと思います。
トップページ用の固定ページテンプレートでなくても、トップページ固定が可能です。
ご確認よろしくおねがいします。

返信する
ono

ちょっと解からないところもありましたが、「ウィジェット→トップページ記事一覧上→テキスト→固定ページで作成していたテキストを貼り付け」でイメージしていた形に近づけられました。
サルワカさんのご指摘と違うかもしれませんが・・・また壁にぶち当たった時に宜しくお願い致します。

返信する
サルワカくん

なるほど。そのように対処したのですね。
ご報告ありがとうございます。

返信する
青ちゃん

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

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

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

返信する
サルワカくん

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編集で可能であれば教えていただけたらと思いました。

お忙しい中恐縮ですが、よろしくお願いいたします。

返信する
みこ

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

返信する
サルワカくん

おや、本当ですか・・・。
恐縮ですが、該当のサイトURLを教えて頂けませんか？

返信する
ST

お世話になります。

こちらも利用しているのですが、新着記事と同じようにカテゴリー名と同じデザイン(画像左上)を入れたいのですが手書きで入れる方法を教えていただけないでしょうか？

返信する
ヨウヘイ

お世話になります。

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

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

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

宜しくお願い致します。

返信する
サルワカくん

確認しましたが2列になっていますよー。CSSのキャッシュを削除できていないのではないでしょうか。
もしくはブラウザが古いと、対応できていない可能性があります。
追加したCSSの

.popular-posts .cardtype__link {
    padding-bottom: 10px;
}

の10pxを0にすれば下の余白は消えます。

返信する
天野貴文

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

返信する
サルワカくん

新着記事一覧のページネーションのことでしょうか。
サイトを拝見したところ、表示されておりますが…。

返信する
近藤

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

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

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

返信する
サルワカくん

お世話になります。今回貼り付けたCSSの最後に以下を追記してみるとイメージ通りになるかと思います。

/*カードを一列にする*/
.popular-posts .cardtype__article {
    width: 100%;
    margin-left: auto;
    margin-right: auto!important;
    max-width: 370px;
}
返信する
近藤

迅速なご回答本当にありがとうございます！
お教えいただいた通り設定しましたら、理想通りの形になりました。

週末にもかかわらず、これだけ早くご返信いただき感謝の限りです。
本当にありがとうございました。

返信する
アキラ

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

返信する
サルワカくん

私が確認した限り、スマホでも2列に表示されているようです。
ブラウザのキャッシュを削除し忘れていませんか？
ちなみにですが、見出しタグ（h2）にオリジナルスタイルを指定しているようですが、
h2 {~}やh2:after {~}の部分は.entry-content h2 {~}や.entry-content h2:after {~}というように書くと良いかと思います。記事本文以外のh2タグに対してもスタイルが適用されてしまっているので。

返信する
アキラ

迅速なご回答ありがとうございます。

早速、キャッシュを削除したところ、２列に表示されました。
お騒がせして申し訳ございません。

ご指摘いただいた見出しタグ（h2）の修正を行ったところ正常に、表示されることを確認できました。
本当にありがとうございます。

返信する

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

前の記事

SANGOをカスタマイズガイド風のデザインにする方法（専用子テ…

次の記事

トップページ記事一覧のカテゴリーラベルの色を変える方法