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はサイドバーなしと共通ですので、上で紹介したコードを参照願います。
