本章で作成するテーマは、以下の通りです。
業務サイト作成の基本知識を習得するためのサンプルテーマである「業務サイト基本オリジナルテーマ」の作成手順例を示します。 業務サイトのオリジナルテーマを作成する時に有用なカスタム投稿タイプやカスタムフィールドの使用方法を理解するためのサンプルになっています。
業務サイトの基本オリジナルテーマ作成の練習を行う場合は、下記のリンク先からオリジナルテーマ作成用のサンプルファイルをダウンロードしてください。
ダウンロードしたファイルは、zip 圧縮をされていますので解凍して使用してください。解凍した状態でのフォルダ／ファイル内容は、以下の通りです。
テーマ作成で使用するのは、html フォルダと screenshot.png ファイルです。
custom-sample フォルダと custom-sample.zip ファイルは、下記の手順で作成した時に出来るファイル（完成版）なので、作成がうまくいかない場合に参照してください。
📁 wp-custom-sample // ダウンロードファイルの解凍フォルダ
├─📁 custom-sample // テーマの完成版
│ ├─📁 css // スタイルシートフォルダ
│ │ └─ style.css // スタイルシートファイル
│ ├─ footer.php // ページ共通フッターテンプレートファイル
│ ├─ front-page.php // トップページテンプレートファイル
│ ├─ functions.php // テーマ機能ファイル
│ ├─ header.php // ページ共通ヘッダーテンプレートファイル
│ ├─ index.php // 汎用ページテンプレート
│ ├─ page.php // 固定ページテンプレート
│ ├─ screenshot.png // サムネイル画像ファイル
│ ├─ single.php // 投稿テンプレート
│ ├─ single-custom_type.php // カスタム投稿テンプレート
│ └─ style.css // テーマ情報ファイル
├─📁 html // 作成するページの HTML フォルダ
│ ├─📁 css // スタイルシートフォルダ
│ │ └─ style.css // スタイルシートファイル
│ ├─ index.html // トップページ HTML ファイル
│ ├─ single-1.html // 投稿 HTML ファイル（汎用）
│ └─ single-2.html // 投稿 HTML ファイル（カスタム投稿タイプ）
├─ custom-sample.zip // テーマファイル
└─ screenshot.png // サムネイル画像ファイル
業務サイト基本オリジナルテーマで作成するテーマの機能は、以下の通りです。
上記の機能を実装するためにダッシュボードには、以下の項目を追加します。
カスタム投稿編集画面には、定型コンテンツの入力フィールドを追加します。
オリジナルテーマ作成の手順は、次の通りです。
テーマ作成の原型となる HTML / CSS と関連画像ファイルを作成します。今回の作成例では、html フォルダに格納されている内容になります。
📁 html // 作成するページの HTML フォルダ
├─📁 css // スタイルシートフォルダ
│ └─ style.css // スタイルシートファイル
├─ index.html // トップページ HTML ファイル
├─ single-1.html // 投稿 HTML ファイル（汎用）
└─ single-2.html // 投稿 HTML ファイル（カスタム投稿タイプ）
HTML（index.html）
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<link href="css/style.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Sample</title>
</head>
<body>
<div class="header">
<header class="container">
<h1><a href="./index.html">Custom Sample</a></h1>
<nav>
<ul>
<li><a href="./index.html">ホーム</a></li>
<li><a href="./single-1.html">通常投稿</a></li>
<li><a href="./single-2.html">カスタム投稿</a></li>
</ul>
</nav>
</header>
</div>
<div class="main">
<main class="container">
<h2>投稿一覧</h2>
<ul>
<li><a href="./single-1.html">2026-01-29：投稿 投稿テスト-２件目</a></li>
<li><a href="./single-1.html">2026-01-29：投稿 投稿テスト-１件目</a></li>
</ul>
<h2>カスタム投稿一覧</h2>
<ul>
<li><a href="./single-2.html">2026-01-29：カスタム投稿 投稿テスト-２件目</a></li>
<li><a href="./single-2.html">2026-01-29：カスタム投稿 投稿テスト-１件目</a></li>
</ul>
</main>
</div>
<div class="footer">
<footer class="container">
<p><small>© 2026 Custom Sample.</small><br>Powered by WordPress. Theme by <a href="https://www.hamaya2020.com/" target="_blank">情報デザイン工房 濱屋</a>.</p>
</footer>
</div>
</body>
</html>
HTML（single-1.html）
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<link href="css/style.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Sample</title>
</head>
<body>
<div class="header">
<header class="container">
<h1><a href="./index.html">Custom Sample</a></h1>
<nav>
<ul>
<li><a href="./index.html">ホーム</a></li>
<li><a href="./single-1.html">通常投稿</a></li>
<li><a href="./single-2.html">カスタム投稿</a></li>
</ul>
</nav>
</header>
</div>
<div class="main">
<main class="container">
<h1>投稿 投稿テスト-１件目</h1>
<h2 class="wp-block-heading">投稿テスト</h2>
<p>投稿テストの１件目です。</p>
</main>
</div>
<div class="footer">
<footer class="container">
<p><small>© 2026 Custom Sample.</small><br>Powered by WordPress. Theme by <a href="https://www.hamaya2020.com/" target="_blank">情報デザイン工房 濱屋</a>.</p>
</footer>
</div>
</body>
</html>
HTML（single-2.html）
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<link href="css/style.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Sample</title>
</head>
<body>
<div class="header">
<header class="container">
<h1><a href="./index.html">Custom Sample</a></h1>
<nav>
<ul>
<li><a href="./index.html">ホーム</a></li>
<li><a href="./single-1.html">通常投稿</a></li>
<li><a href="./single-2.html">カスタム投稿</a></li>
</ul>
</nav>
</header>
</div>
<div class="main">
<main class="container">
<h1>カスタム投稿 投稿テスト-２件目</h1>
<h2 class="wp-block-heading">投稿テスト</h2>
<p>カスタム投稿テストの２件目です。</p>
<h2>カスタムフィールド設定内容</h2>
<dl>
<dt>単一行入力</dt><dd>投稿テスト-２ カスタムフィールド-単一行</dd>
<dt>複数行入力</dt><dd>投稿テスト-２ カスタムフィールド-複数行-１行目<br>投稿テスト-２ カスタムフィールド-複数行-２行目<br>投稿テスト-２ カスタムフィールド-複数行-３行目</dd>
<dt>チェックボックス</dt><dd>1</dd>
<dt>ラジオボタン</dt><dd>value-2</dd>
<dt>セレクトボックス</dt><dd>value-2</dd>
<dt>画像選択</dt><dd><img src="images/toy-02.jpg"></dd>
</dl>
</main>
</div>
<div class="footer">
<footer class="container">
<p><small>© 2026 Custom Sample.</small><br>Powered by WordPress. Theme by <a href="https://www.hamaya2020.com/" target="_blank">情報デザイン工房 濱屋</a>.</p>
</footer>
</div>
</body>
</html>
テーマ用のサムネール画像を作成します。 今回の作成例では、ダウンロードフォルダ内の screenshot.png ファイルになります。
テーマ用のフォルダ（custom-sample）を作成し必要ファイルを元フォルダ（html）などからコピーします。
📁 custom-sample // テーマフォルダ
├─📁 css // スタイルシートフォルダ
│ └─ style.css // スタイルシートファイル
└─ screenshot.png // サムネイル画像ファイル
テーマ情報ファイル（style.css）を作成します。
CSS（style.css）
/*
Theme Name: custom-sample
Description: WordPressのテーマにカスタム投稿タイプとカスタムフィールドを追加するサンプルです。
Author: 情報デザイン工房 濱屋
Version: 1.1.0
*/
テーマ機能ファイル（functions.php）を作成します。 本テーマ機能ファイルの例では、テーマ機能に加えてカスタム投稿タイプやカスタムフィールドの定義も行っています。カスタム投稿タイプやカスタムフィールドの定義は、Advanced Custom Field（ACF）などのプラグインを使用することでコードを書かなくても定義することができますのでコード記載が得意ではない方は、これらのプラグインを使用することも検討してください。 但し、プラグインで定義する場合は、プラグインで定義した内容とテンプレートファイルの記述内容と合致している必要があると同時にサイト作成のたびにプラグインでの定義操作が必要になります。誤り防止という意味でも本例のようにコードで定義する方をお勧めまします。
PHP（functions.php）
<?php
/* ★ テーマ機能設定 */
function theme_setup() {
add_theme_support('title-tag');
add_theme_support('post-formats',
array(
'link',
'aside',
'gallery',
'image',
'quote',
'status',
)
);
add_theme_support('post-thumbnails');
register_nav_menus(
array(
'primary' => __( 'Primary menu' ),
)
);
}
add_action('after_setup_theme', 'theme_setup');
function sample_enqueue_scripts() {
wp_enqueue_style('sample-style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'sample_enqueue_scripts');
// ★ カスタム投稿タイプ
function sample_custom_type_register() {
register_post_type('custom_type', array( // カスタム投稿タイプ名（英字）
'label' => 'カスタム投稿', // カスタム投稿タイプ表示名
'labels' => array( // カスタム投稿タイプ表示名（詳細設定）
'name' => 'カスタム投稿',
'singular_name' => 'カスタム投稿',
),
'public' => true, // 公開
'hierarchical' => false, // 親記事指定
'menu_icon' => 'dashicons-megaphone', // メニューアイコン
'has_archive' => true, // アーカイブページ表示（リライトルール更新要）
'show_in_rest' => true, // REST APIに公開、ブロックエディタ有効化
'show_in_menu' => true, // 管理画面のメニューに表示
'menu_position' => 6, // 管理画面のメニュー位置
'supports' => array( // 編集画面表示項目設定
'title', // タイトル入力可
'editor', // 本文エディタ有効
),
));
}
add_action('init', 'sample_custom_type_register');
// ★ カスタムフィールド（メタボックス）追加
function sample_add_custom_fields() {
add_meta_box( // カスタムフィールド（メタボックス）を追加
'sample_fields', // 識別子
'カスタム投稿情報', // 見出し
'sample_custom_fields_html', // 画面定義関数
'custom_type', // 投稿タイプ（複数の場合は array を使用）
'normal', // 表示位置
'default', // 優先度
);
}
add_action('add_meta_boxes', 'sample_add_custom_fields');
// ★ カスタムフィールド：画面定義
function sample_custom_fields_html($post) {
?>
<?php
// ★ 単一行入力（v_text）
$value = get_post_meta($post->ID, 'v_text', true);
?>
<p>単一行入力：<br>
<input type="text" name="v_text" value="<?php echo esc_attr($value); ?>" style="width: 100%;">
</p>
<?php
// ★ 複数行入力（v_textarea）
$value = get_post_meta($post->ID, 'v_textarea', true);
?>
<p>複数行入力：<br>
<textarea name="v_textarea" style="width:100%; height:120px;"><?php echo esc_textarea($value); ?></textarea>
</p>
<?php
// ★ チェックボックス（v_checkbox）
$value = get_post_meta($post->ID, 'v_checkbox', true);
?>
<p>
<label>
チェックボックス：<input type="checkbox" name="v_checkbox" value="1" <?php checked($value, '1'); ?>>
</label>
</p>
<?php
// ★ ラジオボタン（v_radio）
$value = get_post_meta($post->ID, 'v_radio', true);
$options = [
'value-1' => '選択肢-1',
'value-2' => '選択肢-2',
'value-3' => '選択肢-3'
];
?>
<p>ラジオボタン：<br>
<?php foreach ($options as $key => $label): ?>
<label style="display:block; margin-bottom:4px;">
<input type="radio" name="v_radio" value="<?php echo esc_attr($key); ?>" <?php checked($value, $key); ?>>
<?php echo esc_html($label); ?>
</label>
<?php endforeach; ?>
</p>
<?php
// ★ セレクトボックス（v_select）
$value = get_post_meta($post->ID, 'v_select', true);
$options = [
'' => '選択してください',
'value-1' => '選択肢-1',
'value-2' => '選択肢-2',
'value-3' => '選択肢-3'
];
?>
<p>セレクトボックス：<br>
<select name="v_select" style="width: 200px;">
<?php foreach ($options as $key => $label): ?>
<option value="<?php echo esc_attr($key); ?>" <?php selected($value, $key); ?>>
<?php echo esc_html($label); ?>
</option>
<?php endforeach; ?>
</select>
</p>
<?php
// ★ 画像選択（v_image_id）
$value_image_id = get_post_meta($post->ID, 'v_image_id', true);
$value_image_url = $value_image_id ? wp_get_attachment_image_url($value_image_id, 'medium') : '';
?>
<div>
<p>画像選択：<br>
<img id="my-media-preview" src="<?php echo esc_url($value_image_url); ?>" style="max-width:200px; display:block; margin-bottom:10px;">
<input type="hidden" id="my-media-id" name="v_image_id" value="<?php echo esc_attr($value_image_id); ?>">
<button type="button" class="button" id="my-media-select">画像を選択</button>
<button type="button" class="button" id="my-media-clear">クリア</button>
</div>
<script>
jQuery(function($) {
let frame;
$('#my-media-select').on('click', function(e){
e.preventDefault();
if (frame) {
frame.open();
return;
}
frame = wp.media({ title: '画像を選択', button: { text: 'この画像を使う' }, multiple: false });
frame.on('select', function(){
const attachment = frame.state().get('selection').first().toJSON();
$('#my-media-id').val(attachment.id);
$('#my-media-preview').attr('src', attachment.sizes.medium.url);
});
frame.open(); });
$('#my-media-clear').on('click', function(){ $('#my-media-id').val('');
$('#my-media-preview').attr('src', '');
});
});
</script>
<?php
}
// ★ カスタムフィールド：データ保存
function save_sample_custom_fields($post_id) {
// ★ 単一行入力（v_text）
if (array_key_exists('v_text', $_POST)) {
update_post_meta($post_id, 'v_text', sanitize_textarea_field($_POST['v_text']));
}
// ★ 複数行入力（v_textarea）
if (array_key_exists('v_textarea', $_POST)) {
update_post_meta($post_id, 'v_textarea', sanitize_textarea_field($_POST['v_textarea']));
}
// ★ チェックボックス（v_checkbox）
$v_checkbox = isset($_POST['v_checkbox']) ? '1' : '0';
update_post_meta($post_id, 'v_checkbox', $v_checkbox);
// ★ ラジオボタン（v_radio）
if (isset($_POST['v_radio'])) {
$v_radio = sanitize_text_field($_POST['v_radio']);
update_post_meta($post_id, 'v_radio', $v_radio);
}
// ★ セレクトボックス（v_select）
if (isset($_POST['v_select'])) {
$v_select = sanitize_text_field($_POST['v_select']);
update_post_meta($post_id, 'v_select', $v_select);
}
// ★ 画像選択（v_image_id）
if (isset($_POST['v_image_id'])) {
$v_image_id = intval($_POST['v_image_id']);
update_post_meta($post_id, 'v_image_id', $v_image_id);
}
}
add_action('save_post', 'save_sample_custom_fields');
元となる HTML ファイルから各ページで共通に使用するヘッダー部を切り出して header.php を作成します。
PHP（header.php）
<!doctype html>
<?php // ★ 言語属性を設定 ?>
<html <?php language_attributes(); ?>>
<head>
<?php // ★ 文字コードを設定 ?>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<?php // ★ 相対パスのファイル指定は絶対パスに変更 ?>
<link href="<?php echo get_template_directory_uri(); ?>/css/style.css" rel="stylesheet" type="text/css">
<?php // ★ サイトアイコンを設定 ?>
<link href="<?php site_icon_url(); ?>" rel="icon">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<?php // ★ /head タグの直前に挿入（WordPress の追加情報の展開場所を指定） ?>
<?php wp_head(); ?>
</head>
<?php // ★ テンプレート種類を設定 ?>
<body <?php body_class(); ?>>
<div class="header">
<header class="container">
<?php // ★ ホーム URL ＆ サイトタイトルを設定 ?>
<?php $h1 = '<a href="' . esc_url( home_url( '/' ) ) . '">' . esc_html( get_bloginfo( 'name' ) ) . '</a>'; ?>
<?php // ★ 投稿・固定ページかを判定→投稿・固定ページ：p タグを使用／投稿・固定ページ以外：h1 タグを使用 ?>
<?php if (is_singular()) { ?>
<p class="h1"><?php echo $h1; ?></p>
<?php } else { ?>
<h1><?php echo $h1; ?></h1>
<?php } ?>
<?php // ★ メニュー定義有無を判定→有り：メニューを展開／無し：固定ページリストを展開 ?>
<?php
if ( has_nav_menu( 'primary' ) ) {
$html = wp_nav_menu( array( // メニューを展開
'theme_location' => 'primary', // 対象メニュー名
'container' => false, // 要素のラップ要素
'items_wrap' => '%3$s', // 編集型式（%1$s：menu_id、%2$s：menu_class、%3$s：リスト項目）
'fallback_cb' => false, // コールバック関数
'echo' => false, // 編集結果を返却
) );
}
else {
$html = wp_list_pages( array( // 固定ページリストを展開
'title_li' => '', // リストの見出し（ulタグなし）
'echo' => false, // 編集結果を返却
) );
}
?>
<nav>
<ul>
<?php echo $html; ?>
</ul>
</nav>
</header>
</div>
元となる HTML ファイルから各ページで共通に使用するフッター部を切り出して footer.php を作成します。
PHP（footer.php）
<div class="footer">
<footer class="container">
<?php // ★ 著作権表示を自動生成 ?>
<p><?php echo sprintf( '<small>© %1$s %2$s.</small>', date( 'Y' ), get_bloginfo( 'name' ) ); ?><br>Powered by WordPress. Theme by <a href="https://www.hamaya2020.com/" target="_blank">情報デザイン工房 濱屋</a>.</p>
</footer>
</div>
<?php // ★ /body タグの直前に挿入（WordPress の追加情報の展開場所を指定） ?>
<?php wp_footer(); ?>
</body>
</html>
元となる HTML ファイル（index.html）からヘッダー部とフッダー部を削除し front-page.php を作成します。 この例でのトップページには、投稿一覧とカスタム投稿一覧を表示するように作成されています。
PHP（front-page.php）
<?php /* 投稿一覧テンプレート */ ?>
<?php // ★ ヘッダーテンプレート読み込み ?>
<?php get_header(); ?>
<div class="main">
<main class="container">
<?php // ★ 投稿一覧生成 ?>
<h2>投稿一覧</h2>
<?php
if ( have_posts() ) {
?>
<ul>
<?php
while ( have_posts() ) {
the_post();
$permalink = esc_url( get_permalink() ); // URL
$title = get_the_title(); // タイトル
$date = get_the_date( 'Y-m-d' ); // 投稿日付
?>
<li><a href="<?php echo $permalink; ?>"><?php echo $date; ?>：<?php echo $title; ?></a></li>
<?php
}
?>
</ul>
<?php
the_posts_pagination( array( // ページネーションを表示
'mid_size' => 2, // 現在のページの左右に表示するページ番号の数
'prev_text' => __('Previous'), // 前のセットへのリンクテキスト
'next_text' => __('Next') // 次のセットへのリンクテキスト
) );
}
else {
?>
<p class="message">※ 表示対象がありません。</p>
<?php
}
?>
<?php // ★ カスタム投稿一覧生成 ?>
<h2>カスタム投稿一覧</h2>
<?php
$custom = new WP_Query(array(
'post_type' => 'custom_type',
'posts_per_page' => 5
));
if ( $custom->have_posts() ) {
?>
<ul>
<?php
while ( $custom->have_posts() ) {
$custom->the_post();
$permalink = esc_url( get_permalink() ); // URL
$title = get_the_title(); // タイトル
$date = get_the_date( 'Y-m-d' ); // 投稿日付
?>
<li><a href="<?php echo $permalink; ?>"><?php echo $date; ?>：<?php echo $title; ?></a></li>
<?php
}
?>
</ul>
<?php
$custom->the_posts_pagination( array( // ページネーションを表示
'mid_size' => 2, // 現在のページの左右に表示するページ番号の数
'prev_text' => __('Previous'), // 前のセットへのリンクテキスト
'next_text' => __('Next') // 次のセットへのリンクテキスト
) );
}
else {
?>
<p class="message">※ 表示対象がありません。</p>
<?php
}
wp_reset_postdata();
?>
</main>
</div>
<?php // ★ フッターテンプレート読み込み ?>
<?php get_footer(); ?>
元となる HTML ファイル（single-1.html）からヘッダー部とフッダー部を削除し page.php を作成します。
PHP（page.php）
<?php /* 固定ページテンプレート */ ?>
<?php // ★ ヘッダーテンプレート読み込み ?>
<?php get_header(); ?>
<div class="main">
<main class="container">
<?php
if ( have_posts() ) {
while ( have_posts() ) {
the_post();
the_title( '<h1>', '</h1>' ); // タイトル
the_content(); // ページコンテンツ
}
wp_link_pages( array( // 改ページ（複数ページ）処理
'before' => '<div class="blog-pages-pagination">',
'after' => '</div>' . PHP_EOL, // before/afterは、前後に付加する文字
'link_before' => '', // リンクテキストの前に付加する文字
'link_after' => '', // リンクテキストの後ろに付加する文字
'next_or_number' => 'number', // 'number'：ページ番号、'next'：前／次ページ
'separator' => ' ', // ページ番号間の文字
'nextpagelink' => __( 'Next page' ), // 次のページのリンクテキスト
'previouspagelink' => __( 'Previous page' ),// 前のページのリンクテキスト
'pagelink' => 'ページ %', // ページ番号のフォーマット（%はページ番号）
'echo' => true, // true：表示、false：返却
) );
}
?>
</main>
</div>
<?php // ★ フッターテンプレート読み込み ?>
<?php get_footer(); ?>
元となる HTML ファイル（single-1.html）からヘッダー部とフッダー部を削除し single.php を作成します。 本ファイルは、固定ページテンプレート（page.php）と、ほぼ同様ですが前後の投稿に移動するためのページネーションボタンが付与されます。
PHP（single.php）
<?php /* 投稿ページテンプレート */ ?>
<?php // ★ ヘッダーテンプレート読み込み ?>
<?php get_header(); ?>
<div class="main">
<main class="container">
<?php
if ( have_posts() ) {
while ( have_posts() ) {
the_post();
if ( is_singular() ) { // ページ（投稿、固定など）表示
the_title( '<h1>', '</h1>' ); // タイトル
the_content(); // ページコンテンツ
}
}
wp_link_pages( array( // 改ページ（複数ページ）処理
'before' => '<div class="blog-pages-pagination">',
'after' => '</div>' . PHP_EOL, // before/afterは、前後に付加する文字
'link_before' => '', // リンクテキストの前に付加する文字
'link_after' => '', // リンクテキストの後ろに付加する文字
'next_or_number' => 'number', // 'number'：ページ番号、'next'：前／次ページ
'separator' => ' ', // ページ番号間の文字
'nextpagelink' => __( 'Next page' ), // 次のページのリンクテキスト
'previouspagelink' => __( 'Previous page' ),// 前のページのリンクテキスト
'pagelink' => 'ページ %', // ページ番号のフォーマット（%はページ番号）
'echo' => true, // true：表示、false：返却
) );
?>
<div class="blog-single_pagination">
<p><?php previous_post_link(); ?></p>
<p><?php next_post_link(); ?></p>
</div>
<?php
}
?>
</main>
</div>
<?php // ★ フッターテンプレート読み込み ?>
<?php get_footer(); ?>
元となる HTML ファイル（single-1.html）からヘッダー部とフッダー部を削除し single-custom_type.php を作成します。 このテンプレートの接尾語である custom_type は、テーマ機能ファイル（functions.php）でカスタム投稿タイプを定義（register_post_type）する時に第1引数で指定したカスタム投稿タイプ名を指定します。 本ファイルは、投稿テンプレート（single.php）と、ほぼ同様ですが、以下の点が異なります。
PHP（single-custom_type.php）
<?php /* 投稿ページテンプレート */ ?>
<?php // ★ ヘッダーテンプレート読み込み ?>
<?php get_header(); ?>
<div class="main">
<main class="container">
<?php
if ( have_posts() ) {
while ( have_posts() ) {
the_post();
if ( is_singular() ) { // ページ（投稿、固定など）表示
the_title( '<h1>', '</h1>' ); // タイトル
the_content(); // ページコンテンツ
// ★ メタデータ取得
$v_text = get_post_meta(get_the_ID(), 'v_text', true);
$v_textarea = get_post_meta(get_the_ID(), 'v_textarea', true);
$v_checkbox = get_post_meta(get_the_ID(), 'v_checkbox', true);
$v_radio = get_post_meta(get_the_ID(), 'v_radio', true);
$v_select = get_post_meta(get_the_ID(), 'v_select', true);
$v_image_id = get_post_meta(get_the_ID(), 'v_image_id', true);
$v_image_url = wp_get_attachment_url($v_image_id);
?>
<h2>カスタムフィールド設定内容</h2>
<dl>
<dt>単一行入力</dt><dd><?php echo esc_html($v_text); ?></dd>
<dt>複数行入力</dt><dd><?php echo nl2br(esc_html($v_textarea)); ?></dd>
<dt>チェックボックス</dt><dd><?php echo $v_checkbox; ?></dd>
<dt>ラジオボタン</dt><dd><?php echo $v_radio; ?></dd>
<dt>セレクトボックス</dt><dd><?php echo $v_select; ?></dd>
<dt>画像選択</dt><dd><img src="<?php echo $v_image_url; ?>"></dd>
</dl>
<?php
}
}
wp_link_pages( array( // 改ページ（複数ページ）処理
'before' => '<div class="blog-pages-pagination">',
'after' => '</div>' . PHP_EOL, // before/afterは、前後に付加する文字
'link_before' => '', // リンクテキストの前に付加する文字
'link_after' => '', // リンクテキストの後ろに付加する文字
'next_or_number' => 'number', // 'number'：ページ番号、'next'：前／次ページ
'separator' => ' ', // ページ番号間の文字
'nextpagelink' => __( 'Next page' ), // 次のページのリンクテキスト
'previouspagelink' => __( 'Previous page' ),// 前のページのリンクテキスト
'pagelink' => 'ページ %', // ページ番号のフォーマット（%はページ番号）
'echo' => true, // true：表示、false：返却
) );
?>
<div class="blog-single_pagination">
<p><?php previous_post_link(); ?></p>
<p><?php next_post_link(); ?></p>
</div>
<?php
}
?>
</main>
</div>
<?php // ★ フッターテンプレート読み込み ?>
<?php get_footer(); ?>
色々な表示要求に対応するために汎用ページのテンプレート（index.html）を作成します。 本テンプレートは、色々な表示要求に対応するために投稿の一覧も個別ページも表示可能なようにしてあります。
PHP（index.php）
<?php /* 汎用ページ用テンプレート */ ?>
<?php // ★ ヘッダーテンプレートを展開 ?>
<?php get_header(); ?>
<div class="main">
<main class="container">
<?php
if ( is_singular() ) { // 投稿、固定ページ
?>
<div class="wrapper">
<?php
if ( have_posts() ) {
while ( have_posts() ) {
the_post();
the_content();
}
}
?>
</main>
</div>
<?php
}
else { // 一覧ページ
?>
<div class="main">
<main class="container">
<?php
if ( have_posts() ) {
?>
<h2>一覧</h2>
<ul class="item-list">
<?php
while ( have_posts() ) {
the_post();
$permalink = esc_url( get_permalink() );
$title = get_the_title();
$excerpt = get_the_excerpt();
$date = get_the_date( 'Y-m-d' );
?>
<li>
<a href="<?php echo $permalink; ?>">
<h3><?php echo $date . ' ' . esc_html($title); ?></h3>
<p><?php echo nl2br(esc_html($excerpt)); ?></p>
</a>
</li>
<?php
}
?>
</ul>
<?php
}
else {
?>
<p>※ 表示対象なし！</p>
<?php
}
?>
</main>
</div>
<?php
}
?>
<?php // ★ ヘッダーテンプレートを展開 ?>
<?php get_footer(); ?>
作成したファイル群を使用してテーマファイル（custom-sample.zip）を作成します。
📁 custom-sample.zip // テーマファイル（圧縮 zip ファイル）
└─📁 custom-sample // テーマフォルダ
├─📁 css // スタイルシートフォルダ
│ └─ style.css // スタイルシートファイル
├─ footer.php // ページ共通フッターテンプレートファイル
├─ front-page.php // トップページテンプレートファイル
├─ functions.php // テーマ機能ファイル
├─ header.php // ページ共通ヘッダーテンプレートファイル
├─ index.php // 汎用ページテンプレート
├─ page.php // 固定ページテンプレート
├─ screenshot.png // サムネイル画像ファイル
├─ single.php // 投稿テンプレート
├─ single-custom_type.php // カスタム投稿テンプレート
└─ style.css // テーマ情報ファイル
WordPress のダッシュボードにログインして作成したテーマ（custom-sample.zip）のインストールと有効化を行います。
表示確認用の投稿ページ、カスタム投稿ページ、固定ページを作成します。
WordPress サイトを表示して表示内容を確認します。
企業サイトの具体的な作成方法を習得するために、おもちゃの製造・販売を行う「おもちゃの濱屋」という仮想企業の企業サイトをオリジナルテーマ化する場合の作成手順例を示します。 企業サイトのオリジナルテーマを作成する時に有用なカスタム投稿タイプやカスタムフィールドの使用方法を理解するためのサンプルになっています。
企業サイトのオリジナルテーマ作成の練習を行う場合は、下記のリンク先からオリジナルテーマ作成用のサンプルファイルをダウンロードしてください。
ダウンロードしたファイルは、zip 圧縮をされていますので解凍して使用してください。解凍した状態でのフォルダ／ファイル内容は、以下の通りです。
テーマ作成で使用するのは、html フォルダと screenshot.png ファイルです。
hamaya-theme フォルダと hamaya-theme.zip ファイルは、下記の手順で作成した時に出来るファイル（完成版）なので、作成がうまくいかない場合に参照してください。
📁 wp-hamaya-theme // ダウンロードファイルの解凍フォルダ
├─📁 hamaya-theme // テーマの完成版
│ ├─📁 css // スタイルシートフォルダ
│ │ └─ style.css // スタイルシートファイル
│ ├─📁 images // 画像フォルダ
│ │ ├─ hero.jpg // ヒーロー画像ファイル
│ │ ├─ logo.png // ロゴ画像ファイル
│ │ ├─ sample1.jpg // おもちゃ画像ファイル（企業の取り組み用-1）
│ │ ├─ sample2.jpg // おもちゃ画像ファイル（企業の取り組み用-2）
│ │ ├─ toy1.jpg // おもちゃ画像ファイル（トップページ用-1）
│ │ ├─ toy2.jpg // おもちゃ画像ファイル（トップページ用-2）
│ │ ├─ toy3.jpg // おもちゃ画像ファイル（トップページ用-3）
│ │ └─ toy4.jpg // おもちゃ画像ファイル（トップページ用-4）
│ ├─ footer.php // ページ共通フッターテンプレートファイル
│ ├─ front-page.php // トップページテンプレートファイル
│ ├─ functions.php // テーマ機能ファイル
│ ├─ header.php // ページ共通ヘッダーテンプレートファイル
│ ├─ index.php // 汎用ページテンプレート
│ ├─ page-company.php // 固定ページ（企業情報）テンプレート
│ ├─ page-product.php // 固定ページ（商品情報）テンプレート
│ ├─ page-recruit.php // 固定ページ（採用情報）テンプレート
│ ├─ screenshot.png // サムネイル画像ファイル
│ └─ style.css // テーマ情報ファイル
├─📁 html // 作成するページの HTML フォルダ
│ ├─📁 css // スタイルシートフォルダ
│ │ └─ style.css // スタイルシートファイル
│ ├─📁 images // 画像フォルダ
│ │ ├─ hero.jpg // ヒーロー画像ファイル
│ │ ├─ logo.png // ロゴ画像ファイル
│ │ ├─ sample1.jpg // 企業の取り組み-1画像ファイル
│ │ ├─ sample2.jpg // 企業の取り組み-2ファイル
│ │ ├─ toy1.jpg // おもちゃ-1画像ファイル
│ │ ├─ toy2.jpg // おもちゃ-2画像ファイル
│ │ ├─ toy3.jpg // おもちゃ-3画像ファイル
│ │ ├─ toy4.jpg // おもちゃ-4画像ファイル
│ │ ├─ toy-01.jpg // おもちゃ画像ファイル（商品情報用-01）
│ │ ├─ toy-02.jpg // おもちゃ画像ファイル（商品情報用-02）
│ │ ├─ toy-03.jpg // おもちゃ画像ファイル（商品情報用-03）
│ │ ├─ toy-04.jpg // おもちゃ画像ファイル（商品情報用-04）
│ │ ├─ toy-05.jpg // おもちゃ画像ファイル（商品情報用-05）
│ │ ├─ toy-06.jpg // おもちゃ画像ファイル（商品情報用-06）
│ │ ├─ toy-07.jpg // おもちゃ画像ファイル（商品情報用-07）
│ │ └─ toy-08.jpg // おもちゃ画像ファイル（商品情報用-08）
│ ├─ company.html // 企業情報ページ HTML ファイル
│ ├─ index.html // トップページ HTML ファイル
│ ├─ news.html // お知らせページ HTML ファイル
│ ├─ product.html // 商品情報ページ HTML ファイル
│ ├─ product-sub.html // 商品情報個別ページ HTML ファイル
│ └─ recruit.html // 投稿 HTML ファイル
├─ hayama-theme.zip // テーマファイル
└─ screenshot.png // サムネイル画像ファイル
企業サイトオリジナルテーマで作成するテーマの機能は、以下の通りです。
上記の機能を実装するためにダッシュボードには、以下の項目を追加します。
お知らせ用の投稿編集画面には、定型コンテンツの入力フィールドを追加します。
商品情報用の投稿編集画面には、定型コンテンツの入力フィールドを追加します。
オリジナルテーマ作成の手順は、次の通りです。
テーマ作成の原型となる HTML / CSS と関連画像ファイルを作成します。今回の作成例では、html フォルダに格納されている内容になります。
📁 html // 作成するページの HTML フォルダ
├─📁 css // スタイルシートフォルダ
│ └─ style.css // スタイルシートファイル
├─📁 images // 画像フォルダ
│ ├─ hero.jpg // ヒーロー画像ファイル
│ ├─ logo.png // ロゴ画像ファイル
│ ├─ sample1.jpg // おもちゃ画像ファイル（企業の取り組み用-1）
│ ├─ sample2.jpg // おもちゃ画像ファイル（企業の取り組み用-2）
│ ├─ toy1.jpg // おもちゃ画像ファイル（トップページ用-1）
│ ├─ toy2.jpg // おもちゃ画像ファイル（トップページ用-2）
│ ├─ toy3.jpg // おもちゃ画像ファイル（トップページ用-3）
│ ├─ toy4.jpg // おもちゃ画像ファイル（トップページ用-4）
│ ├─ toy-01.jpg // おもちゃ画像ファイル（商品情報用-01）
│ ├─ toy-02.jpg // おもちゃ画像ファイル（商品情報用-02）
│ ├─ toy-03.jpg // おもちゃ画像ファイル（商品情報用-03）
│ ├─ toy-04.jpg // おもちゃ画像ファイル（商品情報用-04）
│ ├─ toy-05.jpg // おもちゃ画像ファイル（商品情報用-05）
│ ├─ toy-06.jpg // おもちゃ画像ファイル（商品情報用-06）
│ ├─ toy-07.jpg // おもちゃ画像ファイル（商品情報用-07）
│ └─ toy-08.jpg // おもちゃ画像ファイル（商品情報用-08）
├─ company.html // 企業情報ページ HTML ファイル
├─ index.html // トップページ HTML ファイル
├─ news.html // お知らせページ HTML ファイル
├─ product.html // 商品情報ページ HTML ファイル
├─ product-sub.html // 商品情報個別ページ HTML ファイル
└─ recruit.html // 投稿 HTML ファイル
HTML（index.html）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="images/favicon.ico" rel="icon">
<title>おもちゃの濱屋</title>
</head>
<body>
<header>
<div class="header">
<div class="header-inner">
<a href="./index.html">
<img src="images/logo.png" class="logo" alt="濱屋ロゴ">
</a>
<h1><a href="./index.html">おもちゃの濱屋</a></h1>
</div>
<nav>
<ul>
<li><a href="./index.html">トップ</a></li>
<li><a href="./company.html">企業情報</a></li>
<li><a href="./product.html">商品情報</a></li>
<li><a href="./recruit.html">採用情報</a></li>
</ul>
</nav>
</div>
</header>
<section class="hero">
<div class="hero-text">
<h2>子どもたちの未来を<br class="sp">育むおもちゃづくり</h2>
<p>創造力と笑顔を届ける濱屋のものづくり</p>
</div>
</section>
<main>
<section class="section">
<h2>お知らせ</h2>
<div class="wrapper">
<ul class="news-list">
<li>
<a href="./news.html">
<p class="new">2026-01-29 ひな祭りに向けて吊るし人形の販売開始</p>
<p>ひな祭りに向けて吊るし人形の販売開始します。</p>
</a>
</li>
<li>
<a href="./news.html">
<p>2026-01-01 おもちゃの濱屋 サイトを公開</p>
<p>おもちゃの濱屋の公式サイトを公開しました。</p>
</a>
</li>
</ul>
</div>
</section>
<section class="section">
<h2>商品の特徴</h2>
<div class="wrapper">
<ul class="product-list">
<li>
<h3>毛糸のおもちゃ</h3>
<img src="images/toy1.jpg" alt="" width="220" height="175">
<p>毛糸を素材とした温かいイメージのおもちゃで小さなお子様の遊具に最適です。</p>
<li>
<h3>陶器のおもちゃ</h3>
<img src="images/toy2.jpg" alt="" width="220" height="175">
<p>陶器を素材としたおもちゃで長持ちすると同時に飾り物として最適です。</p>
</li>
<li>
<h3>粘土のおもちゃ</h3>
<img src="images/toy3.jpg" alt="" width="220" height="175">
<p>粘土を素材としたおもちゃで細かな加工がされており飾り物として最適です。</p>
</li>
<li>
<h3>木材のおもちゃ</h3>
<img src="images/toy4.jpg" alt="" width="220" height="175">
<p>木材を素材としたおもちゃで多くの世代に安全な遊び道具に最適です。</p>
</li>
</li>
</ul>
</div>
</section>
<section class="section">
<h2>環境保全活動の取り組み</h2>
<div class="wrapper">
<div class="activity-list">
<img src="images/sample1.jpg" alt="" width="320" height="240">
<p>
当社は、製造や販売など、企業活動のすべての段階で環境保全を推進します。
おもちゃの原材料は、土に帰るという環境にやさしい素材を使用しています。
商品のパッケージは、無駄な個別包装をなくすと同時にビニールや発泡スチロールの梱包材から紙の梱包材へ切り替えを行いました。
工場では太陽光発電を設置すると同時に、工場や店舗の天井照明はLED照明を導入するなどの省エネを図っています。
また、会社全体で帳票の電子化を行うと同時にコピーや印刷では両面印刷の推奨を行うことで紙の使用量の削減を行っています。
</p>
</div>
</div>
</section>
<section class="section">
<h2>地域貢献活動の取り組み</h2>
<div class="wrapper">
<div class="activity-list reverse">
<img src="images/sample2.jpg" alt="" width="320" height="240">
<p>
当社は、地域貢献の一環として地方自治体や商店街と連携し、文化祭行事やお祭りへの参加や商店街行事への参加などを積極的に実施しています。
また、地域の子供たちに物つくりの楽しさを知ってもらうために「物つくり職業体験」を定期的に開催しています。
さらに、購入して頂いたおもちゃを長く使って頂くために各店舗におもちゃエキスパートを配置し、おもちゃの故障などの時に店舗での修理を可能にしています。
災害支援として東日本の被災地の緑化対策の一環で植林活動を継続実施しています。
</p>
</div>
</div>
</section>
<section class="section">
<h2>アクセス</h2>
<div class="wrapper">
<div class="access-list">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3240.6287312344566!2d139.76526368377606!3d35.68614272220848!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188c0f1b78eedf%3A0x48575b98a734e436!2z44CSMTAwLTAwMDQg5p2x5Lqs6YO95Y2D5Luj55Sw5Yy65LiA44OE5qmL77yR5LiB55uu77yR4oiS77yR!5e0!3m2!1sja!2sjp!4v1769127286080!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
<p>
おもちゃの濱屋<br>
〒100-0004 東京都千代田区大手町１丁目１番地<br>
JR 東京駅 徒歩 15分<br>
地下鉄 大手町 C9出口 徒歩 3分<br>
電話 012-3456-7890<br>
営業時間 10:00～17:00
</p>
</div>
</div>
</section>
</main>
<footer>
<p>© 2026 おもちゃの濱屋.</p>
</footer>
</body>
</html>
HTML（news.html）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="images/favicon.ico" rel="icon">
<title>おもちゃの濱屋</title>
</head>
<body>
<header>
<div class="header">
<div class="header-inner">
<a href="./index.html">
<img src="images/logo.png" class="logo" alt="濱屋ロゴ">
</a>
<h1><a href="./index.html">おもちゃの濱屋</a></h1>
</div>
<nav>
<ul>
<li><a href="./index.html">トップ</a></li>
<li><a href="./company.html">企業情報</a></li>
<li><a href="./product.html">商品情報</a></li>
<li><a href="./recruit.html">採用情報</a></li>
</ul>
</nav>
</div>
</header>
<main>
<section class="section">
<div class="wrapper">
<h2 class="wp-block-heading">ひな祭りに向けて吊るし人形の販売開始します。</h2>
<div class="wrapper">
<div>
<figure><img src="images/toy-01.jpg" alt="画像" width="512" height="512"></figure>
<div style="height:30px"></div>
<p>ひな祭りに向けて2026年2月1日（日）から吊るし雛の販売開始します。</p>
</div>
</div>
</div>
</section>
</main>
<footer>
<p>© 2026 おもちゃの濱屋.</p>
</footer>
</body>
</html>
HTML（company.html）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/style.css" rel="stylesheet" type="text/css">
<title>おもちゃの濱屋</title>
</head>
<body>
<header>
<div class="header">
<div class="header-inner">
<a href="./index.html">
<img src="images/logo.png" class="logo" alt="濱屋ロゴ">
</a>
<h1><a href="./index.html">おもちゃの濱屋</a></h1>
</div>
<nav>
<ul>
<li><a href="./index.html">トップ</a></li>
<li><a href="./company.html">企業情報</a></li>
<li><a href="./product.html">商品情報</a></li>
<li><a href="./recruit.html">採用情報</a></li>
</ul>
</nav>
</div>
</header>
<main>
<section class="section">
<h2>企業理念</h2>
<div class="wrapper">
<div class="message-list">
<p>「子どもたちの未来を育むおもちゃをつくる」 濱屋は創業以来、遊びを通じて学びと成長を支える製品づくりを続けています。</p>
</div>
</div>
</section>
<section class="section">
<h2>トップご挨拶</h2>
<div class="wrapper">
<div class="message-list">
<p>
おもちゃの濱屋は、「子どもたちの創造力を育むおもちゃづくり」を理念に掲げています。
子どもたちの想像力向上のヒントになるおもちゃの提供を目指して企画・製造・販売を行っていきます。
子どもたちが笑顔で安心して遊べるおもちゃを届け続けますので皆様のご意見を頂けると幸いです。
</p>
<p class="right">代表 濱田 太郎</p>
</div>
</div>
</section>
<section class="section">
<h2>企業情報</h2>
<div class="wrapper">
<div class="company-table">
<table>
<tr><th>会社名</th><td>おもちゃの濱屋</td></tr>
<tr><th>代表</th><td>濱田 太郎</td></tr>
<tr><th>所在地</th><td>〒100-0004 東京都千代田区大手町１丁目１番地</td></tr>
<tr><th>電話番号</th><td>012-3456-7890</td></tr>
<tr><th>設立</th><td>2020年10月</td></tr>
<tr><th>事業内容</th><td>おもちゃの企画・製造・販売</td></tr>
</table>
</div>
</div>
</section>
</main>
<footer>
<p>© 2026 おもちゃの濱屋.</p>
</footer>
</body>
</html>
HTML（product.html）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="images/favicon.ico" rel="icon">
<title>おもちゃの濱屋</title>
</head>
<body>
<header>
<div class="header">
<div class="header-inner">
<a href="./index.html">
<img src="images/logo.png" class="logo" alt="濱屋ロゴ">
</a>
<h1><a href="./index.html">おもちゃの濱屋</a></h1>
</div>
<nav>
<ul>
<li><a href="./index.html">トップ</a></li>
<li><a href="./company.html">企業情報</a></li>
<li><a href="./product.html">商品情報</a></li>
<li><a href="./recruit.html">採用情報</a></li>
</ul>
</nav>
</div>
</header>
<main>
<section class="section">
<h2>商品ギャラリー</h2>
<div class="wrapper">
<ul class="gallery">
<li>
<a href="./product-sub.html">
<h3>シーサーの飾り物</h3>
<img src="images/toy-05.jpg" alt="沖縄シーサーの飾り物">
<p>沖縄のシーサーの飾り物です。魔除けとしても使えます。</p>
</a>
</li>
<li>
<a href="./product-sub.html">
<h3>木製のコマ</h3>
<img src="images/toy-04.jpg" alt="木製のコマ">
<p>木製のコマです。コマ回しゲームができます。</p>
</a>
</li>
<li>
<a href="./product-sub.html">
<h3>毛糸の靴</h3>
<img src="images/toy-03.jpg" alt="毛糸の靴">
<p>毛糸で作成した靴です。人形の着せ替えに使えます。</p>
</a>
</li>
<li>
<a href="./product-sub.html">
<h3>お手玉</h3>
<img src="images/toy-02.jpg" alt="お手玉">
<p>中に小豆の入ったお手玉です。お子様と楽しく遊べます。</p>
</a>
</li>
<li>
<a href="./product-sub.html">
<h3>吊るし人形</h3>
<img src="images/toy-01.jpg" alt="吊るし人形">
<p>伊豆で飾られる吊るし人形です。可愛い人形が吊るされています。</p>
</a>
</li>
</ul>
</div>
</section>
</main>
<footer>
<p>© 2026 おもちゃの濱屋.</p>
</footer>
</body>
</html>
HTML（product-sub.html）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="images/favicon.ico" rel="icon">
<title>おもちゃの濱屋</title>
</head>
<body>
<header>
<div class="header">
<div class="header-inner">
<a href="./index.html">
<img src="images/logo.png" class="logo" alt="濱屋ロゴ">
</a>
<h1><a href="./index.html">おもちゃの濱屋</a></h1>
</div>
<nav>
<ul>
<li><a href="./index.html">トップ</a></li>
<li><a href="./company.html">企業情報</a></li>
<li><a href="./product.html">商品情報</a></li>
<li><a href="./recruit.html">採用情報</a></li>
</ul>
</nav>
</div>
</header>
<main>
<section class="section">
<div class="wrapper">
<h2>シーサーの飾り物</h2>
<div>
<div>
<figure>
<img width="512" height="512" src="images/toy-05.jpg" alt="">
</figure>
<div style="height:29px"></div>
<p>沖縄のシーサーの飾り物です。魔除けとしても使えます。<br>手作りのため顔が違いますので気に入った顔を探してみてください。</p>
</div>
</div>
</div>
</section>
</main>
<footer>
<p>© 2026 おもちゃの濱屋.</p>
</footer>
</body>
</html>
HTML（recruit.html）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="images/favicon.ico" rel="icon">
<title>おもちゃの濱屋</title>
</head>
<body>
<header>
<div class="header">
<div class="header-inner">
<a href="./index.html">
<img src="images/logo.png" class="logo" alt="濱屋ロゴ">
</a>
<h1><a href="./index.html">おもちゃの濱屋</a></h1>
</div>
<nav>
<ul>
<li><a href="./index.html">トップ</a></li>
<li><a href="./company.html">企業情報</a></li>
<li><a href="./product.html">商品情報</a></li>
<li><a href="./recruit.html">採用情報</a></li>
</ul>
</nav>
</div>
</header>
<main>
<section class="section">
<h2>採用条件</h2>
<div class="wrapper">
<div>
<ol class="recruit-list">
<li>職種<br>おもちゃデザイナー／製造スタッフ／企画営業</li>
<li>勤務地<br>東京都千代田区</li>
<li>勤務時間<br>9:00～18:00</li>
<li>休日<br>完全週休 2 日制</li>
<li>昇給<br>年 1 回（当社既定による）</li>
<li>賞与<br>年 2 回（夏・冬）</li>
<li>待遇<br>社会保険完備、交通費支給</li>
</ol>
<div style="height:29px"></div>
<p>※ 採用希望者は、当社まで電話をください。<br> 電話 012-3456-7890（人事部 採用担当）</p>
</div>
</div>
</section>
</main>
<footer>
<p>© 2026 おもちゃの濱屋.</p>
</footer>
</body>
</html>
テーマ用のサムネール画像を作成します。 今回の作成例では、ダウンロードフォルダ内の screenshot.png ファイルになります。
テーマ用のフォルダ（hamaya-theme）を作成し必要ファイルを元フォルダ（html）などからコピーします。 画像フォルダのおもちゃ画像ファイル（商品情報用：toy-01.jpg～toy-08.jpg）は、WordPress のメディアに登録して使用するのでコピーは不要です。
📁 hamaya-theme // テーマの完成版
├─📁 css // スタイルシートフォルダ
│ └─ style.css // スタイルシートファイル
├─📁 images // 画像フォルダ
│ ├─ hero.jpg // ヒーロー画像ファイル
│ ├─ logo.png // ロゴ画像ファイル
│ ├─ sample1.jpg // おもちゃ画像ファイル（企業の取り組み用-1）
│ ├─ sample2.jpg // おもちゃ画像ファイル（企業の取り組み用-2）
│ ├─ toy1.jpg // おもちゃ画像ファイル（トップページ用-1）
│ ├─ toy2.jpg // おもちゃ画像ファイル（トップページ用-2）
│ ├─ toy3.jpg // おもちゃ画像ファイル（トップページ用-3）
│ └─ toy4.jpg // おもちゃ画像ファイル（トップページ用-4）
└─ screenshot.png // サムネイル画像ファイル
テーマ情報ファイル（style.css）を作成します。
CSS（style.css）
/*
Theme Name: hamaya-theme
Description: おもちゃや濱屋オリジナルテーマ
Version: 1.0.0
*/
テーマ機能ファイル（functions.php）を作成します。 本テーマ機能ファイルの例では、テーマ機能に加えてカスタム投稿タイプやカスタムフィールドの定義も行っています。カスタム投稿タイプやカスタムフィールドの定義は、Advanced Custom Field（ACF）などのプラグインを使用することでコードを書かなくても定義することができますのでコード記載が得意ではない方は、これらのプラグインを使用することも検討してください。 但し、プラグインで定義する場合は、プラグインで定義した内容とテンプレートファイルの記述内容と合致している必要があると同時にサイト作成のたびにプラグインでの定義操作が必要になります。誤り防止という意味でも本例のようにコードで定義する方をお勧めまします。
PHP（functions.php）
<?php
// ★ テーマ基本設定
function hamaya_setup() {
add_theme_support('title-tag');
add_theme_support('post-thumbnails');
}
add_action('after_setup_theme', 'hamaya_setup');
function hamaya_enqueue_scripts() {
wp_enqueue_style('hamaya-style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'hamaya_enqueue_scripts');
// ★ カスタム投稿タイプ：お知らせ
function hamaya_register_news() {
register_post_type('news', // カスタム投稿タイプ名（英字）
array(
'label' => 'お知らせ', // カスタム投稿タイプ表示名
'labels' => array( // カスタム投稿タイプ表示名（詳細設定）
'name' => 'お知らせ',
'singular_name' => 'お知らせ',
),
'public' => true, // 公開
'hierarchical' => false, // 親記事指定
'menu_icon' => 'dashicons-megaphone', // メニューアイコン
'has_archive' => true, // アーカイブページ表示（リライトルール更新要）
'show_in_rest' => true, // REST APIに公開、ブロックエディタ有効化
'show_in_menu' => true, // 管理画面のメニューに表示
'menu_position' => 6, // 管理画面のメニュー位置
'supports' => array( // 編集画面表示項目設定
'title', // タイトル
'editor', // 本文エディタ
),
));
}
add_action('init', 'hamaya_register_news');
// ★ カスタム投稿タイプ：商品情報
function hamaya_register_products() {
register_post_type('products', array(
'labels' => array(
'name' => '商品情報',
'singular_name' => '商品情報',
),
'public' => true, // 公開
'hierarchical' => false, // 親記事指定
'menu_icon' => 'dashicons-hammer', // メニューアイコン
'has_archive' => true, // アーカイブページ表示（リライトルール更新要）
'show_in_rest' => true, // REST APIに公開、ブロックエディタ有効化
'show_in_menu' => true, // 管理画面のメニューに表示
'menu_position' => 7, // 管理画面のメニュー位置
'supports' => array( // 編集画面表示項目設定
'title', // タイトル
'editor', // 本文エディタ
),
));
}
add_action('init', 'hamaya_register_products');
// ★ カスタムフィールド追加
function hamaya_add_custom_fields() {
// ★お知らせ
add_meta_box( // カスタムフィールド（メタボックス）を追加
'news_fields', // 識別子
'お知らせ情報', // 見出し
'hamaya_news_fields_html', // 画面定義関数
'news', // 投稿タイプ（複数の場合は array を使用）
'normal', // 表示位置
'default', // 優先度
);
// ★ 商品情報
add_meta_box( // カスタムフィールド（メタボックス）を追加
'products_fields', // 識別子
'商品情報入力', // 見出し
'hamaya_products_fields_html', // 画面定義関数
'products', // 投稿タイプ（複数の場合は array を使用）
'normal', // 表示位置
'default', // 優先度
);
}
add_action('add_meta_boxes', 'hamaya_add_custom_fields');
// ★ お知らせ入力画面
function hamaya_news_fields_html($post) {
$summary = get_post_meta($post->ID, 'summary', true);
$has_link = get_post_meta($post->ID, 'has_link', true);
$has_new = get_post_meta($post->ID, 'has_new', true);
?>
<p>概要（トップページ表示メッセージ）：<br>
<textarea name="summary" style="width:100%; height:120px;"><?php echo esc_textarea($summary); ?></textarea>
</p>
<p>リンク有無（URL：指定URLにリンク、$：リンクなし、省略：記事ページにリンク）：<br>
<input type="text" name="has_link" value="<?php echo esc_attr($has_link); ?>" style="width:100%;">
</p>
<p>
<label>
Newを付与：<input type="checkbox" name="has_new" value="1" <?php checked($has_new, '1'); ?>>
</label>
</p>
<?php
}
// ★ 商品情報入力画面
function hamaya_products_fields_html($post) {
$name = get_post_meta($post->ID, 'item_name', true);
$img = get_post_meta($post->ID, 'item_image', true);
$img_url = $img ? wp_get_attachment_image_url($img, 'medium') : '';
$desc = get_post_meta($post->ID, 'item_desc', true);
?>
<p>商品名：<br>
<input type="text" name="item_name" value="<?php echo esc_attr($name); ?>" style="width:100%;">
</p>
<div>
<p>画像選択：<br>
<img id="my-media-preview" src="<?php echo esc_url($img_url); ?>" style="max-width:200px; display:block; margin-bottom:10px;">
<input type="hidden" id="my-media-id" name="item_image" value="<?php echo esc_attr($img); ?>">
<button type="button" class="button" id="my-media-select">画像を選択</button>
<button type="button" class="button" id="my-media-clear">クリア</button>
</div>
<script>
jQuery(function($) {
let frame;
$('#my-media-select').on('click', function(e){
e.preventDefault();
if (frame) {
frame.open();
return;
}
frame = wp.media({ title: '画像を選択', button: { text: 'この画像を使う' }, multiple: false });
frame.on('select', function(){
const attachment = frame.state().get('selection').first().toJSON();
$('#my-media-id').val(attachment.id);
$('#my-media-preview').attr('src', attachment.sizes.medium.url);
});
frame.open(); });
$('#my-media-clear').on('click', function(){ $('#my-media-id').val('');
$('#my-media-preview').attr('src', '');
});
});
</script>
<p>概要説明：<br>
<textarea name="item_desc" style="width:100%; height:120px;"><?php echo esc_textarea($desc); ?></textarea>
</p>
<?php
}
// ★ 保存処理
function hamaya_save_custom_fields($post_id) {
// ★ お知らせ
if (array_key_exists('summary', $_POST)) {
update_post_meta($post_id, 'summary', sanitize_textarea_field($_POST['summary']));
}
if (array_key_exists('has_link', $_POST)) {
update_post_meta($post_id, 'has_link', sanitize_textarea_field($_POST['has_link']));
}
$has_new_value = isset($_POST['has_new']) ? '1' : '0';
update_post_meta($post_id, 'has_new', $has_new_value);
// ★ 商品情報
if (array_key_exists('item_name', $_POST)) {
update_post_meta($post_id, 'item_name', sanitize_text_field($_POST['item_name']));
}
if (isset($_POST['item_image'])) {
$img = intval($_POST['item_image']);
update_post_meta($post_id, 'item_image', $img);
}
if (array_key_exists('item_desc', $_POST)) {
update_post_meta($post_id, 'item_desc', sanitize_textarea_field($_POST['item_desc']));
}
}
add_action('save_post', 'hamaya_save_custom_fields');
元となる HTML ファイルから各ページで共通に使用するヘッダー部を切り出して header.php を作成します。
PHP（header.php）
<!DOCTYPE html>
<?php // ★ 言語属性を設定 ?>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<?php // ★ 相対パスを絶対パスに変換 ?>
<link href="<?php echo get_stylesheet_directory_uri(); ?>/css/style.css" rel="stylesheet" type="text/css">
<?php // ★ 相対パスを絶対パスに変換 ?>
<link href="<?php echo get_stylesheet_directory_uri(); ?>/images/favicon.ico" rel="icon">
<?php // ★ WordPress の追加情報の展開場所を指定 ?>
<?php wp_head(); ?>
</head>
<?php // ★ テンプレート種類を設定 ?>
<body <?php body_class(); ?>>
<header>
<div class="header">
<div class="header-inner">
<?php // ★ 相対パスを絶対パスに変換 ?>
<a href="<?php echo home_url('/'); ?>">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/logo.png" class="logo" alt="濱屋ロゴ">
</a>
<h1><a href="<?php echo home_url('/'); ?>">おもちゃの濱屋</a></h1>
</div>
<nav>
<ul>
<li><a href="<?php echo home_url('/'); ?>">トップ</a></li>
<li><a href="<?php echo home_url('/company'); ?>">企業情報</a></li>
<li><a href="<?php echo home_url('/product'); ?>">商品情報</a></li>
<li><a href="<?php echo home_url('/recruit'); ?>">採用情報</a></li>
</ul>
</nav>
</div>
</header>
元となる HTML ファイルから各ページで共通に使用するフッター部を切り出して footer.php を作成します。
PHP（footer.php）
<footer>
<?php // ★ サイト名を設定 ?>
<p>© 2026 <?php echo get_bloginfo('name'); ?>.</p>
</footer>
<?php // ★ WordPress の追加情報の展開場所を指定 ?>
<?php wp_footer(); ?>
</body>
</html>
元となる HTML ファイル（index.html）からヘッダー部とフッダー部を削除し front-page.php を作成します。
PHP（front-page.php）
<?php // ★ ヘッダーテンプレートを展開 ?>
<?php get_header(); ?>
<section class="hero">
<div class="hero-text">
<h2>子どもたちの未来を<br class="sp">育むおもちゃづくり</h2>
<p>創造力と笑顔を届ける濱屋のものづくり</p>
</div>
</section>
<main>
<section class="section">
<h2>お知らせ</h2>
<div class="wrapper">
<ul class="news-list">
<?php // ★ お知らせカスタム投稿タイプの記事を展開 ?>
<?php
$news = new WP_Query(array(
'post_type' => 'news',
'posts_per_page' => 5
));
while ($news->have_posts()) {
$news->the_post();
$permalink = esc_url( get_permalink() );
$title = get_the_title();
$date = get_the_date( 'Y-m-d' );
$summary = get_post_meta(get_the_ID(), 'summary', true);
$has_link = get_post_meta(get_the_ID(), 'has_link', true);
$has_new = get_post_meta(get_the_ID(), 'has_new', true);
if ($has_link == '$') {
$link = '';
}
else {
if ($has_link == '') {
$link = $permalink;
$target = '';
}
else {
$link = $has_link;
$target = ' target="_blank"';
}
}
if ($has_new === '1') {
$new = ' class="new"';
}
else {
$new = '';
}
?>
<li>
<?php if ($link != '') { ?>
<a href="<?php echo $link; ?>"<?php echo $target; ?>>
<?php } ?>
<p<?php echo $new; ?>><?php echo $date . ' ' . esc_html($title) ?></p>
<p><?php echo nl2br(esc_html($summary)); ?></p>
<?php if ($link != '') { ?>
</a>
<?php } ?>
</li>
<?php
}
wp_reset_postdata();
?>
</ul>
</div>
</section>
<section class="section">
<h2>商品の特徴</h2>
<div class="wrapper">
<ul class="product-list">
<li>
<h3>毛糸のおもちゃ</h3>
<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/toy1.jpg" alt="" width="220" height="175">
<p>毛糸を素材とした温かいイメージのおもちゃで小さなお子様の遊具に最適です。</p>
<li>
<h3>陶器のおもちゃ</h3>
<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/toy2.jpg" alt="" width="220" height="175">
<p>陶器を素材としたおもちゃで長持ちすると同時に飾り物として最適です。</p>
</li>
<li>
<h3>粘土のおもちゃ</h3>
<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/toy3.jpg" alt="" width="220" height="175">
<p>粘土を素材としたおもちゃで細かな加工がされており飾り物として最適です。</p>
</li>
<li>
<h3>木材のおもちゃ</h3>
<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/toy4.jpg" alt="" width="220" height="175">
<p>木材を素材としたおもちゃで多くの世代に安全な遊び道具に最適です。</p>
</li>
</li>
</ul>
</div>
</section>
<section class="section">
<h2>環境保全活動の取り組み</h2>
<div class="wrapper">
<div class="activity-list">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/sample1.jpg" alt="" width="320" height="240">
<p>
当社は、製造や販売など、企業活動のすべての段階で環境保全を推進します。
おもちゃの原材料は、土に帰るという環境にやさしい素材を使用しています。
商品のパッケージは、無駄な個別包装をなくすと同時にビニールや発泡スチロールの梱包材から紙の梱包材へ切り替えを行いました。
工場では太陽光発電を設置すると同時に、工場や店舗の天井照明はLED照明を導入するなどの省エネを図っています。
また、会社全体で帳票の電子化を行うと同時にコピーや印刷では両面印刷の推奨を行うことで紙の使用量の削減を行っています。
</p>
</div>
</div>
</section>
<section class="section">
<h2>地域貢献活動の取り組み</h2>
<div class="wrapper">
<div class="activity-list reverse">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/sample2.jpg" alt="" width="320" height="240">
<p>
当社は、地域貢献の一環として地方自治体や商店街と連携し、文化祭行事やお祭りへの参加や商店街行事への参加などを積極的に実施しています。
また、地域の子供たちに物つくりの楽しさを知ってもらうために「物つくり職業体験」を定期的に開催しています。
さらに、購入して頂いたおもちゃを長く使って頂くために各店舗におもちゃエキスパートを配置し、おもちゃの故障などの時に店舗での修理を可能にしています。
災害支援として東日本の被災地の緑化対策の一環で植林活動を継続実施しています。
</p>
</div>
</div>
</section>
<section class="section">
<h2>アクセス</h2>
<div class="wrapper">
<div class="access-list">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3240.6287312344566!2d139.76526368377606!3d35.68614272220848!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188c0f1b78eedf%3A0x48575b98a734e436!2z44CSMTAwLTAwMDQg5p2x5Lqs6YO95Y2D5Luj55Sw5Yy65LiA44OE5qmL77yR5LiB55uu77yR4oiS77yR!5e0!3m2!1sja!2sjp!4v1769127286080!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
<p>
おもちゃの濱屋<br>
〒100-0004 東京都千代田区大手町１丁目１番地<br>
JR 東京駅 徒歩 15分<br>
地下鉄 大手町 C9出口 徒歩 3分<br>
電話 012-3456-7890<br>
営業時間 10:00～17:00
</p>
</div>
</div>
</section>
</main>
<?php // ★ フッターテンプレートを展開 ?>
<?php get_footer(); ?>
元となる HTML ファイル（company.html）からヘッダー部とフッダー部を削除し page-company.php を作成します。
PHP（page-company.php）
<?php // ★ ヘッダーテンプレートを展開 ?>
<?php get_header(); ?>
<main>
<section class="section">
<h2>企業理念</h2>
<div class="wrapper">
<div class="message-list">
<p>「子どもたちの未来を育むおもちゃをつくる」 濱屋は創業以来、遊びを通じて学びと成長を支える製品づくりを続けています。</p>
</div>
</div>
</section>
<section class="section">
<h2>トップご挨拶</h2>
<div class="wrapper">
<div class="message-list">
<p>
おもちゃの濱屋は、「子どもたちの創造力を育むおもちゃづくり」を理念に掲げています。
子どもたちの想像力向上のヒントになるおもちゃの提供を目指して企画・製造・販売を行っていきます。
子どもたちが笑顔で安心して遊べるおもちゃを届け続けますので皆様のご意見を頂けると幸いです。
</p>
<p class="right">代表 濱田 太郎</p>
</div>
</div>
</section>
<section class="section">
<h2>企業情報</h2>
<div class="wrapper">
<div class="company-table">
<table>
<tr><th>会社名</th><td>おもちゃの濱屋</td></tr>
<tr><th>代表</th><td>濱田 太郎</td></tr>
<tr><th>所在地</th><td>〒100-0004 東京都千代田区大手町１丁目１番地</td></tr>
<tr><th>電話番号</th><td>012-3456-7890</td></tr>
<tr><th>設立</th><td>2020年10月</td></tr>
<tr><th>事業内容</th><td>おもちゃの企画・製造・販売</td></tr>
</table>
</div>
</div>
</section>
</main>
<?php // ★ フッターテンプレートを展開 ?>
<?php get_footer(); ?>
元となる HTML ファイル（product.html）からヘッダー部とフッダー部を削除し page-product.php を作成します。
PHP（page-product.php）
<?php // ★ ヘッダーテンプレートを展開 ?>
<?php get_header(); ?>
<main>
<section class="section">
<h2>商品ギャラリー</h2>
<div class="wrapper">
<ul class="gallery">
<?php // ★ 商品情報カスタム投稿タイプの記事を展開 ?>
<?php
$products = new WP_Query(array(
'post_type' => 'products',
'posts_per_page' => -1
));
while ($products->have_posts()) {
$products->the_post();
$permalink = esc_url( get_permalink() );
$name = get_post_meta(get_the_ID(), 'item_name', true);
$img = get_post_meta(get_the_ID(), 'item_image', true);
$img_url = wp_get_attachment_url($img);
$desc = get_post_meta(get_the_ID(), 'item_desc', true);
?>
<li>
<a href="<?php echo $permalink; ?>">
<h3><?php echo esc_html($name); ?></h3>
<img src="<?php echo esc_url($img_url); ?>" alt="<?php echo esc_attr($name); ?>">
<p><?php echo nl2br(esc_html($desc)); ?></p>
</a>
</li>
<?php
}
wp_reset_postdata();
?>
</ul>
</div>
</section>
</main>
<?php // ★ フッターテンプレートを展開 ?>
<?php get_footer(); ?>
元となる HTML ファイル（recruit.html）からヘッダー部とフッダー部を削除し page-recruit.php を作成します。
PHP（page-recruit.php）
<?php // ★ ヘッダーテンプレートを展開 ?>
<?php get_header(); ?>
<main>
<section class="section">
<?php
if ( have_posts() ) {
while ( have_posts() ) {
the_post();
the_content();
}
}
?>
</section>
</main>
<?php // ★ フッターテンプレートを展開 ?>
<?php get_footer(); ?>
色々な表示要求に対応するために汎用ページのテンプレート（index.html）を作成します。 本テンプレートは、色々な表示要求に対応するために投稿の一覧も個別ページも表示可能なようにしてあります。
PHP（index.php）
<?php /* 汎用ページ用テンプレート */ ?>
<?php // ★ ヘッダーテンプレートを展開 ?>
<?php get_header(); ?>
<main>
<section class="section">
<?php
if ( is_singular() ) { // 投稿、固定ページ
?>
<div class="wrapper">
<?php
if ( have_posts() ) {
while ( have_posts() ) {
the_post();
the_content();
}
}
?>
</div>
<?php
}
else { // 一覧ページ
?>
<div class="wrapper">
<?php
if ( have_posts() ) {
?>
<h2>一覧</h2>
<ul class="item-list">
<?php
while ( have_posts() ) {
the_post();
$permalink = esc_url( get_permalink() );
$title = get_the_title();
$excerpt = get_the_excerpt();
$date = get_the_date( 'Y-m-d' );
?>
<li>
<a href="<?php echo $permalink; ?>">
<h3><?php echo $date . ' ' . esc_html($title); ?></h3>
<p><?php echo nl2br(esc_html($excerpt)); ?></p>
</a>
</li>
<?php
}
?>
</ul>
<?php
}
else {
?>
<p>※ 表示対象なし！</p>
<?php
}
?>
</div>
<?php
}
?>
</section>
</main>
<?php // ★ ヘッダーテンプレートを展開 ?>
<?php get_footer(); ?>
作成したファイル群を使用してテーマファイル（hamaya-theme.zip）を作成します。
📁 hamaya-theme.zip // テーマファイル（圧縮 zip ファイル）
└─📁 hamaya-theme // テーマフォルダ
├─📁 css // スタイルシートフォルダ
│ └─ style.css // スタイルシートファイル
├─📁 images // 画像フォルダ
│ ├─ hero.jpg // ヒーロー画像ファイル
│ ├─ logo.png // ロゴ画像ファイル
│ ├─ sample1.jpg // おもちゃ画像ファイル（企業の取り組み用-1）
│ ├─ sample2.jpg // おもちゃ画像ファイル（企業の取り組み用-2）
│ ├─ toy1.jpg // おもちゃ画像ファイル（トップページ用-1）
│ ├─ toy2.jpg // おもちゃ画像ファイル（トップページ用-2）
│ ├─ toy3.jpg // おもちゃ画像ファイル（トップページ用-3）
│ └─ toy4.jpg // おもちゃ画像ファイル（トップページ用-4）
├─ footer.php // ページ共通フッターテンプレートファイル
├─ front-page.php // トップページテンプレートファイル
├─ functions.php // テーマ機能ファイル
├─ header.php // ページ共通ヘッダーテンプレートファイル
├─ index.php // 汎用ページテンプレート
├─ page-company.php // 固定ページ（企業情報）テンプレート
├─ page-product.php // 固定ページ（商品情報）テンプレート
├─ page-recruit.php // 固定ページ（採用情報）テンプレート
├─ screenshot.png // サムネイル画像ファイル
└─ style.css // テーマ情報ファイル
WordPress のダッシュボードにログインして作成したテーマ（hamaya-theme.zip）のインストールと有効化を行います。
表示確認用の投稿ページ、カスタム投稿ページ、固定ページを作成します。
企業情報、商品情報を表示可能にするために固定ページとして企業情報ページ（スラッグ名：company）、商品情報ページ（スラッグ名：product）を作成します。どちらのページの表示内容は、テンプレート内で生成するためコンテンツの入力は不要です。
採用情報を表示可能にするために固定ページとして採用情報ページ（スラッグ名：recruit）を作成します。このページは編集画面で入力した内容を表示するように作成されていますので編集画面で表示コンテンツを入力してください。
お知らせを表示する場合は、お知らせ投稿を作成します。お知らせは、お知らせの個数分作成してください。お知らせ投稿には、お知らせページに表示するフリーのコンテンツの他にトップページのお知らせ一覧に表示する概要、リンク情報、Newを付与の定型コンテンツを入力することができます。
商品情報を表示する場合は、商品情報投稿を作成します。商品情報は、商品の個数分作成してください。商品情報投稿には、商品情報ページ（個別ページ）に表示するフリーのコンテンツの他に商品情報ページ（一覧ページ）に表示する画像選択、概要説明の定型コンテンツを入力することができます。
商品情報で使用する画像のサンプルは、ダウンロードしたファイルの html フォルダ配下の画像フォルダ（images）におもちゃ画像ファイル（商品情報用：toy-01.jpg～toy-08.jpg）として格納してありますのでメディアにアップロードして使ってください。
WordPress サイトを表示して表示内容を確認します。
