MENU
  1. ホーム
  2. WordPress
  3. 【WordPress】サイドバー付きレイアウトの組み方【header/main/sidebar/footer】

【WordPress】サイドバー付きレイアウトの組み方【header/main/sidebar/footer】

WordPress
WordPressのレイアウトの組み方のサムネイル
SIM

今回は私がWordPressオリジナルテーマを作る時に使っているレイアウトの組み方をサイドバーの有り無しで紹介します。

この記事の内容は自分用の忘備録です。一般の方が読んでも内容を理解できない可能性がありますので、その場合は参考程度に読み飛ばすか、離脱していただければ幸いです。

目次

サイドバーなしレイアウトの組み方｜トップページ

テンプレートファイル｜front-page.php

ここではトップページのテンプレートファイル（front-page.php）全文を載せておきます。

<!DOCTYPE html>
<html <?php language_attributes(); ?>>

<head>
  <?php get_header(); ?>
</head>

<body <?php body_class(); ?>>
  <!-- flexでfooter最下部に配置するタグ -->
  <div class="body-whole_wrapper --front-page">

    <!-- mainとheaderを囲うタグ -->
    <div class="l-main-header_wrapper">

      <!-- ヘッダー -->
      <?php get_template_part('includes/header-parts'); ?>

      <!-- メインエリア -->
      <main class="l-main">

        <!-- メインビジュアル｜セクション｜padding設定タグ -->
        <section class="l-section --main-visual">
          <!-- コンテンツ幅設定タグ -->
          <div class="l-section-content-width">
           <!-- メインビジュアルを書く -->
          </div>

        </section>

        <!-- セクション｜padding設定タグ-->
        <section class="l-section">
          <!-- コンテンツ幅設定タグ -->
          <div class="l-section-content-width">
            <!-- タイトル -->
            <h2 class="c-front-page_h2">サービス</h2>
            <!-- コンテンツを書く -->
          </div>
        </section>

        <!-- CTAセクションを読み込む -->
        <?php get_template_part('includes/cta-parts'); ?>

      </main>

    </div>

    <!-- フッター -->
    <!-- フッターを読み込む -->
    <?php get_template_part('includes/footer-parts'); ?>

  </div>
  <!-- body閉じタグ直前のスクリプト関係をパーツとして読み込む（必要に応じて）、必要ない場合は閉じタグを読み込む -->
  <?php get_footer(); ?>

テンプレートファイルのCSS

FLOCCS用のCSSですのでコピペしても機能しないコードを含みます。関係しそうな箇所のみの抜粋です。

@charset "UTF-8";

@use "../global/forwards" as fw;

html {
  font-size: 62.5%;
}
body {
  font-family: "Noto Sans JP", "メイリオ", "Meiryo", "ＭＳ ゴシック",
    "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", sans-serif;
  font-size: 1.5rem;
  line-height: 1.8;
  color: fw.$text;
  background-color: fw.$bg-white;
  font-weight: 400;
  overscroll-behavior-y: none;
  @include fw.mq("tab") {
    font-size: 1.4rem;
  }
  @include fw.mq("tab") {
    font-size: 1.3rem;
  }
}

// SPハンバーガーメニュー等の背景固定用CSS
body.fixed {
  position: fixed;
  width: 100%;
  height: 100%;
}
.body-whole_wrapper{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;
}
@use "../global/forwards" as fw;

// ===============================================
// mainタグからsectionタグまで
// ===============================================
// ------------------------------------------
// mainタグ
// ------------------------------------------
// mainとfooterをflexで両端揃えするタグ
.l-main-footer_wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;
  height: 100%;
}
// サイドバーがある場合に横並びにするためのタグ
.l-main-wrapper {
  margin: 0 auto;
  width: 100%;
  max-width: 1280px;
  display: grid;
  grid-template-columns: 260px calc(100% - 260px);
  @include fw.mq("tab") {
    grid-template-columns: 100%;
    padding-top: 0px;
  }
  @include fw.mq("sp") {
    grid-template-columns: 100%;
    padding-top: 0px;
  }
}
.l-main {
  width: 100%;
  padding-top: 70px;
}
.l-main.--sidebar {
  padding-top: 0;
}
// ------------------------------------------
// sectionタグ
// ------------------------------------------
.l-section {
  padding: 40px 40px 120px;
  @include fw.mq("tab") {
    padding: 32px 32px 90px;
  }
  @include fw.mq("sp") {
    padding: 20px 20px 75px;
  }
}
// 固定ページのファーストビューセクション
.l-section.--page-fv {
  padding-top: 20px;
}
.l-section.--sidebar {
  padding-top: 0px;
}
// CTAお問い合わせセクションの背景色
.l-section.--cta {
  background-color: fw.$gray;
}

// コンテンツ幅指定とコンテンツブロックの中央寄せ
.l-section-content-width {
  max-width: 1280px;
  margin: 0 auto;
}
// サイドバー付きページ専用のタグ
.l-section-content-width.--sidebar {
  padding-top: 70px;
  @include fw.mq("sp") {
    padding-top: 0px;
  }
}

headタグ読み込みパーツ｜header.php

下記のようにWordPress関数でheadタグ（header.php）を読み込ませます。ここにheaderも含める人も多いが、私はheadタグとheaderはパーツで分けています。

  <?php get_header(); ?>

読み込むファイルの内容は下記のとおりで、必要に応じて内容を変えて下さい。

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="google-site-verification" content="MNnaizlBskLqdrE3S7Lz9lFGxLtfp3UV4j3hwljkfZs" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ここにサイトのタイトルを書く</title>

<?php wp_head(); ?>

header読み込みパーツ｜header-parts.php

私の下記のようにincludesフォルダーに使いまわしできるテンプレートパーツを格納して、テンプレートファイルに読み込むようにしています。header-partsはヘッダーパーツのファイル名（header-parts.php）です。

<?php get_template_part('includes/header-parts'); ?>

読み込む内容ヘッダーパーツの内容は下記のとおりで、必要に応じて変えて下さい。下記は１行の固定ヘッダーです。

<?php wp_body_open(); ?>
<header class="l-header">
  <!-- ヘッダー（全ページ共通） -->
  <!-- PC専用ヘッダー -->
  <div class="l-pc-header">
    <div class="l-pc-header-inner">
      <div class="l-header-left_wrapper">
        <div class="l-header-left-inner_wrapper">
          <a href="<?php echo esc_url(home_url('/')); ?>" class="l-header-left-image_a"><img src="<?php echo get_template_directory_uri(); ?>/image/site-logo.png" alt="サイトのロゴ" class="l-header-right-image"></a>
        </div>
      </div>
      <div class="l-header-mid_wrapper">
        <!-- PC用グローバルナビ -->
        <nav class="p-pc-nav">
          <ul class="p-pc-nav-ul">
            <li class="p-pc-nav-li"><a href="<?php echo esc_url(home_url('/')); ?>" class="p-pc-nav-li-a">ホーム</a></li>
            <li class="p-pc-nav-li"><a href="<?php echo esc_url(home_url('/')); ?>$slug" class="p-pc-nav-li-a <?php if( is_page('$slug') ) echo 'current'; ?>">メニュー１</a></li>
            <li class="p-pc-nav-li"><a href="<?php echo esc_url(home_url('/')); ?>s$slug" class="p-pc-nav-li-a <?php if( is_page('$slug') ) echo 'current'; ?>">メニュー２</a></li>
            <li class="p-pc-nav-li"><a href="<?php echo esc_url(home_url('/')); ?>$slug" class="p-pc-nav-li-a <?php if( is_page('$slug') ) echo 'current'; ?>">メニュー３</a></li>
            <li class="p-pc-nav-li"><a href="<?php echo esc_url(home_url('/')); ?>$slug" class="p-pc-nav-li-a <?php if( is_page('$slug') ) echo 'current'; ?>">メニュー４</a></li>
            <li class="p-pc-nav-li"><a href="<?php echo esc_url(home_url('/')); ?>$slug" class="p-pc-nav-li-a <?php if( is_page('$slug') ) echo 'current'; ?>">メニュー５</a></li>
          </ul>
        </nav>
      </div>
      <!-- PC用お問い合わせボタン -->
      <div class="l-header-light_wrapper">
        <a href="<?php echo esc_url(home_url('/')); ?>$slug" class="c-header-button">お問い合わせ</a>
      </div>
    </div>
  </div>

  <!-- SP専用ヘッダー -->
  <div class="l-sp-header">
    <div class="l-sp-header-img_wrapper">
      <a href="<?php echo esc_url(home_url('/')); ?>" class="l-sp-header-img-a"><img src="<?php echo get_template_directory_uri(); ?>/image/site-logo.png" alt="サイトのロゴ" class="l-sp-header-img"></a>
    </div>

  </div>
  <!-- ハンバーガーメニューボタン（スマホ用） -->
  <div class="p-hum-btn_wrapper">
    <div class="open-btn1"><span></span><span></span><span></span></div>
    <div class="menu-txt">MENU</div>
  </div>
  <!-- ナビの背景 -->
  <div class="p-sp-nav-bg sp-nav-close"></div>
  <!-- スマホ用グローバルナビ -->
  <nav id="sp-g-nav">
    <div id="sp-g-nav-list">
      <div class="p-sp-g-nav-logo_wrapper">
        <a href="<?php echo esc_url(home_url('/')); ?>" class="l-sp-header-img-a"><img src="<?php echo get_template_directory_uri(); ?>/image/site-logo.png" alt="サイトのロゴ" class="l-sp-header-img"></a>
      </div>
      <ul class="p-sp-g-nav_ul">
        <li class="p-sp-g-nav_li"><a href="<?php echo esc_url(home_url('/')); ?>" class="p-sp-g-nav_a">
            <div class="p-sp-g-nav_txt">ホーム</div>
          </a></li>
        <li class="p-sp-g-nav_li"><a href="<?php echo esc_url(home_url('/')); ?>$slug" class="p-sp-g-nav_a ">
            <div class="p-sp-g-nav_txt">メニュー1</div>
          </a></li>
        <li class="p-sp-g-nav_li"><a href="<?php echo esc_url(home_url('/')); ?>$slug" class="p-sp-g-nav_a">
            <div class="p-sp-g-nav_txt">メニュー2</div>
          </a></li>
        <li class="p-sp-g-nav_li"><a href="<?php echo esc_url(home_url('/')); ?>$slug" class="p-sp-g-nav_a">
            <div class="p-sp-g-nav_txt">メニュー3</div>
          </a></li>
        <li class="p-sp-g-nav_li"><a href="<?php echo esc_url(home_url('/')); ?>$slug" class="p-sp-g-nav_a">
            <div class="p-sp-g-nav_txt">メニュー4</div>
          </a></li>
        <li class="p-sp-g-nav_li"><a href="<?php echo esc_url(home_url('/')); ?>$slug" class="p-sp-g-nav_a">
            <div class="p-sp-g-nav_txt">メニュー5</div>
          </a></li>
        <li class="p-sp-g-nav_li"><a href="<?php echo esc_url(home_url('/')); ?>$slug" class="p-sp-g-nav_a">
            <div class="p-sp-g-nav_txt">お問い合わせ</div>
          </a></li>
      </ul>
    </div>
  </nav>

</header>

footer読み込みパーツ｜footer-parts.php

下記WordPress関数でフッターパーツファイル（footer-parts.php）を読み込みます。

<?php get_template_part('includes/footer-parts'); ?>

以下、フッター読み込みファイルの例ですが、必要に応じて変更して下さい。

  <!-- 上に戻るボタン（全ページ共通パーツ） -->
  <div id="page_top"><a class="c-up-to-btn_a" href="#"><img class="c-up-to-btn_img" src="<?php echo get_template_directory_uri(); ?>/image/page-top-btn.png" alt="上に戻るボタン"> </a></div>

  <!-- フッター（全ページ共通パーツ） -->
  <footer class="l-footer">
    <div class="l-footer_container">

   　 <!-- ここに必要に応じてグローバルナビゲーションを書く -->

   　　<!-- ロゴ・社名・連絡先のセクション -->
      <div class="l-footer-logo-area">
   　　　<!-- ロゴ -->
        <div class="footer-logo-wrapper">
          <a href="#" class="footer-logo-a">
            <img src="<?php echo get_template_directory_uri(); ?>/image/site-logo.png" alt="清水WEB制作のロゴ" class="footer-logo">
          </a>
        </div>
　   　　<!-- e-mail -->
        <div class="footer-email">
          <a href="mailto:info@shimizu-web-creation.com" class="footer-email_a">Email：info@shimizu-web-creation.com</a>
        </div>
        <!-- 電話 -->
        <div class="footer-phone-number">TEL：070-4433-5855</div>

      </div>

      <!-- コピーライト -->
      <div class="footer-copyright-area">
        <div class="footer-copyright-area-wrapper">
          <div class="footer-copyright">Copyright - Shimizu WEB Creation, 2023 <br class="sp-br">All Rights Reserved.</div>

          <div class="footer-copyright-area-link-wrapper">
            <!-- サイトマップ -->
            <div class="footer-copyright-area-link">
              <a href="<?php echo esc_url(home_url('/')); ?>$slug" class="footer-copyright-area-link_a">サイトマップ</a>
            </div>
            <!-- プライバシーポリシー -->
            <div class="footer-copyright-area-link">
              <a href="<?php echo esc_url(home_url('/')); ?>$slug" class="footer-copyright-area-link_a">プライバシーポリシー</a>
            </div>
          </div>

        </div>

      </div>


    </div>
  </footer>

読み込みパーツ｜footer.php

下記WordPress関数で、footer.phpを読み込みます。主にスクリプト関係のCDNやスクリプトファイルへのパスを読み込みますが、functions.phpに記述している場合には中身は空になります。

  <?php get_footer(); ?>

下記が読み込むfooter.phpですが、私の場合、スクリプト関係はfunctions.phpで読み込むようにしているため中身は空で閉じタグのみです。

<?php wp_footer(); ?>

  
</body>

</html>

他の共通パーツのよみこみ

ここでは、CTAセクションを多くのページで使い回すためにテンプレートパーツ化して、下記のようにWordPress関数で読み込ませています。

<?php get_template_part('includes/cta-parts'); ?>

サイドバー付きレイアウトの組み方｜投稿ページ

ここでは、投稿ページ（single.php）を例に普段私が使っていレイアウトを紹介します。

テンプレートファイルのPHP

<!DOCTYPE html>
<html <?php language_attributes(); ?>>

<!-- head -->
<head>
  <!-- headタグを読み込む -->
  <?php get_header(); ?>
</head>

<body <?php body_class(); ?>>
  <!-- flexでfooter最下部に配置するタグ -->
  <div class="body-whole_wrapper">

    <!-- mainとheaderを囲うタグ -->
    <div class="l-main-header_wrapper">


      <!-- ヘッダーパーツの読み込み -->
      <?php get_template_part('includes/header-parts'); ?>

      <!-- パンくずリスト -->
      <div class="l-section-content-width --sidebar">
      <!-- ここにパンくずリストを書く、または読み込む -->
      </div>

      <!-- サイドバーがある場合に横並びにするためのタグ -->
      <div class="l-main-wrapper">

        <!-- サイドバー -->
        <!-- ここにサイドバーを読み込む -->
        <?php get_template_part('includes/sidebar-parts_blog'); ?>

        <!-- メインコンテンツ -->
        <main class="l-main --sidebar">

          <section class="l-section --sidebar">
            <?php if (have_posts()) : ?>
              <?php while (have_posts()) : the_post(); ?>
                <!-- h1タグ読み込み -->
                <h1 class="c-single-h1"><?php the_title(); ?></h1>
                <div class="service-thumbnail-wrapper">
                  <!-- サムネイル読み込み -->
                  <?php the_post_thumbnail('large'); ?>
                </div>
                <!-- 投稿ページのコンテンツ読み込み -->
                <?php the_content(); ?>
              <?php endwhile; ?>
            <?php endif; ?>
          </section>
        </main>
      </div>
    </div>

    <!-- ここにCTAセクションを読みむ -->
    <?php get_template_part('includes/cta-parts'); ?>

    <!-- フッター -->
    <!-- ここにfooterを読み込む -->
    <?php get_template_part('includes/footer-parts'); ?>

  </div>

  <!-- ここにbodyタグ直上のスクリプト関係読み込みコードを読み込む、またはfunctions.phpに記述するはbodyとhtmlの閉じタグのみを読み込む -->
  <?php get_footer(); ?>

パーツファイルやCSSはサイドバーなしと共通ですので、上で紹介したコードを参照願います。

WordPress
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

この記事を書いた人

SIMのアバター SIM

■清水WEB制作代表
■コーディング：WordPress（オリジナルテーマ制作等）・HTML・Sass・FLOCSS・JavaScript（jQuery）等
■集客力：YouTube/Instagram/ブログでそれぞれ登録者数16000人/フォロワー13000人/月間最大アクセス50000PVの集客実績があります
■文章作成：博士号所有、会社員時代は科学雑誌に寄稿していたので文章作成も得意です
■写真技術：Amazon Kindle出版で、写真集・撮影編集解説書を５冊好評発売中です

関連記事

目次