MAMPを使ったWordpressでのWEB制作方法6 初心者向け
前回の記事はこちら
MAMPを使ったWordpressでのWEB制作方法5 初心者向け
リンク（aタグ）の置き換え
今度はヘッダーのリンク（aタグ）を置き換えます。
グローバルナビとなっているヘッダー部分で説明します。
header.html
<nav id="header"><!--headerstart-->
<h1><a href="index.html">"CORPORATE_SAMPLE_SITE"</a></h1>
<div id="menu">
<ul>
<li class="home"><a href="index.html">ホーム</a></li>
<li><a href="service.html">事業内容</a></li>
<li><a href="company.html">会社概要</a></li>
<li><a href="archive.html">お知らせ</a></li>
<li><a href="single.html">ブログ</a></li>
<li><a href="contact.html">お問い合わせ</a></li>
</ul>
</div>
</nav><!--headerend-->
ここでは６つのページへのリンクを貼ってあります。
これを以下のように書き換えてください。
header.html
<!--書き換え前-->
<nav id="header"><!--headerstart-->
<h1><a href="index.html">"CORPORATE_SAMPLE_SITE"</a></h1>
<div id="menu">
<ul>
<li class="home"><a href="index.html">ホーム</a></li>
<li><a href="service.html">事業内容</a></li>
<li><a href="company.html">会社概要</a></li>
<li><a href="archive.html">お知らせ</a></li>
<li><a href="single.html">ブログ</a></li>
<li><a href="contact.html">お問い合わせ</a></li>
</ul>
</div>
</nav><!--headerend-->
<!--書き換え後-->
<nav id="header"><!--headerstart-->
<h1><a href="<?php echo get_stylesheet_uri(); ?>index">"CORPORATE_SAMPLE_SITE"</a></h1>
<div id="menu">
<ul>
<li class="home"><a href="<?php home_url(); ?>">ホーム</a></li>
<li><a href="<?php home_url(); ?>service">事業内容</a></li>
<li><a href="<?php home_url(); ?>company">会社概要</a></li>
<li><a href="<?php home_url(); ?>archive">お知らせ</a></li>
<li><a href="<?php home_url(); ?>archive">ブログ</a></li>
<li><a href="<?php home_url(); ?>contact">お問い合わせ</a></li>
</ul>
</div>
</nav><!--headerend-->
wordpressタグの <?php home_url(); ?> を使用して各リンクを書き換えます。
.htmlの拡張子は不要なので削除します。
※お知らせとブログは一覧ページへのリンクにするためarchiveに書き換えています。
同様にindex.phpやsidebar.phpなどのリンクも修正しておきましょう。
※リンク先はまだ作成していないので白紙の画面に飛んでいます。
次回は固定（事業内容・会社概要）ページの設定です。