元の記事
WordPress標準ヘッダー・フッターでテーマ機能を最大化しよう！
WordPress標準のヘッダー・フッター機能を実装し、WordPressの機能をフル活用できるテーマに改良する方法を解説します。wp_head()とwp_footer()関数の実装により、管理画面での設定がWebページで正しく反映される環境を構築し、プラグインの機能も有効化できるプロフェッショナルなテーマへと進化させます。
［成果物］WordPressテーマ開発：スタイルシート読み込み完全ガイド
この記事では、以下の投稿で作成した成果物をまとめて確認することができます。
ご自身の環境と見比べて反映漏れがないかなど、ご確認用にご活用ください。
は今回新規追加したものです。
は今回変更したものです。
目次
固定ページ一覧
| タイトル | スラッグ | 順序 | テンプレート | 備考 | |
|---|---|---|---|---|---|
| ようこそ | sample-page | 100 | トップページ | ||
| 会社概要 | about | 200 | 会社概要専用テンプレート | ||
| 沿革 | history | 100 | |||
| アクセス | access | 200 | |||
| サービス | service | 300 | |||
| お客様の声 | voice | 350 | |||
| お問い合わせ | contact | 400 |
投稿一覧
| タイトル | カテゴリ | テンプレート | 備考 | |
|---|---|---|---|---|
| Hello World!! | WPが自動生成 |
テーマファイル一覧
現時点のテーマファイルはありません
| ファイル名 | 用途 | 備考 | |
|---|---|---|---|
footer.php | フッター共通部 | ||
front-page.php | トップページ専用テンプレート | ||
functions.php | 共通関数 | ||
header.php | ヘッダー共通部 | ||
index.php | |||
kaisha.php | 会社概要用テンプレート | ||
page-contact.php | お問い合わせ用テンプレート | ||
page.php | 固定ページ用テンプレート | ||
style.css |
コード
現時点のコードは以下の通りです。
footer.php
</main>
<footer>
<p>© 2025 マイ・オリジナルテーマ</p>
</footer>
<?php wp_footer();?>
</body>
</html>front-page.php
<?php get_header();?>
<?php the_content(); ?>
<p>※このページは front-page.php テンプレートで表示されています</p>
<?php get_footer();?>functions.php
<?php
// 外観→メニューの有効化
add_theme_support( 'menus' );
// スタイルシートの読み込み
add_action('wp_enqueue_scripts', 'load_theme_style');
function load_theme_style() {
wp_enqueue_style(
'theme-style',
get_stylesheet_directory_uri() . '/style.css',
array(),
'1.0.0'
);
}
?>header.php
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php the_title(); ?></title>
<?php wp_head();?>
</head>
<body>
<header>
<h1><?php the_title(); ?></h1>
<?php wp_nav_menu('header-menu');?>
</header>
<main>index.php
<!DOCTYPE html>
<html lang="ja">
<head>
<title>マイ・オリジナルテーマ</title>
</head>
<body>
<header>
<h1><?php the_title(); ?></h1>
<ul>
<li><a href="<?php echo home_url(''); ?>">トップ</a></li>
<li><a href="<?php echo home_url('about'); ?>">会社概要</a>
<ul>
<li><a href="<?php echo home_url('about/history'); ?>">沿革</a></li>
<li><a href="<?php echo home_url('about/access'); ?>">アクセス</a></li>
</ul>
</li>
<li><a href="<?php echo home_url('service'); ?>">サービス</a></li>
<li><a href="<?php echo home_url('contact'); ?>">問い合わせ</a></li>
</ul>
</header>
<main>
<?php the_content();?>
</main>
<footer>
<p>© 2025 マイ・オリジナルテーマ</p>
</footer>
</body>
</html>kaisha.php
<?php
/*
Template Name: 会社概要専用テンプレート
*/
?>
<?php get_header();?>
<?php the_content(); ?>
<p>※このページは kaisha.php テンプレートで表示されています</p>
<?php get_footer();?>page-contact.php
<?php get_header();?>
<?php the_content(); ?>
<h2>お問い合わせフォーム</h2>
<form>
<!-- ここにフォームを作成 -->
</form>
<p>※このページは page-contact.php テンプレートで表示されています</p>
<?php get_footer();?>page.php
<?php get_header();?>
<?php the_content(); ?>
<p>※このページは page.php テンプレートで表示されています</p>
<?php get_footer();?>style.css
/*
Theme Name: マイ・オリジナルテーマ
*/
h1 {
color: blue;
}プラグイン
現時点のプラグインは以下の通りです。
| プラグイン名 | 作者 | 備考 | |
|---|---|---|---|
| Admin Columns | Codepress |
