オリジナルのtheme(テーマ)を作る04:headerを作る
bootstrapを使っているので、ほぼbootstrapの書き方ですが、一部変更してます。
見た目は、後でcssを書き換えて変更していく予定です。
<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="#">tomisan.info</a><small>"I tried" of tomisan</small></h1>
</div>
<!--//navbar-header -->
<div class="collapse navbar-collapse" id="globalmenu">
<ul class="nav navbar-nav">
<li><a href="#">個別ページ1</a></li>
</ul>
<!--//nav navbar-nav -->
<ul class="nav navbar-nav navbar-right">
<li><a href="#">リンク1</a></li>
<li><a href="#">リンク2</a></li>
<li><a href="#">リンク3</a></li>
</ul>
<!--//navbar-right -->
</div>
<!-- //collapse navbar-collapse -->
</div>
<!--//container -->
</nav>
<!--//nav -->
</header>
<!--//#header -->
元はこんなHTMLですが、wordpressのテンプレートタグを入れていきます。
<h1><a class="navbar-brand" href="<?php echo home_url('/'); ?>"><?php bloginfo('name'); ?></a><small><?php bloginfo('description'); ?></small></h1>
サイト名とトップページへのリンク、サイトのキャッチフレーズ(説明)を出力します。
メニュー部分は後回しで(;^ω^)
次は記事のタイトルと記事の本文を表示させよう。。