WordPress－構築編－２日目

<?php
/*********************************
メニュー機能追加
 **********************************/
// メニュー機能を使えるようにする
add_action('init', function () {
  // メニューに位置指定チェックボックス作成
  register_nav_menus([
    'globalMenu-pc' => ' グローバルメニューPC 用',
  ]);
});
?>

  // 【add_action関数】
  // 機能を追加・カスタマイズする際に呼び出す関数
  // 第1引数：追加・カスタマイズするタイミング
  //          決められたキーワードで指定
  //          「init」はテーマファイル初期化時
  // 第2引数：追加・カスタマイズする内容を
  //          関数で定義する

  //【register_nav_menus関数】
  // メニュー機能を有効にする
  // 第1引数：連想配列でメニュー内容を設定
  //          キー（部屋の名前）：識別用ID
  //          バリュー（値）：管理画面表示文字列

      <nav class="Header_nav">
        <div class="Header_inner inner">
          <?php
          wp_nav_menu([
            'theme_location' => 'globalMenu-pc',
            'container_class' => 'Header_container',
            'menu_class' => 'Header_menu',
          ]);
          ?>
        </div>
      </nav>

      // 【wp_nav_menu関数】
      // 管理画面メニュー機能の内容を出力する
      // 第1引数：連想配列で各種設定
      // 'theme_location'：メニューの識別ID
      // 'container_class'：メニューを囲むdiv要素のclass名を指定
      //                  未指定：menu-global-container
      // 'menu_class'：メニューul要素のclass名を指定
      //                  未指定：menu

<?php
/*********************************
メニュー機能追加
 **********************************/
// メニュー機能を使えるようにする
add_action('init', function () {
  // メニューに位置指定チェックボックス作成
  register_nav_menus([
    'globalMenu-pc' => ' グローバルメニューPC 用',
    'footerMenu' => ' フッターメニュー',
  ]);
});

  <div class="FooterNav">
    <nav class="FooterNav_nav">
      <div class="FooterNav_inner inner">
        <?php
        wp_nav_menu([
          'theme_location' => 'footerMenu',
          'container_class' => 'FooterNav_container',
          'menu_class' => 'FooterNav_menu',
          'depth' => 1,
        ]);
        ?>
      </div>
    </nav>
  </div>
  <footer class="Footer">
    <div class="Footer_inner">
      <div class="Footer_copy">
        © <?php echo esc_html(date('Y')); ?> <?php bloginfo('name'); ?>.
      </div>
    </div>
  </footer>
  </div> <!-- .wrapper -->
  <?php wp_footer(); ?>
</body>
</html>

          // 【wp_nav_menu関数】
          // 管理画面メニュー機能の内容を出力する
          // 第1引数：連想配列で各種設定
          // 'theme_location'：メニューの識別ID
          // 'container_class'：メニューを囲むdiv要素のclass名を指定
          //                  未指定：menu-global-container
          // 'menu_class'：メニューul要素のclass名を指定
          //                  未指定：menu
          // 'depth'：階層の指定
          //      「0」や「未設定」すべての階層を表示
          //      「1」第1階層のみ表示 等

    <footer class="Footer">
      <div class="Footer_inner">
        <div class="Footer_search">
          <?php get_search_form(); ?>
        </div>
        <div class="Footer_copy">
          © <?php echo esc_html(date('Y')); ?> <?php bloginfo('name'); ?>.
        </div>
      </div>
    </footer>

<form class="クラス名" method="get"
 action="<?php echo esc_url(home_url()); ?>">
  <div class="クラス名">
    <label class="クラス名" for="s"> 検索：</label>
    <input class="クラス名" type="text"
     value="<?php echo get_search_query(); ?>" name="s" id="s">
    <input class="クラス名" type="submit" value="検索">
  </div>
</form>

add_action('wp_enqueue_scripts', function () {
  wp_enqueue_style(
    'ハンドル名',
    'スタイルシートのパス名',
    '先に読み込むスタイルシートのハンドル名',
    'スタイルシートのバージョンを指定',
    'スタイルシートの対応メディアを指定',
  );
});

  // 共通CSS
  wp_enqueue_style(
    // 第1引数
    // ハンドル名（識別用の名前を自由に決める）
    // ※予約語があるので注意
    'common_css',
    // 第2引数
    // CSSの場所を指定
    // 外部ファイルのみなので絶対パスで指定
    get_theme_file_uri('/css/common.css'),
    // 第3引数
    // 先に読み込むCSSをハンドル名で指定
    //  ※読み込み順の指定は不可
    ['slick_css', 'slick_theme_css', 'aos'],
    // 第4引数
    // バージョン番号をクエリ文字列で付与する
    // 省略時はテーマバージョン番号を付与する
    filemtime(get_theme_file_path('/css/common.css'))
    // 【filemtime関数（PHP）】
    // ファイルの更新時刻を取得する
    // 第1引数：調査するファイルのパス
    // 戻り値：更新時刻をタイムスタンプで返す
    //    ファイルパスが間違っている時はfalseを返す
  );

add_action('wp_enqueue_scripts', function () {
  wp_enqueue_style(
    'ハンドル名',
    'JavaScriptのパス名',
    '先に読み込むJavaScriptのハンドル名',
    'JavaScriptのバージョンを指定',
    '読み込み位置の指定',
  );
});

jQuery(function () {
  jQuery('body').css('color', '#6e3a3a');
});
// 「$」だとエラーになる
// 「jQuery」だとＯＫ

// Windowsロード完了後に無名関数を呼び出す
window.addEventListener('load', function () {
  // jQueryの名前で関数を呼び出し
  // 無名関数内では「$」が使えるようにしている
  jQuery(function ($) {
    // ココから「$」が利用可能
      $('.Footer').css('background-color', '#009688');
    // ココまで「$」が利用可能
  });
  });

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>オリジナルテーマ</title>
  <?php wp_head(); ?>
</head>
<body>
  <?php wp_body_open(); ?>
  <div class="wrapper">
    <header class="Header">
    </header>
    <!-- ▲▲ ココまでheaderパーツ ▲▲ -->

    <div class="content">
    </div> <!-- .content -->
    <div class="lesson">
    </div>

    <!-- ▼▼ ココからfooterパーツ ▼▼ -->
    <div class="FooterNav">
    </div>
    <footer class="Footer">
    </footer>
  </div> <!-- .wrapper -->
  <?php wp_footer(); ?>
</body>
</html>

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>オリジナルテーマ</title>
  <?php wp_head(); ?>
</head>
<body>
  <?php wp_body_open(); ?>
  <div class="wrapper">
    <header class="Header">
    </header>

<?php get_header(); ?>

    <div class="content">
    </div> <!-- .content -->
    <div class="lesson">
    </div>

<?php get_footer();
// PHPの最後は閉じない

    <div class="FooterNav">
    </div>
    <footer class="Footer">
    </footer>
  </div> <!-- .wrapper -->
  <?php wp_footer(); ?>
</body>
</html>

<?php
// メインループデータがページ情報をもっているか確認
if (have_posts()) {
  // メインループデータがページ情報をもっている分だけ繰返し処理
  while (have_posts()) {
    // メインループデータから1 件分のページ情報を$post 変数にセット
    the_post();
    // WordPress 関数でページ内容を表示
  }
  // ページ情報なしの時の表示（else：省略）
}
?>

<?php /***** メインループ開始 *****/ ?>
<?php if (have_posts()) : ?>
  <?php while (have_posts()) : the_post(); ?>
    <?php // WordPress 関数でページ内容を表示 ?>
  <?php endwhile; ?>
<?php endif; ?>
<?php /***** メインループ終了 *****/ ?>

<?php get_header(); ?>
<div class="content">
  <h1>オリジナルテーマ</h1>
  <p>この表示テンプレートは「index.php」です。</p>

  <?php /***** メインループ開始 *****/ ?>
  <?php if (have_posts()) : ?>
    <!-- 【have_posts】関数
          DBからページ情報を取得出来ているか確認
          取得できている：true、取得できてない：false -->

    <p>▼▼▼ ここからメインループ ▼▼▼</p>
    <?php while (have_posts()) : the_post(); ?>
      <!--【have_posts】ポインタ位置にページ情報があるか確認
          【the_post】ポインタ位置のページ情報を暗黙変数「$post」に代入して
                      ポインタ位置を次のレコードに移動する  -->

      <?php // WordPress 関数でページ内容を表示
      ?>
    <?php endwhile; ?>
  <?php endif; ?>
  <?php /***** メインループ終了 *****/ ?>

</div> <!-- .content -->
    <div class="lesson">
    </div>
<?php get_footer();

  <?php /***** メインループ開始 *****/ ?>
  <?php if (have_posts()) : ?>
    <p>▼▼▼ ここからメインループ ▼▼▼</p>
    <?php while (have_posts()) : the_post(); ?>

      <?php // WordPress 関数でページ内容を表示
      ?>
      <h2><?php the_title(); ?></h2>
      <div class="text">
        <?php the_content(); ?>
      </div>
      <div class="date">
        投稿日：<?php the_date(); ?> <br>
        <!--【the_date関数】
              同じ日に複数の記事がある時、最初の記事のみ一度だけ出力
            【the_time関数】
              同じ日に複数の投稿があっても毎回出力される
              ただし引数に日付用の書式指定が必要
                ※引数なしでは時間が出力される -->
        更新日：<?php the_modified_date(); ?>
      </div>
      <div class="text">
        URL：<?php the_permalink(); ?>
      </div>
    <?php endwhile; ?>
    <p>▲▲▲ ここまでメインループ ▲▲▲</p>
  <?php endif; ?>
  <?php /***** メインループ終了 *****/ ?>

      <div class="text">
        <?php the_content(); ?>
        <!-- 【the_content】本文表示用関数
              投稿画面や固定ページ詳細で利用
              本文をHTMLタグ込みで全文表示 -->
        <hr>
        <?php the_excerpt(); ?>
        <!-- 【the_excerpt】抜粋文表示用関数
              一覧で利用
              本文をHTMLタグを除いて規定の文字数(110文字)のみ表示 -->
      </div>