2026年7月5日

WordPressのsingle.phpテンプレートをカスタマイズする

テーマ・デザイン

はじめに

WordPressのブログ記事ページを個別にカスタマイズするためには、single.phpテンプレートファイルを利用します。このファイルは、各投稿記事がどのように表示されるかを決定します。カスタマイズを行うことで、ユーザー体験やデザイン性を向上させることができます。

症状・背景

ブログ記事ページのレイアウトを変更したい
特定のコンテンツ要素（シェアボタンなど）を追加したい
SEO最適化のためにタイトルタグやメタタグをカスタマイズしたい
レスポンシブデザインに対応するため、モバイルデバイスでの表示を改善したい

手順・設定方法

ステップ1: single.phpファイルへのアクセスとバックアップ作成

# テーマディレクトリに移動します。
cd wp-content/themes/your-theme-name/

# 現在のsingle.phpファイルをバックアップコピーを作成します。
cp single.php single.php.bak

ステップ2: 関連記事セクションの追加

# カスタム関数を定義して関連記事を取得します。
function get_related_posts() {
    global $post;
    $tags = wp_get_post_tags($post->ID);
    if ($tags) {
        $tag_ids = array();
        foreach ($tags as $individual_tag) {$tag_ids[] = $individual_tag->term_id;}
        $args=array(
            'tag__in' => $tag_ids,
            'post__not_in' => array($post->ID),
            'posts_per_page'=>3, // 表示する関連記事の数
            'ignore_sticky_posts'=>1
        );
        $my_query = new WP_Query( $args );
        if ( $my_query->have_posts() ) {
            while ( $my_query->have_posts() ) { 
                $my_query->the_post();
                echo '<div class="related-post">';
                the_title('<h3>', '</h3>');
                the_excerpt();
                echo '<a href="' . get_permalink() . '" title="' . the_title_attribute('echo=0') . '">' . __('Continue reading', 'your-theme-name') . '</a>';
                echo '</div>';
            } 
        }
    wp_reset_postdata();  
    }
}

# テンプレートファイルに関連記事セクションを挿入します。
get_related_posts();

ステップ3: 記事タイトルのスタイル変更

# CSSで記事タイトルのスタイルをカスタマイズします。
.post-title {
    font-size: 2.5em;
    color: #4CAF50; /* テキスト色 */
}

# HTML内でCSSクラスを使用してスタイルを適用します。
<h1 class="post-title"><?php the_title(); ?></h1>

ステップ4: 記事ページのメタデータのカスタマイズ

# カスタムテンプレートタグ関数を作成し、記事情報を表示します。
function custom_post_info() {
    global $post;
    $categories = get_the_category();
    $category_ids = array();
    foreach($categories as $individual_category) {$category_ids[] = $individual_category->term_id;}
    echo '<div class="meta-info">';
    echo '<span class="cat-links">カテゴリー：';
    if ($category_ids) {
        echo get_category_parents($category_ids[0], true, ' ');
    }
    echo '</span>';
    
    // タグの表示
    $tags_list = get_the_tag_list('', ', ');
    if ( ! empty( $tags_list ) ){
        echo '<span class="tag-links">タグ：' . $tags_list .'</span>';
    }

    // 作成日時と最終更新日の表示
    printf('<div class="post-details"><time class="entry-date" datetime="%3$s">%4$s</time><span class="updated"> 最終更新日：%5$s </span></div>',
        get_the_date(),
        esc_html( get_the_time() ),
        get_the_date('Y-m-d'),
        get_the_time(get_option('date_format')),
        get_the_modified_date()
    );
    
    echo '</div>';
}

# テンプレートファイルにカスタムメタデータ関数を挿入します。
custom_post_info();

注意事項

<実践的な注意点1>: 単純なテンプレート変更だけでなく、テーマ全体のデザインと機能性を考慮することが重要です。
<実践的な注意点2>: テーマ更新時にカスタマイズ内容が失われないよう、子テーマを利用することを検討してください。
<セキュリティ上の注意>: カスタムPHPコードを使用する際は、その安全性を確認し、可能な限り最新のセキュリティプラクティスを適用してください。
<パフォーマンス/運用上の注意>: 高度なカスタマイズを行う前に、サイトのパフォーマンスと効率性への影響について理解しておくことが重要です。

まとめ

1. カスタム関数の活用: カスタムPHP関数を利用することで、必要な情報を動的に生成できます。

2. CSSの使用: CSSを使用して視覚的な要素をカスタマイズし、サイトのブランドと調和するデザインを作成します。

3. メタデータの追加: 記事のメタデータ（カテゴリー、タグなど）を表示することでユーザー体験を向上させます。

4. 子テーマの利用: カスタマイズが上書きされないように、WordPressの子テーマ機能を利用します。

5. テストとレビュー: 変更後は、ブラウザで確認し、必要な修正を行ってください。

Post Views: 3