WordPress5.5への更新について

トップページ用固定ページ(1カラム)のサンプルコード

「SANGOデモページのトップページ用固定ページ(1カラム)はどのように作ることができるのか」というお問い合わせを何度か頂いたので、サンプルコードとして公開します。

トップページ用固定ページの使い方

固定ページを新規追加し、サイドバーの「固定ページ属性」から「トップページ用(タイトルなど出力なし)」を選びます。

トップページ用を選ぶ

これで1カラム用のレイアウトでページが表示されるようになります。ホーム(トップページ)に固定する方法は「固定ページをトップページに指定する方法」をご覧ください(テーマにかかわらず、WordPress共通の操作です)。

ソースコード

トップページ用固定ページのデモで使用されているコードをそのまま以下に載せます。こちらのコードを投稿編集画面の「テキスト」にコピペすれば同じレイアウトの画面を作ることができます(「ビジュアル」ではなく「テキスト」欄の方です)。
ただし、画像タグは「ここに画像」などと表示しているため、差し替えていただければと思います。

テキスト
[texton img="画像URL" title="Let’s get rolling."]

こちらは固定ページでテンプレートを「トップページ用」にした場合のページサンプルです。サイドバーもページタイトルも表示されません。言うなれば、まっさらなキャンバス。ショートコードや装飾機能を組み合わせて、自由に表現をしましょう。

[tensen]

[yoko3 responsive]
[cell]
ここに画像
3列の横並びショートコードを使えば、このように画像を横に並べることができます。
[/cell]
[cell]
ここに画像
それぞれの列に画像を貼付け、さらに文章を書き込めば、このようなデザインになります。
[/cell]
[cell]
ここに画像
もちろんリンクやボタンを貼ることもできます。
[/cell]
[/yoko3]

[yoko2 responsive]
[cell]
ここに画像
[/cell]
[cell]
<h2>初心者でも使いやすいWordPressテーマ</h2>
SANGOはデザイン、使いやすさ、内部SEO、とあらゆる面で優れたWordPressテーマです。多数のショートコードや、装飾機能により、HTMLやCSSの知識が無くとも、幅広い表現をすることができます。
[btn href="リンク先のURL" class="raised red-bc strong"]詳しく見る[/btn] 
[/cell]
[/yoko2]
<h2 class="hh hh1" style="text-align: center;">SANGOの記事一覧</h2>
ここに画像

[yoko2 responsive]
[cell]
<p class="hh hh5 pastel-bc ct">カテゴリー1</p>
[catpost catid="カテゴリーID"] 
[/cell]
[cell]
<p class="hh hh5 pastel-bc ct">カテゴリー2</p>
[catpost catid="カテゴリーID"]
[/cell]
[/yoko2]

↑こちらは「指定したカテゴリーの記事を、指定した数だけ表示させる」ショートコードを使ったものです。

ショートコードはショートコード一覧に記載のあるもののみを使っています。また、一部オリジナル見出しを使っています。

36 COMMENTS

アバター
もりお 2020/10/07

【追伸】新規投稿ページの表示について

昨日、質問させていただいた者ですが、サイドバーは正常に表示できました。 (新規投稿ページの設定を解除⇒固定ページの編集⇒デフォルトテンプレートを選択⇒新規投稿ページの再設定) トップページには、ヘッダーアイキャッチを表示し、新規投稿ページには表示しない設定は可能でしょうか。 お忙しいところ恐縮ですが、ご回答の程よろしくお願いいたします。

回答を見る
アバター
がぴを 2020/03/14

トップページ1カラムでサイドバー分だけ左にずれて表示されてしまう

サルワカさま ページ属性をトップページ1カラムにした場合、サイドバー分だけ左にずれて表示されてしまいます。 テストで立ち上げたサイトではプラグインCSSを同じ状態にしていますが正常に表示されます。 (urlにtestの入ったサイト) 何か指定を間違っているのでしょうか? よろしくお願いいたします。

回答を見る
アバター
しもとり 2019/12/24

記事を出力するカードを2カラムでの見栄えをよくしたい

サルワカさん、こんにちは。お世話になっております。 SANGOに変えてからどんどん自分のサイトに愛着がわいて、購入してよかったなと思う日々を過ごしています。 それはさておき。 現在、トップページを固定ページにしようと考えています。 https://saruwakakun.design/fortop のようにしたいのですが、リンクカードのデザインを変更しようと検討中です。 ショートコード[指定したカ…

回答を見る
アバター
レミイ華月 2019/08/24

トップページ用固定ページの背景がグレーになってしまう

はじめまして、お世話になります。 サイトのトップを『トップページ用固定ページのサンプル』のようにしたく 固定ページを新規追加し、サイドバーの「固定ページ属性」から「トップページ用(タイトルなど出力なし)」を選び、投稿編集画面の「テキスト」にコードをコピペしました。 通常の文章などですと背景は白のままなのですが、こちらをコピペした部分は背景が グレーになってしまい困っております。 背景を白にする方法…

回答を見る
アバター
YUKA 2019/04/27

トップページに他サイトの更新記事一覧を表示したい

サルワカ様、SANGOを2サイトで愛用させていただいているYUKAと申します。 私のサイトでも、サルワカ様のトップページ用固定ページデモを参考にトップページを作成したのですが、「記事一覧」を表示するときに「同じサイトにある2つのカテゴリー」ではなく「2つのサイトのそれぞれ最新記事」を表示させることはできませんでしょうか。 同じサイトの最新記事は現在表示ができておりますので、別サイトの最新記事の表示…

回答を見る
アバター
こびと 2019/04/24

トップページ用固定ページで特定カテゴリーの日付とタイトルのみ一覧表示させたい

お世話になっております。 HTML、CSS、WPの勉強をしており、SANGOに行きつき購入させていただきました。 タイトル通りで、トップページに特定カテゴリー(今回はお知らせ)を日付とタイトルを一覧表示させたいです。 できれば、「一覧を見る」などのボタンもあれば助かります。 カード(アイキャッチ+タイトル)での一覧表示はこちらで勉強させていただき表示できたのですが、アイキャッチ画像は不要なのです。…

回答を見る
アバター
Kaito 2019/04/15

固定ページと記事ページのCSSを別にしたい

はじめましてKaitoと申します。 SANGOがリリースされてから長い間お世話になっております。 CSSなど初心者で申し訳ないのですが、 固定ページのみ記事ページとは別のCSSを読み込ませるカスタマイズ方法をご教示いただけますでしょうか? 具体的にはlinktoをCSSで「続きが読む」と表示されるようにしているのですが、固定ページでも表示されてしまい、どうにかして消したい所存です。 お忙しいところ…

回答を見る
アバター
マサ 2018/09/27

トップページ用の1カラム固定ページのコンテンツの最大幅を小さくしたい

度々の質問失礼致します。トップページ用の1カラム固定ページのコンテンツの最大幅を小さくしたい場合はどのように設定すれば良いのでしょうか?

回答を見る
アバター
yama 2018/08/24

画像の上に文字をのせるショートコードで文字色を変えたい

[texton img="画像URL" title="Let’s get rolling."] をフロントページのテキストに挿入しました。 Let’s get rolling. の色を変える方法を教えてください。

回答を見る
アバター
mico 2018/05/31

投稿ページ(1カラム)のコンテンツ最大幅を広げたい

はじめまして。 1カラムサイドバーなしで、サルワカさんが公開されているサンプルコードをそのまま投稿編集画面の「テキスト」にペーストしてみたのですが、 画面の余白がデモページより大きくなってしまい、相対的に文字や写真が小さくなってしまいます。 Version: 1.4.1 子テーマ使用です。 何か、他の設定が必要でしょうか?対処法があればお知らせいただけるでしょうか。

回答を見る

コメントを残す

* は入力必須項目です。
コメント投稿ガイドラインを読んでから投稿してください。
メールアドレスは公開されませんが、名前は公開されます。

HTMLやPHPのコードを掲載するときはHTMLエスケープツールで特殊文字を変換してから貼り付けてください。