STEP 4: 機能追加 - WordPressオリジナルテーマ作成

このステップで追加する機能

functions.phpに以下の機能を追加していきます。

📱 ナビゲーションメニュー

管理画面から編集可能なメニュー機能

🖼️ アイキャッチ画像

記事ごとに設定できるサムネイル画像

📦 ウィジェット

サイドバーやフッターに配置できる部品

📝 カスタムロゴ

管理画面からロゴ画像を設定可能に

ナビゲーションメニューの追加

WordPressの管理画面から編集できるメニュー機能を追加します。

1. functions.phpに機能を追加

functions.php に追加// ナビゲーションメニューを登録
function mytheme_register_menus() {
    register_nav_menus(array(
        'primary' => 'ヘッダーメニュー',
        'footer'  => 'フッターメニュー',
    ));
}
add_action('after_setup_theme', 'mytheme_register_menus');

2. header.phpにメニューを表示

header.php（ヘッダー部分に追加）<header class="site-header">
    <div class="container">
        <h1 class="site-title">
            <a href="<?php echo esc_url(home_url('/')); ?>">
                <?php bloginfo('name'); ?>
            </a>
        </h1>
        
        <!-- ナビゲーションメニュー -->
        <nav class="main-navigation">
            <?php
            wp_nav_menu(array(
                'theme_location' => 'primary',
                'menu_class'     => 'primary-menu',
                'container'      => false,
            ));
            ?>
        </nav>
    </div>
</header>

3. メニューのスタイル設定

style.css に追加/* ナビゲーションメニュー */
.main-navigation {
    margin-top: 1rem;
}

.primary-menu {
    list-style: none;
    display: flex;
    gap: 2rem;
}

.primary-menu li {
    position: relative;
}

.primary-menu a {
    color: #333;
    text-decoration: none;
    padding: 0.5rem 1rem;
    display: block;
    transition: color 0.3s;
}

.primary-menu a:hover {
    color: #0073aa;
}

/* サブメニュー */
.primary-menu .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    min-width: 200px;
}

.primary-menu li:hover > .sub-menu {
    display: block;
}

/* モバイル対応 */
@media (max-width: 768px) {
    .primary-menu {
        flex-direction: column;
        gap: 0;
    }
}

✅ メニューの設定方法

WordPress管理画面 → 外観 → メニューから、メニューを作成・編集できます。「ヘッダーメニュー」として表示される場所を選択してください。

アイキャッチ画像の活用

STEP 3でアイキャッチ画像のサポートは追加済みですが、実際に表示させましょう。

index.phpにアイキャッチ画像を追加

index.php（記事ループ内を更新）<article <?php post_class(); ?>>
    <!-- アイキャッチ画像 -->
    <?php if (has_post_thumbnail()) : ?>
        <div class="post-thumbnail">
            <a href="<?php the_permalink(); ?>">
                <?php the_post_thumbnail('large'); ?>
            </a>
        </div>
    <?php endif; ?>
    
    <h2 class="entry-title">
        <a href="<?php the_permalink(); ?>">
            <?php the_title(); ?>
        </a>
    </h2>
    
    <div class="entry-meta">
        <time datetime="<?php echo get_the_date('c'); ?>">
            <?php echo get_the_date(); ?>
        </time>
    </div>
    
    <div class="entry-content">
        <?php the_excerpt(); ?>
    </div>
</article>

アイキャッチ画像のスタイル

style.css に追加/* アイキャッチ画像 */
.post-thumbnail {
    margin-bottom: 1.5rem;
    overflow: hidden;
    border-radius: 8px;
}

.post-thumbnail img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s;
}

.post-thumbnail a:hover img {
    transform: scale(1.05);
}

💡 アイキャッチ画像の関数

has_post_thumbnail(): アイキャッチ画像が設定されているか確認
the_post_thumbnail(): アイキャッチ画像を表示
サイズ指定: 'thumbnail', 'medium', 'large', 'full' が使用可能

ウィジェットエリアの追加

サイドバーやフッターに配置できるウィジェットエリアを作成します。

1. functions.phpにウィジェットエリアを登録

functions.php に追加// ウィジェットエリアを登録
function mytheme_widgets_init() {
    // サイドバーウィジェット
    register_sidebar(array(
        'name'          => 'サイドバー',
        'id'            => 'sidebar-1',
        'description'   => 'サイドバーに表示されるウィジェット',
        'before_widget' => '<div class="widget %2$s">',
        'after_widget'  => '</div>',
        'before_title'  => '<h3 class="widget-title">',
        'after_title'   => '</h3>',
    ));
    
    // フッターウィジェット
    register_sidebar(array(
        'name'          => 'フッター',
        'id'            => 'footer-1',
        'description'   => 'フッターに表示されるウィジェット',
        'before_widget' => '<div class="footer-widget %2$s">',
        'after_widget'  => '</div>',
        'before_title'  => '<h4 class="footer-widget-title">',
        'after_title'   => '</h4>',
    ));
}
add_action('widgets_init', 'mytheme_widgets_init');

2. sidebar.phpを作成

sidebar.php（新規作成）<aside class="sidebar">
    <?php if (is_active_sidebar('sidebar-1')) : ?>
        <?php dynamic_sidebar('sidebar-1'); ?>
    <?php endif; ?>
</aside>

3. index.phpにサイドバーを追加

index.php（更新）<?php get_header(); ?>

<div class="content-wrapper">
    <div class="container">
        <main class="main-content">
            <?php if (have_posts()) : ?>
                <?php while (have_posts()) : the_post(); ?>
                    <!-- 記事内容 -->
                <?php endwhile; ?>
            <?php else : ?>
                <p>投稿が見つかりませんでした。</p>
            <?php endif; ?>
        </main>
        
        <?php get_sidebar(); ?>
    </div>
</div>

<?php get_footer(); ?>

4. 2カラムレイアウトのCSS

style.css に追加/* 2カラムレイアウト */
.content-wrapper {
    padding: 3rem 0;
}

.content-wrapper .container {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 3rem;
}

/* サイドバー */
.sidebar {
    background: #fff;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.widget {
    margin-bottom: 2rem;
}

.widget-title {
    color: #0073aa;
    font-size: 1.2rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #0073aa;
}

/* モバイル対応 */
@media (max-width: 768px) {
    .content-wrapper .container {
        grid-template-columns: 1fr;
    }
}

✅ ウィジェットの設定

管理画面 → 外観 → ウィジェットから、サイドバーやフッターにウィジェットを配置できます。

カスタムロゴの追加

管理画面からロゴ画像を設定できるようにします。

1. functions.phpにカスタムロゴ機能を追加

functions.php に追加// テーマのセットアップ関数に追加
function mytheme_setup() {
    // ... 既存のコード ...
    
    // カスタムロゴのサポート
    add_theme_support('custom-logo', array(
        'height'      => 100,
        'width'       => 400,
        'flex-height' => true,
        'flex-width'  => true,
    ));
}

2. header.phpでロゴを表示

header.php（サイトタイトル部分を更新）<div class="site-branding">
    <?php if (has_custom_logo()) : ?>
        <?php the_custom_logo(); ?>
    <?php else : ?>
        <h1 class="site-title">
            <a href="<?php echo esc_url(home_url('/')); ?>">
                <?php bloginfo('name'); ?>
            </a>
        </h1>
    <?php endif; ?>
    <p class="site-description"><?php bloginfo('description'); ?></p>
</div>

3. ロゴのスタイル

style.css に追加/* カスタムロゴ */
.custom-logo-link {
    display: block;
}

.custom-logo {
    max-height: 80px;
    width: auto;
    height: auto;
}

抜粋文字数のカスタマイズ

抜粋（excerpt）の文字数を調整します。

functions.php に追加// 抜粋の文字数を変更（デフォルト55文字→120文字）
function mytheme_excerpt_length($length) {
    return 120;
}
add_filter('excerpt_length', 'mytheme_excerpt_length');

// 抜粋の末尾を変更（デフォルト[...]→...続きを読む）
function mytheme_excerpt_more($more) {
    return '... <a href="' . get_permalink() . '">続きを読む</a>';
}
add_filter('excerpt_more', 'mytheme_excerpt_more');

💡 フィルターフックとは？

add_filter() は、WordPressの出力内容を変更するための機能です。ここでは抜粋の文字数と末尾の表示をカスタマイズしています。

ページネーション（ページ送り）の追加

複数ページある場合のナビゲーションを追加します。

1. index.phpにページネーションを追加

index.php（記事ループの後に追加）<?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post(); ?>
        <!-- 記事内容 -->
    <?php endwhile; ?>
    
    <!-- ページネーション -->
    <div class="pagination">
        <?php
        the_posts_pagination(array(
            'mid_size'  => 2,
            'prev_text' => '« 前へ',
            'next_text' => '次へ »',
        ));
        ?>
    </div>
<?php endif; ?>

2. ページネーションのスタイル

style.css に追加/* ページネーション */
.pagination {
    margin-top: 3rem;
    text-align: center;
}

.pagination .nav-links {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

.pagination a,
.pagination .current {
    padding: 0.5rem 1rem;
    background: #fff;
    border-radius: 4px;
    text-decoration: none;
    color: #333;
    transition: all 0.3s;
}

.pagination a:hover {
    background: #0073aa;
    color: #fff;
}

.pagination .current {
    background: #0073aa;
    color: #fff;
}

コメント機能の準備

将来的にコメント機能を追加するための準備をします。

comments.phpを作成

comments.php（新規作成）<div class="comments-area">
    <?php if (have_comments()) : ?>
        <h3 class="comments-title">
            <?php
            printf(
                _n('1件のコメント', '%1$s件のコメント', get_comments_number()),
                number_format_i18n(get_comments_number())
            );
            ?>
        </h3>
        
        <ol class="comment-list">
            <?php
            wp_list_comments(array(
                'style'      => 'ol',
                'short_ping' => true,
            ));
            ?>
        </ol>
    <?php endif; ?>
    
    <?php
    if (!comments_open() && get_comments_number() && post_type_supports(get_post_type(), 'comments')) :
    ?>
        <p class="no-comments">コメントは受け付けていません。</p>
    <?php endif; ?>
    
    <?php comment_form(); ?>
</div>

💡 コメント機能について

comments.phpを作成しておくことで、将来的に個別記事ページ（single.php）でコメント機能を簡単に追加できます。

完成したfunctions.phpの全体像

これまでの内容を統合した、完成版のfunctions.phpです。

functions.php（完成版）<?php
// テーマのセットアップ
function mytheme_setup() {
    // タイトルタグをWordPressに管理させる
    add_theme_support('title-tag');
    
    // アイキャッチ画像を有効化
    add_theme_support('post-thumbnails');
    
    // カスタムロゴのサポート
    add_theme_support('custom-logo', array(
        'height'      => 100,
        'width'       => 400,
        'flex-height' => true,
        'flex-width'  => true,
    ));
    
    // HTML5サポート
    add_theme_support('html5', array(
        'search-form',
        'comment-form',
        'comment-list',
        'gallery',
        'caption',
    ));
}
add_action('after_setup_theme', 'mytheme_setup');

// スタイルシートの読み込み
function mytheme_scripts() {
    wp_enqueue_style('mytheme-style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'mytheme_scripts');

// ナビゲーションメニューを登録
function mytheme_register_menus() {
    register_nav_menus(array(
        'primary' => 'ヘッダーメニュー',
        'footer'  => 'フッターメニュー',
    ));
}
add_action('after_setup_theme', 'mytheme_register_menus');

// ウィジェットエリアを登録
function mytheme_widgets_init() {
    register_sidebar(array(
        'name'          => 'サイドバー',
        'id'            => 'sidebar-1',
        'description'   => 'サイドバーに表示されるウィジェット',
        'before_widget' => '<div class="widget %2$s">',
        'after_widget'  => '</div>',
        'before_title'  => '<h3 class="widget-title">',
        'after_title'   => '</h3>',
    ));
    
    register_sidebar(array(
        'name'          => 'フッター',
        'id'            => 'footer-1',
        'description'   => 'フッターに表示されるウィジェット',
        'before_widget' => '<div class="footer-widget %2$s">',
        'after_widget'  => '</div>',
        'before_title'  => '<h4 class="footer-widget-title">',
        'after_title'   => '</h4>',
    ));
}
add_action('widgets_init', 'mytheme_widgets_init');

// 抜粋の文字数を変更
function mytheme_excerpt_length($length) {
    return 120;
}
add_filter('excerpt_length', 'mytheme_excerpt_length');

// 抜粋の末尾を変更
function mytheme_excerpt_more($more) {
    return '... <a href="' . get_permalink() . '">続きを読む</a>';
}
add_filter('excerpt_more', 'mytheme_excerpt_more');

動作確認

追加した機能が正しく動作するか確認しましょう。

メニューの確認
管理画面 → 外観 → メニューで、メニューを作成し、「ヘッダーメニュー」に設定できるか確認します。
ウィジェットの確認
管理画面 → 外観 → ウィジェットで、「サイドバー」にウィジェットを配置してみます。
アイキャッチ画像の確認
記事編集画面で、アイキャッチ画像を設定できるか確認します。
カスタムロゴの確認
管理画面 → 外観 → カスタマイズ → サイト基本情報 → ロゴでロゴを設定できるか確認します。

まとめ

STEP 4では、以下の機能を追加しました：

✅ ナビゲーションメニュー機能
✅ アイキャッチ画像の表示
✅ ウィジェットエリア（サイドバー・フッター）
✅ カスタムロゴ機能
✅ 抜粋のカスタマイズ
✅ ページネーション
✅ コメント機能の準備

🎊 実用的なテーマに成長！

これでWordPressテーマとして必要な基本機能が揃いました！次のSTEP 5では、個別記事ページ（single.php）や固定ページ（page.php）など、目的別のテンプレートを作成します。

📚 さらに学ぶ：関連する応用編

カスタムポストタイプ - 投稿以外のコンテンツタイプを作成
カスタムフィールド - 独自の情報を追加
カスタマイザーAPI - 設定画面を作成
セキュリティ対策 - 安全なコードの書き方を学ぶ

⚙️ 機能追加