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

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

今回は固定ページの作成をします。

固定ページとは事業内容や会社概要など頻繁に更新しないページに使用します。

ここからはwordpressの管理画面も使用しますので
urlの末尾にadminと追記して管理画面も立ち上げておきます。

固定ページの設定

まずは管理画面の固定ページから新規追加を選択します

タイトルに事業内容、内容は仮でテストと入力して下書き保存をします。

すると右側にパーマリンクの設定が表示されます。

パーマリンクはwordpressの中のurlになりますので
末尾を事業内容からserviceに変更して公開をします。

同じように以下を作成して公開しましょう

会社概要
タイトルを会社概要、内容をtest、パーマリンク末尾をcompany

お問い合わせ
タイトルをお問い合わせ、内容をtest、パーマリンク末尾をcontact

固定ページ一覧に公開済みのステータスで表示されていればOKです。

グローバルナビ（ヘッダー）のwordpress設定

現在ヘッダーはheader.php内にhtmlで記述されています

こちらをワードプレスの管理画面で管理できるよう設定します。

まずは作成したfunctions.phpのファイルを開きます。
※この段階では何も記載されていないはずです。
以下をコピペしましょう

<?php
//カスタムメニュー
register_nav_menus( //メニュー機能をオンにする
array(
'place_global' => 'グローバル', //“メニュー英語名” =>”メニュー名”,
'place_utility' => 'ユーティリティ',
'place_sidebar' => 'サイドメニュー',
'place_footer' => 'フッター',
)
); ?>

今回使用するのはplace_grobal部分なのでutility以下は削除しても構いません。
異なるメニューを作成する時に使用するものです。

functions.phpファイルを保存してwordpress管理画面を再読込しましょう
外観の部分にメニューというタブが増えています

新規メニューからメニュー名にfunctions.phpに記載した
place_globalと記入し作成します。
そして左側のタブから企業概要、事業内容、お問い合わせにチェックを入れて追加し保存します。

次に位置の管理タブよりグローバルのテーマの位置に
place_globalを紐付けしておきます。

次にheader.phpのファイルを以下のように書き換えます。

<!--書き換え前-->
      <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>
<!--書き換え後-->
      <div id="menu">
        <ul>
        <?php wp_nav_menu( array(
          'theme_location'=>'place_global', 
          'container'     =>'', 
          'menu_class'    =>'',
          'items_wrap' => '%3$s',//<ul>を出力しない
        ));?>
        </ul>
      </div>

ブラウザーを再読込するとヘッダーが設定した内容に置き換わっています。
メニュー並び替えなども管理画面などから行う設定になりました

現在はリンクの先は何も設定していませんので白紙です。
次回固定ページの中身の作成を行います。

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