[wordpress] Topページ(Home)のカスタマイズ

Topページ

WordPressのカスタマイズに慣れてきたら、Top画面もブログ形式(投稿一覧)でないTopページにしてみたいですよね? phpファイルをカスタマイズしなくても、実は基本設定で投稿ではないページを作る事が出来ます。Bootstrapの方法ですが、ファイルにちょっと手を加えるだけでcontainer-fluidを使い、横いっぱいに表示される様にする方法をシェアします。

基本設定で作るTopページ

インストール後のWordPressのTopページは、投稿が連なるブログページになっています。(ビジネスタイプのテーマを使用している場合は例外)投稿ではなく、自由なTopページにします。

「固定ページ」の中にhomeがあります。このページをTopページに使用します。

Topページ

「設定」 → 「表示設定」 → 「固定ページ」「ホームページ」で先ほどのページ(この場合はhome)を選択。ページ下にスクロールして[変更を保存]をクリックするのを忘れずに。

Topページ

後は、固定ページに好きに記載すればOKです。

container-fluidでもっと自由に

container-fluid

もっと自由にTopページだけ横一杯に背景色が広がっているサイトを作りたいと思います。

前提条件として、Bootstrapを使ったUnderstrapをテーマとして使用します。子テーマの設定は[wordpress] Understrap Childをカスタマイズする で紹介しています。

Bootstrapを使ったテーマなら何でも良い訳ではありません。横一杯にひろがるサイトを作るには面倒なテーマもあります。Understrapが簡単なのでお勧めです。ちなみに、WP Bootstrap Starter は少々構成が異なるので、ご紹介する方法では出来ません。

Bootstrapは、以下の様な構成で横幅を維持しています。

<div class="container">
<div class="row">
いろいろ 
</div>
</div>

たとえ、homeの編集画面で「テンプレート」を[Full width page]を選択しても、一番外側のcontainerが邪魔をしていて、container-fluidと書いても横一杯にはなりません。

テンプレートの作成

一番外側のcontainerをcontainer-fluidとする事で、横一杯に表示できる様になります。

まず、基となるファイルをコピーします。wp-content / themes / understrap(親テーマの方) / page-templates /f ullwidthpage.phpを、understrap-child(子テーマ)に[page-templates]フォルダを作成し、中にコピーを作ります。

エディターで開き、「 * Template Name: Full Width Page」を任意の名前に書き換えます。例えば* Template Name: fluid Width Page

次に書き換えたいのはこの1行。

<div class="<?php echo esc_attr( $container ); ?>" id="content">
//出力すると↓こんな感じになる部分
<div class="container" id="content">

それを・・・

<div class="container-fluid" id="content">

に書き換えればOKです。最後にファイル名を「fullwidthpage.php」を任意の名前にします。例えば「fluidwidthpage.php」

作ったテンプレートを使う

作成した「Full Width Page」が固定ページテンプレートの中で選択出来る様になりました。

Topページ

後は、内容を書くだけです。横幅は<section>や<div>に付けるclass次第です。

<div class="container">
<div class="row">
で囲えば、狭い横幅
<div class="container-fluid">
<div class="row">
なら、横いっぱいに表示されます。

Leave a Reply

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

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください