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

2022年3月20日

Bootstrap5

bootstrap5, foudantion, WordPress

前回は、Bootstrap5をダウンロードして導入するところまでお届けしました。今回は、テーマの制作に入っていきます。

基本的なテンプレートを作っていきましょう。ファイル名はテンプレート名であれば任意ですが、ここでは「front-page.php」とします。HTMLのひな型を書きましょう。VSCodeのEmmetで作成すると、lang属性が「en」になるので「ja」に直します。「title」タグは自動で出力するので不要です。

<!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">
</head>
<body>
</body>
</html>

続けて、手を加えていきます。パートを分けて行きましょう。以下のような構成で進めます。

ヘッダーは8対4の2カラム　左にタイトルとサイト説明、右に連絡先を想定
ナビゲーションは1カラム　Bootstrapの機能を使用するためWordPressのメニューは不使用
コンテンツは、8対4の2カラム　左にメインコンテンツ、右にサイドバーを想定
フッターは1カラム

「header」、「nav」、「main」、「sidebar」、「footer」をそれぞれ作ります。「main」と「sidebar」を「content」としてまとめています。

<!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>Document</title>
  </head>
  <body>
    <!-- header -->
    <header class="header"></header>
    <!-- /header -->
    <!-- nav -->
    <nav class="nav"></nav>
    <!-- /nav -->
    <!-- content -->
    <div class="content">
      <!-- main -->
      <main class="main"></main>
      <!-- /main -->
      <!-- sidebar -->
      <div class="sidebar"></div>
      <!-- /sidebar -->
    </div>
    <!-- /content -->
    <!-- footer -->
    <footer class="footer"></footer>
    <!-- /footer -->
  </body>
</html>

Bootstrap5のグリッドシステムを使ってレイアウトしていきましょう。「header」から「footer」までを「.container」クラスでラップします。各パートを「.row」、「.col」のクラスでレイアウトします。

<!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" />
  </head>
  <body>
    <!-- container -->
    <div class="container">
      <!-- header -->
      <header class="header">
        <div class="row">
          <div class="col-md-8">header_left</div>
          <!-- /col-md-8 -->
          <div class="col-md-4">header_right</div>
          <!-- /col-md-4 -->
        </div>
        <!-- /row -->
      </header>
      <!-- /header -->
      <!-- nav -->
      <nav class="nav"></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">footer</div>
          <!-- /col -->
        </div>
        <!-- /row -->
      </footer>
      <!-- /footer -->
    </div>
    <!-- /conteiner -->
  </body>
</html>

ここまで、スタイルシートとスクリプトを読み込ませていませんが、一時的に読み込み、色を付けて高さを出すとこんな感じのレイアウトになっています。navは省略しています。

Foundation6との違い_02
レイアウトはコードの違いだけで、方法は同じです。Bootstrapは初めてですが、スムーズに理解できました。例をあげてみます。

> 全体のwrap
・Bootstrap5　
<div class="container"></div>

・foundation6 XY Grid
<div class="grid-container"></div>

> カラムのレイアウト
・Bootstrap5
1カラム
<div class="row">
  <div class="col"></div> 
</div>
2カラム
<div class="row">
  <div class="col-md-8"></div>
  <div class="col-md-4"></div>
</div>

・foundation6 XY Grid
1カラム
<div class="grid-x">
  <div class="cell"></div>
</div>
2カラム
<div class="grid-x">
  <div class="cell medium-8"></div>
  <div class="cell medium-4"></div>
</div>

Foundation6よりBootstrap5のコードのほうが短くシンプルなので、ここはBootstrap5に軍配が上がるのではないでしょうか。