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にマイナスを付けることで除外できます。

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

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

2018/10/17

【修正及び機能変更】WING ver20181017UPDATEのお知らせ

20181012β版の不具合修正及び機能変更をしたver20181017をUP致しました。 ※自動更新にも対応済みです(パスワード変更があります。各購入ユーザー限定ページにてご確認下さい) 参考 WING最新版のアップデート方法 購入ユーザー限定ページ一覧 ver20181012版の機能を未確認の方はコチラ 機能修正 フォントの種類の追加の反映範囲 「テーマ管理」>「デザイン」>「フォントの種類」>フォントの追加の反映範囲に「h4,h5見出しタグ」「ランキング見出し(AFFINGER5版のみ)」を追加しま ...

ReadMore

WING お知らせ

2018/10/15

アフィリエイト報酬設定の条件変更のお知らせ

infotopアフィリエイター様には先にメールにてお知らせしておりますが、現在のAFFINGER系商品のアフィリエイト単価条件を変更致しました。 簡単にお伝えしますと現在の報酬単価は 商品が3つ売れてから の個別報酬設定後の単価となります。 ※個別単価設定前はWING(AFFINGER5)1,000円/件 AFFINGER PACK3(WING対応)3,000円/件 AffiliateRun [付録] ~「AFFINGERタグ管理マネージャー2」 1,000円/件に変更 過去に商品を3つ以上販売済みのアフ ...

ReadMore

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

2018/10/12

Google+ボタン削除など ~ 機能追加及び変更「WING ver20181012β」アップデートのお知らせ

Google+サービス終了に伴い「URLコピーボタン」への変更、チェックボックスやポイントデザインなどいくつかのデザイン、機能追加を行いました「WING ver20181012β」を購入ユーザー限定ページにUP致しました。 ※自動更新はまだ対応しておりません。 最新版アップデートの方法はコチラ ステ子Google+サービス終了は2019年8月ですが、終了の決まっているボタンを付けてても意味が少ないので早めの変更としました ver20181012変更内容 追加されたデザイン・機能 チェックボックスリスト追加 ...

ReadMore

WING お知らせ

2018/9/14

【WING】「フッターの3列対応」「横長サムネイル」対応など~ver20180913アップデートのお知らせ

「フッターの3列対応」「横長サムネイル」などを追加したWINGver20180913を購入会員サイトにアップ致しました。 最新版アップデートの方法はコチラ サンプルを見る 主なアップデート内容 サムネイル画像の横長タイプ追加 WINGver20180913より「テーマ管理」>「デザイン」>「サムネイル画像設定」に「サムネイル画像を横長にする」を追加しました。 上記を有効化することで横長のアイキャッチ画像を表示することができます。 サムネイル画像について サムネイルサイズは横長専用のサイズが新しく追加されて ...

ReadMore

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

2018/8/31

プラグイン「ステ子」』新機能追加のお知らせ

WINGでは「ショートコード」を使用したパーツ作成が多いため、 ステ子サクッと仮で作成してプレビュー確認したいわ なんてことが結構あると思います。 そこで、新しく「パーツ工場」という仮でパーツを作成、表示を確認できる機能を用意しました。 さらに、ショートコード状態のパーツをhtmlソースに変換(解体)することも可能です。 新機能「パーツ工場」について 使用方法 管理バーにリンクが表示されています。クリックすると別窓でパーツ工場が表示されます。 「内容をクリア」で削除できます。 アップデート方法 すでに「ス ...

ReadMore

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

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

step
3
全体を仕上げる

サンプルサイト

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

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

ボタンについて

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

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

好きなのを選ぶだけ

もっと見る

もっと詳しく

まとめ

まとめると

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

以上となります。

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

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

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

大人気!

詳しく見る

便利プラグイン情報

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

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

2017/9/23

AFFINGER4タグ管理マネージャー ver20170923アップデートのお知らせ

「AFFINGER4タグ管理マネージャー」をver20170923にアップデート致しました。ご購入済みユーザー様は無料でアップデートして頂けます。 参考AFFINGERタグ管理マネージャーについて 【主なアップデート内容】 ログ一覧で「ホスト名」が確認できるように UA(ユーザーエジェント)及びOSのother一括によるフィルタ除外の追加 ダウンロードに関する詳細は以下のページをご確認下さい。 https://on-store.net/contact/aftm-from/aftm-topics/ ※閲覧に ...

ReadMore

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

2017/9/1

「AFFINGERタグ管理マネージャー」「STINGERタグ管理プラグイン」「ABテストプラグイン」をアップデート致しました(ver20170828)

「AFFINGERタグ管理マネージャー」「STINGERタグ管理プラグイン」「ABテストプラグイン」をアップデート致しました 購入済みユーザー様のアップデート期限は平成29年9月14日までです。御注意下さいませ(商品はアップデート保証を行っておりません) ver20170828 「AFFINGERタグ管理マネージャー」「STINGERタグ管理プラグイン」 ※画像は「AFFINGERタグ管理マネージャー」 一覧の「スラッグ」のショートコード表示 IDに加えて「スラッグ」による検索の対応 他 「ABテストプラ ...

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

使いまわしたいコードのテンプレート化するプラグインです。AFFINGER版ではランキングを複数作成することも可能。STINGER版ではCTAデザインを作成できます。

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

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

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

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

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

作成したテンプレートやリンクをランダム(又は%指定)で表示するABテストプラグインです。「AFFINGERタグ管理マネージャー2」との併用ではCTR(クリック率)のABテストデータを取ることが出来ます

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

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

第7位投稿内のコードを簡単に一括置換
かんたん便利「置換くん」 - 【公式】STINGER STORE
「かんたん便利!置換くん」

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

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

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

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

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

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

2018年8月31日まで!2,980円→1,980円 データ引継ぎプラグインはWordPressテー ...

-WordPress

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