オリジナルのtheme(テーマ)を作る17:トップページだけレイアウトを変える

ブログのみだとトップページだけ違うレイアウトというのは必要ないかもですが、
色んなページが含まれるwebサイトの場合はトップページだけレイアウトが違ったりしますね。
トップページだけ大きな画像を表示させたり。

ということで、トップページを作ろうー。

front-page.phpトップページのファイルはhome.php、またはfront-page.phpというファイル名、もしくはほかの名前でもOK。
とりあえずここでは、font-page.phpという名前のファイルを空のままFTPでアップロードします。

外観-テーマの編集から、front-page.phpを開きます。
真っ白なままですが、ここにテンプレート名を記述します。

<?php
/*
Template Name: フロントページ
*/
?>

分かりやすい名前であれば何でもいいですが、フロントページと書きました。

次に、page.phpの中身を全部コピーして、front-page.phpに貼り付けます。
※上で記述したテンプレート名の下に貼り付けて更新します。

固定ページ-新規追加画面で、トップページ用のタイトルを書いて更新します。
このタイトルは分かり易ければなんでもいいと思います。
TOPとかHOMEとかのタイトルだと分かりやすいかもですね。
※テンプレートは先ほど付けたテンプレート名を選びます。

設定-表示設定の画面で、フロントページの設定を固定ページにして、プルダウンからページを選択します。
さきほど固定ページに付けたタイトルを選択します。

表示設定

この時点でサイトを表示させると投稿のタイトルが出ているので
これらの要らないものは、外観-テーマの編集画面に行ってfront-page.phpの中からタイトル部分を削除します。

また、トップページに必要なものを追加していきます。

<?php
/*
Template Name: front page
*/
?>

<?php get_header(); ?>

<main id="main" role="main">
<div class="container-fluid">
	<div class="custom-header">
		<div class="container">
		<div class="frontnewsBox">
			<ul>
			<?php dynamic_sidebar('header_area'); ?>
			</ul>
		</div>
		<!--//frontnewsBox -->
		</div>
		<!--//container -->
	</div>
	<!--//custom-header -->
</div>
<!--//container-fluid -->
	
<div class="container">
	<section>
	<div class="row">
		<div class="col-xs-12">
        	<div class="contentsBox">
			<ul>
			<?php dynamic_sidebar('top_area'); ?>
			</ul>
		</div>
        	<!--//contentsBox -->
		</div>
		<!--//col -->
	</div>
	<!--//row --> 
	</section>
	<!--//section-->
	
	<section>
	<div class="row">
		<div class="col-sm-3">
        	<div class="contentsBox">
			<ul>
			<?php dynamic_sidebar('center_area'); ?>
			</ul>
		</div>
        	<!--//contentsBox -->
		</div>
		<!--//col -->
		<div class="col-sm-3">
        	<div class="contentsBox">
			<ul>
			<?php dynamic_sidebar('center_area-2'); ?>
			</ul>
		</div>
        	<!--//contentsBox -->
		</div>
		<!--//col -->
		<div class="col-sm-3">
        	<div class="contentsBox">
			<ul>
			<?php dynamic_sidebar('center_area-3'); ?>
			</ul>
		</div>
        	<!--//contentsBox -->
		</div>
		<!--//col -->
		<div class="col-sm-3">
        	<div class="contentsBox">
			<ul>
			<?php dynamic_sidebar('center_area-4'); ?>
			</ul>
		</div>
        	<!--//contentsBox -->
		</div>
		<!--//col -->
	</div>
	<!--//row --> 
	</section>
	<!--//section-->
</div>
<!--//container --> 
</main>
<!--//#main -->
    
<?php get_footer(); ?>

ところどころに、sidebarのウィジェット入りになってます。
このサイトのトップページは複数のテキストウィジェットを配置して表示しています。
基本的には、ウィジェットでphpを使うことはできませんが、phpが使えるようになるプラグインもあるようです。

もうすぐ満開

暖かくなってきたので
桜の花もずいぶん開花が進みました(*´ω`*)

オリジナルのtheme(テーマ)を作る16:1カラムの固定ページテンプレートを作る

ブログなどの投稿するページ以外は1カラムにするので
固定ページのテンプレートを1カラムで作ります。

page.phppage.phpというファイル名の空のphpファイルをFTPでアップロードします。

テーマの編集画面でpage.phpを選択し、一番最初にテンプレート名を書きます。

<?php
/*
Template Name: テンプレートの名前
*/
?>

「テンプレートの名前」部分に、このテンプレートの名前を書きましょうー。
固定ページを作成するときに、使うテンプレートを選ぶことができます。

つぎに、テーマの編集画面からindex.phpの中身を丸ごとコピー、page.phpに貼り付けます。

固定ページなので、index.phpのままだと要らない部分があります。
pager、投稿日時、サイドバーなど、固定ページでは要らない部分を削除します。

<?php get_header(); ?>

<main id="main" role="main">
    <div class="container">
    <section>
        <div class="row">
            <div class="col-xs-12">
                <?php if(have_posts()): while(have_posts()): the_post(); ?>
                <article>
                    <h2><?php the_title(); ?></h2>
                    <div class="well well-lg">
                        <?php the_content(); ?>
                    </div>
                    <!--//well well-lg --> 
                </article>
                <!--//article -->
                <?php endwhile; endif; ?>
            </div>
            <!--//col -->
        </div>
        <!--//row --> 
    </section>
    </div>
    <!--//container --> 
</main>
<!--//#main -->
    
<?php get_footer(); ?>

要らないところを削除して、1カラムにしました。
bootstrapを使ってますので、<div class="col-xs-12">この部分が1カラム用です。

<?php if(is_page()) : ?>ここは固定ページの内容だよ<?php endif; ?>

page.phpファイルを使わずにindex.phpで固定ページを生成する場合などで、
固定ページだけに表示させたい内容があるときは、上記テンプレートタグを記述します。