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

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

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

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

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

追加ファイル

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

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

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

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

<!DOCTYPE html>~</header>

→header.phpへ

<section class="visual">~</article>

→そのまま

<aside>~</aside>

→sidebar.phpへ

<footer>~</html>

→footer.phpへ

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

それぞれ切り取った場所に以下のコードを入れる。

<?php get_header(); ?>
<?php get_sidebar(); ?>	
<?php get_footer(); ?>

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

header.php

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

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

ヘッダーを調整する

hmtl

    <header>
      <div class="container">
        <div class="top_title">
          <h1><?php bloginfo(' name '); ?></h1>
          <h2><?php bloginfo( 'description' ); ?></h2>
        </div>
      </div>
    </header><!-- ヘッダーここまで -->

top_titleというクラスを追加して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;
}