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

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

今回で最後の記事になります。
前回の記事はこちら

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

これまで固定ページはpage.phpでレイアウトを共通化してきました。

しかし実際には自由にレイアウトが必要な場面や
VSコードなどのエディタ側でページを制作するほうが
都合がいいことが多いと思います。

そこでレイアウトが自由なページを追加してみましょう。

##オリジナルテンプレートの作成

今回はサービス２という内容でオリジナルテンプレートを作成します。

まずpage.phpをコピーしてpage-service2.phpというファイルを作成します。
一番上にphpでテンプレートの名前を記述します。

page-service2.php

<?php
/*
Template Name: サービス2
*/
?>

<?php get_header(); ?>

  <div class="wrapper">
    <div id="conL">
      <h2><?php the_title(); ?></h2>

      <?php if(have_posts()): while(have_posts()): the_post();?>
      <?php the_content(); ?>
      <?php endwhile; endif; ?>

      <!--ページの条件分岐-->
      <?php if (is_page(array('63'))) {?>

      <?php }else{ ?>
        <a class="btn" href="contact.html"><button class="btn1">お問い合わせ</button></a>
      <?php } ?>


    </div><!--conLend-->

<?php get_sidebar(); ?>
  </div>
<?php get_footer();?>

次に管理者画面から新規固定ページを以下で作成しましょう。
パーマリンクはservice2、ページ属性からテンプレートをサービス２に設定します。
入力が終わったら公開してページを表示します。

すると以下のようにサービス２のページが表示されます。
[]
(https://gyazo.com/888445b2cb56674d37d1f8e1d178854c)

このページはpage-service2.phpのファイルと直接つながっています。
エディタで中身を編集してみましょう。

page-service2.php

<?php
/*
Template Name: サービス2
*/
?>

<?php get_header(); ?>

  <div class="wrapper">
    <div id="conL">
      <h2><?php the_title(); ?></h2>
        <p>サービス２テスト</p>
        <p>サービス２テスト</p>
        <p>サービス２テスト</p>
        <p>サービス２テスト</p>
        <p>サービス２テスト</p>
    </div><!--conLend-->

<?php get_sidebar(); ?>
  </div>
<?php get_footer();?>

ブラウザで表示すると

このようにファイルの内容が直接参照されます。

オリジナルテンプレートを使用すれば
固定ページのデザインをエディタから直接作成できます。
作りたいサイトの構成によって使い分けをしましょう。

以上でMAMPを使ったローカル環境でのテーマ作成は完了です。
ありがとうございました。