今回は、ワードプレスブログのトップページをサイト型にカスタマイズする方法を紹介します。
以前からサイト型にしたいと思っていたのですが、書籍「Google Adsense マネタイズの教科書」がサイト型を推奨していたり、ツイッターでもマクリンさん（@Maku_ring）をはじめアフィリエイトをしてる方々がサイト型に変更しているのを見て、この機会に変更することにしました。
紹介するカスタマイズ方法はプラグインで行っているので、テーマに関わらず適用できると思います。使ったプラグインは「WP Show Post」と「Foogallery」です。
HTML・CSSコーディング代行
初心者向けにトップページカスタマイズのHTML・CSSコーディング代行も承っています。ご興味ありましたら、下記のサンプルページをご覧ください。
サイト型トップページの完成イメージ
PC・スマホの完成イメージキャプチャ
トップページ – PC
トップページ – スマートフォン
サイト型カスタマイズで作成する各パート
PCとスマホでほぼ同じ表示になっています。（長くなるのでピックアップ記事部分削除しています）
作るパートを分類すると・・・
- 新着記事・ピックアップ記事
- カテゴリー別おすすめ記事
- リンク先：新着記事をもっとみる
- リンク先：記事一覧
になります。では、ひとつづつ作り方を説明します。
準備、固定ページをトップページに指定する方法
まず準備ですが、トップページをカスタマイズするには、固定ページをトップページとして扱います。
適当な名前で固定ページを作成します。
私は「Landing Page」というタイトルで固定ページを作成しました。
このままでは普通の固定ページになってしまうので、表示設定を変更します。
設定→表示設定で「ホームページ」の欄で作成した固定ページを選びます。
CSS：タイトルを非表示にする
固定ページのタイトルがサイトタイトルと重複してしまうので、 CSSで非表示にします。下記のCSSを追加してください。
.home .entry-header {
position: absolute!important;
clip: rect(1px, 1px, 1px, 1px)!important;
background-color: transparent!important;
}
新着記事・ピックアップ記事を表示させる（WP Show Post）
新着記事とピックアップ記事を表示するのには「WP Show Post」プラグインを使用します。
このブログはopnecageの「ハミングバード
」ですが、「ストーク
」にはこのプラグインのようなショートコードが用意されているみたいです。こちらのブログ（Love Wife Life）で使用方法が説明されています。
プラグインの新規追加から「WP Show Post」で検索して赤枠のプラグインをインストール→有効化します。
新着記事の表示
新着記事パートの作成
このように新着記事を表示させる設定を「WP Show Post」で行います。
メニューに「WP Show Post」が追加されていると思いますので、選択して、新規追加します。
「トップページ新着記事（スモール）」というタイトルにしました。（ビッグパターンも作ったので区別のため）
分類：何も記入しないと新着記事が表示されます。
ページあたりの投稿数：新着記事の表示数です。私は3記事にしました。
カラム：１
カラムの感覚：2em（デフォルト）
画像の幅：100(px)
画像の高さ：64(px)
画像の配置：左
画像の位置：タイトルの上
抜粋の長さ：30
タイトルを含める：✔
Title element：span
日付を含める：✔
日付の位置：タイトルの下
固定表示の投稿を無視：✔
並び順：降順（デフォルト）
トップページにショートコードを挿入
保存したらショートコードをトップページに挿入します。CSSでデザインを整えるので、下記のようにdivタグで囲んでいます。※ショートコード［］は実際は半角です。
ピックアップ記事
ピックアップ記事パートの作成
つづいてピックアップ記事パートを同様に「WP Show Post」で作成します。
新規追加で「トップページpickup2」として作成しました（ハミングバードの標準でpickupがあるので）
新着記事と異なるのは、上記の赤枠のカ所です。
分類：post_tag（タグによって表示が決められるようになります）
分類項目：pickup2（タグを選択します。←予めタグを作成しておきます）
ページあたりの投稿数：2（表示数です）
あとは「新着記事」と同様なので省略します。
トップページにショートコードを挿入入
保存したらこちらもショートコードをトップページに挿入します。※ショートコード［］は実際は半角です。
つづいてCSSでデザインを整えます。
CSSで新着記事・ピックアップ記事のデザインを整える
下記はハミングバードでのCSSですので、ほかのワードプレステーマだと崩れるかもしれません。適宜調整してみてください。
/*トップページ新着記事*/
.lp-newpost h2 {
float:right;
position: static;
background:none;
border: none;
font-size: 1.25em;
padding: 0 0 0 0.5em;
margin-top: 2.1em;
margin-left:1em;
margin-bottom: 1em;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
color: #fff;
box-shadow: 0 0 45px rgba(0, 0, 0, 0.25) inset;
width: 64%;
}
.lp-newpost h2 a
{
color: #444;
}
.lp-newpost .wp-show-posts-entry-summary p {
margin-top:5px;
color: #666;
font-size: 0.9em;
}
.lp-newpost .wp-show-posts-image.wpsp-image-left {
float: left;
margin-right: 0;
margin-left: 0;
position: relative;
overflow: hidden;
max-width: 36%;
}
.lp-newpost .wp-show-posts-entry-date.published, .lp-newpost .wp-show-posts-entry-summary {
padding-left:8px;
float: right;
width: 64%;
}
.lp-newpost .wp-show-posts-inner {
display: block;
padding: 0;
text-decoration: none;
color: #666;
border-bottom: 1px dotted #ccc;
border-bottom: 1px dotted rgba(0,0,0,.2);
}
@media (max-width: 1125px){
.lp-newpost .wp-show-posts-image.wpsp-image-left {
max-width: 36%;
}}
@media (max-width: 1125px){
.lp-newpost h2 {
font-size: 1.1em;
}
}
@media screen and (max-width: 1125px){
.lp-newpost p{display:none!important;}
}
/*トップページおすすめ記事 lp-newpost lp-recommend*/
.lp-newpost.lp-recommend .wp-show-posts-image {
margin-bottom: 0;
}
.lp-newpost.lp-recommend .wp-show-posts-image img {
margin-right: 0.5em!important;
}
.lp-newpost.lp-recommend span{
float:none;
}
.lp-newpost.lp-recommend span a{
color:#666;
}
.lp-newpost.lp-recommend .wp-show-posts-entry-date.published{
float: left;
display: inline-block;
width: auto;
padding: 0;
color: #999;
}
ちょっと長いですね。こちらは一番最後で紹介する「記事一覧ページを作る」でも使っています。冗長な部分もあるかもしれないですが・・・。
これで、新着記事・ピックアップ記事の設定は終了です。
カテゴリー別のおすすめ記事を表示させる（Foogallery）
つづいて、カテゴリー別おすすめ記事を表示させます。
カテゴリー別おすすめ記事パートの作成
こちらは2列で画像メインで表示させるようにしました。
2列表示・3列表示がハミングバードのショートコードであるのですが、その仕様がスマホだと1列表示になってしまうので、今回は「Foogallery」プラグインで行いました。
Foogalleryプラグインのインストール
プラグインの新規追加から「Foogallery」で検索します。赤枠のプラグインをインストール→有効化します。
Foogalleryプラグインの使い方はこちらの記事でも紹介していますので、合わせてどうぞ。
Foogalleryプラグインの設定
右メニューから「FooGallery」→「Add Gellery」で新規にギャラリーを作成します。
Add Mediaからおすすめ記事にするメイン画像を選択します。
ここ使用している6枚は、画像サイズを合わせたものを予め用意しています。
Gallery Setting：Masonry Image Gallery
Thumb Width：150
Masonry Layout：2columns
Thumb Link：Custom URL
こちらは好みでOKです。私は角丸にするために上記を選択しています。
Title：Attachment Caption（記事タイトルを画像のキャプションから表示させる）
つづいて、タイトルとURLを画像に設定します。
画像の(i)マークをクリックします。
キャプション部分に記事タイトルを記入します。
実はこのやり方の難点として、テキストが自動改行されない難点があります。そのため、私はモバイルファーストな文字数にしています。
Custom URLに記事URLを記入します。記入したら「選択」をクリックします。
これを各イメージに対して行います。
トップページにショートコードを挿入
保存したらFoogalleryのショートコードをトップページに挿入します。
リンク先：新着記事をもっとみるページを作る（ブログタイプ時のトップページ）
ここからは、リンク先の一覧ページの作成です。
新着記事表示の最後の、
を押した先のページを作ります。ここでは、もともとのブログタイプのときのように投稿記事を表示するようにします。
「固定ページ」を新規作成します。
ここではタイトルとパーマリンクを決めるだけで、内容は空白にします。「投稿記事一覧」というタイトルにしました。
設定→表示設定で「投稿ページ」欄で、上で作成した固定ページ（投稿記事一覧）を選択します。
のURLにパーマリンクを設定すれば終了です。
リンク先：記事一覧ページを作る（WP Show Post）
最後に記事一覧で表示するページを作ります。
一般的には「カテゴリートップ」にリンクすることが多いと思いますので、その場合は作る必要はありません。
しかし、カテゴリーがうまく分かれていない場合も多いのではないでしょうか？ここでは「WP Show Post」プラグインなら記事一覧ページを簡単に作れるというTIPS的な内容を紹介します。
基本的なやり方は、最初の「新着記事・ピックアップ記事を表示させる」と同じで、ネタバレするとそれを拡大して固定ページ全体に表示するだけです！
下記が「WP Show Post」で作った記事一覧ページの例です。実際は、固定ページが表示されています。
記事一覧ページの作成
「WP Show Post」で新規追加します。
分類：post_tag
分類項目：taiwan（ここでは台湾旅行の記事だけを一覧表示にしたいため）
ページ送り：✔
「WP Show Post」が便利な点は「タグ」括りのページが作れることなんです。
ワードプレス標準でもタグページはありますが、その場合サイドバーなどの扱いが厄介なので、固定ページで作れるといろいろと融通が利きます。
ここは新着記事・ピックアップ記事と同様です。
画像のサイズをページ全体に表示するので変更しています。
画像の幅：330(px)
画像の高さ：220(px)
画像の配置：左
画像の位置：タイトルの上
コンテンツの種類：抜粋
抜粋の長さ：90
タイトルを含める：✔
Title element：h2
固定ページにショートコードを挿入
固定ページを新規作成して、上の「WP Show Post」のショートコードを入れます。CSSでデザインを整えるので、下記のようにdivタグで囲むのを忘れずに。※ショートコード［］は実際は半角です。
CSSに関して
CSSは上の「新着記事・ピックアップ記事」でのCSSと共通になっています。
おわりに
今回は、ワードプレストップページをサイト型にカスタマイズする方法を紹介しました。
プラグインを使う方法なので、ワードプレステーマに依存しないで適用が可能かと思います。このページはopencageの「ハミングバード」を使用していますが、最初にも書いた通り無料テーマCocoonでも適用できました。
また、プラグインの説明が長くなってますが、実際に使ってみるとそんなでもないですよ！ショートコードを吐き出すので、トップページのhtmlがごちゃごちゃしないのもいいですよ。
参考になりましたら幸いです。最後まで読んでいただきありがとうございました。
HTML・CSSコーディング代行
サイト構造の考え方
ブログで月10万円を稼ぐロードマップ
