Ver1.6 Released !

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〜導入されました)。

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

表示サンプル

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

新着記事

【CSS】見出しやリストのカスタマイズ時にトップページにまで反映されてしまう時の対処法 SANGO ver1.5コンセプト SANGO Ver1.5 アップデート内容と注意点 SANGOを使ってみよう 【WordPress】ビジュアルエディタでドロップダウン「スタイル」が表示されない時の対処法 SANGOのタブ機能 SANGOトップページのタブ切替機能の設定方法まとめ SANGO ver1.4で新しく追加された機能とアップデートの注意点

新着記事一覧へ

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

38 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」などとなっていますが、こちらは認識されていますか?

返信する
オオタキミサコ

回答ありがとうございます。
すみません、認識しておりません。
今確認しましたが
https://mam-yousan.com/posts/
という表示しか見つけることできませんでした。

こちらのサイトから自分のサイトへ飛んだ場合はきちんとリンクすることができましたので、WPの問題かもしれません。
お時間取らせてすみませんでした。

返信する

お世話になっております。

作成したトップページ用の記事をトップページに設定した時にタイトルを表示出来ないでしょうか?

また、タイトルは出力(表示)されないだけで、固定ページのタイトルはgoogleに認識されているのでしょうか?

返信する

追加ですみません。

つまり、google検索をした時に、トップページ用で作成した固定ページのタイトルを表示したいのです。

この場合は記事の内容の部分にh1タグを使用してタイトルをつけるべきでしょうか?

それとも、サイト名がh1タグ扱いになって、サイト名を変えなければならないのでしょうか?

お忙しい中すみません。

返信する
サルワカくん

h1タグはロゴにあてられますが、Googleにサイト名として認識されるのは基本的にはh1ではなく「title」タグです。
トップページのtitleタグには「サイト名+キャッチフレーズ」が表示されます。
そのため、サイト名とキャッチフレーズを変える必要がありますね…。

返信する

参考になりました!ありがとうございます!
トップページではなく、通常の記事で対応したいと思います。

返信する
sarry

お世話になっています。
固定ページで2分割アイキャッチが表示できるようになって嬉しいです。

質問ですが、固定ページに「記事一覧タブ切替」を表示させることは可能でしょうか?
固定ページをトップページに指定した場合、現状だと最大4つ表示できる「記事一覧タブ切替」は反映されません。
こちらのページでは「新着記事」を手動で設定する方法が案内されていますが、できれば「記事一覧タブ切替」を設置できると便利かなと思います。

どうぞ宜しくお願い致します。

返信する
アオキ

トップページにはH1タグがないようです。チェックサイトで見ても、ソースを確認してもありません。 とても重要かと思い焦っております。
変更の仕方を教えてください。
他のページは、しっかりとページタイトルがh1とタイトルになってます。

返信する
サルワカくん

トップページでは、ロゴ(サイトタイトル)に対してh1タグがあてられるようになっています。
もしそうなっていない場合には、該当ページのURLを教えて頂けると多少の検証ができます。

返信する
あおき

ご連絡ありがとうございます。

やはり、再度確認しましたがh1タグはありません。
サイトタイトルは、しっかりと機能しております。

URLをメールにて送りましたので、引き続き宜しくお願い致します。

返信する
サルワカくん

たしかにh1タグがないようですね。
子テーマにheader.phpは入っていますか?そこで32行目〜38行目をカスタマイズしていると、うまく表示されない場合があります。
また、かなりカスタマイズされているようですが、トップページに固定しているテンプレートにはどれを使っていますか?
そのテンプレートでheader.phpはちゃんと読み込まれていますか?
それから一応、一度プラグインを全てオフにしたうえで同様にh1タグが表示されないか確認してみると良いかと思います。

返信する
あおき

本当にありがとうございます。
子テーマ内のheader.phpが、なぜか崩れていたようです。
下記のような形でh1タグが表示されました。
タイトルイメージがなっているようですが、正しいでしょうか?


※URLとサイト名は伏せています。

上記が、正しければ直りました。感謝です。
しかし、他に支障が一点出てしまいました。

昨日お知らせしました、URLを見ていただくと分かるかと思いますが、インターネットエクスプローラで見た時だけ、ヘッダー周りが、トップページと他ページで変わってしまいます。
バックグラウンドの白色の角が丸いです。
こちらは、何か原因があるのでしょうか?

度々お手数ではございますが、ご相談にのって頂けますでしょうか。
何卒、宜しくお願い致します。

サルワカくん

「なぜか」というかカスタマイズで消しちゃいけない部分を消してしまったりしたのだと思いますよ。
すみませんがご自身のカスタマイズにより変えた部分を戻す方法を教えろと言われても困ります。申し訳ありませんが、これ以上は対応できません。

あにかぶ

お世話になっております。

初歩的な内容かもしれませんがご教示お願いいたします。

トップページ用1カラムの背景色を変更したいのですが、方法はあるのでしょうか?

お忙しいところ申し訳ありませんが、宜しくお願い致します。

返信する
サルワカくん

子テーマのstyle.cssに以下のコードを追加することで変更できるかと思います!

#content.page-forfront {
  background: #色コード;
}
返信する
悩みマン

お世話になっております。
背景色は変えることが出来ましたが、メインコンテンツは白のままに残したいのですが、どうすればいいのでしょうか?
よろしくお願いいたします。

返信する
サルワカくん

固定ページを1カラムで表示した場合の話でしょうか?
それともトップページ用の固定ページを使っていますか?
また、背景色を変えるために追加したCSSはどのようなものですか?

返信する
秀平美保子

こんにちは。お忙しいところ申し訳ありません。
トップページをホームページ固定し、1カラムで使用しております。サイドバーありへ変更を考えております。ガイドでは固定ページ編集画面の属性でトップページ用サイドバーありが選べるようになっているとことですが、何度確認してもトップページ用(タイトル出力なし)しか出てきません。何が問題なのか分からないのですが、対処方法はありますでしょうか。
関係があるかどうかわかりませんが、最近ドメインを変え、ワードプレスも立ち上げなおしています。
ご返答、よろしくお願いいたします。

返信する
サルワカくん

もしかするとテンプレートファイルが消えてしまっているのかもしれません。
親テーマファイルを直接編集していない場合、テーマを一旦削除したうえで、再度インストールしてみて頂けますか?

返信する
秀平美保子

ご返答いただきありがとうございます。
素人であまり詳しくなく、質問の内容がずれていたらすいません。
教えていただいたようにやり直そうと思ったのですが、どうも、zipファイルを解凍してしまったようで、zipファイルが見つかりません。
こういう場合は対処法はありますでしょうか。もう一度購入するしかないのかなと考えております。
何度も申し訳ありません。よろしくお願いいたします。

返信する
サルワカくん

SANGOを購入されたBOOTHにログインすることで再度ダウンロードができます。

返信する
useless

手順2:記事一覧用固定ページを作成した場合にページタイトルが表示されなくて困ってます。クライアントの要望でページタイトル表示しなければならないので、どこから設定できるのか公開してください。

返信する
サルワカくん

記事に記載があるように、トップページ用テンプレートではタイトルが表示されません。
タイトルを表示したい場合「デフォルトテンプレート」を選べばOKです

返信する
mkt2

お世話になっています。

sarryさんも2018年8月7日に類似の質問されていますが、トップページ指定していない固定ページに「記事一覧タブ切替」を表示させることは可能でしょうか?

恐れ入りますが、ご回答いただけると助かります。
どうぞ宜しくお願い致します。

返信する
サルワカくん

1ページであれば可能です。
まず、空の固定ページ(本文は空欄でOK)を作成します。
次に、外観⇒カスタマイズ⇒ホームページ設定にて「固定ページ」を選ぶと、
「投稿ページ」というオプションが表示されると思います。
ここで、先程作成した固定ページを選ぶと、その固定ページのURLが記事一覧ページになります。
こちらは「固定ページをホーム固定した場合、別に記事一覧ページを用意できる」というWordPressのデフォルト仕様です。

返信する
もじこ

いつもお世話になっております。質問が3つあります(多くてスミマセン)

①手順1:にある以下の説明にある「アイキャッチ画像」というのは、どれのことでしょう?
>上の画像の●をつけたテンプレートがトップページ用です。
>これらのテンプレートでは、タイトルや日付、アイキャッチ画像は表示されません。
>表示させたいものを、自由に書いていきましょう。

②新着記事のサムネイルが、記事内の画像ではなく、コーヒーカップの画像になってしまいます。
記事を作成した後、手順2:を実行しました。
この記事一覧用固定ページに載る、新着記事のサムネイルが、記事内の画像ではなく、コーヒーカップの画像になります。
また、記事内のシェアボタンからシェアした際にSNS側で表示されるサムネイルは、水に浮かぶSUP(?)の画像になります。
記事内の画像をサムネイル表示させたいです。

③手順3:を実行しようとしたのですが、[+新規固定ページを追加]を押すと、テキストボックスが出てくるだけで、手順2で作成した新着記事一覧用固定ページを選ぶことができません。

お手数おかけしますが、ご教示いただけますようお願い申し上げます。

返信する
サルワカくん

①②
エディターで登録するアイキャッチ画像です。こちらで登録した画像がサムネイル画像に使用されます。
アイキャッチ画像はWordPress共通の機能ですので、登録方法はこちらなどが参考になるかと思います。

②「固定ページ⇒新規追加」で固定ページを作成・公開してから、外観⇒カスタマイズ⇒ホームページ設定を開き、ドロップダウンから作成した固定ページを選択してください。
下書きだと表示されないかと思います。

返信する
もじこ

ご返信ありがとうございます!すべてご教示いただいた方法で、無事解決いたしました。

返信する
サルワカくん

page.phpを子テーマに複製し、

<?php insert_cta(); //CTA ?>

というコードをCTAを表示したい位置にペーストすると固定ページでも利用できるようになります。

<?php insert_social_buttons();?>

のすぐ下くらいが良いと思います。

返信する

コメントを残す

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