PHPの書き方

WordPressはPHPで動作します。

夢中教室のメインサイトでは、PHPを直接記述し、テンプレートを改変することで更新を行うことがあります。

PHPの例

以下はサンプルのコードです。HTMLとの違いを考えながら、真似して練習してみてください。

page-sample.php

<?php
  /*
  Template Name: サンプルページ
  */
  get_header();
?>
<main class="l-main">
  <section class="p-sample-mv">
    <div class="p-sample-mv__inner">
      <div class="p-sample-mv__headding">
        <h1 class="p-sample-mv__title">
          サンプルページ(ページタイトル)
        </h1>
      </div>
      <div class="p-sample-mv__image-wrapper">
        <img src="<?php echo get_template_directory_uri() ?>/assets/img/sample/cow.jpg" alt="" class="p-sample-mv__image">
      </div>
      <div class="p-sample-mv__text-wrapper">
        <p class="p-sample-mv__text">
          ここは<span class="p-sample-mv__text__underline">夢中教室ウェブサイトのサンプルページ</span>です。<br>
          コーディングの書き方を解説していきます。<br>
          役に立てたらうれしいな。
        </p>
      </div>
    </div>
    </div>
  </section>
  <section class="p-sample-about">
    <div class="p-sample-about__inner">
      <div class="p-sample-about__headding">
        <h2 class="p-sample-about__title">
          セクション見出し
        </h2>
      </div>
      <div class="p-sample-about__contents">
        <ul class="p-sample-about__contents__list">
          <li>
            <div class="p-sample-about__contents__eyecatch">
              <?php $eyecatch = get_field('sample-eyecatch01'); ?><!--画像アイキャッチ カスタムフィールド-->
              <img class="p-sample-about__contents__eyecatch__image" src="<?php echo esc_url($eyecatch['url']); ?>" alt="<?php echo esc_attr($eyecatch['alt']); ?>" />
            </div>
            <div class="p-sample-about__contents__text-wrapper">
              <p>
                <?php echo esc_html(get_field('sample-text01')); ?><!--テキスト カスタムフィールド-->
              </p>
            </div>
          </li>
          <li>
            <div class="p-sample-about__contents__eyecatch">
              <?php $eyecatch = get_field('sample-eyecatch02'); ?><!--画像アイキャッチ カスタムフィールド-->
              <img class="p-sample-about__contents__eyecatch__image" src="<?php echo esc_url($eyecatch['url']); ?>" alt="<?php echo esc_attr($eyecatch['alt']); ?>" />
            </div>
            <div class="p-sample-about__contents__text-wrapper">
              <p>
                <?php echo esc_html(get_field('sample-text02')); ?><!--テキスト カスタムフィールド-->
              </p>
            </div>
          </li>
          <li>
            <div class="p-sample-about__contents__eyecatch">
              <?php $eyecatch = get_field('sample-eyecatch03'); ?><!--画像アイキャッチ カスタムフィールド-->
              <img class="p-sample-about__contents__eyecatch__image" src="<?php echo esc_url($eyecatch['url']); ?>" alt="<?php echo esc_attr($eyecatch['alt']); ?>" />
            </div>
            <div class="p-sample-about__contents__text-wrapper">
              <p>
                <?php echo esc_html(get_field('sample-text03')); ?><!--テキスト カスタムフィールド-->
              </p>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </section>
  <section class="p-pagename-section">
    <div class="p-pagename-section__inner">
      <div class="p-pagename-section__headding">
        <h2 class="p-pagename-section__headding__title">
          見出し
        </h2>
      </div>
      <div class="p-pagename-section__container">
        コンテンツ
      </div>
    </div>
  </section>
  <section class="p-sample-hoge">
    <div class="p-sample-hoge__inner">
      <div class="p-sample-hoge__headding">
        <h2 class="p-sample-hoge__title">
          セクション見出し
        </h2>
        <h3 class="p-sample-hoge__subtitle">
          小見出し
        </h3>
      </div>
      <div class="p-sample-hoge__contents">
        <ul class="p-sample-hoge__contents__list">
          <li>
            <!--トップへのリンク-->
            <a href="<?php echo esc_url(home_url('/')); ?>" class="p-sample-hoge__contents__link">
              フロントページ
            </a>
          </li>
          <li>
            <!--固定ページへのリンク-->
            <a href="<?php echo esc_url(home_url('/about/')); ?>" class="p-sample-hoge__contents__link">
              夢中教室について
            </a>
          </li>
          <li>
            <!--外部サイトへのリンク-->
            <a href="<?php echo esc_url('https://www.borderless-japan.com/'); ?>" class="p-sample-hoge__contents__link" target="blank">
              外部サイト
            </a>
          </li>
        </ul>
      </div>
    </div>
  </section>
</main>
<?php
  get_footer();
?>

解説

Template Name：

WordPressの固定ページ設定上のテンプレート名になります。 テンプレートを選択する際、ここに書いた名前が出てきます。

get_header();

header.phpを取得する処理をしています。

<main>

基本的にmainタグで囲ってコーディングを進めていきます。

<h1>

→SEOの観点からh1タグは１回しか使いません （LPのタイトルをいれましょう）

<img>（ディレクトリ内の画像）

ディレクトリ内の画像を取得する際は

src=""<?php echo get_template_directory_uri() ?>/asset/~/画像ファイル名""

と記述します。

<img>（WordPress上から挿入）

カスタムフィールドを設定し、 WordPress上から画像を差し替えたい場合

<?php $eyecatch = get_field('フィールド名'); ?>
<img class="p-sample-about__contents__eyecatch__image" src="<?php echo esc_url($eyecatch['url']); ?>" alt="<?php echo esc_attr($eyecatch['alt']); ?>" />

と記述します。 連動してWordPress上でカスタムフィールドの設定を行ってください。

カスタムフィールド

<?php echo esc_html(get_field('フィールド名')); ?>

サイト内の文字列をWordPress上から自由に書き換えることができます。 イベントの日程や価格表示など、変更する可能性のある文字列に使用します。

<a>

aタグのhref属性は

href="<?php echo esc_url( '遷移先URL' ); ?>"

と記述します。これは「エスケープ処理」という処理を入れています。 普通にURLを入れるだけでも動くのですが、エスケープ処理を入れることによってセキュリティ対策が行えます。基本的には入れるようにしましょう。 あと、外部サイトへ飛ばす際は別タブで開くようにしましょう。 外部へ飛ぶaタグには target="blank"を属性に加えましょう。

<?php get_footer();

ヘッダーと同様に、フッター(footer.php)を取得します。 こっちはタグを閉じません。