Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPressで人気タグを表示する方法(2つの簡単な方法)

編集メモ: WPBeginner のパートナーリンクから手数料を得ています。手数料は編集者の意見や評価に影響を与えません。編集プロセスについて詳しく知る。

WordPressサイトで最もよく使われているタグを表示したいですか?

タグとカテゴリーは、WordPressでコンテンツを分類する2つの初期設定です。しかし、カテゴリーはより広い範囲をカバーするため、より多くの注目を集め、タグの露出は少なくなります。

この投稿では、WordPressで人気のタグを簡単に表示する方法をご紹介します。

Display Most Popular Tags in WordPress

カテゴリーとタグは、WordPressで投稿を分類するために使用される2つの初期設定のタクソノミーです。カテゴリーはサイト内の幅広いトピックやセクションに使用され、タグは記事のコンテキスト内の特定のアイデアに適しています。

例えば、「ヨーロッパ」、「アジア」、「南米」などのタグをつけて、旅行関連のブログ投稿にはすべて「旅行」カテゴリーを使うとします。

カテゴリーとタグを正しく使い始めると、あなたのサイトにはカテゴリーよりもタグの方が多くなるでしょう。カテゴリーをナビゲーションメニューに置くことはできますが、タグは訪問者にあまり検索されないままかもしれません。

サイトにタグを表示する方法の1つは、外観 ” ウィジェットページにアクセスして初期設定のタグクラウドブロックを追加することです。

tag cloud block

ただし、このブロックではすべてのタグがアルファベット順に表示されます。タグの順番を並べ替えたり、表示されるタグの数を制限したりすることはできません。

WordPressブログに最も人気のあるタグや最も頻繁に使用されるタグを表示することで、これを解決することができます。これにより、ユーザーはあなたのサイトで頻繁に議論されているトピックを素早く知ることができます。また、より多くのコンテンツを発見してもらい、ページ表示やユーザーエンゲージメントを高めることにもつながります。

それでは、WordPressで人気のタグを簡単に表示する方法を見ていきましょう。様々な方法を取り上げますので、以下のクイックリンクから使いたい方法にジャンプしてください:

プラグインを使ってサイトで最も人気のあるタグを表示したい場合は、この方法が適している。

まず、TaxoPressプラグインをインストールして有効化する必要があります。詳しい手順については、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。

有効化したら、WordPressダッシュボードからTaxoPress ” Terms Displayページにアクセスしてください。ここで、「規約表示」オプションの下にある「編集」リンクをクリックする必要があります。

Click the Edit link under the terms display option

タグを表示するためのタイトルを選択することから始めることができます。その後、’タクソノミー’ドロップダウンメニューで’タグ’オプションが選択されていることを確認してください。

次に、ページ、投稿日、またはメディアで使用されているタグのみを表示するかどうかを選択できます。あるいは、すべての投稿タイプに人気のタグを表示することもできます。

投稿」オプションを使用することをお勧めします。これにより、ページや画像に使用したタグが自動的に削除されます。

Choose tags as the taxonomy

次に、左側の列から「General」タブに切り替え、「Method for choosing terms from the database」ドロップダウンメニューから「Counter」オプションを選択する。

次に、「データベースからキーワードを選択する順序」メニューから「降順」オプションを選択します。

そうしたら、「表示するキーワードを選択する方法」のドロップダウンメニューから「カウンター」オプションを、「表示するキーワードを選択する順序」のドロップダウンメニューから「降順」オプションを選択しなければならない。

これで、WordPressサイトで最も人気のあるタグだけが表示されるようになります。

Choose the Counter and Descending options to display most popular tags

そうしたら、サイドバーから「オプション」タブに切り替える。

ここでは、人気タグのリストの前後に表示したいテキストを追加できます。

Add text that you want to be displayed before and after your list of tags

その後、「デザイン」タブに切り替え、サイトに表示する人気タグの最大数を選択する。

タグのフォントサイズや色も選択できます。その後、右側の「キーワードを保存」ボタンをクリックしてください。

Click Save Terms display button

WordPressのサイドバーに人気タグを追加する

WordPress管理画面のサイドバーから外観 ” ウィジェットページに移動し、「ブロックを追加」(+)ボタンをクリックします。

注: ブロックテーマを使用している場合、TaxoPressプラグインはフルサイトエディターで「キーワード表示」ブロックを提供していないため、この方法は機能しません。この場合は、2番目の方法をご利用ください。

これでブロックメニューが開き、サイトサイドバーにキーワード表示ブロックを追加することができます。

そうしたら、ブロック内のドロップダウンメニューから、タグ用に作成したキーワード表示を選択するだけです。

Add the terms display block in the WordPress sidebar

最後に、上部にある「更新」ボタンをクリックして、設定を保存します。

これで、WordPressサイトにアクセスして、人気のタグの一覧を実際に表示することができます。

Popular tags preview

ブロックテーマを使用している場合や、コードを使用することを好む場合は、この方法が適している。

テーマのfunctions.phpファイルにカスタムコードを追加することで、WordPressで最も人気のあるタグを表示することができます。しかし、コードをタイプする際のわずかなエラーでサイトにアクセスできなくなることがあります。

そのため、WPCodeの使用をお勧めします。あなたのサイトに安全かつ簡単にコードを追加できる、市場で最高のWordPressコードスニペットプラグインです。

まず、WPCodeプラグインをインストールし、有効化する必要があります。詳しくは、WordPressプラグインのインストール方法についての初心者ガイドをご覧ください。

注:WPCodeには、このチュートリアルで使用できる無料プランがあります。しかし、有料プランにアップグレードすると、条件ロジック、コードスニペットクラウドライブラリなど、より多くの機能がアンロックされます。

有効化したら、WordPressダッシュボードからCode Snippets ” + Add Snippetページにアクセスします。

ここで、「カスタムコードを追加(新規スニペット)」設定の下にある「スニペットを使用」ボタンをクリックします。

Add new snippet

カスタムスニペットの作成」ページが表示されますので、まずはスニペット名を入力してください。

次に、右側のドロップダウンメニューから、コードタイプとして「PHP Snippet」オプションを選択します。

Choose PHP Snippet for the code snippet to display popular tags

その後、以下のカスタムコードを「コードプレビュー」ボックスにコピー&ペーストしてください:

function wpb_tag_cloud() {
$tags = get_tags();
$args = array(
    'smallest'                  => 10,
    'largest'                   => 22,
    'unit'                      => 'px',
    'number'                    => 10,
    'format'                    => 'flat',
    'separator'                 => " ",
    'orderby'                   => 'count',
    'order'                     => 'DESC',
    'show_count'                => 1,
    'echo'                      => false
); 
 
$tag_string = wp_generate_tag_cloud( $tags, $args );
 
return $tag_string; 
 
}
// Add a shortcode so that we can use it in widgets, posts, and pages
add_shortcode('wpb_popular_tags', 'wpb_tag_cloud'); 
 
// Enable shortcode execution in text widget
add_filter ('widget_text', 'do_shortcode');

このコードは単純にあなたのサイトからトップ10のタグを各タグの投稿数と共にクラウド上にジェネレータする。その後、ショートコード wpb_popular_tagsを作成し、テキストウィジェットのショートコードを有効化します。

ここで、「インサーター」セクションまでスクロールダウンし、「自動挿入」モードを選択する必要があります。ビルトインショートコードをサイトに追加すると、コードが自動的に実行されます。

Choose an insertion method

そうしたら、一番上までスクロールして戻り、「Inactive」スイッチを「Active」に切り替える。

最後に「Save Snippet」ボタンをクリックして、設定を保存します。

Save the code snippet for displaying popular tags

WordPressフルサイトエディターで人気タグを追加する

ブロックテーマを使用している場合は、WordPressダッシュボードから外観 ” エディターページに移動します。

サイトエディターが開きますので、’+’ボタンをクリックしてブロックメニューを開きます。ここから、ショートコードブロックをページに追加します。

次に、ブロック自体に以下のショートコードを追加する必要があります:

[wpb_popular_tags】。]

最後に、上部にある「保存」ボタンをクリックして、設定を保存します。

さあ、あなたのサイトを訪れて、人気のタグを実際に見てみよう。

Popular tags preview in a block theme

WordPressウィジェットエリアに人気タグを追加する

サイトでクラシックテーマを使用している場合、WordPressダッシュボードから外観 ” ウィジェットページにアクセスして人気タグを追加することができます。

ここで、「ブロックを追加」(+)ボタンをクリックしてブロックメニューを開き、ショートコードブロックをお好みのウィジェットエリアに追加します。

次に、以下のショートコードをブロックに追加する:

[wpb_popular_tags】。]

Add shortcode in the widget area of your liking

その後、「更新」ボタンをクリックして設定を保存します。

では、WordPressサイトにアクセスして、人気のタグを見てみましょう。

Preview of the popular tags

ボーナス:WordPressサイトのタグをスタイル化する

WordPressサイトに人気のタグを追加したら、使用しているテーマに合わせてカスタマイズすることも重要です。こうすることで、タグが視覚的にアピールされ、ユーザーの注意を即座に引くことができます。

さらに、タグのサイズ、フォント、色を使い分けることで、訪問者がスキャンしやすくなり、興味のあるタグを見つけやすくなります。 これにより、エンゲージメントとクリック率を高めることができます。

例えば、ユーザーがWordPressの旅行関連の投稿だけを読みたいと思っているとします。その場合、そのタグをクリックすると旅行関連の投稿リストを開くことができます。

Styled tags preview

カスタムCSSを追加することで、タグの間隔を変更したり、背景色を追加したり、配置を変更したりなど、タグをスタイリングすることができます。

詳細な手順については、WordPressで投稿タグをスタイル設定する方法についての初心者向けガイドをご覧ください。

WordPressで人気のタグを表示する方法について、この投稿がお役に立てば幸いです。カテゴリーとタグに関する初心者向けガイド– コンテンツを分類するためのSEOベストプラクティスや、初心者のためのWordPressのヒント、トリック、ハックのリストもご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

13件のコメント返信を残す

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Mrteesurez says

    Please, I want to ask between tag and categories, which one is better to arrange post or to sort it and also, is it possible to optimize tags to show up on search engines ?

  3. BAGO FENG ROLAND says

    how can i change or edit it.
    my tag is showing tag achieves i want to change. dont want it showing eg. Musics Achieves.
    thanks.

    • WPBeginner Support says

      You would need to rename the tag for the display name to be different under Posts>Tags

      管理者

  4. Syed says

    Unfortunately, it is not linking.all the tags links back to the same display page only.

    I have used the code as it is and displaying via the shortcode.

    • WPBeginner Support says

      You would want to start by disabling your plugins and/or swapping to a new theme to see if one of those is modifying the default behavior of the tag cloud

      管理者

  5. Syed says

    Thanks for the code. It’s working fine on my site. But how to add the tag links so that when I click on any specific Tag, it opens all the posts under that tag?

    Please suggest.

    • WPBeginner Support says

      The method from the article should automatically add a link to the tag pages when you click on the tag

      管理者

  6. Florian says

    Hi, nice tutorial but the manually Code doesn’t work, because the links in cloud are all broken and only link to page where the shortcode is embedded.

    Can you please help me?

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。