プログラム関係の備忘録。技術系記事1000記事以上を目指すブログ

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

  • 2017年5月14日
  • 2017年5月15日
  • wordpress
  • 200view
  • 0件

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

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

追加ファイル

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

・header.php
・footer.php
・sidebar.php

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

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

[html]<!DOCTYPE html>~</header>[/html]

→header.phpへ

[html]<section class="visual">~</article>[/html] →そのまま

[html]<aside>~</aside>[/html] →sidebar.phpへ

[html]<footer>~</html>[/html] →footer.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]