TaxoPress プラグイン
TaxoPressプラグイン は、タグ、カテゴリ、およびすべての WordPress タクソノミー用語を作成および管理ができる有用なプラグインです。
TaxoPressは、タグ（カテゴリー）をベースにした「関連記事」を簡単に表示できる機能があります。 そのままのデザインでも良いのですが、もう少し当テーマ（Affinger６）に合わせたデザインにカスタマイズしてみました。
なお、Affinger６にも関連記事を表示させる機能がありますが、記事の関連性が今ひとつの感じがあり今回TaxoPressの「関連記事」をトライして見ることにしました。
予め、TaxsoPressプラグインがインストールされている前提で以下、お読みください
注意 (2023/2/25)
TaxsoPressプラグインを「バージョン 3.6.5」にアップデートすると、この投稿記事で紹介した「Term link formatへの入力コードが保存できない」ためカスタマイズしたデザインが反映されません。 このため、今までの「バージョン 3.6.4」にロールバックして戻しました。 ご注意ください！
2023/4/4：バージョン 3.7.0にアップデートされて、この問題は回避されました。
TaxsoPress で「関連記事」を表示させるには
TaxoPressの「関連記事」を表示させるには、２つの方法があります。
- ウィジェットで示させる。
WordPressウィジェットの中の「Related Posts (TaxsoPress)」を例えば[投稿記事下に一括表示]等に選択（設置）すれば当該場所に「関連記事」が表示されます。 - TaxsoPressのショートコードを利用する。
WordPress管理画面の左にTaxsoPressアイコンから、関連投稿を選択します。 TitleにあるRelated Postsをダブルクリックすると、編集画面が開き、ページの下にある「ショートコード」をコピーして、表示したい場所にペーストすれば「関連記事」が表示されます。（色々な場所に埋め込んで使いまわしが出来て便利です）
TaxsoPressのshortcode [taxopress_relatedposts id="1"]
「関連記事」の表示例
「関連記事」の基本的な設定とカスタマイズ
上の関連記事が表示できるTaxsoPressのショートコード[taxopress_relatedposts id="1"]に対して、以下のTaxsoPress設定編集を行うことで、基本的な設定とカスタマイズが行えます。
WordPress管理画面の左にTaxsoPressアイコンから、関連投稿を選択します。 TitleにあるRelated Postsをダブルクリックすると、編集画面が開きます。 編集画面の左に「一般設定」「Display」「設定」「Advance」の４つのタブがありますので、ここから基本的なカスタマイズが行えます。
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が提供しているデフォルトコードは以下
12<a href="%post_permalink%" title="%post_title% (%post_date%)">%post_title%</a>
「関連記事」をAffingerテーマに合うようにカスタマイズ
デフォルトデザインですとちょっと味気ないので、下の様にカスタマイズしてみました。
完成したNew Design
関連記事 (Tag related)
カスタマイズ要点
- 記事の投稿日をWebアイコン付きで表示
- リストのDecoration（・）を無くす
- マウスホーバー仕様を変更：色（brown）
- 外枠などのデザインは、”Affinger6テーマ「タグ」中の テキストパーツ ＞ まるもじ（小）＞ 基本 ”を利用
step
1TaxsoPress設定編集（変更した部分）
Display 画面
- Hide title in output ? ：レ点を入れる。 Title を非表示に
- Maximum related posts to display ：５
Advanced 画面
- Related Posts div class：無記入
- Term link class：無記入
- Term link format：コードを以下の様に変更
|
1 2 3 4 5 6 |
<p style="margin-left:-30px;margin-bottom:0px;font-size:0.8em;"> <i class="st-fa st-svg-clock-o"></i>%post_date%</p> <p style="line-height:1em;margin-left:-30px;"> <a style="text-decoration: none;" href="%post_permalink%" title="%post_title% (%post_date%)"> <span class="tag1" style="line-height:0.5em;font-size:14px;font-weight:bold;color:black;">%post_title%</span></a></p> |
step
2CSS追記
WordPress 外観 ＞ テーマファイルエディタ 「AFFINGER Child: スタイルシート (style.css)」に以下のCSSを追記
|
1 2 3 4 5 6 7 |
a:hover span.tag1{ color: #b22222!important; } ul.st-related-posts li{ list-style: none; } |
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プラグインを使った「関連記事」の表示方法とカスタマイズでした。