自作クラシックテーマにロゴ・サイト名・コピーライトを配置し、最新投稿と固定ページで使うテンプレートを作成します。
ロゴ未設定時はサイト名リンクを表示します。
この段階のhome.phpとpage.phpは、読み込まれたテンプレートを判別するための最小例です。
フルスクラッチでWordPressテーマを作ってみる、第4弾。
今回はロゴやらコピーライトやらを入れてトップページを作成してみます。
最小限の構造だけで作成するので、見た目は残念なままなので悪しからず。
スターターテーマを使わずに
WordPress自作テーマを制作する
サイトタイトルの作成
ヘッダーにロゴまたはサイト名とキャッチフレーズを表示します。
この例でロゴやサイト名をh1にするのは、最新の投稿をトップページに表示する場合だけです。
ロゴの入力欄の表示
変更前のfunctions.php・header.php・footer.php・home.php・page.phpを保存し、新しく作るファイル名も控えます。
ロゴ・サイト名・キャッチフレーズと、「表示設定」のホームページ・投稿ページの選択も作業前に記録してください。
functions.phpに下記のコードを追加しますが、すでにcustom-logo対応がある場合は重ねて追加しません。
// カスタムロゴの表示
add_theme_support('custom-logo');カスタマイズのサイト情報にロゴの入力欄が表示されます。
ロゴとサイトのタイトルとキャッチフレーズの情報を入力
ロゴとサイトのタイトルとキャッチフレーズも入力しておきましょう。
この記事の作例では幅200px・高さ100pxのロゴを使います。
WordPress全体で共通の推奨サイズではありません。
表示幅や縦横比はテーマのレイアウトに合わせて決めてください。
| 項目 | 幅 | 高さ |
|---|---|---|
| ロゴ | 200px | 100px |
header.phpにコードを挿入
header.phpのbody内で、wp_body_open()の後に下記のコードを配置します。
既存のサイト名やロゴの出力がある場合は比較して置き換え、二重に表示しないようにします。
<div id="site-title">
<?php
$logo = get_custom_logo();
if ($logo === '') {
$logo = '<a href="' . esc_url(home_url('/')) . '" rel="home">' . esc_html(get_bloginfo('name')) . '</a>';
}
// 最新投稿をトップに表示する場合だけサイト名をh1にする。
$tag = (is_front_page() && is_home()) ? 'h1' : 'div';
echo '<' . $tag . ' class="site-branding">' . $logo . '</' . $tag . '>';
?>
<p class="catchphrase"><?php echo esc_html(get_bloginfo('description')); ?></p>
</div>ロゴ画像と見出しの構造
get_custom_logo()は添付画像の情報からロゴを生成します。
ロゴ未設定時のサイト名表示は公開ページで確認してください。
カスタマイザーのプレビューでは、WordPressが非表示のロゴ用要素を返すため、公開ページと表示が異なる場合があります。
画像URLをgetimagesize()で再取得しないため、ロゴ未設定時の配列参照や画像サーバーへの追加アクセスを避けられます。
サイト説明は見出しの外の段落に置き、表示しないサイト名を追加しません。
状態の確認
左がロゴ表示時、右がロゴ無しのサイトタイトル表示です。
確認
最後に確認します。
最新のコードでは、最新投稿をトップに表示するときだけロゴまたはサイト名をh1で囲みます。
固定ページをトップに設定した場合はdivです。
ロゴ未設定時はサイト名を表示し、非表示のサイト名は追加しません。
次の画像は旧コードの確認画面で、現在の見出し構造とは異なります。
コピーライトの作成
footer.phpに下記のコード記載。
本当はカスタマイズから文言を指定できるようにしたいが、今回はコードに直接記載します。
<div class="copyright">
©2023 <?php bloginfo('name'); ?>
</div>この作例では、コピーライトを次の形で表示します。
コード中の2023は作例の開始年なので、自分のサイトに合わせて変更してください。
© 開始年 サイト名
コンテンツ部分の作成
トップページのコンテンツ部分の表示を作ります。
こちら2パターンあって、標準設定の最新記事の場合と固定ページを指定した場合とを想定して作ります。
home.phpの作成
これまでのindex.phpに代えて、投稿一覧用のhome.phpを作ります。
最新の投稿をトップページに表示する設定では、home.phpがトップページにも使われます。
最新の投稿をトップページに表示する場合は、次の順にテンプレートが選ばれます。
固定ページをトップに指定する場合は、この下のpage.phpの説明を参照してください。
・front-page.php
・home.php
・index.php
この例ではfront-page.phpを作らず、最新投稿の表示にhome.phpを使います。
既存のfront-page.phpがある場合はそちらが優先されるため、ファイル構成を確認してください。
まずテキストエディタでhome.phpのファイルを作成します。
以下の簡単なコードを挿入しています。
<?php get_header(); ?>
<main id="main-content">
home.php
</main>
<?php get_footer(); ?>初期状態のトップページの設定は、管理画面の設定 ＞ 表示設定 ＞ 最新の投稿の場合です。
home.phpのテンプレートが表示されています。
page.phpの作成
続いて、固定ページをトップに指定した場合の表示を作ります。
この例にはfront-page.phpや固定ページ専用のテンプレートがないため、page.phpが選ばれます。
まずテキストエディタでpage.php（固定ページ用のテンプレート）のファイルを作成します。
以下の簡単なコードを挿入しています。
<?php get_header(); ?>
<main id="main-content">
page.php
</main>
<?php get_footer(); ?>管理画面固定ページからトップページ用の固定ページを1記事、作成して公開します。
管理画面の設定からホームページの表示を先ほど作成したホームページに指定します。
page.phpが表示されました。
この時点でのコード
ここまでのファイルをまとめています。
上のコードに一括で追記せず、各ファイルの既存処理と比較して置き換えてください。
既存のPHPコード内へ追加する場合は、PHP開始タグを重ねないでください。
完成例のfunctions.phpには、ロゴやテンプレートの作成に不要な絵文字・自動文字変換・REST API参照リンク等の停止処理を含めません。
フッターメニューも、未割り当て時に自動ページ一覧を出さない指定にしています。
index.phpとsidebar.phpは変更なし。
header.php
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<div id="site-title">
<?php
$logo = get_custom_logo();
if ($logo === '') {
$logo = '<a href="' . esc_url(home_url('/')) . '" rel="home">' . esc_html(get_bloginfo('name')) . '</a>';
}
// 最新投稿をトップに表示する場合だけサイト名をh1にする。
$tag = (is_front_page() && is_home()) ? 'h1' : 'div';
echo '<' . $tag . ' class="site-branding">' . $logo . '</' . $tag . '>';
?>
<p class="catchphrase"><?php echo esc_html(get_bloginfo('description')); ?></p>
</div>
<?php wp_nav_menu(['theme_location' => 'global_menu', 'fallback_cb' => false]); ?>home.phpとpage.php
<?php get_header(); ?>
<main id="main-content">
コンテンツ部分
</main>
<?php get_footer(); ?>footer.php
<?php get_sidebar(); ?>
<!-- サイドバーはsidebar.phpで一度だけ出力します。 -->
<?php
wp_nav_menu([
'container' => '',
'theme_location' => 'footer_menu',
'fallback_cb' => false,
]);
?>
<footer id="footer">
<?php if (is_active_sidebar('footer')) : ?>
<div id="footer_widget">
<?php dynamic_sidebar('footer'); ?>
</div>
<?php endif; ?>
</footer>
<?php wp_footer(); ?>
<div class="copyright">
©2023 <?php bloginfo('name'); ?>
</div>
</body>
</html>functions.php
<?php
// 外観のメニュー表示
add_theme_support('menus');
// 外観のウィジェット表示
add_theme_support('widgets');
// カスタムロゴの表示
add_theme_support('custom-logo');
// タイトルタグの表示
add_theme_support('title-tag');
// アイキャッチの表示
add_theme_support('post-thumbnails');
// メニュー位置の設定
function setup_nav_menu() {
register_nav_menu('global_menu', 'グローバルメニュー');
register_nav_menu('footer_menu', 'フッターメニュー');
}
add_action('after_setup_theme', 'setup_nav_menu');
// ウィジェットエリアの登録
function register_area() {
register_sidebar([
'name' => 'サイドバー',
'id' => 'sidebar',
'description' => 'サイドバーに表示されます。',
'before_widget' => '<div id="%1$s" class="%2$s">',
'after_widget' => '</div>',
]);
register_sidebar([
'name' => 'フッター',
'id' => 'footer',
'description' => 'フッターに表示されます。',
'before_widget' => '<div id="%1$s" class="%2$s">',
'after_widget' => '</div>',
]);
}
add_action('widgets_init', 'register_area');まとめ
トップページと呼んでいいのかわからない見た目ですが…
構造的にはだいぶサイトっぽくなってきました。
細かいところを直したいところですが、まずは最小限でサイトに必要なパーツを揃えていこうと思います。
GitHubの過去の例は今回の修正と同期していません。
現行コードは本文を参照してください。
過去のコードは、GitHubのMOTOKI-LLC/WAZA-codeにもまとめています。
ロゴとサイドバーの重複を確かめる
完成版のfooter.phpは、get_sidebar()と同じサイドバーを直接出力する処理が重なっていました。
検証用ウィジェットが2回出ることを実テーマで再現し、直接出力する部分を外しました。
sidebar.phpから一度だけ表示する構成に統一しています。
2026年10月2日の独立したWordPress検証環境では、画像添付データをロゴに設定し、PC・スマホの両方で表示を確認しました。
最新投稿のトップではサイト名の要素がh1、固定フロントページではdivになることも確認しました。
下の画面は固定フロントページです。
この段階のhome.phpとpage.phpは、読み込まれたファイル名を表示する確認用です。
まだ記事一覧や固定ページ本文の完成版ではありません。
ファイルが選ばれることを確かめてから、投稿と固定ページの本文を作る手順へ進んでください。
同日の検証では既存画像をロゴに選び、切り抜きを省略して保存した後、再読み込みでも設定が残ることを確認しました。
最新投稿と固定フロントページの切り替えも確認済みです。
新規アップロードと切り抜き成功は未確認です。
今回、functions.phpの標準機能停止処理とフッターメニュー未割り当て時の指定を改めた後の、テーマ有効化・設定保存・PCとスマホの操作は再検証していません。
ファイルの復元だけでは、管理画面で変更したロゴやホームページ設定は戻りません。
元の構成へ戻すときは、ファイルと設定の両方を作業前の状態へ戻します。
カスタマイザーでロゴを選んで保存する
この記事のfunctions.phpでcustom-logo対応を追加したテーマを有効化し、「外観 → カスタマイズ → サイト基本情報」を開きます。
「ロゴを選択」からメディアライブラリの画像を選び、必要に応じて切り抜き画面へ進みます。
2026年10月2日の検証では、既存の検証用画像を選択したところ、切り抜き時にエラーが表示されました。
元画像を使う確認として「切り抜かない」を選び、「公開」を押すと保存されました。
元画像を使ってよい場合だけ切り抜きを省略し、切り抜いた形が必要な場合はエラーの解消後に確認してください。
カスタマイザーを再読み込みし、選択したロゴと「公開済み」の状態が残るか確認します。
続いて公開画面を開き、画像が表示され、ロゴのリンクからトップページへ移動できるか確認します。
「ホームページ設定」を最新の投稿と固定ページで切り替えると、この記事の段階ではhome.phpまたはpage.phpという表示で選択されたテンプレートを判別できます。
④のhome.php・page.phpは確認用の表示なので、本文の完成は⑤以降のコードを適用して確かめます。
同日の検証では保存状態と元画像の表示を確認済みですが、画像の新規アップロードと切り抜き成功は確認結果に含めません。
トップページと投稿一覧を区別する
「設定 → 表示設定」で最新の投稿を選ぶ場合、この例ではサイト名がh1になります。
固定ページをトップに選ぶ場合はロゴをdivにし、固定ページ本文側でページのh1を用意します。
home.php は投稿一覧用です。
front-page.php があればトップページではそちらが優先されます。
本文の「コンテンツ部分」は完成したループではないため、次回の投稿・固定ページテンプレートを組み合わせてください。
貼付先は自作クラシックテーマの header.php。
まとめのfunctions.phpを追記すると既存関数が重複するため、比較して置き換えます。
ロゴ設定あり／なし、最新投稿／固定トップ、投稿詳細で見出しとリンクを確認し、Tabでリンクに移動してEnterでトップへ戻れることを確かめます。
PCとスマホで画像がはみ出す場合は .custom-logo {max-width:100%;height:auto;} を自作テーマのCSSに追加します。
戻す場合は、変更したfunctions.php・header.php・footer.php・home.php・page.phpを保存した原本へ戻します。
今回新規作成したテンプレートは取り除き、ロゴ・サイト名・キャッチフレーズ・表示設定も控えておいた状態に戻して保存します。
よくある質問：WordPress自作テーマでトップページを作成するとき
この記事で作るトップページは、完成版ですか？
いいえ。
記事では、この段階のhome.phpとpage.phpは、読み込まれたテンプレートを判別するための最小例です。
まだ記事一覧や固定ページ本文の完成版ではなく、ファイルが選ばれることを確かめてから、投稿と固定ページの本文を作る手順へ進みます。
ロゴは、どう設定しますか？
functions.phpにcustom-logo対応を追加すると、カスタマイズのサイト情報にロゴの入力欄が表示されます。
記事では、すでにcustom-logo対応がある場合は重ねて追加しません。
ロゴ未設定時はサイト名リンクを表示します。
ロゴの推奨サイズは、決まっていますか？
決まっていません。
記事では、この記事の作例では幅200px・高さ100pxのロゴを使いますが、WordPress全体で共通の推奨サイズではなく、表示幅や縦横比はテーマのレイアウトに合わせて決めます。
ロゴやサイト名は、いつh1で囲みますか？
記事では、最新の投稿をトップページに表示するときだけ、ロゴまたはサイト名をh1で囲みます。
固定ページをトップに設定した場合はdivにし、固定ページ本文側でページのh1を用意します。
ロゴ未設定時はサイト名を表示し、非表示のサイト名は追加しません。
コピーライトは、どう表示されますか？
footer.phpにコードを記載し、「© 開始年 サイト名」の形で表示します。
記事では、コード中の2023は作例の開始年なので自分のサイトに合わせて変更します。
年の範囲やAll Rights Reserved.などの追加表記は、このコードでは出力しません。
トップページには、どのテンプレートが使われますか？
記事では、最新の投稿をトップページに表示する場合は、front-page.php・home.php・index.phpの順（上ほど優先）にテンプレートが選ばれます。
この例ではfront-page.phpを作らず、home.phpを使います。
既存のfront-page.phpがある場合はそちらが優先されます。
固定ページをトップに指定した場合は、front-page.phpや専用テンプレートがないため、page.phpが選ばれます。
ロゴを選ぶときに、切り抜きでエラーが出たらどうしますか？
記事では、2026年10月2日の検証で、既存の検証用画像を選択したところ切り抜き時にエラーが表示され、「切り抜かない」を選んで「公開」を押すと保存されました。
元画像を使ってよい場合だけ切り抜きを省略し、切り抜いた形が必要な場合はエラーの解消後に確認してください。
ロゴを設定したあとは、何を確認しますか？
カスタマイザーを再読み込みし、選択したロゴと「公開済み」の状態が残るか確認します。
続いて公開画面を開き、画像が表示され、ロゴのリンクからトップページへ移動できるか確認します。
元に戻すには、どうしますか？
変更したテーマファイルを原本へ戻し、今回新規作成したテンプレートを取り除きます。
ロゴ・サイト名・キャッチフレーズ・ホームページと投稿ページの設定も、作業前の記録に従って戻して保存してください。
どこまで動作確認されていますか？
記事では、2026年10月2日にWordPress 7.1.2の独立した検証環境で、既存画像をロゴに選んで保存し、再読み込みでも設定が残ること、最新投稿と固定フロントページの切り替えを確認したとされています。
画像の新規アップロードと切り抜き成功は確認結果に含まれていません。
