ページ上部に該当記事のカテゴリー(タクソノミー)を表示したい

VWSとは フォーラム Lightning ページ上部に該当記事のカテゴリー(タクソノミー)を表示したい

ページ上部に該当記事のカテゴリー(タクソノミー)を表示したい

タグ: 

  • このトピックには7件の返信、2人の参加者があり、最後にmorisacにより2年、 5ヶ月前に更新されました。
8件の投稿を表示中 - 1 - 8件目 (全8件中)
  • 投稿者
    投稿
  • #64849

    morisac
    参加者

    ■ WordPress のバージョン
    5.9.3

    ■ テーマ・プラグインは全て最新版で確認してください。
    確認しました。

    ■ テーマの種類
    Lightning Pro

    ■ テーマのバージョン
    8.15.1

    ■ スキンの種類
    Origin II

    ■ 関連しそうなプラグインを一つづつ停止して症状が改善するか確認してください。
    確認しました。

    ■ 期待する動作
    添付画像のように、各記事に登録されているカテゴリーを表示したいのですが、何か良い方法がございませんか?
    添付画像のページURL:https://culture-night.com/program/hakubutukan/

    (可能であれば)カスタム投稿タイプで設定したカテゴリーの色を反映できるようにしたい。

    ■ 自分で試した事
    プラグイン
    ・Cool Tag Cloudを使うも、旧ウィジェットにしか対応していない、表示させたくないページにも表示してしまうなどの問題から諦めました。

    HTML
    ・添付画像のページからHTMLを拝借してコードで入れると、見た目はきちんと表示されたのですが、1つ1つ設定が必要なため、手間がかかってしまうため、こちらの方法もできれば避けたい。

    ■ 症状が発生するブラウザ
    Chrome

    ■ 実際の症状
    表示ができません。

    Attachments:
    You must be logged in to view attached files.

    該当URL : https://*********

    ※該当URLはフォーラムライセンスが有効のユーザーにのみ表示されます

    #64880

    おそらく以下のような感じでいけると思います。

    1. VK Blocks Pro を 1.34.0.0 にアップデート
    2. 子テーマの functions.php などに

    use VektorInc\VK_Term_Color\VkTermColor;

    add_action(
    	'lightning_entry_body_before', // 挿入したい場所のアクションフック名
    	function() {
    		$args = array(
    			'outer_element'      => 'div',
    			'outer_class'        => '',
    			'single_element'     => '',
    			'single_class'       => '',
    			'single_inner_class' => 'btn btn-sm',
    			'link'               => true,
    			'color'              => true,
    			'taxonomy'           => '', // 表示したいカスタム分類を指定 例) 'category' や 'post_tag' .
    			'gap'                => '0.5rem',
    			'separator'          => '',
    		);
    		echo VkTermColor::get_post_terms_html( '', $args );
    	}
    );
    #64887

    morisac
    参加者

    いつもありがとうございます!
    ご教示いただいた方法で一度やってみました。
    その上で、2点ほど確認させていただきたいです。


    ‘lightning_entry_body_before’, // 挿入したい場所のアクションフック名 
     こちらの部分の『lightning_entry_body_before』は変更しなければならないのでしょうか?
     変更する場合はどういう記述が良いのでしょうか?
     (変更しないで保存しようとすると『echo VkTermColor::get_post_terms_html( ”, $args );』の記述がエラーとなり、保存ができません)

    ②上記部分を変更し、保存はできたのですが、今度はページ上で呼び出す方法が不明です…。
       こちらもどういう記述(方法)で呼び出せるのでしょうか?

    いずれもど素人な質問で申し訳ございません。
    ご教示いただけますと幸いです。
    何卒よろしくお願いいたします。

    #64889

    コードの範囲が間違ってました
    以下でよろしくお願いいたします。

    
    use VektorInc\VK_Term_Color\VkTermColor;
    
    add_action(
    	'lightning_entry_body_before', // 挿入したい場所のアクションフック名
    	function() {
    		$args = array(
    			'outer_element'      => 'div',
    			'outer_class'        => '',
    			'single_element'     => '',
    			'single_class'       => '',
    			'single_inner_class' => 'btn btn-sm',
    			'link'               => true,
    			'color'              => true,
    			'taxonomy'           => '', // 表示したいカスタム分類を指定 例) 'category' や 'post_tag' .
    			'gap'                => '0.5rem',
    			'separator'          => '',
    		);
    		echo VkTermColor::get_post_terms_html( '', $args );
    	}
    );
    #64891

    先のコードはアクションフックで挿入しています。

    できる!WordPressカスタマイズ #04 アクションフックを使ったカスタマイズに挑戦!

    挿入したい場所はテーマファイル内ので do_action( という記述がある場所に挿入する事ができます。

    それ以外の場所に挿入したい箇所のテーマファイルを子テーマに複製して、そのファイルに

    
    use VektorInc\VK_Term_Color\VkTermColor;
    
    $args = array(
    	'outer_element'      => 'div',
    	'outer_class'        => '',
    	'single_element'     => '',
    	'single_class'       => '',
    	'single_inner_class' => 'btn btn-sm',
    	'link'               => true,
    	'color'              => true,
    	'taxonomy'           => '', // 表示したいカスタム分類を指定 例) 'category' や 'post_tag' .
    	'gap'                => '0.5rem',
    	'separator'          => '',
    );
    echo VkTermColor::get_post_terms_html( '', $args );

    を書く形になります。

    #64893

    morisac
    参加者

    ありがとうございます!
    無事に設定、設置することができました!

    ちなみにこの表示ですが、デフォルトの左寄せではなく、右寄せにすることは可能ですか?

    • この返信は2年、 5ヶ月前にmorisacが編集しました。
    Attachments:
    You must be logged in to view attached files.
    #64896

    ここから先は CSS でなんとかなる分野なので

    'outer_class' => 'my_category_list',

    のような形で識別用の class を指定し、CSSで…
    ご自身で頑張るか誰かバトンタッチよろしくお願いいたします。

    できる!CSSカスタマイズ

    CSS Flexbox 各プロパティの使い方を詳しく解説

    たぶん

    
    .my_category_list {
    justify-content: flex-end;
    }

    みたいな感じだと思います。

    #64899

    morisac
    参加者

    何度もご丁寧にありがとうございます。
    自分でも調べてみます。

    一番の懸念箇所は解決できました!
    ありがとうございました!

8件の投稿を表示中 - 1 - 8件目 (全8件中)
  • このトピックに返信するにはログインが必要です。