WordPressのBizVektorで作成したブログにて、各記事に標準で表示される投稿日、カテゴリ名、タグ名の表示を修正する方法を紹介します。

1.問題となる箇所

初期状態では記事のタイトル直下に投稿日、カテゴリ名が表示されます。画像の赤枠部分。

今回はこの表記に対して
 ・YYYY年MM月DD日 投稿
 ・カテゴリ名 カテゴリ
 ・タグ名 タグ
という形で表記するよう修正してみます。

2.削除対象ソース

修正する対象ソースはsingle.phpです。

3.修正箇所

single.phpの以下のソース部分

<div class="entry-meta">
	<?php _e('Posted on', 'biz-vektor'); ?> : <?php echo esc_html( get_the_date() ); ?> | 
	<?php _e('Category', 'biz-vektor'); ?> : <?php the_category(', ') ?>
</div>

これを

<div class="entry-meta">
	<?php echo esc_html( get_the_date() ); ?> 投稿 / 
	<?php the_category(', ') ?> カテゴリ / 
	<?php $tags_list = get_the_tag_list( '', ', ' );
		if ( $tags_list ):
		print "$tags_list";
	?> タグ
	<?php endif; ?>
</div>

これで投稿日、カテゴリ名の見た目がコーディングどおりに変わります。

単に好みの問題ではあるのですが、自分の思ったとおりの表記に直すことができました。特にタグ名を追加したときにスマホの横幅で1行に収まる長さになっているのが利点です。

さて、せっかく冒頭にタグ名を表示できるようにしましたので、ついでに記事末尾にあるタグ名表示を削除してしまいます。

画像の赤枠部分。タグ名表示はグレーのボックスなどを活用して記載しているため数行のコーディングになっていますが、単純に削除できます。

同じくsingle.phpを修正するのですが、以下部分

	<div class="entry-content post-content">
		<?php the_content(); ?>
		<?php wp_link_pages( array( 'before' => '<div class="page-link">' . 'Pages:', 'after' => '</div>' ) ); ?>

		<div class="entry-utility">
			<?php
				$tags_list = get_the_tag_list( '', ', ' );
				if ( $tags_list ):
			?>
			<dl class="tag-links">
			<?php printf( __('<dt>Tags</dt><dd>%1$s</dd>', 'biz-vektor'), $tags_list ); ?>
			</dl>
			<?php endif; ?>
		</div>
		<!-- .entry-utility -->
	</div><!-- .entry-content -->

の一部行を削除して以下の状態にすればOKです。

	<div class="entry-content post-content">
		<?php the_content(); ?>
		<?php wp_link_pages( array( 'before' => '<div class="page-link">' . 'Pages:', 'after' => '</div>' ) ); ?>

	</div><!-- .entry-content -->

これで不要な項目の無いシンプルなコメント投稿フォームになります。
以上です。当サイトではWordpressのカスタマイズ方法を色々と紹介しているのですが、その中でphpソースやcssソースの修正箇所を提示する際に重宝しているプラグイン「Crayon Syntax Highlighter」を紹介してみます。

このプラグインを使用することで、以下のように行番号付きの見やすいソースコードを表示することができます。
[php]

修正コードの表示例

[/php]

使い方を3行でまとめると
 ・Wordpressのプラグイン追加画面で「Crayon Syntax Highlighter」と検索してインストール
 ・Wordpress管理画面の設定に「Crayon」が追加されているのでクリックして好きな設定に直す
 ・あとは各記事にてソースコード表示したい箇所をpreタグとcodeタグで囲う([pre]で囲うのも可)
という感じ。簡単です。

詳しい使い方はキャリコさんの記事を見るとわかりやすいと思います。

リンク先ではエスケープシーケンス(いわゆる半角の < や & などソース上で意味を持つ特殊文字)対策としてプラグイン自体のソースを修正する旨の記載がありますが、どうも最新版のプラグインでは初期状態で解消されているような感じがします。(少なくとも当サイトでは何もせずにしっかり表示できています) 私の場合、インストール後の設定は  ・サイズ → 横幅 → 「650」ピクセル  ・サイズ → 左余白 → チェックボックス「オン」  ・ツールバー → ツールバーの表示 → 「表示しない」を選択  ・コード → 常にスクロールバーを表示する → チェックボックス「オン」  ・タグ → Crayonsとして[php]~ → チェックボックス「オン」 という部分だけ変えました。 なかなか使いやすいプラグインです。