SANGOフロントページに【ピックアップコンテンツ】を作成/カスタマイズする

JIN(ジン)で使われているトップページ(フロントページ)に設置できる「ピックアップコンテンツ」とてもかっこいいですよね。

ただ、SANGO(サンゴ)にはこの機能は備わっていないんですよ。

今回は、その機能をSANGOでも再現できるように、wordpressテーマのカスタマイズ方法をご紹介します。

完成イメージはこのような感じ

このフレンの家でも使われているようになります。

スマホ画面〜

スマホ画面でwebサイトを表示した場合でも、4つの記事が写し出されるようにカスタマイズされています。

それでは、カスタマイズにいきましょう。

SANGOフロントページに【ピックアップコンテンツ】を作成/カスタマイズする

カスタマイズを行う前に
直接、SANGOテーマをカスタマイズする場合、アップデートの影響を受ける可能性があり、データが壊れてしまう場合があります。テーマで作業をするようにしましょう。

フレン

SANGOのテーマを直接カスタマイズしてしまうのは、大変危険なんだ

小テーマを作成する

SANGO子テーマのダウンロード方法は「SANGOカスタマイズガイド 」にて説明されているので、こちらを参考にされてください。

参考 WordPressの子テーマとは?安全にカスタマイズを行う方法SANGOカスタマイズガイド

子テーマにテンプレートファイルを作成する

子テーマ内にフロントページのテンプレートファイルを作成します。

FTPソフトを使用してファイルを作成行います。
FTPソフトについての使い方は、「サルワカ 」さんのサイトで説明されているのでそちらを参考にされてください。

参考 【FileZillaの使い方】WordPressでFTPソフトを使おうサルワカ

今回は、SANGOの標準テーマを利用してテーマを作成していきます。

親テーマ「sango-thema」のテンプレートの中から、ご自身が使われているテーマを選択して子テーマ「sango-thema-child」へ複製します。複製する際は、カスタマイズしたテンプレートであるのが分かるように、オリジナルの名前をつけましょう。
(例:sango-top-custom.phpなど)

トップページ用 1カラム(タイトルなど出力無し)
▶︎page-1column.php

 

トップページ用 サイドバー有(タイトルなど出力無し)
▶︎page-1column2col.php

 

をコピーして子テーマに貼り付けましょう。

小テーマにテンプレートを複製できたら、FTPソフトでの作業は終わりなので閉じて結構です。

テンプレート名を変更

それでは、トップページのテンプレートを作成していきます。

先ほど、複製をしたテンプレートを開きましょう。

wordpressの管理画面「外観」➡︎テーマの編集➡︎「SANGO child」を選択➡︎複製したテンプレートを選択

テンプレート名の変更は、ファイル上部にあるコメントを書き換えることでできます。

sango-top-custom.php
/**
* Template Name: トップページ用 1カラム(タイトルなど出力無し)
* Template Post Type: page
*/
この名前を自分で分かるように変更しましょう。

sango-top-custom.php
/**
* Template Name: トップページ用 カスタマイズ
* Template Post Type: page
*/

カスタマイズテーマを作成「HTML編」

下記のコードをこれから指定する場所へコピペします。

黄色のラインでマークされているところはご自身で変更する場所です。

貼り付けるHTMLコード
<div class="picks wrap">
	<p class="center strong pickup-title"><i class="fa fa-line-chart"></i>ピックアップコンテンツ名</p>
	<ul class="pickup_list">
		<li class="pickup">
			<a href="記事のURL"></a>
			<img src="アイキャッチのURL" alt="" width="520" height="300">
		</li>
		<li class="pickup">
			<a href="記事のURL"></a>
			<img src="アイキャッチのURL" alt="" width="520" height="300">
		</li>
		<li class="pickup">
			<a href="記事のURL"></a>
			<img src="アイキャッチのURL" alt="" width="520" height="300">
		</li>
		<li class="pickup">
			<a href="記事のURL"></a>
			<img src="アイキャッチのURL" alt="" width="520" height="300">
		</li>
	</ul>
</div>

複製したテーマで貼り付ける位置が違うので気をつけてください。

トップページ用 1カラム(タイトルなど出力無し)【page-forfront.php】を元に作られた方

下記のコードを見つけて、その上部に貼り付けてください

コード
<div id="content" class="page-forfront">

トップページ用 サイドバー有(タイトルなど出力無し)【page-forfront2col.php】を元に作られた方

下記のコードを見つけて、その上部に貼り付けてください

コード
<div id="content"<?php column_class();?>>

貼り付けて、ご自身のサイト用に変更を加えたら、「ファイルを更新」を行って完了です。

カスタマイズテーマを作成「CSS編」

今回は、先ほどのHTMLとは違いCSSを作成します。

wordpressの管理画面「外観」➡︎テーマの編集➡︎「SANGO child」を選択➡︎「style.css」を開く

スタイルシートを開いたら、以下のコードをコピペしてください。

コード
/*タイトルの書式*/
.pickup-title {
    font-size: 1.45em;
    margin-bottom: 0;
    margin-top: 10px;
    color: #f9b36b;
}
/*各カードについて*/
.pickup_list {
	display:flex;
	justify-content:space-between;
	flex-wrap: wrap;
}

.pickup{
	width:22.5%;
	box-shadow: 0 2px 4px rgba(0, 0, 0, .25);
	padding: 5px;
	background-color: #fff;
	position: relative;
}

.pickup a {
		 position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-indent:-999px;
	}

/*各カードにホバーした際*/
.pickup:hover {
		box-shadow: 0 6px 14px rgba(0, 0, 0, .25);
}

/*スマホ用にカスタム*/
@media only screen and (max-width: 767px){
.pickup-title {
		padding: 0;
      margin: 0.5em 0;
		width:100%;
	}
	.pickup_list {
		margin:0.5em;
    padding: 0.25em 0;
	}
	.pickup{
		width:48.5%;
		 margin: 0.25em 0;
	}
}

こちらを貼り付けていただければCSSの作成は完了です。

カスタムフロントページの作成

今まで作成したオリジナルのテンプレートでフロントページを作成しましょう。

新しく固定ページを作成をして、「固定ページの属性」から先ほど作成したテンプレートを選択しましょう。
テンプレート名は、ご自身で変更したテンプレート名になっています。

作成したテンプレートを選択したら、記事の公開をしましょう。
記事の中身は空っぽで構いません。

wordpressのフロントページを変更しましょう

最後に、先ほどの固定ページをフロントページに設定しましょう。

wordpressの管理画面「設定」➡︎表示設定➡︎ホームページの表示

ホームページの表示を今回作成した固定ページを選択しましょう。

選択後、下の方にある「変更を保存」で変更完了です。

補足
トップページを固定ページにした場合、新着記事が読み込まれるようにショートコードを固定ページに記入しなくてはなりません。

詳しくはこちらのサルワカさんの記事をご覧ください。
参考 SANGOで固定ページをホーム固定する方法まとめサルワカ

まとめ

お疲れ様です。

フロントページは多くの方が目にするページとなり、いわば自分のサイトの顔になります。
これを機にフロントページのカスタマイズを行い、多くの方に好印象を持っていただけるようなつくりにしましょう。

多くの方に、広まるように記事のシェアなどよろしくお願いします。

Twitter「ツイッター」もやっていますので、フォローのほどよろしくお願いします。
フレンの家」をフォローする!!