WordPressのブログ一覧を見出しリストで表示する

WordPressのブログ一覧ページで、記事の冒頭文の代わりにh2見出しをリスト表示するには、functions.phpに正規表現でh2を抽出するカスタム関数を追加し、the_excerptフィルターに適用します。
あとは、style.cssでリストの見た目を整え、GeneratePressでは get_the_excerpt フィルターも併用すると確実です。
Gutenbergで書いた記事にも対応しており、h2内にタグが含まれる場合はstrip_tagsで除去します。

1. 抜粋に見出しを表示する

WordPressのブログ一覧ページで表示される抜粋を、記事の冒頭文ではなく記事のh2をリストで表示させたいです。
GeneratePressを作っています。functions.php, styles.cssで解決したいです。

ブログの一覧ページでは、通常は記事の冒頭部分が抜粋として表示されます。
しかし、記事内の見出し（h2タグ）をリスト表示することで、読者は記事の内容を一目で把握できるようになります。

この機能を実現するには、主に次の2つのファイルを編集します。

functions.php – WordPressの動作をカスタマイズするファイル
style.css – 見た目を整えるためのスタイルシート

2. functions.phpの編集方法

まず、テーマのfunctions.phpファイルに以下のコードを追加します。このコードは記事内のh2タグを探し出し、それらをリスト形式で表示するものです。

// 抜粋の内容を記事内のh2タグのリストに置き換える
function custom_excerpt_with_h2_tags($excerpt) {
    global $post;
    
    // 記事本文を取得
    $content = $post->post_content;
    
    // h2タグを正規表現で抽出
    preg_match_all('/<h2.*?>(.*?)<\/h2>/', $content, $matches);
    
    // h2タグが見つかった場合
    if (!empty($matches[1])) {
        $h2_list = '<ul class="custom-h2-list">';
        foreach ($matches[1] as $h2) {
            $h2_list .= '<li>' . esc_html($h2) . '</li>';
        }
        $h2_list .= '</ul>';
        return $h2_list;
    }
    
    // h2タグが見つからない場合はデフォルトの抜粋を返す
    return $excerpt;
}

// 抜粋フィルターにカスタム関数を適用
add_filter('the_excerpt', 'custom_excerpt_with_h2_tags');
Code language: PHP (php)

このコードの仕組みは次のとおりです：

記事の本文から正規表現を使ってh2タグの中身を抽出します
抽出したh2タグの内容をリスト形式（ul, li）に変換します
h2タグが見つからない場合は、通常の抜粋をそのまま表示します

2.1. style.cssでのデザイン調整

次に、リスト表示をより見やすくするためにstyle.cssファイルにスタイルを追加します。

/* h2リストのスタイル調整 */
.custom-h2-list {
    list-style-type: disc;
    margin-left: 20px;
    padding: 10px 15px;
    background-color: #f9f9f9;
    border-left: 3px solid #4a89dc;
}

.custom-h2-list li {
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 8px;
    color: #333;
}

.custom-h2-list li:last-child {
    margin-bottom: 0;
}
Code language: CSS (css)

このCSSコードでは、リストに余白や背景色を設定し、左側に青いボーダーを追加しています。リスト項目にも適切な文字サイズや行間を設定して読みやすくしています。

3. 実践的なカスタマイズ例

より高度なカスタマイズとして、h2タグの内容にリンクを付けたい場合は、functions.phpを次のように変更できます。

function custom_excerpt_with_h2_links($excerpt) {
    global $post;
    $content = $post->post_content;
    
    // h2タグとそのID属性を抽出
    preg_match_all('/<h2.*?id=["\']([^"\']*)["\'].*?>(.*?)<\/h2>|<h2.*?>(.*?)<\/h2>/', $content, $matches, PREG_SET_ORDER);
    
    if (!empty($matches)) {
        $h2_list = '<ul class="custom-h2-list">';
        foreach ($matches as $match) {
            $id = !empty($match[1]) ? $match[1] : '';
            $text = !empty($match[2]) ? $match[2] : $match[3];
            
            // h2にIDがある場合はそのIDへリンク、なければ記事へリンク
            if ($id) {
                $h2_list .= '<li><a href="' . get_permalink($post->ID) . '#' . esc_attr($id) . '">' . esc_html($text) . '</a></li>';
            } else {
                $h2_list .= '<li><a href="' . get_permalink($post->ID) . '">' . esc_html($text) . '</a></li>';
            }
        }
        $h2_list .= '</ul>';
        return $h2_list;
    }
    
    return $excerpt;
}

add_filter('the_excerpt', 'custom_excerpt_with_h2_links');
Code language: PHP (php)

このコードでは、h2タグにID属性がある場合はそのIDへ直接ジャンプするリンクを作成し、ない場合は記事ページへのリンクを作成します。

h2タグが記事に含まれていない場合は、デフォルトの抜粋が表示されます
記事にh2タグが多すぎると、一覧ページが長くなりすぎる可能性があります
テーマのアップデート時にfunctions.phpの変更が上書きされないよう注意してください

4. まとめ

この方法で、ブログ一覧ページに記事の冒頭文ではなくh2見出しのリストを表示できます。これにより読者は記事の内容構成を一目で確認でき、興味のある記事を見つけやすくなります。h2見出しを適切に設定することで、一覧ページ自体の情報価値も高まるでしょう。