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

フロントページカスタマズCocoon
この記事は約5分で読めます。

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

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

やったこと

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

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

インデックスリスト

インデックスリスト
(Cocoonインデックスリスト)

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

【twentyfourteen編】トップページだけに表示するウィジェットエリアを作る
先日のWordPress勉強会で固定ページと投稿ページの両方をトップページに出したいという要望がありました。調…

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

インデックスリストトップに追加する
  • ボックスメニュー
  • コンセプト(サイトの説明)
  • Information(更新情報)
インデックスリストボトムに追加する
  • 人気記事
  • メルマガ購読
  • おすすめ記事
  • 問合せフォーム
Check!

インデックスリストの各エリアには「カスタムHTML」ウィジェットを使用しています。ボックスメニュー以外になります。

  • コンセプト(サイトの説明)
  • Information(更新情報)
  • 人気記事
  • メルマガ購読
  • おすすめ記事
  • 問合せフォーム

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

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

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

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

Check!

見出しは通常(固定・投稿ページ)ものと同じデザインをほぼ使っています。
CSSで好きな見出しデザインをカスタマズするとグッと専門サイトらしくなります。

カスタマズ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> を使って対応しました。

タイトルとURLをコピーしました