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


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

前回の記事はこちら
#MAMPを使ったWordpressでのWEB制作方法7 初心者向け

今回は固定ページの中身を作っていきます。

固定ページの中身作成

固定ページはpage.phpのファイル内に作成します。

まずはhtmlで作成してあるservice.htmlの中身をpage.phpにコピーします。
header/footer/sidebarなどの共通部分はwordpressタグで読み込んでおきましょう
共通部分の読み込みはこちら

page.phpのファイルにコピーができたらリンクを確認すると
貼り付けた内容が反映されています。

しかしヘッダーのどのリンクからもpage.phpのファイルを
参照してしまうため各ページの表示になるように書き換えをします。

まずタイトルを以下のように書き換えます。

page.php
<!--書き換え前-->
      <h2>サービス内容</h2>
      <p>貴社ますますご盛栄のこととお喜び申し上げます。<br>
        平素はひとかたならぬご厚情にあずかり、厚くお礼申し上げます。<br>・・・</p>

<!--書き換え後-->
      <h2><?php the_title(); ?></h2>
      <p>貴社ますますご盛栄のこととお喜び申し上げます。<br>
        平素はひとかたならぬご厚情にあずかり、厚くお礼申し上げます。<br>・・・</p>

タイトルが変わるようになりました。
中身は各ファイルtestとしてあるものが反映されています。

次にwordpressの管理画面から各ページを開いて編集していきます。
まずは会社概要を作成してみましょう。
このとき設定からエディターをコードエディターにしておいてください。
※ビジュアルエディターはブログなど文章を打つエディターです。

ここにcompany.htmlで記述されている本文のコードを貼り付けて更新します。
※タイトル/ヘッダー/フッター/サイドバー/お問い合わせボタンなど
 共通部分は貼り付けないようにしましょう。以下は参考です。

ブラウザを再読込すると以下のように更新した内容が反映されています。

同じように事業内容をservice.htmlの内容で
お問い合わせをcontact.htmlの内容で
貼り付けて更新します。

事業内容ページ

お問い合わせページ
お問い合わせページへのリンクボタンは不要なので後ほど削除します。
今はこのまま進めましょう。

固定ページの作成は以上になります。
次は投稿ページの作成です。

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