Bootstrap5でWordPressのテーマを作るーテーマ制作編の続き

2022年3月20日

Bootstrap5でWordPressのテーマを作るーテーマ制作編の続き

Bootstrap5

bootstrap5, foudantion6, WordPress

前回は、Webページのひな型から、Bootstrap5のコードでレイアウトをするところまで進みました。今回は、WordPressにアップロードするところまで、進めたいと思います。

WordPressのテンプレートタグ

WordPressのテンプレートタグ「wp_head」、「wp_footer」を入れていきましょう。「wp_head」は</head>タグの直前に入力してます。「wp_footer」は</body>タグの直前に入れます。

<!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" />
    <?php wp_head(); ?>　<== ココ
  </head>
  <body>

（中略）

      </footer>
      <!-- /footer -->
    </div>
    <!-- /conteiner -->
    <?php wp_footer(); ?>　<== ココ
  </body>
</html>

headerとfooterにコード

本来はどの段階でも構いませんが、「header」と「footer」にトップページへリンクするサイトのタイトルを入れてしまいます。さらに「header」にサイトの説明を入れます。これらは、WordPressの設定をそのまま持ってきますので、テーマを設定したら確認しましょう。

【<header>の.col-md-8の中】
<h1 class="header_title">
    <a href="<?php echo esc_url( home_url('/')); ?>" rel="home">
      <?php bloginfo( 'name' ); ?></a>
  </h1>
  <p class="header_description">
    <?php bloginfo( 'description' ); ?>
  </p>

【<footer>の.colの中】
<div class="footer_copyright text-center">
    <small class="fs-6"><a href="<?php echo esc_url( home_url( '/' ) ); ?> rel="home">© 2022
        <?php bloginfo ( 'name' ); ?></a>
    </small>
</div>
<!-- /footer_copyright -->

WordPressのテンプレートタグを入れて、「header」、「footer」の中にコードを入力したものがこちら。

<!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" />
    <?php wp_head(); ?>
  </head>
  <body>
    <!-- container -->
    <div class="container">
      <!-- header -->
      <header class="header">
        <div class="row">
          <div class="col-md-8">
            <h1 class="header_title">
              <a href="<?php echo esc_url( home_url('/')); ?>" rel="home">
              <?php bloginfo( 'name' ); ?></a>
            </h1>
            <p class="header_description">
              <?php bloginfo( 'description' ); ?>
            </p>
          </div>
          <!-- /col-md-8 -->
          <div class="col-md-4">header_right</div>
          <!-- /col-md-4 -->
        </div>
        <!-- /row -->
      </header>
      <!-- /header -->
      <!-- nav -->
      <nav class="nav">navigation</nav>
      <!-- /nav -->
      <!-- content -->
        <div class="content">
          <div class="row">
            <div class="col-md-8">
              <!-- main -->
              <main class="main">main</main>
              <!-- /main -->
            </div>
            <!-- /col-md-8 -->
            <div class="col-md-4">
              <!-- sidebar -->
              <div class="sidebar">sidebar</div>
              <!-- /sidebar -->
            </div>
            <!-- /col-md-4 -->
          </div>
          <!-- /row -->
        </div>
        <!-- /content -->
      <!-- footer -->
      <footer class="footer">
        <div class="row">
          <div class="col">
            <div class="footer_copyright text-center">
              <small class="fs-6">
                <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">© 2022
                  <?php bloginfo ( 'name' ); ?></a>
              </small>
            </div>
            <!-- /footer_copyright -->
          </div>
          <!-- /col -->
        </div>
        <!-- /row -->
      </footer>
      <!-- /footer -->
    </div>
    <!-- /conteiner -->
    <?php wp_footer(); ?>
  </body>
</html>

パーツごとファイルに分ける

メンテナンス性を高める目的で、ヘッダーやフッター、ナビゲーション、メイン、サイドバーなど、各パーツごとにファイルを分けていきます。固定ページのみで、ページ数が多くない場合には、分解せずに使ってもいいかと思います。

単純に、上から順に切り取って、新規ファイルに貼り付けて保存するという作業です。テーマのフォルダ「original_theme」フォルダに保存していきます。

header.php

<!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" />
    <?php wp_head(); ?>
</head>
<body>
    <!-- container -->
    <div class="container">
        <!-- header -->
        <header class="header">
            <div class="row">
                <div class="col-md-8">
                    <h1 class="header_title">
                        <a href="<?php echo esc_url( home_url('/') ); ?>" rel="home">
                            <?php bloginfo( 'name' ); ?></a>
                    </h1>
                    <p class="header_description">
                        <?php bloginfo( 'description' ); ?>
                    </p>
                </div>
                <!-- /col-md-8 -->
                <div class="col-md-4">header_right</div>
                <!-- /col-md-4 -->
            </div>
            <!-- /row -->
        </header>
        <!-- /header -->

nav.php

<!-- nav -->
  <nav class="nav">navigation</nav>
<!-- /nav -->

sidebar.php

<div class="col-md-4">
    <!-- sidebar -->
    <div class="sidebar">sidebar</div>
    <!-- /sidebar -->
    </div>
    <!-- /col-md-4 -->
    </div>
    <!-- /row -->
    </div>
    <!-- /content -->

footer.php

      <!-- footer -->
      <footer class="footer">
        <div class="row">
          <div class="col">
            <div class="footer_copyright text-center">
              <small class="fs-6">
                <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">© 2022
                  <?php bloginfo ( 'name' ); ?></a>
              </small>
            </div>
            <!-- /footer_copyright -->
          </div>
          <!-- /col -->
        </div>
        <!-- /row -->
      </footer>
      <!-- /footer -->
    </div>
    <!-- /conteiner -->
    <?php wp_footer(); ?>
  </body>
</html>

最後にメイン部分の含まれるところを「front-page.php」として保存します。ここに各パーツを読み込むコードを入れておきます。

front-page.php

<?php get_header(); ?>
<?php get_template_part('nav'); ?>

<!-- content -->
<div class="content">
  <div class="row">    
    <div class="col-md-8">
      <!-- main -->
      <main class="main">main</main>
      <!-- /main -->
    </div>
    <!-- /col-md-8 -->

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