WordPress自作テーマ制作④│トップページ作成

2021.02.242026.10.05

自作クラシックテーマにロゴ・サイト名・コピーライトを配置し、最新投稿と固定ページで使うテンプレートを作成します。

ロゴ未設定時はサイト名リンクを表示します。

この段階の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()は添付画像の情報からロゴを生成します。

画像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が表示されました。

この時点でのコード

ここまでのファイルをまとめています。

上のコードに一括で追記せず、各ファイルの既存処理と比較して置き換えてください。

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',
]);
?>

<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');

// WordPressのバージョン情報
remove_action('wp_head', 'wp_generator');

// 絵文字
add_filter('emoji_svg_url', '__return_false');
remove_action('wp_head', 'print_emoji_detection_script', 7);
remove_action('admin_print_scripts', 'print_emoji_detection_script');
remove_action('wp_print_styles', 'print_emoji_styles');
remove_action('admin_print_styles', 'print_emoji_styles');

// Windows Live Writeの停止
remove_action('wp_head', 'wlwmanifest_link');

// EditURI(RSD Link)の停止
remove_action('wp_head', 'rsd_link');

// 記号の自動変換停止(wptexturize無効化)
add_filter('run_wptexturize', '__return_false');

// https://api.w.org/の停止
remove_action('wp_head', 'rest_output_link_wp_head');

// メニュー位置の設定
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');