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

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

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Q&A

解決済

1回答

2965閲覧

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

cotton88

総合スコア87

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

0グッド

3クリップ

投稿2016/06/01 05:10

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

PHPのソースは、

php

1function custom_single_popular_post( $content, $p, $instance ) { 2 $cats = get_the_category(); 3 4 $thumb_id = get_post_thumbnail_id( $post->ID ); 5 $img_thumbnail = wp_get_attachment_image_src( $thumb_id, 'sidebar_thumbnail' ); 6 7 $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>'; 8 9 return $output; 10} 11add_filter( 'wpp_post', 'custom_single_popular_post', 10, 3 );

出力されたソースは、

html

1<ul class="sidebar-list"> 2<li> 3 <a href="http://hogehoge.com/post-008/" title="8タイトルが入ります。タイトルが入ります。タイトルが入ります。"> 4 <p class="thumb"> 5 <img src="Array" alt="8タイトルが入ります。タイトルが入ります。タイトルが入ります。" width="96" height="59"> 6 </p> 7 <dl> 8 <dt><span class="label label-"></span></dt> 9 <dd>8タイトルが入ります。タイトルが入ります。タイトルが入ります。</dd> 10 </dl> 11 </a> 12</li> 13</ul>

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

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

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

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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 07:59

yiwa

総合スコア60

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

cotton88

2016/06/01 09: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>
cotton88

2016/06/01 09:17

度々、すみません。カテゴリーの方は $cats = get_the_category($p->id); にすることで解決しました。 サムネイルがわかりません。。。
yiwa

2016/06/01 09:18

サムネイルも以下のように変更したらできると思うのですがいかがでしょうか。 $thumb_id = get_post_thumbnail_id($p->id);
cotton88

2016/06/01 09:29

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問