Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPressでカスタムアーカイブページを作成する方法

編集メモ: WPBeginner のパートナーリンクから手数料を得ています。手数料は編集者の意見や評価に影響を与えません。編集プロセスについて詳しく知る。

WordPressでカスタムアーカイブページを作成することで、サイトのナビゲーションとコンテンツの発見性を大幅に向上させることができます。

WPBeginnerでは、読者がブログ投稿やチュートリアルの膨大なコレクションに簡単にアクセスできるように、独自のカスタムアーカイブページを実装しました。

優れたデザインのアーカイブページは、ユーザーエクスペリエンスを向上させ、エンゲージメントを高め、明確なサイト構造をプロバイダーすることでSEOにも役立ちます。コンテンツが豊富なサイトやブログ、オンラインマガジンなど、訪問者が特定のトピックを掘り下げたがるような場合に便利です。

この投稿では、WordPressでカスタム・アーカイブ・ページを作成する方法を紹介する。

How to create a custom archives page in WordPress

WordPressでカスタムアーカイブページを作成する理由

アーカイブページは、過去の投稿を時系列で表示することで、訪問者が投稿日に基づいてコンテンツを探索しやすくすることを目的としています。

ブロガーなら、アーカイブページを持つことは必須だ。ユーザーがブログ全体をスクロールすることなく過去の投稿にアクセスできる便利な方法を提供します。

現在のテーマにアーカイブページテンプレートがない場合、カスタマイザーでアーカイブページを作成することができます。たとえそうだとしても、あなたのニーズに合わせてカスタマイズしたいかもしれません。

WPBeginnerでは、ユーザーをWPBeginnerガイドコレクションに導くボタンを備えたカスタムアーカイブページを使用しています。こうすることで、新規読者はそれをクリックするだけで、私たちの究極のガイドリソースを見ることができます。

また、読者が特定の期間にどのような記事が公開されたかを簡単に確認できるように、ブログの投稿をすべて年や月ごとに整理しています。

The WPBeginner custom archive

ここでは、カスタムアーカイブページにサイトのカテゴリーとタグも追加しています。

こうすることで、訪問者は興味のありそうな過去の投稿を簡単に見つけることができる。自分のブログでもこのようにすれば、ページビューを増やし、直帰率を下げるチャンスが増えるだろう。

The WPBeginner custom archive

このことを念頭に置いて、WordPressでカスタムアーカイブページを作成する方法を見てみましょう。

以下のクイックリンクから、使いたい方法に直接ジャンプできます。

方法1:ブロックエディターを使ってカスタムアーカイブテンプレートを作成する(プラグインなし)

ブロックテーマを使用している場合は、フルサイトエディターでカスタムアーカイブページテンプレートを簡単にデザインできます。

この方法はすべてのテーマで機能するわけではないので、ブロックベースのWordPressテーマを使用していない場合は、代わりにページビルダーを使用することをお勧めします。

まず、新規ページを作成するか、アーカイブとして使用したい既存のページを開きます。右側のメニューで「ページ」タブをクリックし、「テンプレート」の隣にあるリンクを選択してください。正確なリンクテキストは、現在使用しているテンプレートによって異なる場合があります。

How to create a new custom archives template

現在のテンプレートがポップアップで表示されます。

新規テンプレート」アイコンをクリックしてください。

Creating a custom archives template

ポップアップで、カスタムページテンプレートの名前を入力します。テンプレート名は参考用ですので、お好きなものをお使いください。

次に、’Create’をクリックしてテンプレートエディターを起動する。

Naming a WordPress custom archive template

テンプレートエディターは、WordPressの標準ブロックエディターと同様に機能します。

カスタムアーカイブページにブロックを追加するには、青い「+」ボタンをクリックするだけです。あとはドラッグ&ドロップでブロックをレイアウトに追加できます。

Adding blocks to the full site editor

カスタムアーカイブページを作成するので、通常アーカイブブロックを追加することから始めます。このWordPressブロックは、訪問者が年、月、週、日に基づいて投稿を探索することができます。

例えば、次の画像は投稿が月ごとのアーカイブに整理されているアーカイブブロックを示しています。

How to add an archives block to a custom template

これらのリンクをクリックすると、その期間に公開されたすべての投稿を表示する新しいページに移動します。

アーカイブブロックを追加するには、左側のメニューからブロックを探し、レイアウト上にドラッグするだけです。ブロックを追加したら、右側のメニューでブロックの設定を見てください。

Configuring the archives WordPress block

手始めに、「Group by」ドロップダウンを開き、リストから設定を選択することで、投稿の整理方法を変更することができます。

例えば、投稿数が少ない場合は、日別に表示するのが合理的でしょう。

しかし、コンテンツがたくさんある場合は、長いリストで訪問者を圧倒しないように、「月」や「年」を選択するのが一般的です。

Grouping archived posts by date

WordPressは初期設定でアーカイブ投稿を箇条書きリストで表示しますが、ドロップダウンメニューとして表示することもできます。

これは、スペースが非常に小さく、コンパクトなアーカイブを作成する必要がある場合に便利です。ドロップダウン形式に切り替えるには、「ドロップダウンとして表示」スライダーをクリックして有効化するだけです。

Displaying posts as a dropdown menu

アーカイブブロックでは、各見出しの次の投稿数の合計を表示することもできます。

これは、訪問者がアーカイブのどの部分を最初に見たいかを決めるのに役立つ。

Creating a custom archive page in WordPress

また、カテゴリーアーカイブを追加することで、訪問者が投稿日だけでなく投稿コンテンツに基づいて投稿を探せるようにすることもできます。こうすることで、訪問者が興味深いコンテンツを見つけやすくなり、サイトに長く滞在してもらい、WordPressのSEOを向上させることができます。

このブロックを追加するには、青い「+」ボタンをクリックし、「カテゴリーリスト」とタイプするだけです。適切なブロックが表示されたら、ドラッグ&ドロップでレイアウトに追加します。

Adding a Categories List to a custom archives page

もう一度、ブロックの設定に変更を加えたいかもしれない。

アーカイブブロックと同様に、投稿数をリストに追加したり、カテゴリーを箇条書きリストではなくドロップダウンメニューとして表示することができます。

初期設定では、このブロックはすべてのカテゴリーとサブカテゴリーをまったく同じように表示する。

A list of categories and subcategories on a custom archives page

子カテゴリーを親の下にインデントして表示する方がいいかもしれない。

この変更を行うには、クリックして「階層を表示」トグルを有効化するだけです。

Showing indented subcategories on a custom WordPress archive

もう一つのオプションは、’Show only top level categories’トグルを有効化して、子カテゴリーを完全に非表示にすることである。

また、タグクラウドを追加することで、訪問者が興味深い関連コンテンツを見つけやすくなります。これを行うには、左側のメニューで「タグクラウド」を見つけ、レイアウトにドラッグするだけです。

Adding a tag cloud to the archive page

これでブロックを選択し、右側のメニューにある設定を使って設定することができます。

タグクラウドには2つのスタイルがあります:初期設定とアウトラインです。小さな丸いアイコンをクリックし、「スタイル」の下にあるオプションのいずれかを選択することで、これらを切り替えることができます。

Adding a tag cloud to a custom archives page

また、各タグの次の投稿の総数を表示したり、クラウドに含まれるタグの数を変更することもできます。

小さな歯車のアイコンをクリックし、このセクションで変更を加えます。

Changing the tag cloud settings

この名前にもかかわらず、タグクラウドにカテゴリーを表示することもできます。例えば、カテゴリーブロックよりもタグクラウドブロックの方がスタイリングが好みかもしれません。

代わりにサイトのカテゴリーを表示するには、「タクソノミー」ドロップダウンを開き、「カテゴリー」を選択するだけです。

Showing categories in a tag cloud

アーカイブは、訪問者がすべてのコンテンツに簡単にアクセスできるように設計されています。

しかし、「最新の投稿」ブロックを追加することで、サイトの最新の投稿を強調することもできます。

Showing a list of latest posts

初期設定では、このブロックは各投稿のタイトルを表示するだけですが、投稿者、公開日、アイキャッチ画像を追加することができます。

右側のメニューにあるトグルを使って変更する。

Showing your most recent posts on the archive page

また、投稿の抜粋を表示することで、訪問者が各投稿の内容を理解しやすくなります。

抜粋を追加するには、「投稿コンテンツ」トグルをクリックして有効化する。

How to show post content and excerpts on the custom archive page

その後、「抜粋」ボタンをクリックして選択する。

初期設定では、WordPressは抜粋に最大55語を表示します。より多くの単語を表示したり、より少ない単語を表示したりするには、単に「抜粋の最大単語数」の設定を使用します。

そうしたら、「ソートとフィルター」セクションまでスクロールする。

ここでは、ブロックが投稿を新しいものから古いものへと整理していることがわかります。Order’ ドロップダウンを開き、’A-Z’ などの別の設定を選ぶことで変更できます。

Organizing the latest posts on your WordPress archive page

このセクションでは、特定の投稿者やカテゴリーからの投稿を表示することもできます。

最後に、WordPressがブロックに表示する投稿数を変更するには、「項目数」セクションに新しい数字を入力するか、スライダーをドラッグします。

Changing the order of your latest posts

さらにブロックを追加し、右側のメニューで設定することで、アーカイブページの作業を続けることができます。

例えば、画像ブロックを追加してカスタムロゴを表示したり、検索バーを追加して訪問者が特定の投稿を探せるようにすることもできます。

テンプレートの見た目に満足したら、「公開する」ボタンをクリックし、「保存する」ボタンをクリックします。

先ほど作成したページは新しいアーカイブテンプレートを使用しています。ページを更新または公開し、WordPress サイトにアクセスしてカスタマイザーアーカイブページを見ることができます。

WordPressフルサイトエディターの使い方については、以下のガイドをご覧ください:

ブロックベースのエディターを使えば、シンプルなカスタムアーカイブページを作成できます。しかし、すべてのテーマで動作するわけではなく、WordPressビルトインブロックとツールに制限されます。

どのWordPressテーマでも動作する完全カスタマイザーのアーカイブページを作成したい場合は、代わりにページビルダーの使用をお勧めします。

SeedProdはWordPressのための最高のドラッグアンドドロップページビルダーです。サイトの投稿をすべて表示するブロックを含む、180以上のテンプレートと既製のブロックが付属しています。

まず、SeedProdをインストールして有効化する必要があります。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。

注: SeedProdには無料版もあり、予算が限られていて始めたばかりの方でもカスタマイザーページを作成することができます。しかし、このガイドでは、より多くのテンプレートとブロックがあるSeedProd Proを使用します。

プラグインを有効化した後、SeedProdはライセンスキーを要求します。

Adding the SeedProd license key

この情報は、SeedProdサイトの自分のアカウントの下にあります。キーを入力した後、「Verify Key」ボタンをクリックしてください。

それができたら、SeedProd ” ランディングページに行き、’新規ランディングページを追加’ボタンをクリックしてください。

Creating a new SeedProd page

カスタムアーカイブページのテンプレートを選択できるようになりました。

SeedProdのテンプレートは、リードスクイーズ、メンテナンスモード近日公開などのキャンペーンタイプ別に整理されています。画面上部のタブをクリックすると、キャンペーンタイプに基づいてデザインをフィルターすることができます。

SeedProd's professionally-designed templates

デザインをプレビューするには、そのテンプレートにマウスオーバーするだけです。

そして、外観の虫眼鏡アイコンをクリックする。

Previewing a SeedProd template

気に入ったデザインが見つかったら、「このテンプレートを選択」をクリックします。ここでは、まっさらな状態から始められるように「Blank Template」を使用していますが、お好きなテンプレートを使用することができます。

次に、カスタムページの名前を入力します。SeedProdはページのタイトルに基づいて自動的にURLを作成しますが、必要であればこのURLを変更することができます。

入力した情報に問題がなければ、「保存してページの編集を開始する」ボタンをクリックします。

How to create a custom archive using SeedProd

これはSeedProdページビルダーのインターフェースを読み込みます。これはシンプルなドラッグアンドドロップビルダーで、右側にページのライブプレビューが表示されます。

左側にはブロックの設定も表示されます。

How to create a custom archive using SeedProd

まず始めに、コンテンツをカラムにまとめるレイアウトを選ぶ必要がある。

レイアウトの選択」では、使用したいレイアウトをクリックするだけです。どのレイアウトを選択しても構いませんが、私たちはすべてフルスクリーンレイアウトを使用しています。

Choosing a layout for your custom archive page

レイアウトを選んだら、アーカイブページにブロックを追加していきます。

左側のメニューには、デザインにドラッグできるさまざまなブロックがすべて表示されています。今回はカスタムアーカイブページを作成するので、投稿ブロックを追加します。

左側のメニューで、検索バーに「投稿」と入力する。右のブロックが表示されたら、レイアウトにドラッグ&ドロップします。

Adding a 'Posts' block to a custom page using SeedProd

このブロックはすべての投稿のタイトルを表示します。

また、「Continue Reading」リンクがあり、訪問者がクリックすると各投稿の全文を読むことができる。

How to add posts to a custom archive page in WordPress

初期設定では、このブロックはすべての投稿を表示しますが、特定のカテゴリーやタグを持つ投稿、または特定の投稿者が公開した投稿のみを表示するように変更することができます。

この変更を行うには、レイアウトの「投稿」ブロックをクリックして選択し、左側のメニューの設定を使用するだけです。

例えば、以下の画像では「マーケティング」カテゴリーからの投稿のみを表示しています。

Filtering your archive posts based on category

また、投稿のカテゴリーを変更することもできます。例えば、投稿が公開された日やコメント数に基づいて投稿を表示することができます。

投稿の順序を変更するには、’Order By’ボックスまでスクロールし、新しい設定を選択するだけです。初期設定では、SeedProdは「ASC」(昇順)で投稿を表示します。

投稿を降順に並べるには、「Order」ドロップダウンを開き、「DESC」を選択します。

Showing posts in descending order

その後、「レイアウト」セクションまでスクロールし、投稿リストの表示方法を変更することができる。

例えば、「カラム」フィールドに新しい数字を入力することで、投稿を複数のカラムに分割することができます。

Creating a multiple column archive page

また、リストに含まれる投稿の数を変更したり、投稿の抜粋を追加または非表示にしたり、「Continue Reading」のテキストを変更したりすることもできます。

投稿リストの見栄えに満足したら、アーカイブページにさらにブロックを追加し、左メニューの設定を使ってそれらのブロックをカスタマイズすることができます。

例えば、「ソーシャル・プロフィール」ブロックを追加することで、ソーシャル・メディアであなたをフォローするよう促したいかもしれない。

Adding social profiles to a custom page

ページの設定に満足したら、「保存」の隣にあるドロップダウンの矢印をクリックして、「公開する」を選択します。

カスタムページがWordPressブログのフロントエンドで公開されます。

Publishing your SeedProd custom archive page

訪問者がアーカイブページを見つけやすいように、ナビゲーションメニューやサイトのフッターに追加するとよいでしょう。

WordPressの投稿を整理するさらに詳しい方法

カスタムアーカイブページの作成は、WordPressのコンテンツを整理する一つの方法に過ぎません。ここでは、読者がより効果的にあなたの投稿を発見し、ナビゲートするための追加の方法をいくつか紹介します:

この投稿がWordPressでカスタムアーカイブページを作成するのにお役に立てば幸いです。また、WordPressで 最高の 関連投稿プラグインをピックアップした記事や、最高のカミングスーンページの例に関する投稿日:もお読みください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

80件のコメント返信を残す

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Martin says

    Great article.

    I have maybe a silly question. Is there any SEO benefit if I have a custom archive page or even archive.php. in the theme folder?

    Or is it the same as creating a new page with url mydomain/archive and listing all my posts and pages based on the categories I want. This is what I would prefer.

    Thank you

    • WPBeginner Support says

      Having a custom archive would not give an SEO benefit, it would be personal preference and you can use your second method if you wanted.

      管理者

  3. Aileen says

    Hi–my site is using the Genesis framework an it has a child theme. I tried to implement the page-archive.php, but I skipped the part where I copy the page design from page.php and I’d hope it would work regardless.
    So when I tried implementing this, when I go to my Archive place, it gives an Internal error, ie. 505 and cannot find the page itself.
    How does this work with Genesis?

    • WPBeginner Support says

      Adding a custom page template would be the same as with any other theme, it seems like there may be a problem with the code you’re using to create the archive page.

      管理者

  4. Rahul Lakra says

    Firstly, Thank you so much. But I can’t see any sidebar in this page. In normal pages it is visible. I will be so happy if you can help me out to display sidebar here too. Thanks In advance!

    • WPBeginner Support says

      For the sidebar, sadly that is theme specific for what needs to be added, if you reach out to your theme’s support they should be able to let you know how they have the sidebars added to the templates.

      管理者

  5. Vijay Sundaram says

    Hi,

    This was a great tutorial. However, the CSS code for the categories does not seem to work. It is shown as a list with categories and subcategories. Where do I embed the code that you have given in the style.css file? What is meant by make it appear inline? It would be great if you could help me resolve this?
    Regards,
    Vijay Sundaram

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。