シングルページのタグにFont Awesomeのタグアイコンを表示
タグは、投稿タイプを超えて、使用でき、関連記事を探すのに便利な機能です。今回は、シングルページのタグにFont Awesomeのタグアイコンを表示する方法を紹介します。
タグ作成
サイドメニューの投稿＞タグをクリックします。タグ設定画面が表示されます。名前にタグの名前、スラッグにタグのスラッグを設定し、新規タグ追加をクリックします。
投稿＞タグをクリック
名前にタグの名前、スラッグにタグのスラッグを設定
コード
シングルページのループ内に下記コードを入力します。
<?php the_tags('<div class="tags-links"><ul><li><i class="fas fa-tags"></i>', '</li><li><i class="fas fa-tags"></i>', '</ul></div>'); ?>CSSでスタイルを整えます。
.tags-links li{
display: inline-block;
font-size: var(--font-sm);
padding: 0.5em 0.7em 0.4em;
margin-right: 0.5em;
margin-bottom: 0.5em;
background: #D3D3D3;
line-height: 1;
border-radius: 0.5em;
}
.tags-links .fa-tags{
padding-right: 0.3em;
}設置
右サイドバーのタグ＞新規タグを追加にタグの名前を入力します。下に登録したタグが表示されるのでクリックします。これで設定完了です。その他のタグも設置します。プレビューで確認します。
タグ＞新規タグを追加にタグの名前を入力
その他のタグも設置
プレビューで確認
以上で今回の説明は終了です。カテゴリーなどと混同しないように、タグのスタイルを分けるのに便利ですね。
