【wordpress】 BootStrapを使ってwordpressテーマを自作する方法2

【wordpress】 BootStrapを使ってwordpressテーマを自作する方法1からの続き

テンプレートファイルを増やす

追加ファイル

これまでfunction.php,index.php,style.cssだけだったファイルに対し、以下のファイルをテーマが入っているディレクトリに作成する。

追加ファイルに内容を移す

前回のindex.phpから以下の部分を新たに作ったファイルに移す。

読み込み用のコードを書く

それぞれ切り取った場所に以下のコードを入れる。
[html] <?php get_header(); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
[/html]

テーマが正常に表示されることを確認してから次に進む。

header.php

ナビゲーションバーの項目を任意の値に変更する

「li」を増やす、減らすなどして項目を入れる

ヘッダーを調整する

hmtl
[html] <header>
<div class="container">
<div class="top_title">
<h1><?php bloginfo(‘ name ‘); ?></h1>
<h2><?php bloginfo( ‘description’ ); ?></h2>
</div>
</div>
</header><!– ヘッダーここまで –>
[/html]

top_titleというクラスを追加してcssでバランスを整える

css
[css] header {
// headerに背景画像を指定
background-image: url("○○.jpg");
// 画像を全体に表示させる
background-size:cover;
//配置を調整する
background-position: center top;
// ブラウザに合わせて高さを可変させる
height:100vh;
// 背景画像を固定させる
background-attachment: fixed;
}

.top_title {
color: #fff;
text-align: center;
margin-top: 30vh;
text-shadow: 1px 1px 7px #ccc;
}
[/css]