【WordPress自作テーマ】トップページの記事一覧を作る、サムネイル表示 #4

こんにちは、もちです。

自作テーマを作る過程を記事にしています。前回まではヘッダーの見た目を作ってきたので今回は記事一覧の見た目を作っていこうと思います。

使用した関数も最後に紹介しようかと思います

現状と目指す形

このサイトの現状はただ記事がタイトルがリンク付きで並んでいるだけですごく見にくいです。

プリミティブすぎるのでこれを下の画像のようにカスタマイズしたいといった感じです

現状サムネイルがないので、サムネイルを追加、投稿日時投稿者などを表示します。
センスは無いですが見やすさと原始的な見た目は改善すると思います。
それぞれの記事をブロックにして一列に2こずつ表示します。

まずはHTMLで作成するテンプレートを再現する

先程の見た目のテンプレートを作っていこうと思います。

テンプレートはWordPressではphpで実行されます、実行されたらHTMLが出力されるのですが、出力されるHTMLが必要なのでコーディングをしていきます。

先程の見た目に要素ごとの区切り線を弾いた状態です。
これをmainタグの中に作っていきます。
それぞれわかりやすいようにタグを画像にすると

全てのブロックをsectionで囲い、ブロック自体はaタグで囲います。
それ以外の子要素はdivで囲いレイアウトをしましょう。
青いdivの中には画像、水色のdivの中には投稿日時や投稿者、下の紫にはタイトルを入れます。

html

<section class="articles">
	<a href="記事リンク">
		<div>
			<div class="article-box1">
				<div class="article-box1-img">
					<img src="https://placehold.jp/1920x1080.png" alt="タイトル">
				</div>
				<div class="article-box1-info">
					<author>投稿者</author>
					<p><time>2020.02.10</time></p>
				</div>
			</div>
			<div  class="article-box2">
				<h2>これはサンプルのタイトルです、記事タイトルが入ります。</h2>
			</div>
		</div>
	</a>
	<a href="記事リンク">

		<div>
			<div class="article-box1">
				<div class="article-box1-img">
					<img src="https://placehold.jp/1920x1080.png" alt="タイトル">
				</div>
				<div class="article-box1-info">
					<author>投稿者</author>
					<p><time>2020.02.10</time></p>
				</div>
			</div>
			<div  class="article-box2">
				<h2>これはサンプルのタイトルです、記事タイトルが入ります。</h2>
			</div>
		</div>
	</a>
</section>

CSS

html { font-size: 62.5%;background:#F1F1F1;}
p{font-size:1.5rem}
.articles{display:flex;flex-wrap: wrap;}
.articles a{text-decoration:none;display:inline-block;width:48%;padding:1%;color:#23282d;}
.articles a>div{padding:3%;background:white;}
.article-box1{display:flex;align-items: flex-start;padding-bottom:3%;}
.article-box1-img{width:65%;height:130px;display:flex;}
.article-box1-img img{width:100%;}
.article-box1-info{padding-left:3%;}
.article-box1-info author,.article-box1-info p{margin:0 0 0.5rem 0;font-size:1.5rem;display:block;}
.article-box2{display:flex;width:100%;}
.article-box2 h2{height:5rem;margin:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow: hidden;font-size:1.6rem;}

若干レイアウトを変えましたがこのコードで以下のような表示になります。

だいぶ WordPressの管理画面みたいな色ですがこれでHTML部分は作成が終わりました。

phpテンプレート内で作ったレイアウトで出力する

先程までの工程で実際に表示したいHTMLを作成したのでトップページのテンプレートで出力できるようにしていきます。
index.php内のメインループ内に以下の文を追加しましょう

index.php

<a href="<?the_permalink()?>">
	<div>
		<div class="article-box1">
			<div class="article-box1-img">
				<?if(has_post_thumbnail()){?>
				<img src="<?the_post_thumbnail_url('medium')?>" alt="<?the_title()?>">
				<?}else{?>
				<img src="https://blog.sumahotektek.com/wp-content/uploads/2021/02/no-image.jpg" alt="<?the_title()?>">
				<?}?>
			</div>
			<div class="article-box1-info">
				<author><?the_author_nickname()?></author>
				<p><time><?the_time( 'Y.m.d' )?></time></p>
			</div>
		</div>
		<div  class="article-box2">
			<h2><?the_title()?></h2>
		</div>
	</div>
</a>

ループ自体も

<section class="articles">
</section>

で囲ってください
同ページ内で読み込まれるCSSどこでも良いので下のCSSも配置します。

.articles{display:flex;flex-wrap: wrap;}
.articles a{text-decoration:none;display:inline-block;width:48%;padding:1%;color:#23282d;}
.articles a>div{padding:3%;background:white;}
.article-box1{display:flex;align-items: flex-start;padding-bottom:3%;}
.article-box1-img{width:65%;height:130px;display:flex;}
.article-box1-img img{width:100%;}
.article-box1-info{padding-left:3%;}
.article-box1-info author,.article-box1-info p{margin:0 0 0.5rem 0;font-size:1.5rem;display:block;}
.article-box2{display:flex;width:100%;}
.article-box2 h2{height:5rem;margin:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow: hidden;font-size:1.6rem;}

そうすると、こんな感じの表示になります！
無事に、記事のサムネイルの表示ができるようになりました！
使った関数をいくつか紹介します。
今回紹介する関数は全てメインループ内で使用できます

the_permalink()で記事リンクを取得

the_permalink()

をメインループ内で使用すると、今のループ内の記事リンクを出力します。
WordPressではtheで始まる関数はたいていそのまま文字を出力し、getから始まる関数は文字を返します。
今回はaタグで使う記事リンクを出力しました。
またこの関数は投稿IDや投稿オブジェクトを渡すことでメインループ外でも使用できます。

has_post_thumbnail()でサムネイル(アイキャッチ)があるかを判定

has_post_thumbnail()

をメインループ内で使用すると投稿にサムネイル(アイキャッチ)があるかをbool(falseもしくはtrue)で返します。
記事IDを渡しても同じ挙動をします。
今回はサムネイルがあればサムネイルを表示、なければNo Imageを表示するようにしました。

the_post_thumbnail_url()でサムネイル(アイキャッチ)のURLを取得

the_post_thumbnail_url()

はサムネイル(アイキャッチ)のURLを取得する、WordPress 4.4以降で使用可能、サムネイルがあるときに画像URLを出力します。
Webpなどの画像も出力可能でしたので今回はWebp画像リンクを取得しています。
この関数も記事IDを渡すとIDに対応したリンクを出力します。

the_title()でタイトルを取得

the_title()

はメインループ内で使用すると現在の投稿のタイトルを出力します。
記事IDを渡すと記事IDに対応したタイトルを出力します。

the_author_nickname()で著者ニックネームを取得

the_author_nickname()

をメインループ内で使用すると著者(ユーザー)のニックネームを出力します。
ニックネームとは、設定にある「表示上の名前」に入力されている名前です。
著者(ユーザー)IDを渡しても同じ挙動をします、また

the_author_meta( $field, $userID )

でもユーザー情報を取得できます
fieldは

  • user_login
  • user_pass
  • user_nicename
  • user_email
  • user_url
  • user_registered
  • user_activation_key
  • user_status
  • display_name
  • nickname
  • first_name
  • last_name
  • description
  • jabber
  • aim
  • yim
  • user_level
  • user_firstname
  • user_lastname
  • user_description
  • rich_editing
  • comment_shortcuts
  • admin_color
  • plugins_per_page
  • plugins_last_view
  • ID

があります。
この関数はユーザーIDを渡すのにユーザーIDを取得できるのがずっと謎に思っていたのですが、
メインループ内でユーザーIDがわからずにfieldだけを指定する場合ユーザーIDを取得できるのでなんだかんだ便利ですね。

the_time()で投稿日を取得

the_time($format)

は投稿日や時刻などを出力できます

the_date($format)

も同じ挙動をしますが同じ日にちがあると2回目以降は何も出力しなくなるので基本的にはthe_timeを使用しましょう。
$formatは指定しないとWordPressで設定したデフォルトの時刻形式で出力します。

まとめ

トップページが少しは見やすくなってきてだんだんWordPressぽさが出てきました！
次回はサイドバーレイアウトとサイドバーに少しづつコンテンツをおいていきたいと思っています！
スマホ版対応がまだなので先にそちらをするかもしれません。

まだまだ足りていない部分が多くて優先順位がつけ難いですね笑
がんばります！

ここまでのテーマはv3.1です。

記事下のフォームから過去のテーマのアーカイブに切り替えることができます。

テーマ

現在使用中テーマは最新版

v.1.0v.2.0v.3.0v.3.1v.3.2v.3.3v.3.4v.3.5v.3.6v.3.7v.3.8v.shaneron選択しない(安定版)