長年にわたり、WPBeginner はタグに関する多くの質問を受けてきました。その中には、WordPress のタグをスタイリングしてページ上で目立たせる価値があるかどうかという質問も含まれます。
タグはコンテンツをトピックごとに整理するのに役立ちます。WordPressのブログ投稿におけるハッシュタグのようなもので、ユーザーがより多くのコンテンツを発見するのに役立ちます。しかし、私たちの経験では、視覚的に目立たないと、見過ごされる可能性があります。
この記事では、WordPressでタグを簡単にスタイリングして、ウェブサイトでのユーザーエンゲージメントとページビューを増やす方法を紹介します。
WordPressでタグを表示する方法
WordPressには、カテゴリとタグという2つの主要なタクソノミーがあります。カテゴリはコンテンツの主要な領域に使用されますが、タグはコンテンツをより具体的なトピックに分類できます。
多くの人気のWordPressテーマは、デフォルトで投稿の先頭または末尾にタグを表示します。
ただし、アーカイブページ、フッター、サイドバー、またはWordPressのほぼどこにでもタグを表示することもできます。
タグクラウドを投稿、ページ、サイドバーウィジェットに挿入するには、「タグクラウド」ブロックを追加するだけです。
タグクラウドは、投稿数に基づいて各タグに異なるフォントサイズを割り当てます。各タグの横に投稿数を表示することも選択できます。
これらは WordPress で利用可能なデフォルトのオプションにすぎませんが、タグをさらにカスタマイズしたい場合はどうでしょうか？その方法を説明します。
WordPressでタグを簡単にスタイル設定する方法を見てみましょう。
WordPressでデフォルトのタグクラウドをスタイリングする
タグクラウドブロックを投稿またはページに追加した後、カスタムCSSを追加することでカスタマイズできます。
タグクラウドブロックには、それらをスタイル設定するために使用できるデフォルトのWordPress生成CSSクラスが自動的に含まれています。
WordPressサイトにカスタムCSSを追加するには、外観 » カスタマイズページに移動し、「追加CSS」タブに切り替えます。
このカスタムCSSコードを開始点として追加できます。
.tag-link-position-1 { font-size:40px!important;}
.tag-link-position-2 { font-size:35px!important;}
.tag-link-position-3 { font-size:30px!important; }
.tag-link-position-4 { font-size:35px!important; }
.tag-link-position-5 { font-size:30px!important; }
.tag-cloud-link {
text-decoration:none;
background-color:#fff;
}
.tag-link-count {
background-color: #d6d6d6;
}
ご覧のとおり、.tag-link-position クラスを使用して、リンクの位置に基づいてスタイルを調整できます。投稿数が多いタグは位置が高くなり、投稿数が少ないタグは位置が低くなります。
タグクラウドブロックのすべてのタグを同じサイズにしたい場合は、代わりに以下の CSS を使用できます。
.tag-cloud-link {
font-size:16px !important;
border:1px solid #d6d6d6;
}
.tag-cloud-link {
text-decoration:none;
background-color:#fff;
}
.tag-link-count {
background-color: #d6d6d6;
}
テストサイトではこのように表示されました：
WordPressで投稿タグをスタイリングする
タグクラウドをスタイル設定するだけでなく、個々のブログ記事に表示される投稿タグをスタイル設定したい場合もあります。通常、WordPressテーマでは、投稿タイトルの上部または下部、あるいは投稿コンテンツの上部または下部に表示されます。
タグにマウスオーバーして右クリックすると、Inspectツールを使用して、WordPressテーマで使用されているCSSクラスを表示できます。
その後、カスタムCSSでこれらのCSSクラスを使用できます。以下は、テストテーマのCSSクラスに基づいたサンプルコードです。
.entry-tag {
padding: 5px 8px;
border-radius: 12px;
text-transform: lowercase;
background-color: #e91e63;
color:#fff;
}
.entry-tags a {
color:#fff;
font-size:small;
font-weight:bold;
}
これは、テストサイトでの表示です。
WordPressでカスタムタグクラウドを作成する
デフォルトのタグクラウドブロックは使いやすいですが、より柔軟性を持たせたい上級ユーザーはカスタマイズしたい場合があります。
この方法では、タグクラウドを囲む独自の HTML および CSS クラスを追加できます。その後、要件に合わせてタグクラウドの外観をカスタマイズするために使用できます。
まず、このコードをテーマのfunctions.phpファイルまたはコードスニペットプラグインにコピー＆ペーストする必要があります。
function wpb_tags() {
$wpbtags = get_tags();
foreach ($wpbtags as $tag) {
$string .= '<span class="tagbox"><a class="taglink" href="'. get_tag_link($tag->term_id) .'">'. $tag->name . '</a><span class="tagcount">'. $tag->count .'</span></span>' . "\n" ;
}
return $string;
}
add_shortcode('wpbtags' , 'wpb_tags' );
このコードは、WordPress のカスタムコードをテーマの functions.php ファイルを編集せずに簡単に追加できる最高のコードスニペットプラグインである WPCode を使用して追加することをお勧めします。これにより、サイトが壊れるのを防ぐことができます。
まず、無料のWPCodeプラグインをインストールして有効化してください。ヘルプが必要な場合は、WordPressプラグインのインストール方法に関するチュートリアルをご覧ください。
プラグインを有効化したら、WordPressダッシュボードからCode Snippets » Add Snippetに移動します。
次に、「カスタムコードを追加（新規スニペット）」オプションにマウスカーソルを合わせ、「スニペットを使用」ボタンをクリックします。
ここから、画面に表示されるオプションのリストからコードタイプとして「PHPスニペット」を選択する必要があります。
次に、ページの上部にあるスニペットのタイトルを追加できます。これは、コードが何のためのものかを覚えておくのに役立つものであれば何でも構いません。
次に、上記のコードを「コードプレビュー」ボックスに貼り付けるだけです。
その後、スイッチを「非アクティブ」から「アクティブ」に切り替え、「スニペットを保存」ボタンをクリックするだけです。
このコードは、すべてのタグとその投稿数を横に表示するショートコードを追加します。
アーカイブページやウィジェットに表示するには、このショートコードを使用する必要があります。
[wpbtags]
このコードだけを使用すると、タグリンクと、その横にある投稿数が表示されるだけです。見栄えを良くするためにCSSを追加しましょう。このカスタムCSSをウェブサイトにコピー＆ペーストしてください。
.tagbox {
background-color:#eee;
border: 1px solid #ccc;
margin:0px 10px 10px 0px;
line-height: 200%;
padding:2px 0 2px 2px;
}
.taglink {
padding:2px;
}
.tagbox a, .tagbox a:visited, .tagbox a:active {
text-decoration:none;
}
.tagcount {
background-color:green;
color:white;
position: relative;
padding:2px;
}
必要に応じてCSSを自由に修正してください。これはデモサイトでの表示例です：
この記事が、WordPressでタグを簡単にスタイル設定する方法を学ぶのに役立ったことを願っています。また、WordPressでサブカテゴリを非表示またはスタイル設定する方法に関するガイドをご覧になるか、便利なWordPressのヒント、トリック、ハックのリストをご覧ください。
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。
kzain
WordPressでタグをスタイル設定することは、ブログ全体のルックアンドフィールに大きな違いをもたらすことができます。プロセスを簡単なステップに分解してくれたのが気に入っています。CSSの例は非常に役立ちます。カスタマイズを失うのを避けるために子テーマを使用するというあなたのヒントも高く評価されています。これで、私のタグにふさわしいメイクオーバーを finally 与えることができます！あなたの専門知識を共有し、WordPressのカスタマイズを私たち全員がより利用しやすくしてくれてありがとう。
イジー・ヴァネック
この記事を読んだとき、自分でタグクラウドを作成したい衝動に駆られました。あなたのスニペットを使用しましたが、色を変更し、角をわずかに丸めました。それは魔法のように機能しました。ウェブサイト全体のテーマと同じ色でタグを持つことは良いことです。それは小さな詳細かもしれませんが、非常に心地よいです。
デニス・ムトミ
ステップバイステップガイドとコードスニペットは非常に役立ちます
クイック質問：これらのコードスニペットをタグのスタイリングに適用し、後でWordPressテーマを変更することにした場合、タグのスタイリングは新しいテーマのデフォルトスタイルに従って変更されますか、それともこれらのコードスニペットを使用して行ったカスタマイズにとどまりますか？
WPBeginner コメント
追加したCSSはそのまま残しておくべきですが、新しいテーマのCSSがスタイリングにどのように影響するか、また競合がないかによっては、CSSを編集する必要がある場合があります。
デニス・ムトミ
こんにちは、分かりやすい説明をありがとうございます！
マイナーな調整でカスタマイズを維持できるのであれば、それは非常に役立つ情報です。
追加の質問が1つあります。テーマを切り替える際に、タグのスタイルに影響を与えるCSSの競合をチェックし、解決するための最良の方法は何でしょうか？
WPBeginnerサポート
特定のおすすめの方法はありません。手動で確認していただく必要があります。
イジー・ヴァネック
デニスさんの質問についてフォローアップです。WP Code を使って CSS を追加するのと、テンプレートに直接記述するのとでは、どちらが良いでしょうか？テンプレートに直接記述した場合、テーマを変更すると設定が失われると思いますが、WP Code を使用した場合、テーマを変更してもスタイルは残るのでしょうか？合っていますか？
WPBeginner コメント
正しいです。これは、テーマカスタマイザーの追加CSSセクションを使用するのと似ています。
ただし、必要なCSSはテーマによって異なるため、有用性は異なります。
Nikola
素晴らしいガイド、ありがとうございます！
タグを最も使用されている順に並べ替え、表示されるタグの数を制限することは可能ですか？
WPBeginnerサポート
現時点では、それにはプラグインまたはカスタムコードを使用する必要があります。現時点では推奨される方法はありません。
管理者
ジェマ・ポッラーリ
素晴らしい、ありがとう。これは本当に役に立ちました。
WPBeginnerサポート
Glad our guide could help
管理者
ジョー・スミス
これは素晴らしいです！まさに探していたもので、とても上品です。質問が一つあります。タグの間にスペースを追加したい場合、CSSをどのように変更すればよいですか？上記のCSSのいくつかの設定を変更してみましたが、タグの間に空白を追加するだけの設定はありませんでした。
WPBeginnerサポート
You would want to increase the padding for what you’re wanting
管理者
イビエ・アンビル
こんにちは、投稿タグをアイキャッチ画像のしたに移動させたいのですが
WPBeginnerサポート
そのためには、各テーマでアイキャッチ画像の場所が異なるため、ご利用のテーマのサポートに問い合わせる必要があります。
管理者
トリシャ
単一の投稿のタグに CSS クラス「current」を追加しようとしています。見つけたいくつかの解決策は、もう機能しないようです。どうすればこれを実行できますか？
WPBeginnerサポート
これは、お使いの特定のテーマによって異なります。テーマのサポートに連絡すれば、タグにそのクラスを追加できる場所を教えてくれるはずです。
管理者
uche Peter
私のタグはシリアルにリストされています。境界線もなく、何もありません。ただのテキストです。背景色付きの境界線を与えるにはどうすればよいですか？
Kingsolomon
CSSはどのように適用すればよいですか？
Hugo
私のタグクラウドはクラウドではなくリストとして表示されます。各 span の後に改行が挿入されるためです。これらの改行を削除するにはどうすればよいですか？
WPBeginnerサポート
こんにちは、ヒューゴさん。
この記事では、タグをさまざまな方法でスタイル設定する方法について説明します。タグクラウドが必要な場合は、デフォルトの WordPress タグクラウドウィジェットを使用できます。テンプレートタグを使用することもできます。
1-click Use in WordPress
管理者
bob
タグを特定の数に制限する方法は別のページで示されたことは理解していますが、この例を含めてどのようにすればよいですか？リンクされている方法をこれと組み合わせて使用しても機能しないようです。
エイミー・クロソン
これを追加するのに苦労しています。おそらく私の「Chosen」テーマが制限しているのだと思います。PHPにすべてコピー＆ペーストしましたが、エラーが多発しています。現在、「.taglink」、「.tagbox」、「.tagcount」の前に未知の「.」があると表示されています。「.」を使用せずにこれをフォーマットする方法はありますか？
Val Archer
こんにちは – category-slug.php ページでタグを一覧表示する方法を探しています。そのチュートリアルはどこで見つけられるかご存知ですか？
これまでのところ、カテゴリ [sitename]/category/recipes と category-recipes.php を作成しました。
レシピに朝食、夕食などのタグを付けています
カテゴリ-recipes.phpで、タグがこのように表示されるようにしたいです。どうすればいいかわかりません。category.phpファイルからコピーしています。
カテゴリのアーカイブ:
朝食
これで、朝食というタグが付いたすべての投稿が次のように表示されます:
<a href="”>
投稿者: / / カテゴリ: cat_name . ‘ ‘;} ?>
夕食
これで、夕食というタグが付いたすべての投稿が次のように一覧表示されます：
<a href="”>
投稿者: / / カテゴリ: cat_name . ‘ ‘;} ?>
[すべてのタグの最後に：]
</div
これについて助けを得られる場所を知っていますか？
ありがとうございます！ – Val
WPBeginnerサポート
以下を追加してみましたか？
<?php the_tags('posted in:', '' ,'' ); ?>管理者
Magistar
コードはタグクラウドには問題なく機能します。しかし、これを投稿タグ（つまり、投稿に関連付けられたタグとその数、大きなリストの代わりに）に適用したいと考えています。
wp_get_post_tagsで試しましたが、うまくいきませんでした。何か提案はありますか？
WPBeginnerスタッフ
get_tags の代わりに get_terms を使用できます。この Codex ページを参照してください。
http://codex.wordpress.org/Function_Reference/get_terms
DER KUNSTBLOG
それは素晴らしいですね。サイト固有のプラグインにコードを追加しましたが、タグの使用頻度に応じてフォントサイズが変動するように変更することは可能ですか？何かアイデアはありますか？ありがとうございます！
WPBeginnerスタッフ
はい、可能です。最初のコードスニペットで、get_tags を wp_tag_cloud 関数に置き換える必要があります。以下のようになります。
$wpbtags = wp_tag_cloud('smallest=15&largest=40&number=50&orderby=count&format=array');
ゲスト
カテゴリやカスタムタクソノミーのカスタムタグクラウドで同じことをするにはどうすればよいですか？
テレンス・オニール
こんにちは、仲間。カテゴリとカスタム分類法についても、同じこと（ショートコードで表示）をどのように行いますか？チュートリアルはありがとうございました。見事に機能しました。