0
1

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-04-29

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

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

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

固定ページの中身作成

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

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

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

Image from Gyazo

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

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

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

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

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

Image from Gyazo

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

Image from Gyazo

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

Image from Gyazo

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

Image from Gyazo

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

事業内容ページ
Image from Gyazo

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

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

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

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1