WordPressで記事タイトルだけの一覧を表示する方法を解説。WPCodeプラグインを使って完成

WordPressのホーム画面は、初期状態だと「タイトル＋アイキャッチ画像＋本文の抜粋」がずらりと並ぶ形になっています。読み物としてはこれで良いのですが、記事数が増えてくると困ったことが起きます。

「あの記事、どこにあったっけ？」と探すのに、延々とスクロールする羽目になる。

サイトマップ的に「タイトルだけがずらっと並んだ一覧ページ」があれば、一目で全記事を見渡せます。この記事では、プラグインでコードを1つ登録するだけで、記事タイトルだけの一覧を、1ページ100件ずつ・ページ送り付きで表示する方法を解説します。専門知識は不要で、コピペで動きます。

この記事でできるようになること

記事タイトルだけが並んだシンプルな一覧ページを作れる
1ページ100件ずつ表示し、下部に「1 2 3 … 次へ」のページ送りが付く
通し番号（1, 2, 3…）が付くので、記事数が一目でわかる
固定ページでも、トップページでも設置できる
テーマを更新しても消えない

実際にこちらのリンクをごらんください

記事一覧

なぜテーマを直接編集しないのか

やり方を調べると「index.php を書き換えましょう」という解説をよく見かけます。しかしこの方法には落とし穴があります。テーマをアップデートすると、書いた内容が全部消えます。

そこで今回はショートコードという仕組みを使います。

記事がありません。

という短い呪文を記事に書くだけで一覧が表示される、という形にしておくのです。こうしておけばテーマから独立するので、テーマを変えても更新しても壊れません。

手順1：プラグイン「WPCode」を入れる

コードを安全に追加するためのプラグインです。直接 functions.php を編集すると、セミコロン1つの打ち間違いでサイトが真っ白になることがありますが、WPCodeならエラーを自動検知して止めてくれます。

管理画面の「プラグイン → 新規追加」を開く
検索欄に「WPCode」と入力
「Insert Headers and Footers + Custom Code Snippets — WPCode」をインストールして有効化

手順2：コードをスニペットとして登録する

左メニューの「Code Snippets → + Add Snippet」をクリック
「Add Your Custom Code (New Snippet)」の下にある「Use snippet」を選ぶ
タイトル欄に分かりやすい名前を入れる（例：タイトル一覧ショートコード）
右上の「コードタイプ」を「PHP スニペット」に変更する
コード欄に、下記のコードをそのまま貼り付ける

if ( ! function_exists( 'title_list_shortcode' ) ) {
    function title_list_shortcode( $atts ) {
        $atts = shortcode_atts( array(
            'per_page'  => 100,      // 1ページあたりの件数
            'post_type' => 'post',   // 投稿タイプ
            'order'     => 'DESC',   // DESC=新しい順 / ASC=古い順
            'orderby'   => 'date',
        ), $atts, 'title_list' );

        $per_page = max( 1, intval( $atts['per_page'] ) );

        // ページ番号は ?tlpage=2 のようなパラメータで管理（固定ページでも404にならない）
        $paged = isset( $_GET['tlpage'] ) ? max( 1, intval( $_GET['tlpage'] ) ) : 1;

        $q = new WP_Query( array(
            'post_type'           => $atts['post_type'],
            'posts_per_page'      => $per_page,
            'paged'               => $paged,
            'orderby'             => $atts['orderby'],
            'order'               => $atts['order'],
            'ignore_sticky_posts' => true,
        ) );

        if ( ! $q->have_posts() ) {
            wp_reset_postdata();
            return '<p>記事がありません。</p>';
        }

        $start = ( $paged - 1 ) * $per_page + 1; // 通し番号の開始値
        $out   = '<ol class="title-list" start="' . $start . '">';
        while ( $q->have_posts() ) {
            $q->the_post();
            $out .= '<li><a href="' . esc_url( get_permalink() ) . '">'
                  . esc_html( get_the_title() ) . '</a></li>';
        }
        $out .= '</ol>';

        // ページ送り
        if ( $q->max_num_pages > 1 ) {
            $out .= '<nav class="title-list-nav">';
            $out .= paginate_links( array(
                'base'      => esc_url_raw( add_query_arg( 'tlpage', '%#%' ) ),
                'format'    => '',
                'current'   => $paged,
                'total'     => $q->max_num_pages,
                'prev_text' => '« 前へ',
                'next_text' => '次へ »',
                'type'      => 'list',
            ) );
            $out .= '</nav>';
        }

        wp_reset_postdata();
        return $out;
    }
    add_shortcode( 'title_list', 'title_list_shortcode' );
}

ここが一番のつまずきポイント：「場所」の設定

コードを貼ったら、下にスクロールして「挿入」というセクションを開きます。

挿入方法：「自動挿入」を選ぶ
場所：初期値は「サイト全体のヘッダー」になっています。これを「どこでも実行（Run Everywhere）」に必ず変更してください

ここを直さないと、ショートコードが登録されず、いつまで経っても動きません。筆者もここで一度つまずきました。最後に、右上のトグルを「無効」から「有効」に切り替え、「更新」ボタンを押します。

手順3：固定ページに設置する

「固定ページ → 新規追加」でページを作る
タイトルを「記事一覧」などにする
本文に次の1行を書くだけ

[title_list]

これで公開すれば完成です。実際にページを開いて、タイトルがずらっと並んでいれば成功です。

カスタマイズ：件数や並び順を変える

ショートコードにオプションを付けるだけで、挙動を変えられます。

書き方	効果
`記事がありません。`	新しい順に100件ずつ（デフォルト）
麻雀イカサマ　元禄積み（オール伏せ牌＆大三元）ボーカロイドの最新人気ランキングを知りたければこれ！ニコニコ生放送月間VOCALOIDランキング COUNTDOWN 100。ランキングのうｐ先などのリストを公開しているところがあるぞ。１６ｃｈロジックアナライザ全自動麻雀卓”雀豪”のメカニズム動画全自動麻雀卓　”雀豪”　メンテナンス動画回路設計ＣＡＤ電子工作初心者がarduinoというユニットを使ってパチスロのコイン不要機を作ってみた型取りセットと樹脂ポチッたったｗ LCDの動作とライブラリ”shiftreglcd” audiuno と LCD とシフトレジスタ（74HC595) LCD動画うｐしてみた arduinoで４桁７セグＬＥＤカウンター arduinoのボタンを押すとカウントする « 前へ 1 2	50件ずつ表示
`記事がありません。`	古い記事から順に表示
`記事がありません。`	タイトルの五十音・アルファベット順
`記事がありません。`	投稿ではなく固定ページの一覧

複数の指定を組み合わせることもできます。

[title_list per_page="50" order="ASC"]

見た目を整えるCSS

そのままでもリストとして表示されますが、行間やページ送りのボタンを整えると格段に読みやすくなります。「外観 → カスタマイズ → 追加CSS」に貼り付けてください。

.title-list { line-height: 1.9; padding-left: 2.2em; }
.title-list li { margin: .2em 0; }

.title-list-nav ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .4em;
    padding: 1em 0;
}
.title-list-nav a,
.title-list-nav span {
    display: inline-block;
    padding: .3em .7em;
    border: 1px solid #ccc;
    border-radius: 4px;
    text-decoration: none;
}
.title-list-nav .current span {
    background: #333;
    color: #fff;
    border-color: #333;
}

応用：トップページを丸ごとタイトル一覧にする

「抜粋やサムネイルはいらない。ホームは純粋なタイトル一覧にしたい」という場合は、次の設定を行います。

上記の手順で固定ページ（例：「記事一覧」）を作っておく
「設定 → 表示設定」を開く
「ホームページの表示」で「固定ページ」を選択
「ホームページ」に、作った固定ページを指定
「変更を保存」をクリック

これでトップページがタイトル一覧に切り替わります。

トラブルシューティング

エラー：Cannot redeclare title_list_shortcode()

Cannot redeclare title_list_shortcode() (previously declared in ...)

これは「同じ関数が2回定義されている」という意味です。原因はほぼ次のどれかです。

WPCodeに同じスニペットを2つ作ってしまった
コード欄に同じコードを2回貼り付けてしまった
WPCodeと functions.php の両方に貼ってしまった

「Code Snippets」の一覧を開き、重複しているスニペットを削除してください。コード欄を最下部までスクロールし、同じ内容が2回続いていないかも確認しましょう。なお、上で紹介したコードは全体を if ( ! function_exists( ... ) ) で囲んであるため、万一重複してもこのエラーで停止しません。ただし重複そのものは管理が混乱するので、必ず片方を消しておきましょう。

ショートコードがそのまま文字で表示される