質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.11%

WordPress Popular Posts を使ってHTMLをカスタマイズ出力

解決済

回答 1

投稿

  • 評価
  • クリップ 2
  • VIEW 1,325

cotton88

score 83

WordPress の人気記事を出すプラグインの Popular Posts を使ってHTMLをカスタマイズ出力したいのですが、サムネイル出力とカテゴリースラッグ出力がうまくできません。

PHPのソースは、

function custom_single_popular_post( $content, $p, $instance ) {
    $cats = get_the_category();

    $thumb_id = get_post_thumbnail_id( $post->ID );
    $img_thumbnail = wp_get_attachment_image_src( $thumb_id, 'sidebar_thumbnail' );

    $output = '<li><a href="' . get_the_permalink($p->id) . '" title="' . esc_attr($p->title) . '"><p class="thumb"><img src="' . $img_thumbnail . '" alt="' . esc_attr($p->title) . '" width="96" height="59"></p><dl><dt><span class="label label-'.esc_attr($cats->slug).'">' . esc_html($cats->name) . '</span></dt><dd>' . $p->title . '</dd></dl></a></li>';

    return $output;
}
add_filter( 'wpp_post', 'custom_single_popular_post', 10, 3 );

出力されたソースは、

<ul class="sidebar-list">
<li>
    <a href="http://hogehoge.com/post-008/" title="8タイトルが入ります。タイトルが入ります。タイトルが入ります。">
        <p class="thumb">
        <img src="Array" alt="8タイトルが入ります。タイトルが入ります。タイトルが入ります。" width="96" height="59">
        </p>
        <dl>
        <dt><span class="label label-"></span></dt>
        <dd>8タイトルが入ります。タイトルが入ります。タイトルが入ります。</dd>
        </dl>
    </a>
</li>
</ul>


以上のようになっています。

「src="Array"」となってリンク切れになっているアイキャッチ画像を正常に表示させたいのと、

「<span class="label label-"></span>」となっているところを、
「(例)<span class="label label-slug01">カテゴリー名</span>」としたいのですが、詰まってしまいました。

お知恵をお貸しください。
よろしくお願いいたします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

wp_get_attachment_image_src関数の返り値は以下の様な配列なので、$img_thumbnail[0]とする必要があります。

[0] => url
[1] => width
[2] => height
[3] => boolean

同じくget_the_category関数も返り値は配列なので、$cats[0]->slug、$cats[0]->nameのようにする必要があります。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/06/01 18:09

    できたと思ったんですが、表示されているサムネイル($img_thumbnail[0])、スラッグ($cats[0]->slug)、カテゴリ名($cats[0]->name)が先頭に来た記事のものになり、すべて一緒の名前が出力されていました。。


    <li>
    <a href="http://hogehoge.com/post-001/" title="1タイトルが入ります。タイトルが入ります。">
    <p class="thumb"><img src="hogehoge.com/wp-content/uploads/2016/06/GUM01_PH04014-96x59.jpg" width="96" height="59" alt="1タイトルが入ります。タイトルが入ります。"></p>
    <dl>
    <dt><span class="label label-category04">カテゴリー名01</span></dt>
    <dd>1タイトルが入ります。タイトルが入ります。</dd>
    </dl>
    </a>
    </li>
    <li>
    <a href="http://hogehoge.com/post-002/" title="2タイトルが入ります。タイトルが入ります。タイトルが入ります。">
    <p class="thumb"><img src="http://hogehoge.com/wp-content/uploads/2016/06/GUM01_PH04014-96x59.jpg" width="96" height="59" alt="2タイトルが入ります。タイトルが入ります。タイトルが入ります。"></p>
    <dl>
    <dt><span class="label label-category04">カテゴリー名01</span></dt>
    <dd>2タイトルが入ります。タイトルが入ります。タイトルが入ります。</dd>
    </dl>
    </a>
    </li>

    キャンセル

  • 2016/06/01 18:17

    度々、すみません。カテゴリーの方は

    $cats = get_the_category($p->id);

    にすることで解決しました。
    サムネイルがわかりません。。。

    キャンセル

  • 2016/06/01 18:18

    サムネイルも以下のように変更したらできると思うのですがいかがでしょうか。

    $thumb_id = get_post_thumbnail_id($p->id);

    キャンセル

  • 2016/06/01 18:29

    やったつもりがやってませんでした><;
    思い通りの表示になりました!ありがとうございました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.11%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる