Ver1.7 Released !

トップページ用固定ページ(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]

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

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

23 COMMENTS

マサ 2018/09/27

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

回答を見る
マサ 2018/09/17

初めまして。wordpress自体初心者です。
カテゴリページを1カラムにしたいのですが可能ですか?
もし可能ならやり方を教えて頂きたいのですが。

回答を見る
mkt2 2018/09/16

はじめまして。1点質問させていただきます。
トップページ用固定ページ(1カラム)及び、他固定ページでも活用したいのですが、一定の範囲に背景色を横幅いっぱいまでひくことはどのように行えばいいでしょうか?
具体的には以下のHPのように
https://www.kuraseru.co.jp/
各要素(Service、News)ごとに背景色を変えて、情報が異なることを表現したく。

お手数かけてすみませんが、ご教示いただけると助かります。

回答を見る
山本 2018/09/05

質問させてください。
「固定ページをトップページに指定する方法」で設定→表示方法→フロントページの表示とありますが、フロントページの表示という項目がありません。

恐れ入りますが、ご教授お願い致します。

回答を見る
yama 2018/08/24

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

をフロントページのテキストに挿入しました。
Let’s get rolling. の色を変える方法を教えてください。

回答を見る
mico 2018/05/31

はじめまして。
1カラムサイドバーなしで、サルワカさんが公開されているサンプルコードをそのまま投稿編集画面の「テキスト」にペーストしてみたのですが、
画面の余白がデモページより大きくなってしまい、相対的に文字や写真が小さくなってしまいます。

Version: 1.4.1 子テーマ使用です。
何か、他の設定が必要でしょうか?対処法があればお知らせいただけるでしょうか。

回答を見る
sora117 2018/05/30

はじめまして。

1カラムサイドバーなしで、ヘッダーアイキャッチ画像を表示させるようにしたかったのですが、

テンプレート トップページ用固定ページ(1カラム)の設定で、
トップページ用1カラム(タイトルなど出力なし)にし、 ヘッダーアイキャッチ画像を表示(トップページにのみ表示される巨大なアイキャッチ画像)をしましたが、
アイキャッチ画像が出ない状態になります。

トップページ用1カラム サイドバーあり(タイトルなど出力なし)の設定にかえるとアイキャッチ画像がでてくるようになります。

Version: 1.4.1 子テーマ使用です。
何か、他の設定が必要でしょうか?

回答を見る
スキナレ 2018/05/22

こんにちわ。(#^.^#)

横2列表示で指定したカテゴリーIDで記事出力ショートコード張り付けたのですが、
見出しは表示されても記事が表示されません。

コードが間違っているのですかね。

よろしくお願いいたします。

[yoko2 responsive][cell]
エンタメ[catpost catid="3" num="10"]
[/cell][cell]
スポーツ[catpost catid="9" num="10"]
[/cell][/yoko2]

回答を見る

コメントを残す

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