Ver1.5 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]

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

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

13 Comments

まえだ

はじめまして。

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

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

返信する
スキナレ

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

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

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

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

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

返信する
サルワカくん

合っていると思います。
カテゴリーIDはたしかに合っていますか?
また、子テーマでカスタマイズで関連記事ショートコードなどに変更を加えていたりはしないですよね?

返信する
スキナレ

お世話になります。(^-^;

カテゴリーIDは合っているようです。

新着記事出力・関連記事出力・プラグインWordPress Popular Postsによる出力は正常に働いています。

カテゴリーの一番上の階層のカテゴリーIDは出力されないのですかね?

一番上のカテゴリー階層がスポーツ(ID=9)一つ下のカテゴリー階層がサッカー(ID=10)なんですが、10で指定するとサッカーに関する記事は出力されましたが、9で指定するとサッカー含めたスポーツに関連する記事は出力されません。

こういう仕様ということなのでしょうか?

返信する
サルワカくん

あー、なるほど。
それはそういう仕様ですね・・・。
申し訳ないです。

返信する
スキナレ

了解しました。

別のアイデアを検討してみます。

お忙しいところありがとうございました。(#^.^#)

sora117

はじめまして。

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

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

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

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

返信する
サルワカくん

大変申し訳ないのですが、1カラムの固定ページではヘッダーアイキャッチ画像に対応しておりません・・・。
このあたりの記事にも書かれています。分かりづらくて申し訳ないです。

返信する
sora117

大変失礼しました。確かに対応していないと書いてありました。
では、サンプル
https://saruwakakun.design/fortop
のようにトップの部分に画像を大きくいれるのは、ショートコードを利用するという形でおこなえばうまくいきそうですね。試してみたら、うまくいきました。ありがとうございます。

返信する
サルワカくん

ご不便をおかけして申し訳ないです。
また、ご理解ありがとうございます。

返信する
mico

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

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

返信する
サルワカくん

はじめまして。
固定ページではなく、投稿ページ(1カラムにチェック)に貼り付けましたか?
トップページ用の1カラム固定ページは、コンテンツの最大幅を大きめにしています。
もし、投稿ページ(1カラム)のコンテンツ最大幅を広げたい場合には、以下のようなCSSを追加すると良いかと思います。

@media only screen and (min-width: 768px) {
.single .one-column #main {
    max-width: 1060px;/*最大幅*/
  }
}

ただし、1カラムの投稿ページ全てに適用されるのでご注意ください。

返信する

コメントを残す

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