MAMPを使ったWordpressでのWEB制作方法6　初心者向け

7397 ワード
mamp HTML WordPress CSS HTML テキストリンク

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などのリンクも修正しておきましょう。
※リンク先はまだ作成していないので白紙の画面に飛んでいます。

次回は固定（事業内容・会社概要）ページの設定です。

MAMPを使ったWordpressでのWEB制作方法7　初心者向け

CentOS 7同期リモートミラーローカルyumサーバの構築
C++文字列両端スペースを削除trim()