WordPressで目次(記事一覧ページ)を作る方法

今回はWordPressで目次(記事一覧)ページを作る方法、つまりサイトマップ作成ですね。

このブログでも目次ページは作っていますが、訪問者にどのような記事があるのか?という事を一覧で見せる事ができますし、ズラリと並んだ記事記事タイトルの横にアイコンを付ける事で読んでもらいたい記事に誘導するって事も可能です。例えばこんな感じ。
WordPressまとめページ 

という訳で今回は目次ページを作ってみましょう。

スポンサーリンク
アフィリエイトBパートナー募集

目次ページを作る前に

さて、これは私の場合ですが、WordPressで目次ページを作る時には普通の「投稿」ではなく、「固定ページ」として作成する事もあります。理由は固定ページはどのカテゴリーにも属さないから。

別に「投稿」でも問題はありませんが、投稿で作成してしまうと新しい記事を作成する度にどんどん埋もれていってしまいます。

それよりも目次ページ固定ページで作成してこれを「トップページに固定する」方法もあります。固定ページで作成してトップページに固定する方法までを今回は紹介していきます。

プラグインは使わない方がいい?

サイトマップ(記事一覧)を自動で取得して一覧表示するプラグインもあります。

確かに便利で簡単です、しかしながら、書いた記事がすべて自信作という訳ではありませんので、できればプラグインは使わずに読んでもらいたい記事だけをピックアップして目次を作成する事をおすすめします。

その方がPV(ページビュー)が増えますし、お気に入り登録やブックマークしてもらえる可能性が高いと思ってます。そう思いません?

手動で目次ページを作成する手順

目次ページを作る場合は箇条書きのタグ、リストタグというのを使いますので、ビジュアルエディタではなく、テキストエディタ(タグ編集)エディタで作ると失敗しないと思います。投稿画面で「テキスト」エディタを選択します。

目次-1

それで記事作成画面で目次作成用のタグを記入して行きます。

<ul>
<li><a href="#" target="_blank">記事1</a></li>
<li><a href="#" target="_blank">記事2</a></li>
<li><a href="#" target="_blank">記事3</a></li>
<li><a href="#" target="_blank">記事4</a></li>
<li><a href="#" target="_blank">記事5</a></li>
</ul>

こんな感じです。

目次-3

「#」の文字の所に、ボタンクリック時にジャンプするページのURLを(#を消して)書き込みます。それから「記事1」から「記事5」には、表示する文字(記事タイトル)を記入。一応5つ書いて見ましたが、同じように「li」と「/li」で囲んで追加してもOK、減らしても大丈夫です。

これが基本的な部分です。後は見出しタグで見出しを作っていきます。このTwentyTwelveの場合は記事タイトルが「h1」という見出しタグになってますので、記事内に使う見出しタグは「h2」や「h3」を使います。これは使っているテーマによって違いますので確認しておくといいでしょう。

こんな感じに使います。

<h2>サンプルの見出し</h2>
<ul>
<li><a href="#" target="_blank">記事1</a></li>
<li><a href="#" target="_blank">記事2</a></li>
<li><a href="#" target="_blank">記事3</a></li>
<li><a href="#" target="_blank">記事4</a></li>
<li><a href="#" target="_blank">記事5</a></li>
</ul>

するとこのように表示されます。

目次-2

見出しの装飾は以前の記事「WordPress見出しの使い方とカスタマイズ」を参考にして下さい。

このようにしてそれぞれ見出しと記事一覧を入れながら目次ページを作成できます。

作った目次ページをトップページに固定する方法

作成した目次ページをトップページに固定したい場合は次の手順で固定する事ができます。WordPressの管理画面から「設定」⇒「表示設定」をクリックします。

目次-4

ここ「フロントページの表示」という項目がありますので、「固定ページ」にチェックを入れてトップに表示したい固定ページを選択して下さい。固定ページを作成していない場合はこの項目は表示されません。

目次-5

選択したら一番下の「変更を保存」をクリックしたら完了です。トップページには先ほどしていたページが表示されているはずです。

アフィリエイトBパートナー募集
サイトのアクセスアップや稼ぐためにおすすめの無料レポート

個人的にアクセスアップや検索上位表示に役立った無料レポートです。登録にメールアドレスが必要ですが、フリーメールでもOKです。

おすすめの無料セミナー

これまでお金に関する勉強をした事がない方は稼ぐサイト作りの前にお金に関する無料セミナーに参加してみて下さい。お金をためたり増やしたりするためにお金の知識があるとかなり有利。考え方の土台になる部分ですからね。

「1万円から始められる節約の方法」「お金に働いてもらう方法」「収入の2割を自動的に貯める方法」など、お金に関する基本的な知識が学べる2時間の無料のセミナーが毎日のように行われてますので、一度参加してみる事をおすすめします。

これまで全くお金の勉強していない方であればお金の知識を身につける事で考え方が大きく変化するはずです。無料の2時間程度のセミナーですが、内容は濃いのでおすすめです。
お金に関する教養無料セミナー

WordPressで目次(記事一覧ページ)を作る方法”に11件のコメントがあります。

※入院生活から復活しました!!またできるだけ返信しますのでよろしくお願いします(^^)

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

  1. シン

    しげぞうさん。

    テキストでカテゴリーを自作するっていう方法思いつきませんでした。ありがとうございます。

    今僕はsimplicity2というテーマを使っています。

    また質問するかもしれませんがよろしくお願いします。

  2. しげぞう 投稿作成者

    シン様

    コメントありがとうございます。私のブログの場合は各カテゴリーの最新記事に目次ページを作成しています。カテゴリーの目次の場合は固定ページではなくて、普通の投稿で目次を作成して、それをカテゴリーの中で一番最新の日付にしてますので、カテゴリーをクリックすると目次ページが最初に表示されるような感じです。

    これは結構面倒な部分があって、記事を追加したらそのカテゴリーの目次ページを再度最新の日付にする必要がありますし、カテゴリーの最新記事だけ全文表示にするカスタマイズもしております。一応私の使っているテーマTwenty Twelveでの実装は記事にしてますが、他のテーマで使えるかどうかは検証はしてませんので、シン様のお使いのテーマを教えて頂けると助かります。

    WordPressでカテゴリーの最新記事だけ全文表示させる方法

    簡易的にするのであればもう1つ方法があります。先に各カテゴリーの目次ページを作成しておいて(固定ページでも投稿でもOK)サイドバーのウィジェットから「カテゴリー」を外します。

    それでサイドバーに新たに「テキスト」を追加して、タイトルに「カテゴリー」と入力。内容にはカテゴリーの目次ページへのリンクを羅列する方法です。こんな感じです。

    <ul>
    <li><a href="#" target="_blank">カテゴリー1</a></li>
    <li><a href="#" target="_blank">カテゴリー2</a></li>
    <li><a href="#" target="_blank">カテゴリー3</a></li>
    <li><a href="#" target="_blank">カテゴリー4</a></li>
    <li><a href="#" target="_blank">カテゴリー5</a></li>
    </ul>

    カテゴリー1~5にはそれぞれのカテゴリー名を入れて「#」の部分に飛び先URL(各カテゴリーの目次ページへのリンク)を設置するという方法です。

    要は本当のカテゴリーではなくて、カテゴリーの目次へ飛ばすリンクを設置する方法になります。

    普通のカテゴリーの場合は記事の一覧が表示されますが、上記の「簡易的なカテゴリー」の場合は表示されるのが目次ページ1ページだけになりますが、似たような感じにはなるかなと思います。

  3. シン

    しげぞうさん。はじめまして。

    現在、wordpressを使ってサイトを作っているのですがどうにかしてカテゴリーを目次付きの固定ページにリンクさせたいです。

    今の僕のサイトだと、カテゴリーを押した場合そのカテゴリーの記事が新しい順に出るのですがこのサイトのように目次ページにリンクする方法がわかりません。

    よろしくお願いします。

  4. LaLa

    先ほどコメントを送りました、LaLaです。
    URLの件、解決しました。一つだけ目次ページからURLに飛びませんが。。
    さっきは、本当に焦ってしまって、慌ててしげぞう様に質問してしまいましてお騒がせしました。
    今だに自分にとっての新しい試みはドキドキしながらやっています。また分からない事が出て来たら質問させてください。
    失礼しました。

  5. LaLa

    LaLaです。
    固定ページに目次を作っていたのですが、「#を消してURLを入れる」とありますが、投稿ページのURLですか?よくわからずにやっていたら、とび先が全部WordPressのログインページに飛ぶ様になってしまいまして、焦っています。
    どこに表示してあるURLを入れたらよかったのでしょうか?
    パーマリンクですか?

  6. 乃風

    しげぞうさんの仰る通りで、「普通の投稿」で作成していました。「あらららら・・・」と思いました。今度こそ、うまくいきました。ありがとうございました。

  7. しげぞう 投稿作成者

    乃風様

    コメントありがとうございます。目次ページは普通の投稿で作成したのではないでしょうか?フロントページに固定するのは「個別ページ」ではなく、「固定ページ」になると思いますので、WordPressの管理画面から「固定ページ」⇒「新規追加」で目次ページを作成するといいかもしれません。それだと目次が固定ページになりますので、フロントページに設定できるかと思います。

  8. 乃風

    いつもお世話になっております。

    手順通りに行って、「サンプルの見出し」を「記事1」から「記事7」まで作ったのですが、ここまではうまくいきました。その後の作業で、「作った目次ページをトップページに固定する方法」で、WordPressの管理画面から「設定」⇒「表示設定」をクリックしたのですが、「固定ページ」にチェックを入れました。ところが、その直ぐ下にある「フロントページ:」の右側に「-選択ー」もしくは「サンプルページ」しか表記されませんでした。つまり、「目次ページ」というのが出てこなかったのですが、何が問題だったのでしょうか?

  9. maboroshi

    >しげぞう様

    ありがとうございます。リンク等がいっぱいあるのでテキストエディタでやっていました。
    絵文字のプラグインを入れたからかなと思ってました。リンクや絵文字をいじっていると、空いてる感じです。

    「ul」「/ul」「li」「/li」が多かったりすればダメなんですね。エディタの切り換えもだめと。分かりました。一応今は、頑張って消して更新しました。解決できたかは分かりませんが、また解決できない場合に相談します(笑)_(_^_)_ 参考にさせていただきます。

  10. しげぞう 投稿作成者

    maboroshi様

    コメントありがとうございます。「ul」や「/ul」タグが間違って多かったり「li」や「/li」タグが間違って多かったりすると余計な行がでるというかちょっとずれる場合があるかも知れませんね。

    もしくは「ビジュアルエディタ」を利用していて、「Enter」で改行すると2行開きますので、ビジュアルエディタで編集している場合には「Shift」と「Enter」を一緒に押して改行して下さい。

    また、「テキストエディタ」と「ビジュアルエディタ」を切り替えたりするとタグが修正されてちょっと違う感じになる場合もありますのでその辺かもしれませんね。

    解決できない場合にはURLお願いします(笑)コメント公開時にはURLは削除しますね。

  11. maboroshi

    お忙しい中すいません。
    記事を追加していって、サイトマップ?記事一覧にも追加していってるんですけど、追加したり、リンクの方をいじって、更新すると一覧の記事の間が1行2行あいてます。それで、毎回行を消して消してってやってるんですが、これって何が原因なのでしょうか?

    コードの方もどんどん余計なものが多くなってきて、消して更新してるとまた間が空いて…って感じです。

    分かりずらい説明ですが、なにか分かりましたらよろしくお願いいたします。
    —————————————————————————–
    「URLが必要でしょうか、またなると思いますのでその際にと思っております」