WordPress のテーマ TwentyFourteen のカスタマイズ記事です。
TwentyFourteen の一覧、個別記事に表示される投稿メタ情報のカスタマイズで、「カテゴリ」を表示させるついでにアイコンフォントを使って装飾してみました。
下に表示されている「フォルダ」のアイコンです。
過去にこのアイコンフォントの使い方を書き残してはいたのですが、すっかり忘れていたようで軽くハマったので改めてメモしておこうと思います。
スポンサーリンク
カテゴリの表示をアイコンフォントで装飾
下記のカスタマイズで一度カテゴリの表示を取り除いているので、今回は再度カテゴリを表示させる所から。
カテゴリを表示するためのコード
投稿に設定したカテゴリ情報は the_category() 関数で表示させます。
表示するコード自体はこんな感じで書いて、
<span class="entry-category">
<?php the_category(', '); ?>
</span>
このブログの場合はこんな感じの場所に追加しています。(投稿日時の横)
<div class="entry-meta">
<?php
printf( '<span class="entry-date"><a href="%1$s" rel="bookmark"><time class="entry-date" datetime="%2$s">%3$s</time></a></span>',
esc_url( get_permalink() ),
esc_attr( get_the_date( 'c' ) ),
esc_html( get_the_date() )
);
?>
<span class="entry-category">
<?php the_category(', '); ?>
</span>
</div><!-- .entry-meta -->
<div class=”entry-meta”> ? </div><!– .entry-meta –> 間の処理はデフォルと大分違うのですが、「投稿日時」と「カテゴリ」だけに絞って表示させています。
※ 詳しくは上記の関連記事を参照
カテゴリをアイコンフォントで装飾する
content.php の修正が完了した後はスタイルシートでアイコンフォントの設定をします。
TwentyFourteen のアイコンフォントは、TwentyThirteen でも使われていた「Genericons」というフォントを利用しています。
関連記事
TwentyThirteenで使われているアイコンフォント
TwentyTwelveにもアイコンフォントを導入してみた
既に必要なファイル等は親テーマより読み込まれているので、下記をスタイルシートに追加するとアイコンフォントが表示できると思います。
@media screen and (min-width: 401px) {
・
・~省略~
・
.site-content .entry-category a:before {
-webkit-font-smoothing: antialiased;
display: inline-block;
font: normal 16px/1 Genericons;
text-decoration: inherit;
vertical-align: text-bottom;
color: #21759b;
}
.site-content .entry-category a:before,
.attachment .site-content span.entry-category:before {
content: "\f301";
margin-right: 1px;
position: relative;
top: 3px;
}
・
・~省略~
・
}
上記は 401px 以上で表示した時の例ですので、スマホでも表示させたい場合は @media screen and (max-width: 400px) の中に書いてあげると良いと思います。
また、投稿メタ情報をカスタマイズで削ったりした場合は不要なルール等もでてくると思うので任意に削って完成という具合です。
利用するアイコンフォントのコードは、公式ページに表示されるアイコンをクリックして「Copy CSS」を押すと簡単に確認できます。
最後にスマホでアイコンフォントを使う場合の留意点というか懸念事項。
このブログではとりあえずスマホでも表示させるようにしてみましたが、このアイコンフォントって iPhone の iOS6 とiOS7 だとスタイルシートの調整位置が違うんですよね・・・
大体は iOS7 になったと思うのでコレに合わせていますが、多分 iOS6 のサファリで見るとフォント位置が変だと思います。もしかすると Android でも。
もしかすると解決方法等があるかもしれないのですが、ここではとりあえず気にせずに使ってます。
それを除けばアイコンフォントは結構便利に使えるのでオススメです。
簡単ですが「TwentyFourteenでアイコンフォント使って文字を装飾する」は以上になります。