桜が満開になりました。

とてもいいお天気でお花見日和だったので
散歩に出掛けて写真撮ってきました(^^)

トップページ専用ページを作ってみたものの、現状ではどこのページにも行けないので(^_^;)
グローバルメニューを作ります。

function.php

//カスタムメニュー機能を有効にする
register_nav_menus(array('navigation' => ' NavigationBar '));

カスタムメニューを有効にしておきます。

メニューを複数（日本語でもOKです）

//メニュー有効化
register_nav_menus(array(
	'main-menu'	=> 'メインメニュー',
	'sub-menu'	=> 'サブメニュー'
));

header.php

<header id="header">
    <nav class="navbar navbar-inverse">
    <div class="container">
        <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#globalmenu" aria-expanded="false">MENU</button>
        <h1><a class="navbar-brand" href="<?php echo home_url('/'); ?>"><?php bloginfo('name'); ?></a><small><?php bloginfo('description'); ?></small></h1>
        </div>
        <!--//navbar-header -->
        <div class="collapse navbar-collapse" id="globalmenu">
            <?php wp_nav_menu(array('theme_location' => 'navigation')); ?>
        </div>
        <!-- //collapse navbar-collapse -->
    </div>
    <!--//container -->
    </nav>
    <!--//nav -->
</header>
<!--//#header -->

header.phpに書いてあったメニュー部分（ul li）を削除して、下記のテンプレートタグに書き換えます。

<?php wp_nav_menu(array('theme_location' => 'navigation')); ?>

自動的に、ul li タグが書き出されるので、style.cssで見た目を整えましょうー。
bootstrapを使っているのですが、ulとliが勝手に・・となってしまうので
cssの書き換えが面倒だよーという方はこの部分だけbootstrapでなくてもいいんではないかと。

とりあえずここではbootstrapのまま、cssを書き換えました。

/* #globalmenu
----------------------------*/
#globalmenu {
}
#globalmenu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
#globalmenu ul>li {
	float: left;
	position: relative;
	display: block;
}
#globalmenu ul>li>a {
	color: #AAA;
	height: 100px;
	border-left: 1px #000 solid;
	border-right: 1px #444 solid;
	padding: 25px;
	position: relative;
	display: block;
	line-height: 20px;
}
#globalmenu ul>li:first-child {
	border-left: 1px #444 solid;
}
#globalmenu ul>li:last-child {
	border-right: 1px #000 solid;
}
#globalmenu ul>li>a:focus,
#globalmenu ul>li>a:hover {
	background-color: transparent;
}
@media screen and (min-width: 768px) and (max-width: 1199px){
	#globalmenu ul>li>a {
		height: auto;
		padding: 10px 15px;
	}
}
@media screen and (max-width: 767px){
	#globalmenu ul>li>a {
		height: auto;
		border-left: none;
		border-bottom: 1px solid #AAA;
		padding: 10px 15px;
	}
	#globalmenu ul>li:last-child>a {
		border-right: none;
	}
	#globalmenu ul>li {
		-webkit-box-shadow: inset -1px -1px 0px 0px rgba(0,0,0,1);
		-moz-box-shadow: inset -1px -1px 0px 0px rgba(0,0,0,1);
		box-shadow: inset -1px -1px 0px 0px rgba(0,0,0,1);
	}
	#globalmenu ul>li>a small {
		display: inline-block;
		text-align: left;
		margin-left: 15px;
	}
	#globalmenu ul>li>a {
		padding: 10px 15px;
	}
	#globalmenu ul>li:last-child {
		border-right: none;
	}
	#globalmenu ul>li {
		float: none;
		width: 1%;
		display: table-cell;
	}
}
@media screen and (min-width: 768px){
	#globalmenu ul {
		float: right!important;
		margin-right: -15px;
	}
}

ちなみに、ul liの入れ子になった場合についての考慮はしてません。
※項目を入れ子にしなければいいだけｗ
項目を入れ子にしたい場合は、bootstrapのtoggleを入れる必要がでてくるので
その場合はbootstrapではなく、cssのみで入れ子のメニューを作るようにするといいかなと思います。

スマホでの見え方も考慮してないので、そのへんは考えなければ。
項目名の下にスラッグ等の英語表記を入れたかったんですが、ちょっと厳しかったなー。
もうちょっと試行錯誤が必要・・。

挿入する項目は、左側の外観－メニューから項目を選んでください。

これで、無事、メニューが出来たかと思います(^^)

ブログのみだとトップページだけ違うレイアウトというのは必要ないかもですが、
色んなページが含まれる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が使えるようになるプラグインもあるようです。