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

SANGO
カスタマイズガイド

テーマの更新情報

1.8.6 Released !

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

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

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

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★">
      <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: 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：子テーマでカスタマイズする方法

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

65 COMMENTS

ゆうぴん 2019/09/01

お世話になります。
【サルワカ風】トップページに人気記事を設置する方法の「その1：ウィジェットを使った方法（簡単）」で設定を行ったのですが、おすすめ記事の1番目の画像のみ表示がズレてしまいます。
解消方法を教えていただけないでしょうか？
HTML、CSSの知識はあまりなく、そのままコピペで貼り付けただけのため要因が分かりません。

 回答を見る
R 2019/05/15

お世話になります。
「SANGOのショートコード一覧」で紹介されていたcard2の形を表示させたいのですが可能でしょうか？

 回答を見る
ひろ 2019/03/05

サイトは非公開でお願いします。
タイトルのとおり、トップのおすすめ記事と新着記事の横のアイコンや、個別記事下の関連記事のアイコンが表示されません。
どうしてなのでしょうか？

 回答を見る
へっぽこ 2019/03/01

一応手順通りやり、2列できちんと一覧で表示させることができました。
しかし、画像URLやページURLを直接打ち込んでいることから、自動化できず、人気のものを都度自分で変更しないといけないという仕様なのでしょうか。
また、デモサイトのようにトップの左右に新着記事と人気の記事のボタンがあり、ボタンを押したらそれに対応した記事が出るようにしたいのですが、どうすればいいでしょうか。
何卒よろしくお願いいたします。

 回答を見る
森田 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の使いやすさに日々楽しくブログ更新ができています。有り難うございました。

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

 回答を見る
Taka 2017/12/20

何度もコメントすみません。サルワカくん（https://saruwakakun.com）のトップページのように、『人気記事』『新着記事』の両側にボーダーラインを挿入する方法を教えていただけますか？

よろしくお願いします！

 回答を見る
はやしや 2017/12/10

シンプルで可愛らしいデザインが気に入って愛用させていただいています。
ウィジェットで人気記事を表示させる際、できるだけ多くの記事を表示させたいので「関連記事」のように横スクロールで表示させたいと思っているのですが、出来るようでしたら教えていただきたいです。何卒よろしくお願いします。

 回答を見る
ミント 2017/12/08

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

ウィジェットでの記事表示についてなのですが、3列にすることはできますか？
また、2列のものと、3列のものと使い分けて表示させたいと思っているのですが、出来るようでしたら教えていただきたいです。
よろしくお願いします。

 回答を見る
Taka 2017/11/13

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

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

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

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

 回答を見る

コメントを残す

メールアドレスは公開されません。* は必須項目です。コメント投稿のガイドライン