この章では、これまで学んだ内容を使って、小さなWordPressサイトをクラシックテーマで制作する流れを確認します。
実際の案件ではサイトごとに構成が違いますが、基本の流れを知っておくと応用しやすくなります。
作るサイト
演習では、小規模なコーポレートサイトを想定します。
構成は次の通りです。
- トップページ
- 会社概要
- サービス
- お知らせ一覧
- お知らせ詳細
- 制作実績一覧
- 制作実績詳細
- お問い合わせ
お知らせは投稿で管理します。
制作実績はカスタム投稿タイプで管理します。
テーマフォルダを作る
まず、テーマフォルダを作ります。
my-corporate-theme/
style.css
functions.php
index.php
header.php
footer.php
front-page.php
page.php
single.php
archive.php
archive-works.php
single-works.php
assets/
css/
style.css
js/
main.js最初から完璧に分ける必要はありません。
まずは最小構成でテーマを認識させ、少しずつテンプレートを増やします。
style.css
テーマ情報を書きます。
/*
Theme Name: My Corporate Theme
Author: Your Name
Version: 1.0.0
Description: 小規模コーポレートサイト用テーマ
*/管理画面でテーマが表示されるか確認します。
functions.php
テーマサポート、メニュー、CSS/JS読み込み、カスタム投稿タイプを設定します。
<?php
function my_theme_setup() {
add_theme_support( 'title-tag' );
add_theme_support( 'post-thumbnails' );
register_nav_menus( array(
'global' => 'グローバルナビゲーション',
) );
}
add_action( 'after_setup_theme', 'my_theme_setup' );
function my_theme_enqueue_assets() {
wp_enqueue_style(
'my-theme-style',
get_template_directory_uri() . '/assets/css/style.css',
array(),
'1.0.0'
);
wp_enqueue_script(
'my-theme-script',
get_template_directory_uri() . '/assets/js/main.js',
array(),
'1.0.0',
true
);
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_assets' );機能を追加するたびに、表示と管理画面の両方を確認します。
共通パーツを作る
静的HTMLのヘッダーとフッターを、header.phpとfooter.phpに分けます。
各テンプレートでは、get_header()とget_footer()で読み込みます。
<?php get_header(); ?>
<main>
<section class="hero">
<h1>会社の強みを伝えるWebサイト</h1>
</section>
</main>
<?php get_footer(); ?>共通パーツを先に整えると、各ページの制作が進めやすくなります。
固定ページを作る
会社概要、サービス、お問い合わせなどは固定ページで作ります。
固定ページの基本テンプレートはpage.phpです。
本文を管理画面で更新できるようにする場合は、the_content()を使います。
<?php get_header(); ?>
<main class="page">
<?php while ( have_posts() ) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<div class="entry-content">
<?php the_content(); ?>
</div>
<?php endwhile; ?>
</main>
<?php get_footer(); ?>トップページのようにデザインを固定したいページは、front-page.phpで作ります。
お知らせを作る
お知らせは標準投稿で管理します。
投稿一覧にはhome.phpやarchive.phpを使います。
投稿詳細にはsingle.phpを使います。
投稿カードをtemplate-parts/post-card.phpに分けると、一覧系ページで使い回せます。
制作実績を作る
制作実績はカスタム投稿タイプworksで管理します。
一覧はarchive-works.php、詳細はsingle-works.phpで表示します。
archive-works.php
single-works.php業種や制作種別で分類したい場合は、カスタムタクソノミーを追加します。
ブロックパターンプラグインを作る
CTAや2カラム紹介など、固定ページ内で何度も使うレイアウトはブロックパターンにします。
この講座の方針では、パターンは小さなプラグインとして分けます。
wp-content/
plugins/
my-patterns/
my-patterns.php
assets/
patterns.cssクライアントが固定ページを更新する時に、用意されたパターンを選んで使えるようにします。
公開前チェック
制作が終わったら、公開前に確認します。
表示:
- トップページ
- 固定ページ
- 投稿一覧
- 投稿詳細
- 制作実績一覧
- 制作実績詳細
- 404ページ
管理画面:
- 投稿を追加できる
- 固定ページを編集できる
- メニューを変更できる
- ブロックパターンを挿入できる
公開:
- CSSとJavaScriptが読み込まれている
- フォームが送信できる
- noindexが解除されている
- バックアップを取っている公開後も、本番URLで表示とフォームを確認します。
納品時に伝えること
WordPressサイトを納品する時は、更新方法と保守範囲を伝えます。
- 管理画面URL
- ログイン情報の扱い
- 投稿の追加方法
- 固定ページの編集方法
- 画像の差し替え方法
- ブロックパターンの使い方
- 更新してよい範囲
- 保守契約の有無
- バックアップと更新の方針
クライアントが安心して更新できるように、操作説明や簡単なマニュアルを用意します。
この章のまとめ
- 小規模サイト制作では、固定ページ、投稿、カスタム投稿タイプを使い分ける
- テーマは、共通パーツ、トップページ、固定ページ、投稿一覧、投稿詳細に分けて作る
- 制作実績などはカスタム投稿タイプで管理すると整理しやすい
- よく使う本文レイアウトは、ブロックパターンプラグインとして用意できる
- 納品時には、更新方法、保守範囲、バックアップ方針を伝える