固定ページなしフロントページをサイト型

インデックスページをカスタマズ

固定ページを使わず、フロントページ（トップページ）をサイト型にカスタマズしました。固定ページの数が増えるのも管理しづらい、webサイトをシンプルに保ちたいということもあり、フロントページ（トップページ）表示を通常のブログ型からサイト型にしました。
今回はそのカスタマズした内容を忘備録もかねて記載します。

やったこと

今回追加した箇所を赤字のところです、
ウィジェットのインデックスリストトップとインデックスリストボトム に載せたいものを入れました！スライダーは次回に記載する予定です。

• ウィジェットのインデックスリスト（トップとボトムエリア）使用
• ページネイションの非表示
• フロントページの見出しを作る

インデックスリスト

使用しているテーマのCocoonではインデックスリストのウィジェットが付いていますのでそれを利用します。
お使いのテーマにリストがない場合は下記のページにfunctions.phpにコードをコピペしてウィジェット追加する方法がありますのでご参考ください。

【twentyfourteen編】トップページだけに表示するウィジェットエリアを作る

先日のWordPress勉強会で固定ページと投稿ページの両方をトップページに出したいという要望がありました。調…

usortblog.com

インデックスリストミドルはインデックス記事（新着）専用エリアなので、何も追加していません。

インデックスリストトップに追加する

• ボックスメニュー
• コンセプト（サイトの説明）
• Information（更新情報）

インデックスリストボトムに追加する

• 人気記事
• メルマガ購読
• おすすめ記事
• 問合せフォーム

ページネイションの非表示

どうしてもインデックスページはページネイションが表示されます。
そこでフロントページだけページネイションを非表示しました。
CSSコードは後ほど。

フロントページ専用見出し

ウィジェットにｈ3（見出し）などの反映されないので、作ります。
通常の見出しは .article h2 です、ウィジェットテキストエリア専用の .widget_text h2を追加しました。

カスタマズCSSコード

• フロントページページネイション非表示
• フロントページh3・H4・h5

/*フロントページページネイション非表示 */
.pagination-next-link
{display:none;}

.front-top-page
.pagination 
{display:none;}


/*フロントページh3-h5*/
.widget_text h2
{font-size: 1.5em;}

.widget_text h4, h5
{font-size: 1.1em;}
	
.widget_text h2
{display: flex; overflow: hidden; background: #000; padding: .5em; align-items: center;border-left:0; margin-bottom:35px;}

.widget_text h2:before,.widget_text h2:after
{content: ""; flex: 1; background: #ff0000; padding: 1px 0; height: 0; transform: rotate(45deg);}

.widget_text h3
{padding: .5em 1em; margin-top: 0px; margin-bottom:35px; background: #000000; border-top: 3px solid #ff0000;border-bottom: 3px solid #ff0000;border-left: 0px solid;border-right: 0px solid ;text-align: center;}
		
.widget_text h4
{padding: .4em 1em; margin:20px 0 15px; border-left: 4px solid #000000;border-bottom: dashed 2px #aeab92;border-top:0;}

.widget_text h5
{border-bottom: 1px solid #aeab92;margin: 20px 0;padding: 5px 0;position: relative;}

.widget_text h5:before, h5:after 
{content: '';border-right: 20px solid #fff;border-top: 15px solid #aeab92;bottom: -15px;position: absolute;left: 25px;}
h5:after 
{border-top-color: #fff;border-right-color: transparent;bottom: -13px;left: 26px;}

.widget_text h6 
{margin: 30px 0 15px; border-bottom: dashed 2px #aeab92;font-size: 20px;font-weight:bold;}

最後に

WordPressでサイトを作る際に、ブログ型でなくオリジナルページを作るなら固定ページがセオリーなのですがあえて固定ページを作りませんでした。
なんとなく・・・
WordPressの基本形のフロントページを大事に使おうという気持ちにというか（何故か？！）
無駄な固定ページを増やしたくなかったんです。

まあおかげで「構造化データ」にはフロントページは対応してないようなので、
<script type=”application/ld+json”>○○<script> を使って対応しました。