WordPressで自作テーマ作り(第7回:投稿日とカテゴリー表示)

スポンサーリンク


WordPress(ワードプレス)の仕組みがわからない方向けに順を追って説明する長期連載の第7回は「投稿日とカテゴリー表示」です。見出しと本文の間には投稿日やカテゴリーがあると、読者にとっても「いつ投稿されたのか」「どんなジャンルの記事なのか」が一目でわかるので便利です。

テーマ編集に便利な「WP Editor」も導入しておこう

今回から作業効率を高めるため「WP Editor」を導入します。通常は「外観>テーマ」でテーマ編集をするのですが、コードの色分けがされないなど判別しにくいので、ぜひ導入しておきたいソフトでしょう。プラグインの新規追加から検索、インストールしてください。

wp_edetor

テーマの編集に便利なwp_edetor

投稿日を表示させる

投稿日の表示で使うのは以下のコードです。

//日時の表示
<!--?php echo get_the_date();?&gt;

</pre>
<p>このコードを、見出しと本文の間に挟みましょう。</p>
<pre>




<article <?php post_class();?&gt;&gt;


<h1&gt;<?php the_title();?&gt;</h1&gt;


//見出しと本文の間に日時表示のコードを挟む
<?php echo get_the_date(); ?&gt;
<?php the_content();?&gt;
</article&gt;


</pre>
<p>すると、ページは以下のように変化します。</p>
<div class=”mceTemp”><dl id=”attachment_1783″ class=”wp-caption aligncenter” style=”width: 757px”><dt class=”wp-caption-dt”><img class=”size-large wp-image-1783″ src=”https://banabo.net/wordpress/wp-content/uploads/2016/08/317612a31b95481324e23464013b30ff-1024×179.png” alt=”日時の表示” width=”747″ height=”131″ ?–>日時が表示された

datetime属性の追加

記述の通り、見出しと本文の間に日時が表示されました。

しかし、これで終わりではありません。次に、追加したコードを「日付」として検索エンジンに認識してもらうための設定が必要となります。以下のコードで囲みましょう。


<time datetime="&quot;<?php"></time></pre>
<time>タグはHTML5から新しく追加され、日付の情報を示すコードです。これにdatetime属性を追加することで、検索エンジンが国際規格(ISO8601)に則って日付情報として認識してくれます。datetime属性も同様に年月日として認識されるように、パラメータに「Y(year)-m(month)-d(day)」を追加しましょう。
<pre>

//datetime属性にY-m-dを追加

<time datetime="&quot;<?php"></time></pre>
<h2>カテゴリーを表示させる</h2>
続いて、カテゴリーの表示に移ります。一般的なサイトでは、カテゴリーは投稿日の後に記述されるため、投稿日のタグの後に以下のコードを打ち込みましょう。
<pre>

<!--?php the_category();?&gt;

</pre>
<div class=”mceTemp”><dl id=”attachment_1799″ class=”wp-caption aligncenter” style=”width: 510px”><dt class=”wp-caption-dt”><img class=”wp-image-1799″ src=”https://banabo.net/wordpress/wp-content/uploads/2016/08/63bd6d1797a819b1baf447409afb1458-1024×285.png” alt=”カテゴリーが追加された” width=”500″ height=”139″ ?–>カテゴリーが追加された

スポンサーリンク

カテゴリー間に区切り文字をいれる

これでカテゴリーサイト内にカテゴリーが表示されましたね。しかし、リスト形式で表示されているため文頭に「・」がついており、かつ縦に並んでしまっているため、これでは見栄えがかっこ悪いです。これを解消して投稿日の後ろに回り込ませるには、カテゴリータグのパラメーター内に「’,’(カンマ)」を入れる必要があります。


<!--?php the_category(',');?&gt;

</pre>
<p>すると、カテゴリーが投稿日に後ろについてきて、カテゴリー間がカンマで区切られました。これはカンマではなく「’-‘(ハイフン)」でも代用ができます。要は、区切り文字であればなんでもよいのです。</p>
<div class=”mceTemp”><dl id=”attachment_1798″ class=”wp-caption aligncenter” style=”width: 510px”><dt class=”wp-caption-dt”><img class=”wp-image-1798″ src=”https://banabo.net/wordpress/wp-content/uploads/2016/08/ab3c5a04c62c9e6a271ffb5451f13e1b-1024×173.png” alt=”リストが解除されて横並びに” width=”500″ height=”84″ ?–>リストが解除されて横並びに

しかし、まだリンクの下線や青色、カンマなどが気になります。これらの問題はスタイルシートで調整するので、投稿日とカテゴリーをひとくくりの入れ子にしましょう。

さらに、カテゴリーもspan要素で囲んで詳細にデザインできるようにクラス名を与えておきましょう。

</pre>
<div class="&quot;postinfo&quot;>">
<h3>投稿日とカテゴリーをスタイルシートで調整</h3>
そして、入れ子のクラス「postinfo」をスタイルシートで指定して見栄えを調整します。

フォントサイズは一回り小さい14px、リンク文字の色は黒、下線なしを選択しましょう。
<pre>

*日付とカテゴリー*/
.postinfo {font-size:14px}
.postinfo a {color:#000000;
text-decoration:none}

これで文字が一回り小さくなり、かつ文字の色も黒くなりすっきりしました。

リンクの色が黒、下線も取れました

リンクの色が黒、下線も取れました

ただ、これでは投稿日とカテゴリーがあまりにもくっついている印象を与えますから、より独立感を出すためには余白を調節する必要があります。

見出しとくっつきすぎないように、投稿日の上部に空きを入れて、さらに投稿日とカテゴリーの間に空きをいれましょう。


/*日付とカテゴリー*/
.postinfo {font-size:14px;
margin-top:15px}
.postinfo a {color:#000000;
text-decoration:none}
.postinfo .postcat{margin-left:20px}

これで、より投稿日とカテゴリーが独立した雰囲気になりましたね。

リンクとカテゴリーが調整されました

リンクとカテゴリーが調整されてアキができました

第7回はこれにて終了します。次回は、投稿日やカテゴリーにアイコンフォントをつけてよりそれらしい雰囲気をつけましょう。

スポンサーリンク


完成サンプル図

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

ABOUTこの記事をかいた人

新聞社の記者をしています。仲間との起業を夢見て、これまでに学んできたノウハウを記しておきます。現在、主に結婚新聞や企業・団体向けの広報紙を制作していますが「こんな紙面をつくってほしい」とのご要望にも随時お応えしています。