カスタム投稿タイプの関連するキーワード(カテゴリー&タグ)を表示

カスタム投稿タイプのタグとカテゴリーを表示

テンプレートやサイドバーヴィジェットに記述する。(サイドバーの場合はそのままではPHPが動かないので、サイドバーでPHP実装可能にしてから)

特定のカスタム投稿タイプのみ

<div class="heading">関連するキーワード</div>
<li><div class="tagcloud">
<?php echo get_the_term_list( $post->ID,'example1','example2','' ); ?>
</li>

表示中のページが属するタグ&カテゴリーだけを表示

カスタム投稿では表示中のページが属するカテタグ両方
通常投稿では表示中のページが属するタグのみ

<!--カテゴリーとタグを取得ここから-->
<?php
$postcat = get_post_type().'_cat';
$posttag = get_post_type().'_tag';
?>
<!--カテゴリーとタグを取得ここまで-->
<!--カテゴリー、タグを表示ここから-->
<div class="heading">関連するキーワード</div>
<div class="tagcat">
<?php if(has_term('',$postcat)): ?>
<?php echo get_the_term_list($post->ID, $postcat,'',', '); ?>
<?php endif; ?>
<?php if(has_term('',$posttag)): ?>
<?php if(has_term('',$postcat)): ?>
<?php endif; ?>
<?php echo get_the_term_list($post->ID, $posttag,'',', '); ?>
<?php endif; ?>
</div>

表示中のページ以外もすべてのタグ&カテゴリーを表示
カスタム投稿タイプはタグ&カテゴリーどちらも全部表示
通常投稿はタグのみ表示

<div class="heading">関連するキーワード</div>
<div class="tagcat">
<?php $args = array(
           'taxonomy' => get_post_type().'_tag'
); ?>
<?php wp_tag_cloud($args); ?>
<?php $args = array(
           'taxonomy' => get_post_type().'_cat'
); ?>
<?php wp_tag_cloud($args); ?>
</div>

CSSで調整

/* ================関連するキーワード================ */
.heading {
        font-size: 0.9em;
        margin-left: 20px;
        color: #484848;
}
.tagcloud {
      overflow: hidden;
      padding: 0px 20px;
}
 
.tagcloud a {
        float: left;
        display: block;
        background: #82cddd;
        line-height: 100%;
        color: #fff;
        text-decoration: none;
        font-weight: bold;
        font-size: 1em;
        padding: 8px 10px 6px 8px ;
        margin:  10px 5px 5px 0px;
        -webkit-transition: .3s ease;
        -moz-transition: .3s ease;
        -o-transition: .3s ease;
        transition: .3s ease;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        -ms-border-radius: 5px;
        -o-border-radius: 5px;
        border-radius: 5px;     
}
.tagcloud a:hover {
         background: #00afcc;
}

参照ページ
ワードプレスのタグクラウドをカスタマイズする方法