AFFINGER6

【AFFINGER6】カテゴリーページをカスタマイズする方法!




WordPress の一般的なテーマではカテゴリページ(カテゴリを選んだ場合に出てくるページ)には記事が一覧で並びます。

WordPress の優良テーマ「AFFINGER6」では、このページを自由自在にカスタマイズすることができます。


本記事では、AFFINGER6 でカテゴリーページをカスタマイズする方法を紹介します。




AFFINGER ご購入はこちら




カテゴリページカスタマイズ例



WordPress の優良テーマ「AFFINGER6」で、カテゴリのページをカスタマイズしたサンプルです。





もともとあった「記事の一覧」はページの下のほうに残していますが、ページ上部では、「おすすめ記事」、「主なコンテンツ」、「カテゴリページ内の検索」を載せています。



実際のページはこちらです。

https://irojiroharaguro.com/topics/web-it/affinger6



カテゴリページをカスタマイズする方法



WordPress の管理画面から [投稿] → [カテゴリー] を選び、カスタマイズしたいカテゴリーページのカテゴリの編集画面を表示します。

[説明] 欄は元来カテゴリの説明を書く欄かと思いますが、こちらで(固定ページのように)自由にページを作成することが可能です。

(「画像」を貼ったり、テーブルやリンクを貼るなど、通常の記事のように記載ができます)


AFFINGER6 では、「カテゴリの説明欄」を編集することで、カテゴリーページを自由にカスタマイズすることが可能です。


カテゴリーの編集ページで設定できる内容の一覧です。


名前カテゴリーの名前を設定します。
カテゴリ一覧でカテゴリー名を表示する名前になります。
スラッグカテゴリーを識別するための URL 部分を指定します。

例)https://〇〇〇/カテゴリー/スラッグ
親カテゴリ―親カテゴリ―を指定します。
説明カテゴリーの説明を設定します。

通常の記事のようにすきなレイアウトで表現できます。
こちらで カテゴリーページをカスタマイズする ことができます。
アイキャッチ画像を登録アイキャッチ画像を指定します。ここで指定した画像は、カテゴリページの上部に表示します。ただし、Twitter などに URL を貼った場合のサムネイルには反映されません。

※ Twitter などのサムネイル画像には、「AFFINGER 管理」から指定した画像を利用します。(設定方法は後述 ※1)
カテゴリータイトルの書き換えカテゴリーページ上のカテゴリータイトルを書き替えます。

例)カテゴリー名は「WordPress」だが、カテゴリーページでは「WordPress 関連記事」とタイトルに表示する。
カテゴリーのメタキーワードメタキーワードを設定します。(SEO 対策用)
カテゴリーのメタディスクリプションメタディスクリプションを設定します。(SEO 対策用)
背景色背景色を指定します。
投稿の一覧表示投稿を一覧表示します。「しない」に設定すると、投稿記事一覧を表示しません。
SNS ボタンの表示SNS ボタンを表示します。「しない」に設定にすると、SNS ボタンを表示しません。


※1. トップページ、カテゴリページの Twitter 向けサムネイル画像の設定方法です。


【AFFINGER6】トップページのアイキャッチ画像を設定する方法

Twitter にURLを貼った際にトップページURLではアイキャッチが出ない方もいるかと思います。AFFINGER6 では、トップページのアイキャッチ画像を指定する場所が特別に用意されています。トップページのアイキャッチ画像の設定方法を紹介します。

続きを見る



サンプルページで使ったカスタマイズ方法



サンプルで表示しているカテゴリーページ(本サイトのページ)のようにカスタマイズする方法を紹介します。


■ おすすめ記事



AFFINGER6 の記事カードを配置しています。

※ AFFINGER6 の「おすすめ記事」をウィジェットで配置しても良いかと思います。


■ 主なコンテンツ



記事を横に三段にして記事へのリンクを配置しています。記事へのリンクは、ひとつづつ並べています。これは、作るの手間がかかって大変です(笑)

3段にする方法は次の記事を参考にしてください。


【AFFINGER6】記事を横2列にする方法!これでページが間延びしません。

記事を横2列にする方法です。
新聞みたいな構成になります(それ、いいのだろうか?)。紹介する内容によっては絶大な威力を発揮する縦2段記事!ぜひ一度チャレンジしてみてください。

続きを見る


■ カテゴリー内記事の検索



カテゴリー内記事を対象に検索フォームを配置します。

こちらは簡単な HTML で作成できます。作成方法は次の記事を参考にしてください。


【WordPress】カテゴリ内検索を実現する方法!

任意のカテゴリの中の記事を対象にキーワード検索を行うフォームを実現する方法です。簡単な HTML で実現しています。サンプルコードあり!

続きを見る



まとめ



WordPress の一般的なテーマではカテゴリページ(カテゴリを選んだ場合に出てくるページ)には記事が一覧で並びます。

WordPress の優良テーマ「AFFINGER6」では、このページを自由自在にカスタマイズすることができます。



  • カテゴリーの編集画面の [説明] 欄にてカスタマイズできます
  • カテゴリーの [説明] 欄では、自由にレイアウトを配置できます


カテゴリーページもカスタマイズして、さらなる わくわくファンタスティックなサイト を作っていきたいですね。




WordPress のテーマ「AFFINGER6」の情報、テクニック一覧はこちらをクリック!










Presented By Irojiro Haraguro .Com

ブログランキング・にほんブログ村へ