まず第一にサイト型のトップページとブログ型のトップページの違いを定義します。

そのためにはブログ型のトップページを定義するのが簡単です。

ブログ型のトップページの特徴は新着記事が並んでいるだけです。

それだけですw

というわけでサイト型トップページはブログ型トップページではないというのが定義になります。そしてブログ型トップページでないとういことを満たすにはトップページに新着記事リスト以外があればいいわけです。

一番望ましいのは手書きというか自分でこつこつ作ったサイト全体のインデックスでしょう。しかしそれは時間がかかるので30分で出来る方法をお伝えします。

WordPressで固定ページをトップページ(フロントページ)として表示する方法

あまりにも書き尽くされていてあれですが当サイトでも紹介しておきますね。

まず第一に固定ページをトップページに表示するには固定ページにてWordPressのフロントページを作ります。その際つきつめれば固定ページのテンプレートであるpage.phpをコピーしてfront-page.phpにするのがいいみたいです。私もいくつかのサイトではそうしています。まあ何のメリットがあるかといえばトップページだけに表示させたいものがある、またはトップページだけに表示させたくないものがある場合だけだと思いますが。参考サイトはこちら。(WordPress トップページのテンプレは index.php ではなく front-page.php が最適

front-page.phpが存在していると自動でpage.phpではなくトップページ(フロントページ)はfront-page.phpで表示されます。ここまでやらなくてもいいと思います。

通常は次の手順だけでOK。

新しい投稿ページ(新着記事ページ)を作る

固定ページでトップページの代わりの新着記事リストのページを作る


このようにタイトルを新着記事にしてパーマリンクをarticleでもpostでもなんでもいいんですが適当につけて本文は何もなしで投稿します。(ちなみにタイトルはテーマによってはH1ですのでそれぞれどうすべきか考えてください。)

トップページに使用する固定ページは出来ているとします。

フロントページ(ホームページ)を新たに作った固定ページに設定

固定ページをフロントページに、新着記事を別のページに

 


設定の表示設定で上のようにホームページ(フロントページ、トップページ)と投稿ページ(新着記事一覧を表示するページ)と新しく設定(カスタマイズ)できます。

詳しくは本家のこちらのページも参考になります。(静的フロントページの作成

続いて新しくフロントページにする固定ページの作り方です。

※この記事はトップページ、フロントページ、ホームページと似たような言葉が出てきますが全部呼び方の違いだけで同じものです。Wordpreessはトップページのことをフロントページと言っている。ここではホームページと言っているみたいな差です。

Gutenbergのカラム機能を使用する

WordPressの新ブロックエディターを使えばサイトのページを2つの領域に分けるのが簡単にできます。

画像なしの場合のアイキャッチ画像

画像なしの場合のアイキャッチ画像

こんな感じですね。当サイトのトップページもこの機能を利用して作っています。ただ今はテーマをCocoonのまま行くか変えるか検討中なのでこのサイトも簡単なものにしてますが。

一番簡単なのは2つのカラムの左右に見出しとそれに続く記事一覧を表示することです。これを2列✕何個か作ってしまえばそれでも新着記事を並べただけのトップページからは脱出できてしまうわけです。

カラム機能はGutenbergで左上のプラスのボタンでカラムを選ぶだけで出てきます。そこに自分でカテゴリタイトルと記事一覧を入れればいいわけです。Cocoonの場合テーマが用意しているカラム機能を使うこともできます。この場合Classic Editorでも使用できるのでGutenbergが嫌いな人でもやりやすいです。Cocoonの機能では4カラムまでできます。Cocoonを使っている人はその機能を使うのもおすすめです。

Cocoonのカラム機能の使い方-カラムわけカスタマイズ

以上でサイト型のトップページ作成は完了です。簡単ですね。要するにカラムを2列以上にしたうえで記事リストをぶっこめばサイト型のトップページが完成するということですよね。

ター坊
ター坊

簡単だな!これなら30分でいけるね。

(この記事を書いたあとテーマを変えたため今は見た目が違います。)

応用:プラグインやテーマの機能を使って整形された記事リストを作る

手持ちのいろんなサイトをサイト化(サイト型トップページに)カスタマイズをしていたのですが2つのやり方があることがわかりました。

テーマの機能を利用してトップページを作る

1つはテーマの機能を利用すること。Cocoonならショートコードを呼び出すだけで以下のような新着記事リストや人気記事リストを簡単に作れます。

人気記事

[popular_list days=”all” rank=”0″ pv=”0″ count=”3″ type=”default” cats=”all”]

(これはCocoonのショートコードです。テーマがCocoonであれば表示されます)

新着記事

[new_list count=”3″ type=”default” cats=”all” children=”0″ post_type=”post”]

(これはCocoonのショートコードです。テーマがCocoonであれば表示されます)

カテゴリごとのリストとこれらの記事リストがあればずいぶんホームページとして体裁のとれたトップページがすでに仕上がっているでしょう。この記事は一般的な内容なのでCocoonをつかっている人は次の記事も後で読んでください。

Cocoonでサイト型トップページを作る超簡単なやり方-タブ付き記事リストとカテゴリリスト

この時点でブログ型のトップページを脱却し、一部に新着記事が表示されたサイト型トップページが出来たことになります。

つまりカラム分けしてそのカラムごとにカテゴリごとの記事や人気記事を並べるだけでサイト型のトップページになるということです。この際サムネイル画像を使った方が綺麗なみためになりますね。最近アイキャッチ画像いらないんじゃないの?とか思ってましたがサイト型トップページにするときにテキストだけだとパッとしないです笑

WP Show Postsを使う

使い方は割愛しますが同プラグインを使えば簡単に関連記事のリストも作ることが出来ます。(テーマがCocoonの場合不要です)

リストはカテゴリごとにしても新着順になるためカテゴリをAllにすれば自動的にブログの最新記事です。

これをさきほどと同様にカラムの左右にそれぞれ配置します。

Wp Show Postを使うとどうなるかは当サイトのトップページを見て下さい。(今はテーマを変えてしまったたWp Show Postは一部だけになっています)

アフィホリックのトップページを見ていると時々表示が崩れることがあるのであまり多用しない方がいいのかなと思っています。何故かと言うとWp Show Postの場合新着リストを作るプラグインなわけで動的なわけですよね。カテゴリに新着記事が増えれば自動的に表示してくれるわけです。それがページの読み込みを遅くしている可能性があるなと思っています。

なので出来る限りテーマの機能を使ったほうが軽いだろうと。

そこでテーマごとの機能を使った新着記事リストやWordPressデフォルトの最新の投稿を投稿ページで使えないか調べたわけです。ウィジェットで投稿リストを作れるテーマだとサイト構築が非常に楽です。

そして以下のプラグインでテーマの機能で作ったウィジェットの記事リストをトップページにウィジェットのまま配置できることがわかりました。

Add Widget After Contentを使った場合

Add Widget After Contentというプラグインがあったので使ってみたところ、固定ページの下部に新着記事リストをウィジェットとして入れることが出来ました。

これで自分で作ったカテゴリのごとの記事リストの下に新着記事がある状態を作ることが出来ました。これはサイト型トップページを持つテーマと同じ構造です。

Add Widget After Content公式ディレクトリ


このプラグインはWordPressの公式ディレクトリからダウンロード出来ます。固定ページだけの表示にするとトップページに表示されますからまあこれでいいかなと。

この方法だとお知らせページとかサイトマップとかにも表示されるので嫌ならCSSで消す必要はあるかもしれませんが固定ページは少ないので手間も少ないはず。

このプラウグインはテーマ標準の機能でいろんな記事一覧を作れるほどあちこちにいろんな形でウィジェットとして記事一覧を放り込めるのでかなり便利だと思います。

テーマによっては任意のカテゴリの記事をリスト化できるものもあるのでその場合はWp Show Postなしでページ下部にウィジェットとして記事リストを表示できるようになます。

(この方法について後から考えましたが、コンテンツ上にウィジェットを表示できるテーマなら新着記事を残したまま記事一覧上ウィジェットに固定ページの内容を挿入したほうが速いです)

Widgetize pages Lightを使う

このプラグインを使うと固定ページや投稿内でサイドバーのウィジェットを使えるようになります。するとテーマが用意しているカテゴリごとの記事リストを記事内のウィジェットに入れるだけでトップページが完成します。テーマ選びでサイドバーのウィジェットが豊富なものを選ぶと楽です。テーマの多くは最新記事のリストしか作れません。テーマに搭載されていなければWp Show Postと組み合わせることも可能です。(Wp Show Postはウィジェットとして使う必要はないですけどね)

使用方法は次の記事にて。

Widgetize pages Lightでトップページを作る(WordPressプラグインの使い方) 

同様のプラグインにWidget on Pagesというもののあります。どちらも機能は同じです。

これを使えば30分かからずトップページを作れるかもしれませんね。

サイト型トップページを作る方法まとめ

以下の手順で30分でサイト型トップページが作れます。

  1. WordPressで固定ページを作る
  2. その固定ページにGutenbergのカラム機能を使い2列に分かれたカテゴリ別記事リストを作る
  3. 記事リストはテーマのものを使う場合Widgetize pages Lightで固定ページ内ウィジェットとして利用可能。ない場合Wp Show Postで作成可能。
  4. 新着記事用の固定ページを作りをサイトのどこかにリンクを表示する(サイトバーでもいいです)
  5. WordPressで先ほど作った固定ページをトップページ(フロントページ、ホームページ)として表示する

以上でWordPressをサイト型トップページに出来ました。

WordPressでを固定ページをトップページとして表示する方法は冒頭に書いた通りです。

これ以外にもトップページのHTMLを下書きで作って新着記事一覧(もともとのトップページ)の上にウィジェットで入れる方法もあります。トップページに新着記事一覧があっては行けないわけではないのでこちらの方が楽だなと思いましたね。

CocoonとかLuxeritasでは記事一覧上(インデックスリストトップなど)にウィジェットを入れられるのでGutenbergのカラム機能を使えばあっという間にサイト型のページが完成します。固定ページか投稿ページで下書きで作ったものをウィジェットにカスタムHTMLで入れればいいだけです。

Wp Show Postの使い方|Add Widget After Contentの使い方(準備中)

サイト型テーマについて

Wordpreessを使えばどんなサイトも構築可能なのは間違いないと思います。特にCocoonなどは非常にSEO的にも優れていてカスタマイズ性も高いです。しかし例えばCocoonで当サイトのようなデザインが作れるかと言ったらたぶんほぼ無理なんですよね。ここに答えがある気がします。ここでテーマを使う意味ついて考えてみたいです。

テーマを使う意味ってなに?

実は今Movable Typeで作ったサイトを数記事入れた時点で「あーこれもう無理」ということでWordpreessに移転するためにバックアップしているところなんですね。そこで思ったのがMovable Typeの使いづらさですね。テーマもほとんどないですし、デフォルトテーマはレスポンシブじゃないし…レスポンシブテーマにして見たらトップページだけ変わって記事は元のままという…しかも情報も全然ないし、これじゃCMSの役目を果たせないんですよね。調べているうちに何記事もかけちゃいますから。

というわけでテーマというのは「自分の手を煩わせないため」に使うのです。テーマといってもHTMLはほとんどかわらなくてCSSで表示を変えているわけですから、Cocoonのようにシンプルなテーマを別のテーマに変える場合「自分の手を煩わせる」ことによって可能になるわけです。

なので「自分の手を煩わせたくない」方は素直に自分の要望するサイトに一丸近いテーマを使うのがいいということなんです。

なので以下に無料テーマも含めてサイト型トップページの構築におすすめなテーマを挙げておきますのでCocoonのカスタマイズが難しいと思った方は使ってみてください。

Lightning

lightning

BizVektorを作っている会社さんが制作しているテーマです。日本のテーマではもっともサイト型のテーマだと思います。私も1サイトで導入して試しています。

The THor(ザ・トール)

THE THOR

サイト型でかなりデザインにもこだわった有料テーマです。SEOにも強いという評判がありアフィリエイターで使っている人は結構多いみたいですね。Twitterでつぶやいてますよみんな。 公式サイトのデモを見ると最強テーマという呼び声が高いのもわかります。

corporate

LIQUID PRESS

LIQUID PRESSのcorporateというテーマもサイト向けになります。デモを見てもわかりますが、コンテンツ、フッターなどのエリアわけとその内部のカラムが大事だとわかりますね。要はこれがデフォルトで設定されているかいないかがサイト型テーマかそうじゃないかの違いです。

Emanon

emanon

個人的にはサイト型テーマに最もイメージが近いのがこのEmanonです。Emanonを使えばシンプルな企業っぽいサイトもサイト型トップページも簡単に作れるでしょう。というかそのためのテーマです。

サイト型のホームページ構築に悩んでいるならこちらがおすすめです。(⇒完璧なサイト型Wordpreessテーマ )

emanon
ター坊
ター坊

コメント大歓迎です。なぜならコメントもコンテンツだから…笑
さて、メールアドレスも記入不要にしておいたので暇だったらコメントしていってください!(リンク目的の場合はスルーします。)


この記事がいいと思ったらはてなブックマークに保存しておこう!Twitterのフォローも良ければお願いします。

  このエントリーをはてなブックマークに追加

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)