simplecoreな毎日

アラフォー既婚男性の日々、子育て、その他雑記

2017.11.28

【WordPress】シンプルなオリジナルテーマの作り方(5)~投稿記事ページ~

WordPress

これまで何回かに分けてWordPressのオリジナルテーマの作り方を説明してきましたが、先ほど前回までの記事を大幅に修正しました。見直していたら気になる点が多く見受けられたので・・・すいません。

今回からは修正した内容を元に話しを進めていきますので、もしこれまでの記事を読んで下さっていたら、再度確認してもらえればと思います。

ということで、前回までの説明でトップページまで出来ているかと思います。

【WordPress】シンプルなオリジナルテーマの作り方(4)~トップページ~
読み返したところ気に入らない点が多々あったため、当初とは大幅に内容を修正しました。一度確認してみてください。最終更新日は2017年11月29日です。前回までの記事でb...

ただ、このままでは記事タイトルをクリックしても記事の内容が表示されません。なので、今回は記事の内容を表示するページを作っていきます。

投稿した記事を表示できるようにする

投稿した記事を表示できるようにするには、single.phpを作る必要があります。といってもこれも簡単に作れます。

single.php

single.phpというファイルを作ったら下記をコピペしてください。

<?php get_header(); ?>

<div class="container">
	<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
		<article class="single">
			<h2 class="headline"><?php the_title(); ?></h2>
			<p class="cat"><?php the_category(', ') ?></p>
			<p class="postdate"><?php the_time('Y/m/j') ?></p>
			<section>
				<?php the_content(); ?>
			</section>
		</article>
	<?php endwhile; ?>

	<div class="nav-below">
		<span class="nav-previous"><?php previous_post_link('%link', '<'); ?></span>
		<span class="nav-next"><?php next_post_link('%link', '>'); ?></span>
	</div><!-- /.nav-below -->

<?php else : ?>
	<h2>記事が見つかりませんでした。</h2>
<?php endif; ?>

</div>

<?php get_footer(); ?>

ループの書き方はindex.phpのときと同じです。ループの内容が若干変わっているだけですね。

それぞれの説明

ループ内容の変更点

まず、記事タイトルとカテゴリー名の順番を入れ替えています。そして、今回は記事タイトルのリンクを外しました。

次に、

<?php the_content(); ?>

ですが、これは投稿した記事の内容を出力するためのテンプレートタグになります。これがこのsingle.phpの肝といったところでしょうか。ループの内容は以上です。

「投稿内容を繰り返すわけじゃないのに“ループ”だぁ~?」と思われるかも知れません。ちなみに僕は思いました。えぇ、捻くれています。

実際、ループを組まなくても投稿記事を表示させることは可能です。ただ、WordPressの公式ではループを使わない方法は推奨されていないようですので、少し気持ち悪いですが使っておいた方が無難です。

前後の記事へのリンク

下記が前後の記事へのリンクになります。

<div class="nav-below">
	<span class="nav-previous"><?php previous_post_link('%link', '<'); ?></span>
	<span class="nav-next"><?php next_post_link('%link', '>'); ?></span>
</div><!-- /.nav-below -->

「<」や「>」(大文字の山括弧)を「前の記事」、「次の記事」などにすることも出来ます。

<?php else : ?>以下はindex.phpと一緒です。

画像に関する小技

投稿記事内に画像を挿入する場合の便利な小技です。記事内に挿入する画像に自動的にクラスを付与して、そのクラスに対してCSSでスタイリングをする方法を紹介します。

functions.php

functions.phpに下記を記述します。

function image_class_filter($class)
{
  $class = 'postimg';
  return $class;
}
add_filter('get_image_tag_class', 'image_class_filter');

3行目のpostimgという部分が挿入する画像の<img>に付与されるクラス名になります。もちろん、好きなクラス名に変更できます。

今回は画像を<div class="container">の幅いっぱいに表示できるように、このpostimgというクラスをつかってCSSを書きます。

CSSでスタイリング

style.css

今回説明した部分のCSSは下記の通りです。前回までのものに追記してください。

.headline{
    text-align: center;
    font-size: 23px;
    line-height: 1.8rem;
    margin: 0 0 1rem 0;
}
.single{
    margin: 0 0 4rem 0;
}
.single .cat{
    text-align: center;
    margin: 0 0 0 0;
}
.single .postdate{
    text-align: center;
    margin: 0 0 1.5rem 0;
}
.single p{
    font-size: 14px;
    line-height: 1.5rem;
    margin: 0 0 1.5rem 0;
}
.single section{
    max-width: 860px;
    margin: 0 auto;
}
.single section .postimg{
    max-width: 100%;
    height: auto;
}
.nav-below{
    display: -webkit-flex;
    display: flex;
    font-size: 12px;
}
.nav-below span{
    display: inline-block;
    background: #aaa;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    text-align:center;
    line-height: 30px;
    vertical-align: middle;
}
.nav-below span a{
    color: #fff;
}
.nav-below .nav-previous{
    margin-right: auto;
}

すると、投稿記事はこんな感じで表示されるかと。

最初にある画像は実際は1000px×500pxの画像ですが、<div class="container">の幅にぴったり収まっているのがわかると思います。

痴漢問題になると女性に甘すぎやしないか?

THOUGHT

痴漢問題になると女性に甘すぎやしないか?

アラフォーおっさんが体型維持のために行うこと

LIFE

アラフォーおっさんが体型維持のために行うこと

【WordPress】シンプルなオリジナルテーマの作り方(9)~404ページ~

WordPress

【WordPress】シンプルなオリジナルテーマの作り方(9)~404ページ~

アイキャッチ画像が未設定の場合に代替画像を表示する方法

WordPress

アイキャッチ画像が未設定の場合に代替画像を表示する方法

テレビスターの悲劇~Regulation Killed the TV Star~

THOUGHT

テレビスターの悲劇~Regulation Killed the TV Star~

これまでに買った赤ちゃんグッズその2

LIFE

これまでに買った赤ちゃんグッズその2

複数のPCでSublimeTextの設定を同期させる

WEB

複数のPCでSublimeTextの設定を同期させる

妻と娘と噂の古着屋西海岸へ

FASHION

妻と娘と噂の古着屋西海岸へ