Ver1.3.1をリリースしました(11/22)

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

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

2017/11/13 追記

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

MEMO

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

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

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

PCでの表示サンプル

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

スマホでの表示例


事前準備

子テーマ

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

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

FTPソフト

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

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

バックアップ

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

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

手順1:子テーマフォルダにparts/post-grid.phpを作成

MEMO
ウィジェット(トップページ記事一覧上)を使って設置する場合は、手順1の内容はスキップしてください。

SANGOのトップページの記事一覧部分のコードはpartsというフォルダー内のpost-grid.phpに書かれています。こちらを子テーマの複製すれば良いわけですね。

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

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

partsディレクトリを作成

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を編集

MEMO
ウィジェットを使って設置する場合のコードは後述

子テーマ(親テーマではありません)の中のpost-grid.phpを開きます。

2-1. コードを貼付け

ファイルの先頭に以下のコードを貼り付けます。<?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 人気記事?>

参考:ウィジェットで設置する場合

ウィジェットを使って設置する場合は、「トップページ記事一覧上」のウィジェットに「カスタム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-2. articleのカタマリをリンク数ぶん複製

<article...>〜</article>が1つのカードを表現するカタマリです。上のコードでは、2つだけ載せています。必要に応じて複製しましょう。

2-3. コードを書き換え

★の部分を書き換えます。「★リンク先URL★」と「★タイトル★」は説明するまでもないですね。「★<imgタグ>★」には画像のタグを貼り付けます。投稿ページなどで、普段記事を書く時と同じように画像を追加しましょう。このとき、サイズで「520 x 300px」を選ぶようにしてください。

画像サイズ

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


手順3:CSSを貼付け

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

子テーマ(post-grid.php)でカスタマイズを行った場合

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が上記とは少し異なります。以下の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;
}

保存すれば、カスタマイズは完了です。ブラウザのキャッシュ削除キャッシュプラグインのキャッシュ削除をお忘れなく。

ちなみに上のCSSの/*タイトル*/部分で「人気記事」のテキスト装飾を指定しています。好みで変えるようにしましょう。

ノウハウを皆さんで共有するために、この記事に関する質問がある場合にも、コメント欄からお願いします。

5 Comments

Taka

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

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

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

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

返信する
サルワカくん

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です。
お手数をおかけしますがよろしくお願いします。

返信する

コメントを残す

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