LoginSignup
0

More than 5 years have passed since last update.

WordPressで新着5件表示

Last updated at Posted at 2019-02-07

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

テンプレートタグって、いろんな書き方があると思うんですが、僕は分離して書きます。
こっちが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の方がこちらです。超スッキリ!

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> で囲みました。結構うまく改行してくれるみたい。

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」を取得してきます。

$leavenametrue にすると %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を混ぜると、後でテンプレートが読みづらいかな〜、って思いまして…こんな感じにしました。
どうですかね。。あんまり直感的じゃないスカね?
よかったら、使ってみて下さい。。。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0