Ver1.4.1をリリースしました(5/19)

SANGOで固定ページをホーム固定する方法まとめ

このページでは、WordPressテーマSANGOにおいて、ホーム(トップページ)に記事一覧の代わりに、固定ページを表示する方法をまとめて解説します。

MEMO
固定ページのホーム固定は、全テーマ共通のWordPressの標準機能なので、Google検索をすることでも参考になる記事が見つけられるはずです。

トップページをホーム固定する手順

手順1:ホーム用の固定ページを作成

まずは固定ページを作成します。SANGOでは、ホーム固定を想定した2つの固定ページテンプレートを用意しています。テンプレートは、固定ページの編集画面において、右側のサイドバーの「固定ページの属性」で選ぶことができます。

上の画像のをつけたテンプレートがトップページ用です。これらのテンプレートでは、タイトルや日付、アイキャッチ画像は表示されません。表示させたいものを、自由に書いていきましょう。

トップページ用1カラム(タイトルなど出力なし)

トップページ用固定ページ___SANGO

 

サイドバーなしのテンプレートです。ヘッダーアイキャッチ画像は使用することができません。デモページはこちら

トップページ用サイドバー有(タイトルなど出力なし)

 

Ver1.4〜登場したサイドバー有の2カラム・レイアウトのテンプレートです。通常の固定ページをホーム固定する場合と異なり、タイトルや日付等が非表示になります。さらにヘッダーアイキャッチ画像を使用することもできます。

手順2:記事一覧用固定ページを作成

トップページ=固定ページとなるため、新着順の記事一覧は別ページに表示させることになります。WordPressでは、新着記事一覧用の固定ページを作成しておく必要があります。

新着記事一覧用の固定ページを作成

↑新しい固定ページを作成します。 ①自分にとって分かりやすいタイトルをつけて、②下書きとして保存 をクリックします。本文は空欄で構いません(どちらにせよ投稿一覧ページになるため本文は表示されません)。

パーマリンクを設定

↑一度保存をすると、パーマリンクの設定が表示されるようになります。ここで指定したURL=記事一覧ページのURLとなります。

手順3:ホームページ設定をする

外観⇒カスタマイズ⇒「ホームページ設定」を開きます。 ホームページの表示設定  

ここで「固定ページ」にチェックを入れます。 「ホームページ」では、実際にトップページに表示したい固定ページを選びます。

「投稿ページ」では、先ほど作成した新着記事一覧用の固定ページを選びます。

 手順4:ホーム固定ページに、新着記事一覧へのリンクを貼る

トップページ用固定ページの好きな位置に、新着記事一覧ページのリンクボタンを貼ります。以下のようにボタンを設置すると良いのではないでしょうか。

新着記事一覧へ

ホーム固定の手順は以上で完了です。

参考:トップページ用固定ページ内に記事一覧を表示する

SANGOでは、ショートコードを使って新着記事一覧を表示することができます。

例えば、[catpost type="card2" num="5"]というショートコードをエディタ上に記入すると、以下のように新着記事が5つ表示されます(type="card2"はVer1.4〜導入されました)。

SANGOを使ってみよう 【WordPress】ビジュアルエディタでドロップダウン「スタイル」が表示されない時の対処法 SANGOのタブ機能 SANGOトップページのタブ切替機能の設定方法まとめ SANGO ver1.4で新しく追加された機能とアップデートの注意点 SANGOで固定ページをホーム固定する方法まとめ SANGOでヘッダー右上に電話番号を表示する方法
MEMO
ショートコードcatpost内でtype="card"と入力すると、縦長のカード型のスタイルとなります。type="card2"をまるっと除けば、横長の枠線型のスタイルされます。num="5"の部分では表示件数を指定します。詳しくは、SANGOのショートコード一覧を御覧ください

表示サンプル

例えば、オリジナル見出し[catpost type="card2" num="4"]オリジナルボタンと並べれば、以下のように見せることができます。

新着記事

SANGOを使ってみよう 【WordPress】ビジュアルエディタでドロップダウン「スタイル」が表示されない時の対処法 SANGOのタブ機能 SANGOトップページのタブ切替機能の設定方法まとめ SANGO ver1.4で新しく追加された機能とアップデートの注意点 SANGOで固定ページをホーム固定する方法まとめ SANGOでヘッダー右上に電話番号を表示する方法

新着記事一覧へ

↑ ショートコードでの記事表示数によっては、ボタンのリンク先を「新着記事一覧2ページ目」にしても良いでしょう。

7 Comments

goga

別にトップページ用の固定ページをトップに固定しないで、普通の固定ページの扱いで使用しても問題ないのですよね?

私はデフォルトのトップページを使っておりますが、トップページを変えるつもりはなく、別で固定ページで自由にレイアウトしたポータル的なページを作りたいと思っております。
デフォルトトップページの下層ページの一つとして使う感じです。そして、それをデフォルトトップページにリンクを貼って、といった使い方を考えているのですが、そういった使用法もできるのですよね?
説明が分かりづらくてすみません。意図が伝わりますでしょうか?

返信する
デザ

初心者中の初心者です
実際作成しているページをみないと、わからないやつかもしれません(*_*;
わけわからなかったら、ちょっと別方法でデザイン考え直してみます
ひとまず困っていることを綴ります

こちらのページを参考に
トップページ用サイドバー有(タイトルなど出力なし)を選び
★トップ固定ページを作り(→ホームページトップ画面として)
★新着記事一覧用固定ページ(→ブログページ)

…で、手順通り作ってみてはいるのですが、表示が思い通りになりません
2点、困っていて

(その1)トップ固定に、ヘッダー(の帯?)+サイトタイトルが出てくる
→上記のトップページ用サイドバー有の見本として掲載されているような(サメくんwelcome)、大きなメイン画像+内容…私のトップページをまさにこんな感じにしたいのですが、ヘッダーが出ていないのは【header.php】を触って作っておられるのでしょうか。。。
そもそも、このサメくん画像は、ヘッダーアイキャッチ画像ではないんでしょうか??

(その2)ヘッダーアイキャッチ画像が、新着記事一覧の(ブログ)ページにも表示されます
→新規の固定ページにはヘッダーアイキャッチが表示されてないので、ブログページもそうしたいのですが、これは表示されてしまうものなのでしょうか

長々とスミマセン よろしくお願いします

返信する
サルワカくん

(その1)ヘッダーの帯はスクショの関係で切れているだけです。ただし、

.home #inner-header {
    display: none;
}

というCSSを子テーマのstyle.cssに追加すればホームでのみヘッダーは非表示になります。

(その2)子テーマにindex.phpを複製して
子テーマ側のindex.phpの以下の部分を消すことで非表示になります。

<?php get_template_part('parts/home/featured-header');//アイキャッチを出力 ?>
返信する
デザ

さっそくありがとうございます!
ヘッダーがなくなって(イメージしていた通りになって)うれしくて思わず声が出てしまいました!!
その2も試してみます!作業が遅くて申し訳ないので、とりいそぎご報告でした!
テスト用サイトで制作中なのですが、理想に近づいてきてカスタマイズが楽しいです
ありがとうございます☆彡

返信する
オオタキミサコ

post/で記事一覧ページを作成したのですが、なぜかSPではリンクが動きません。
リンクを新規タブで開くと開けるのですが、何の設定を間違えているのでしょうか?
すみませんが教えていただけると助かります。よろしくお願いいたします。

返信する
サルワカくん

リンク先のURLが「https://サイトURL/wp-admin/post.php?post=40&action=edit」などとなっていますが、こちらは認識されていますか?

返信する

コメントを残す

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