TaxoPressプラグインを使った「関連記事」の表示方法とカスタマイズ(Affinger用)

スポンサーリンク

 

TaxoPress プラグイン

TaxoPressプラグイン は、タグ、カテゴリ、およびすべての WordPress タクソノミー用語を作成および管理ができる有用なプラグインです。

TaxoPressは、タグ(カテゴリー)をベースにした「関連記事」を簡単に表示できる機能があります。 そのままのデザインでも良いのですが、もう少し当テーマ(Affinger6)に合わせたデザインにカスタマイズしてみました。

なお、Affinger6にも関連記事を表示させる機能がありますが、記事の関連性が今ひとつの感じがあり今回TaxoPressの「関連記事」をトライして見ることにしました。

予め、TaxsoPressプラグインがインストールされている前提で以下、お読みください

 

 

TaxsoPress で「関連記事」を表示させるには

TaxoPressの「関連記事」を表示させるには、2つの方法があります。

  1. ウィジェットで示させる。
    WordPressウィジェットの中の「Related Posts (TaxsoPress)」を例えば[投稿記事下に一括表示]等に選択(設置)すれば当該場所に「関連記事」が表示されます。
  2. TaxsoPressのショートコードを利用する。
    WordPress管理画面の左にTaxsoPressアイコンから、関連投稿を選択します。 TitleにあるRelated Postsをダブルクリックすると、編集画面が開き、ページの下にある「ショートコード」をコピーして、表示したい場所にペーストすれば「関連記事」が表示されます。(色々な場所に埋め込んで使いまわしが出来て便利です)
 TaxsoPressのshortcode
[taxopress_relatedposts id="1"]

 

オペレータ
TaxsoPressのショートコード([taxopress_relatedposts id="1"])をWordpressの投稿記事中にコピペすれば、簡単にTagベースの「関連記事」が下の様に表示できます。

 

「関連記事」の表示例

 

「関連記事」の基本的な設定とカスタマイズ

上の関連記事が表示できるTaxsoPressのショートコード[taxopress_relatedposts id="1"]に対して、以下のTaxsoPress設定編集を行うことで、基本的な設定とカスタマイズが行えます。

WordPress管理画面の左にTaxsoPressアイコンから、関連投稿を選択します。 TitleにあるRelated Postsをダブルクリックすると、編集画面が開きます。 編集画面の左に「一般設定」「Display」「設定」「Advance」の4つのタブがありますので、ここから基本的なカスタマイズが行えます。

TaxsoPressの基本的な使い方はここをクリック

一般設定 画面

  • Title :Related Posts を 関連記事 等に変更できます。
  • Title header:Titleにh1〜h6 までのタグを指定します。
  • Post Type :「投稿」を指定
  • Taxonomy :タグ(Post_tag)を指定

Display 画面

  • Hide title in output ? :レ点を入れるとTitle を非表示にできます。
  • Maximum related posts to display :リスト表示する最大行数を指定。

設定 画面

  •  Limit related posts based on timeframe:No limit
  • Related Posts Order:Newer Entries
  • Text to show when there is no related post :No related posts. → 「現在、関連する投稿記事は有りません。」などを指定
  • Hide output if no related post is found ? :レ点をいれると。関連記事が見つからない場合は非表示にする。

Advanced 画面

  •  Related Posts div class:CSS セレクターを指定出来ます。
  • Term link class:Tagから抽出された投稿記事のリンク部分に対してCSS セレクターを指定出来ます。
  • Term link format:TaxsoPressが提供しているデフォルトコードは以下

 

「関連記事」をAffingerテーマに合うようにカスタマイズ

デフォルトデザインですとちょっと味気ないので、下の様にカスタマイズしてみました。 

完成したNew Design


関連記事 (Tag related)

カスタマイズ要点

  • 記事の投稿日をWebアイコン付きで表示
  • リストのDecoration()を無くす
  • マウスホーバー仕様を変更:色(brown)
  • 外枠などのデザインは、”Affinger6テーマ「タグ」中の テキストパーツ > まるもじ(小)> 基本 ”を利用

 

では、New Design で示される「関連記事」へのカスタマイズ方法と、実際に投稿記事に「関連記事」の挿入までをStep順に説明して行きますね。
オペレータ

 

step
1
TaxsoPress設定編集(変更した部分)

Display 画面

  • Hide title in output ? :レ点を入れる。 Title を非表示に
  • Maximum related posts to display :5

Advanced 画面

  •  Related Posts div class:無記入
  • Term link class:無記入
  • Term link format:コードを以下の様に変更

 

step
2
CSS追記

WordPress 外観 > テーマファイルエディタ 「AFFINGER Child: スタイルシート (style.css)」に以下のCSSを追記

 

step
3
投稿記事に挿入してみる

 ビジュアルエディタの場合
WordPressのビジュアルテエディタで、Affinger6テーマ「タグ」中の テキストパーツ > まるもじ(小)> 基本 
を選択して、タイトルやTaxsoPressショートコード等を下の様に記述します。
[st-marumozi webicon="" bgcolor="#f3f3f3" bordercolor="" color="#000000" radius="5" margin="0 0px 0 0" myclass=""]
関連記事 (Tag related)[taxopress_relatedposts id="1"][/st-marumozi]
 テキストエディタの場合
[st-marumozi webicon="" bgcolor="#f3f3f3" bordercolor="" color="#000000" radius="5" margin="0 0px 0 0" myclass=""]<br />
<span style="color: #800000; font-size: 130%;"><strong>関連記事 (Tag related)</strong></span>[taxopress_relatedposts id="1"][/st-marumozi]

ポイント

上のコードを、Wordpress投稿記事のエディタ中に配置(記述)すれば、「関連記事」New Designが表示されます。

また、ウィジェットで「カスタムHTML」を投稿記事下に一括表示を選んで、上の「テキストエディタの場合」コードを記述すれば、投稿記事下に「関連記事」が表示される様になります。

 

以上、TaxoPressプラグインを使った「関連記事」の表示方法とカスタマイズでした。

 

 

スポンサーリンク

 

Blog オススメ記事(コンテンツ選択)
  • レコード音質とハイレゾ化

  • CD音質と圧縮音源 AAC等

  • WordpressやiPhone・PC

  • ツールと閑話ブログ

レコード音質とハイレゾ化

CD音質と圧縮音源 AAC等

WordpressやPCなど

ツールと閑話ブログ