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

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

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

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

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

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

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

小テーマを作成する

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

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

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

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

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

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

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

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

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

テンプレート名を変更

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

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

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

/**
* Template Name: トップページ用 1カラム（タイトルなど出力無し）
* Template Post Type: page
*/

この名前を自分で分かるように変更しましょう。

/**
* Template Name: トップページ用 カスタマイズ
* Template Post Type: page
*/

カスタマイズテーマを作成「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を作成します。

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

/*タイトルの書式*/
.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のフロントページを変更しましょう

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

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

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

まとめ

お疲れ様です。

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

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

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