最近またwordpressいじってます。
メジャーバージョンアップして「wordpress5.0.3」になってた。
なんかちょっと色々進化してるっぽい。
テンプレートタグって、いろんな書き方があると思うんですが、僕は分離して書きます。
こっちが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の方がこちらです。超スッキリ!
<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>
で囲みました。結構うまく改行してくれるみたい。
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を混ぜると、後でテンプレートが読みづらいかな〜、って思いまして…こんな感じにしました。
どうですかね。。あんまり直感的じゃないスカね?
よかったら、使ってみて下さい。。。