WordPress

トップページにカテゴリ一別の一覧を作成する方法

投稿日:

WordPressでブログやサイトを作りたい時にトップページをジャンル別(カテゴリ)の一覧でまとめる方法です。

ステ子
闇雲に記事を羅列するよりも関連する記事だけの一覧にまとめることでぐっと読みやすく、見つけやすいトップページが作れるわよ

※当記事はWordPressテーマ「WING(AFFINGER5及びSTINGER PRO2)」を元に説明しています

トップページにカテゴリ一別の一覧を表示する方法

step
1
トップページにコンテンツを挿入する

トップページにコンテンツを挿入する方法は2つあります

①「テーマ管理」>②「トップページ」にて

  1. ③「トップページに固定記事を挿入」する方法
  2. ④「挿入コンテンツ」で直接コンテンツを挿入する方法

です。

メモ

WordPressの表示設定で直接固定ページを「ホームページ」にする方法もあります

step
2
カテゴリ一覧を作成する

上記のどちらかの方法でコンテンツを作成していきます。

カテゴリ一覧は「カテゴリ一覧ショートコード」で簡単に作成できます。

クイックボタンで選ぶだけ

挿入されるショートコードの内容は以下のとおりです。

[st-catgroup cat="0" page="5" order="desc" orderby="id" child="on" slide="off" slides_to_show="3,3,2" slide_date="" slide_more="ReadMore"]

意味は以下のようになり、自由に変更できます。

[st-catgroup cat="表示したいカテゴリID" page="表示したいページ数" order="降順、昇順の指定" orderby="並び方法" child="子カテゴリーの表示の有無" slide="スライドショー化の有無" slides_to_show="スライドショー表示時の列数" slide_date="日付表示の有無" slide_more="続きを読む"]

表示したいカテゴリIDについて

表示したいカテゴリIDは「投稿」>「カテゴリー」の一覧「ID」で確認できます。

複数のカテゴリを表示したい場合は「2,5,8」と半角カンマ(,)で区切ります。反対に表示したくないカテゴリがある場合は「2,-5」とカテゴリIDにマイナスを付けることで除外できます。

スライドショーで表示する

お知らせ バージョンアップ

2019/4/10

WING ver20190410アップデートのお知らせ

新プラグイン「カスタム検索プラグイン」に対応したWING ver20190410を購入ユーザー会員ページにUP致しました。 最新版アップデートの方法はコチラ WING ver20190410アップデート内容 新プラグイン「カスタム検索プラグイン」への対応 https://on-store.net/custom_search/ 新しく発売したカスタム検索プラグインに対応する修正を行いました。 2019/4/17まで3,980円が2,980円の早割キャンペーン中です。 検索結果ページ用ウィジェット ウィジェッ ...

ReadMore

お知らせ プラグイン

2019/4/10

シンプルでパワフルな「カスタム検索プラグイン」発売しました

【特別料金】2019/4/17まで3,980円→2,980円の早割価格で販売中です 「カスタム検索プラグイン」は通常のテキスト検索に加えて「カテゴリ」「タグ」による絞込検索フォームを作成、設置できるプラグインです。 カスタム検索プラグインについて カテゴリー階層に対応 カテゴリの検索フォームは「2パターン」 1つは全てを表示するタイプ、もう1つはカテゴリを階層化することで親カテゴリを見出しにするタイプです(※2階層まで)。 実際には以下のようになります。 親カテゴリが見出しに 検索フォームに表示したくない ...

ReadMore

お知らせ バージョンアップ

2019/3/18

アイキャッチ画像スライドショー、枠のみ会話ふきだしデザインなど ~ WING ver20190314アップデートのお知らせ

アイキャッチ画像スライドショー、枠のみ会話ふきだしデザイン機能などを追加したWING ver20190314を購入ユーザー会員ページにUP致しました。 ※今回のアップデートにてテーマ管理のメニューにあった「TOPに戻るボタンを非表示にする」項目がカスタマイザー(オプション>TOPに戻るボタン)に変更になりました。 最新版アップデートの方法はコチラ β版の為、サーバー更新及び販売中のものには当機能は反映されておりません。購入後、別途ダウンロードして下さい [追記] ver20190314として正式公開致しま ...

ReadMore

WING お知らせ バージョンアップ

2019/3/7

スクロールナビ・追いかけるボタンなど ~ WING ver20190304アップデートのお知らせ

いくつかの機能を追加したWING ver20190304を購入ユーザー会員ページにUP致しました。 最新版アップデートの方法はコチラ [追記] ver20190304を正式に販売版及びサーバー更新に対応させました WING ver20190304βの主な変更内容 注意 今回のアップデート「プロフィールカードのアバターの影」「サムネイル画像を大きくするのスマホ閲覧時の選択」にてデフォルトの仕様が変更になります。必ずご確認下さい。 アップデートで「ボタン(タグ)」が表示されない場合はコチラ AFFINGER及 ...

ReadMore

WING お知らせ カスタマイズ紹介

2019/2/27

【祝!】A8サイトコンテスト2018~AFFINGER&STINGER受賞作品一覧

A8サイトコンテスト2018が発表されました。受賞された方、本当におめでとうございます! A8サイトコンテスト2018結果発表 受賞された中でもAFFINGER又はSTINGERを多数ご利用頂いておりました(15作品ほど)ので紹介したいと思います。 A8コンテストの総合トップ3のうち2つがAFFINGERを使用。 1位:猫ねこ部https://t.co/xbpQDA6SNE 3位:フォトブックずかんhttps://t.co/pFEQhmma3k 今回は各部門賞でもメッチャAFFINGERが入賞してるね。 ...

ReadMore

カテゴリ一覧ショートコードの「slide="off"」を「slide="on"」とするだけでスライドショーにすることも可能です。

ENJI
スライドショーにすることでスマートフォンの閲覧スペースを有効に使ったり、「お客様の声」など同じようなニーズの記事をまとめることで効果的な訴求もできます

step
3
全体を仕上げる

サンプルサイト

記事一覧ごとに「見出し」をつけながら一覧を作成していきます。

各一覧ごとに「一覧へのリンク」を作成してあげればさらにユーザビリティも回遊率もUPするのでおすすめです。

ボタンについて

クイックボタンには様々な種類のボタンを予め用意しています。

ボタンはリンク先はもちろん、「カラー(グラデーションOK)」「アイコン」「丸み具合」「テキスト」「光る演出の有無」などが自由にカスタマイズ可能です。

好きなのを選ぶだけ

もっと見る

もっと詳しく

まとめ

まとめると

  1. トップページにコンテンツを挿入する用意
  2. 挿入コンテンツに任意のカテゴリ一覧ショートコードを挿入
  3. 必要なカテゴリの数だけ作成

以上となります。

カテゴリ一覧はそれだけ記事を読み込む処理が必要となるので表示数を増やしすぎると処理に時間がかかる場合があります。必要に応じて適度に使用しましょう。

※当記事はWordPressテーマ「WING(AFFINGER5及びSTINGER PRO2)」を元に説明しています
※キャプチャは開発中の為、実際とは一部異なる場合がございます。

広告が溶け込む魔法の子テーマ「JET」

大人気!

詳しく見る

便利プラグイン情報

お知らせ プラグイン

2019/4/10

シンプルでパワフルな「カスタム検索プラグイン」発売しました

【特別料金】2019/4/17まで3,980円→2,980円の早割価格で販売中です 「カスタム検索プラグイン」は通常のテキスト検索に加えて「カテゴリ」「タグ」による絞込検索フォームを作成、設置できるプラグインです。 カスタム検索プラグインについて カテゴリー階層に対応 カテゴリの検索フォームは「2パターン」 1つは全てを表示するタイプ、もう1つはカテゴリを階層化することで親カテゴリを見出しにするタイプです(※2階層まで)。 実際には以下のようになります。 親カテゴリが見出しに 検索フォームに表示したくない ...

ReadMore

お知らせ バージョンアップ プラグイン

2019/2/8

ステ子[PRO] ver20190130βアップデートのお知らせ

タグによる「囲み」機能を追加したver20190130βを「ステ子購入ユーザー限定ページ」にUP致しました。 ※β版の為、販売中のプラグインは未対応です。ご購入後、テキスト内記載の案内を確認の上で「ステ子購入ユーザー限定ページ」よりダウンロードして下さい。(購入版もアップデートしました) ステ子[PRO] ver20190130β 「囲み」機能について タグによる「囲み」機能を追加しました。 「有効化」にチェックを入れるとこちらが優先されます。 ※β版の為、機能は変更または削除される場合もございます。 ア ...

ReadMore

お知らせ バージョンアップ プラグイン

2019/1/31

かんたん便利「置換くん」ver20190130βアップデートのお知らせ

Gutenbergでの動作に対応したver20190130βを「購入ユーザー限定ページ」にUP致しました。 ※β版の為、販売中のプラグインは未対応です。ご購入後、テキスト内記載の案内を確認の上で「購入ユーザー限定ページ」よりダウンロードして下さい。 ※WordPressテーマ「WING」は原則としてはGutenbergに未対応です。(Gutenberg対応状況について) かんたん便利「置換くん」ver20190130β ※β版の為、機能は変更または削除される場合もございます。 Gutenbergへの対応 ...

ReadMore

お知らせ バージョンアップ プラグイン

2019/1/31

記事バックアップ「安心くん」ver20190130βアップデートのお知らせ

Gutenbergでの動作及びサーバへの保存に対応したver20190130βを「購入ユーザー限定ページ」にUP致しました。 ※β版の為、販売中のプラグインは未対応です。ご購入後、テキスト内記載の案内を確認の上で「購入ユーザー限定ページ」よりダウンロードして下さい。 ※WordPressテーマ「WING」は原則としてはGutenbergに未対応です。(Gutenberg対応状況について) 記事バックアップ「安心くん」ver20190130β ※β版の為、機能は変更または削除される場合もございます。 Gut ...

ReadMore

WING お知らせ プラグイン

2018/12/8

【2019/1/10迄】新プラグインリリースにつき特別価格中!

【期間限定】特別割引のお知らせ(2019/1/10まで) 「AFFINGERタグ管理マネージャー3」及び「PVモニター」を2019/1/10まで期間限定の割引価格で販売致します。 またすでに「STINGERタグ管理マネージャー2」購入済みのユーザー様に向けて優待価格もご用意致しました。 商品名 定価 特別価格(~2019/1/10) EX版アップデート 12,000円 10,000円 AFFINGERタグ管理マネージャー3 21,800円 19,800円(販売ぺ―ジ) AFFINGERタグ管理マネージャー ...

ReadMore

WING WordPress プラグイン

2018/6/16

外部URLのコピペでブログカードをサムネイル付きで表示するWordPressプラグイン

URLを指定するだけでブログカード風のリンクにします。 外部のサイトも自動スクリーンショットによりサムネイル表示が可能です。 【サンプル例】 プラグインの使い方と注意事項 インストール ダウンロードした「st_card_url_file.zip」を一度だけ解凍して、中の「st-card-ex.zip」をZipファイルのままWordPressの「プラグイン」>「新規追加」よりアップロードして有効化して下さい。 テーマ設定 プラグインを有効化するとエディタに新しく「カードURL」というボタンが追加されます 任 ...

ReadMore

WING WordPress プラグイン

2018/6/16

投稿ごとに記事をバックアップ(エクスポート)できるWordPressプラグイン

シカ子あ~!前の文章の方が良かった!! ブログやアフィリエイトで反応(CVR)を見ていると、そう思うことは少なくないのではないでしょうか? ユーザーに行動を起こさせる文章はほんの少しの言い回しの変化で良くも悪くも大きく効果が変わります。そんな時に絶対に必要なのが「バックアップ」。いつでも簡単に1クリックでそれを行うことができたら、しかも「年月、時間、記事タイトル-サイト名」としてテキストファイルを残せたら凄く便利ではないでしょうか? 記事バックアップ「安心くん」はそんな想いから生まれました。 いつでも、ど ...

ReadMore

WING WordPress プラグイン

2018/6/16

記事(コンテンツ)内容を一括で置換するWordPressプラグイン

投稿画面のテキストモードの記事内容を一括置換します。gu検索フラグの正規表現にも対応。 例えばアップデートで挿入されるようになったTinyMCEAdvancedの不要なtableタグも簡単に削除でき便利です。 プラグインの使い方と注意事項 インストール ダウンロードした「st_replace_file.zip」を一度だけ解凍して、中の「st-replace-meta-box.zip」をZipファイルのままWordPressの「プラグイン」>「新規追加」よりアップロードして有効化して下さい。 専用フォームの ...

ReadMore

WING WordPress プラグイン

2018/6/16

iframe対応!SEOを配慮した遅延読込WordPressプラグイン「LasyLoadSEO」

SEOを配慮した遅延読込プラグインです。 通常のLazyLoadでは画像がスクロールされるまで表示されないため、Googleのロボットには「画像が無い」と判断されています。このプラグインでは<noscript>を付与することで遅延読込を行いつつ、画像の有無も認識させることができます。 また、iframeにも対応しているため多数のYouTube動画を貼り付けている記事などにも効果的です。 アザらんLasyLoad(遅延読込)はサイト表示速度の改善に効果があるとして人気なんだけど、Googleには ...

ReadMore

便利すぎるWING特製プラグインランキング

※このブログカードも「ブログカード外部URL対応プラグイン」で表示しています

第1位テンプレート管理・ランキング機能強化(クリック計測機能付き)
AFFINGERタグ管理マネージャー2(PDFマニュアル「AffiliateRUN~なぜ売れないか?」付き) - 【公式】STINGER STORE
AFFINGERタグ管理マネージャー2(好評PDFマニュアル「AffiliateRun~なぜ売れないか?」付き

使いまわしたいコードのテンプレート化、リンクの表示回数とクリック数の計測(CTR)を実現するプラグインです。AFFINGER版ではランキングを複数作成することも可能。STINGER版ではCTAデザイン

第2位テンプレート管理・ランキング機能強化(クリック計測機能なし
STINGERタグ管理プラグイン2 - 【公式】STINGER STORE
STINGERタグ管理プラグイン2

無料配布キャンペーン中につき、販売を停止しております(詳しくはコチラ) STINGERタグ管理プラグ ...

第3位他人のサイトも簡単ブログカードリンクに!
ブログカード外部URL対応プラグイン - 【公式】STINGER STORE
ブログカード外部URL対応プラグイン

URLを指定するだけでブログカード風のリンクにします。外部のサイトも自動スクリーンショットによりサムネイル表示が可能です。

第4位たくさん画像やYouTube動画を使用したサイトにおすすめ!
SEOを考慮したWordPressのLazyLoad SEO(画像・iframe遅延読み込み)プラグイン
SEOを考慮した遅延読込プラグイン「LazyLoadSEO」

SEOを配慮した遅延読込プラグインです。通常のLazyLoadでは画像がスクロールされるまで表示されないため、Googleのロボットには「画像が無い」と判断されています。このプラグインでは<noscr

第5位複数設定可能な高機能ABテストプラグイン
ABテストプラグイン3 - 【公式】STINGER STORE
ABテストプラグイン

※写真はイメージです 「ABテストプラグイン」は「AFFINGERタグ管理マネージャー2」や「STI ...

第6位「大切な記事」を1クリック保存
記事バックアップ「安心くん」 - 【公式】STINGER STORE
「記事バックアップ安心くん」

いつでも、どのタイミングでも1クリックで記事を保存します。保存前の状態も可能です。「テキストモード」のソースで保存するのでタグによる装飾も安心です。

第7位投稿内のコードを簡単に一括置換
投稿エディタ内のテキストやコードを一括置換するWordPressプラグイン
「かんたん便利!置換くん」

投稿画面のテキストモードの記事内容を一括置換します。gu検索フラグの正規表現にも対応。例えばアップデートで挿入されるようになったTinyMCEAdvancedの不要なtableタグも簡単に削除でき便利

第8位カスタマイズが豊富!「ほぼ無限」の会話アイコン作成
会話ふきだしプラグイン - 【公式】STINGER STORE
会話吹き出しプラグイン

ご確認下さい 本プラグインはWordPressテーマ「STINGER PRO」「AFFINGER4」 ...

第9位外注管理におすすめ!メッセージのやりとりや管理画面カスタマイズに
外注管理プラグイン「CHAIN」 - 【公式】STINGER STORE
外注管理プラグイン「CHAIN」 - 【公式】STINGER STORE

メッセージの通知・投稿画面のカスタマイズできるWordPressプラグイン 投稿者・寄稿者権限で外注 ...

第10位サイトの複数作成に便利な「テーマ管理」バックアップ
データ引継ぎプラグイン - 【公式】STINGER STORE
データ引継ぎプラグイン - 【公式】STINGER STORE

データ引継ぎプラグインはWordPressテーマ「WING(AFFINGER5及びSTINGER P ...

-WordPress

Copyright© AFFINGER(WING) , 2019 All Rights Reserved Powered by AFFINGER5.