Ver1.3.2をリリースしました(1/27)

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

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

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

1 Comment

まえだ

はじめまして。

可能であれば教えて下さい。
カスタマイズした子テーマの状態(左側にメニュー固定)で、固定ページの属性をトップページにすると、固定メニューの右側の部分が若干左寄りになってしまいます。
ホームページ設定で「最新の投稿」にするとズレないようなので、もし良ければトップページ用のレイアウトでも、バランスよく配置できると助かります。

以上、よろしくお願いします。

返信する

コメントを残す

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