WordPress 記事タイトル前に投稿フォーマット別のアイコンを表示してみる

記事タイトル前に視覚的なワンポイント効果と投稿フォーマットタイプの一覧表示へのリンクを兼ねたアイコン表示を行ってみました　(^^)

管理画面の投稿画面では、ギャラリー等の投稿フォーマットが設定されているとタイトル前にアイコンが表示されます

このアイコン、例えばギャラリーフォーマットのアイコンをクリックするとこの投稿画面でギャラリーフォーマットの投稿だけが絞りこまれて一覧表示されます

記事が増えてくると目的の記事を探すのにカテゴリーや日付で絞り込んで表示させますが、この投稿フォーマットで絞り込むのも大変便利です

フォーマットタイプ毎の一覧リンク取得

この機能を Celtis-one テーマの通常の表示時にも実装したいと思い調べて見ました

この投稿フォーマットによる一覧表示に対応しているテーマはあまり見かけないと思っていたら公式テーマの Twenty Forteen がサポートしていました

コードを調べてみると get_post_format_link 関数で指定したフォーマットタイプの一覧表示のリンクが取得できることが判りました

表示アイコンを決める

次は、フォーマットタイプ毎に表示するアイコンを決めます

最初は、管理画面で使用されているアイコンと同じにしようと思ったのですが、そこで使われている Dashicons は、WP3.8から導入されたようなので、それ以前のバージョンではフォントを読み込まないと使えません

読み込んでも良かったのですが、Celtis-oneテーマでは、以前から読み込んで使用している Genericons がありますので Genericons を使用することとしました

Genericons には、投稿フォーマットタイプ毎のアイコンが用意されているのですが、ギャラリーのタイルギャラリーアイコン（カメラアイコンの右横）がどうも判り難い感じがします (^_^;)

そこで自分の好みに合わせてギャラリーはカメラアイコン、画像はピクチャーアイコンにしました

アイコン表示方法

後は、CSSでアイコンを表示するように指定すればOKです

wp_enqueue_style でアイコンを読み込む

wp_enqueue_style( 'genericons', get_template_directory_uri() . '/fonts/genericons.css', array(), null );

CSSにフォントとアイコンを定義

style.css でリンクタグに付けたクラス名の before 擬似要素として、表示するフォントのサイズ、マージン、アイコンコードの定義を行います

.post-format .post-format-image:before,
.post-format .post-format-gallery:before,
.post-format .post-format-audio:before,
.post-format .post-format-video:before,
.post-format .post-format-aside:before,
.post-format .post-format-link:before,
.post-format .post-format-quote:before,
.post-format .post-format-chat:before {
    font: normal 30px/1 Genericons;
    vertical-align: middle;
    /* margin-right: 8px; */
}

.post-format .post-format-image:before {
    content: '\f473';
}
.post-format .post-format-gallery:before {
    content: '\f102';
}
.post-format .post-format-audio:before {
    content: '\f109';
}
.post-format .post-format-video:before {
    content: '\f213';
}
.post-format .post-format-aside:before {
    content: '\f101';
}
.post-format .post-format-link:before {
    content: '\f107';
}
.post-format .post-format-quote:before {
    content: '\f106';
}
.post-format .post-format-chat:before {
    content: '\f108';
}

リンクにアイコン表示用のクラス定義追加

記事タイトルの前に span タグとリンクタグを用いて before 擬似要素で表示されるアイコンに対するフォーマットタイプの一覧リンクを付け加えます

function celtisone_list_title() {
  if(is_home() && has_post_format( array( 'gallery', 'image', 'video', 'audio', 'aside', 'link', 'quote', 'chat' ) )){
    $fmt = get_post_format();
    $fmt_class = 'post-format-' . $fmt; 
?>
<h3>
　<span class='post-format'>
　　<a class="<?php echo $fmt_class; ?>" href="<?php echo esc_url( get_post_format_link( $fmt ) ); ?>" title="<?php echo get_post_format_string( $fmt ); ?> フォーマットの投稿を全て表示"></a>
　　<a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title( );  ?></a>
　</span>
</h3>
<?php                
                
  }
  else {
?>
<h3>
　<a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title( );  ?></a>
</h3>
<?php
  }
}

実行

タイトルの前にアイコンが表示され、視覚的なワンポイント効果もあります。また、そのアイコンが投稿フォーマットタイプの一覧表示用のリンクにもなっています

なかなかいい感じです (^^)

記事タイトル前にフォーマットタイプの一覧表示へのリンクを兼ねたアイコン表示を行う方法を紹介致しました

Program TipsDashicons, Genericons, get_post_format_link