WordPressで新着5件表示

# 2019年前後の話

メジャーバージョンアップして「wordpress5.0.3」になってた。
なんかちょっと進化してるっぽい。

テンプレートタグって、いろんな書き方があると思うんですが、僕は分離して書きます。
こっちがphp部分です。。（固定ページテンプレートの一番上の方に書きました。）

```php:page-new_arrival.php
<?php
$tmp = get_posts('post_type=post&numberposts=5');
foreach ($tmp as $foreach_tmp){
	$permalink = get_permalink( $foreach_tmp->ID, $leavename );
	$img = get_the_post_thumbnail_url($foreach_tmp->ID);
	$title = get_the_title( $foreach_tmp->ID );
	if(mb_strlen($title,'UTF-8') > 22){
		$title_fixed = mb_substr($title,0,22,'UTF-8');
		$title_fixed .= '<span class="omit">…</span>';
	}else{
		$title_fixed = $title;
	}
	$hoge_list .= '
	<li class="clearfix">
		<a tabindex="402" href="'.$permalink.'">
			<div class="sum">
				<img src="'.$img.'" alt="'.$title.'">
			</div>
			<p class="cut_txt">
				'.$title_fixed.'
			</p>
		</a>
	</li>
	';
} // ココまでforeach文
?>
```

差し込まれるhtmlの方がこちらです。超スッキリ！

```php:page-new_arrival.php
<body id="<?php echo esc_attr( $post->post_name ); ?>">
	<div id="main">
		<div class="cont_box">
			<ul id="cont">
				<?php echo $hoge_list ?>
			</ul>
		</div>
	</div>
</body>
```

## 解説

### 投稿情報を取得：get_posts()
まず投稿されている記事の情報を取ってきます。参考リンクです。
http://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/get_posts

「get_posts()」っていうのがWPの投稿情報を取ってくるヤツです。
・post_typeが「post」の場合「投稿」の最新を取ってきます。
・post_typeが「page」の場合は「固定ページ」の最新を持ってくるみたいです。
・&で条件をつなぎます。
・numberofposts=5は、5件出すの意味です。

```
$tmp = get_posts('post_type=post&numberposts=5');
```

これで$tmpの中には最新の5件の投稿情報が、配列で詰め込まれました。

何が詰め込まれたんやろ‥と思う場合は「print_r($tmp)」で中身を見れます。見やすいように `<pre></pre>` で囲みました。結構うまく改行してくれるみたい。

```php:page-newarrival.php
echo "<pre>";
print_r($tmp);
echo "</pre>";
```

### ループ処理：foreach( A as B ){}
つぎに「foreach」とは、{}の中身をぐるぐる回って下さいっていう意味です。
配列を全部読むまでループします。参考リンクです。
http://alphasis.info/2012/06/php-control-foreach-reference/

・`$tmp as $foreach_tmp`というのは このループの中では `$tmp` を `$foreach_tmp` って呼びますの意味。

`foreach ($tmp as $foreach_tmp){}`
で、以下、foreachの中身に書いて行きます。

### パーマリンクを取得：get_permalink()
get_permalink() でその記事のパーマリンクを持ってきます。参考リンクです。
https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/get_permalink

・記事IDがないと、どこのパーマリンクとって来たら良いかわからないので

`get_permalink(ID,boolean)` ←のココの（）の中に記事のIDを入れます。

・ `$foreach_tmp→ID` これは、「foreach_tmp」の配列の中にある「ID」を取得してきます。

・ `$leavename` は `true` にすると `%postname%` っていう指定したURLが出てきますが、基本 `false` みたいです。
※指定しなくても動きそう。

```
$permalink = get_permalink( $foreach_tmp->ID, $leavename );
```

### アイキャッチ画像のURLを取得する：get_the_post_thumbnail_url()
imgタグの中身に使うURLがほしいので、コレにしました。参考リンクです。
http://www-creators.com/archives/472

・ `get_the_post_thumbnail()` にすると、imgタグになって出てきます。

・記事IDの指定の仕方は、先程と同じで `$foreach_tmp->ID` で取って来ます。

```
$img = get_the_post_thumbnail_url($foreach_tmp->ID);
```

### 記事のタイトルを取得する：$title = get_the_title();
これはタイトルの内容を持ってくるものです。参考リンクです。
https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/get_the_title

・直接htmlに出す場合は「the_title()」を使うと思います。

・記事IDの指定の仕方は、先程と同じで「$foreach_tmp->ID」で取って来ます。

```
$title = get_the_title( $foreach_tmp->ID );
```

### タイトルが22文字以上だったら省略：mb_strlen()とmb_substr()
mb_strlen()は、文字数を数えるやつです。参考リンクです。
https://www.javadrive.jp/phpfunc/string/index1.html

・mb_strlen(タイトル,エンコーディング) です。22文字より大きかったら、ifの中身が実行されます。

mb_substr()は、文字を切るやつです。参考リンクです。
http://php.pi-ppi.com/page/g01/000107.html

・mb_substr（タイトル,0文字目から,22文字目まで,エンコーディング）で、23文字目以降をバッサリ切ります。

$変数 .= '...'は、文字の後ろに「...」をくっつけるヤツです。「.=」で文字を連結できます。参考リンクです。
http://php.net/manual/ja/language.operators.string.php

22文字に切ったタイトルだと不自然なので、最後に「...」をつけてあげます。

```
if(mb_strlen($title,'UTF-8') > 22){
		$title_fixed = mb_substr($title,0,22,'UTF-8');
		$title_fixed .= '<span class="omit">…</span>';
	}
```

### そうじゃなかったら元のまま
22文字以内のものもあるので、elseではただ変数を入れ替えるだけです。

```
else{
		$title_fixed = $title;
	}
```

### リストタグを整形する
リストの中身はfor文の中で作ってしまいます。先ほど紹介した文字列演算子「.=」を使います。

・`$hoge_list .= <li>〜</li>` というfor文です。

これがforeachのループで繰り返されるたびに「.=」で連結されて中身が増えて行きますので、

$hoge_list の中身は…

```
<li>〜</li>
<li>〜</li><li>〜</li>
<li>〜</li><li>〜</li><li>〜</li>
<li>〜</li><li>〜</li><li>〜</li><li>〜</li>
<li>〜</li><li>〜</li><li>〜</li><li>〜</li><li>〜</li>
```

こんな感じに増えて行きます。

```
$hoge_list .= '
	<li class="clearfix">
		<a tabindex="402" href="'.$permalink.'">
			<div class="sum">
				<img src="'.$img.'" alt="'.$title.'">
			</div>
			<p class="cut_txt">
				'.$title_fixed.'
			</p>
		</a>
	</li>
	';
```

### 出力する
あとはコレを、差し込みたい「ULタグ」の中に置くだけです。

```
<ul id="cont">
	<?php echo $hoge_list ?>
</ul>
```
これが実際ブラウザで見た時の状態っす。

```
<ul id="cont">
	
	<li class="clearfix">
		<a tabindex="402" href="http://hoge/p/sample/">
			<div class="sum">
				<img src="http://hoge/wp-content/uploads/2018/10/ogp.png" alt="sample[これは文字数制限テスト用のテキストです。]">
			</div>
			<p class="cut_txt">
				sample[これは文字数制限テスト用のテキ<span class="omit">…</span>
			</p>
		</a>
	</li>
	
	<li class="clearfix">
		<a tabindex="402" href="http://hoge/p/2055/">
			<div class="sum">
				<img src="http://hoge/wp-content/uploads/2018/10/99fac0a4ae82e2b55435c830477b69ef.png" alt="サンプル記事No.03">
			</div>
			<p class="cut_txt">
				サンプル記事No.03
			</p>
		</a>
	</li>
	
	<li class="clearfix">
		<a tabindex="402" href="http://hoge/p/2050/">
			<div class="sum">
				<img src="http://hoge/wp-content/uploads/2018/10/ogp.png" alt="サンプル記事[これは文字数制限テスト用のテキストです。]">
			</div>
			<p class="cut_txt">
				サンプル記事[これは文字数制限テスト用のテキ<span class="omit">…</span>
			</p>
		</a>
	</li>
	
	<li class="clearfix">
		<a tabindex="402" href="http://hoge/p/2038/">
			<div class="sum">
				<img src="http://hoge/wp-content/uploads/2018/10/ogp.png" alt="非公開テスト10/19[これは文字数制限テスト用のテキストです。]">
			</div>
			<p class="cut_txt">
				非公開テスト10/19[これは文字数制限テス<span class="omit">…</span>
			</p>
		</a>
	</li>
	
	<li class="clearfix">
		<a tabindex="402" href="http://hoge/p/2035/">
			<div class="sum">
				<img src="http://hoge/wp-content/uploads/2018/10/ogp.png" alt="15:28投稿テスト[これは文字数制限テスト用のテキストです。]">
			</div>
			<p class="cut_txt">
				15:28投稿テスト[これは文字数制限テスト<span class="omit">…</span>
			</p>
		</a>
	</li>
</ul>
```

htmlとphpを混ぜると、後で読みづらいと思い…
こんな感じにしました。

どうですかね。あまり直感的じゃない？
よかったら、使ってみて下さい。