人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

WordPressを使い、カタログ系のサイトを作ろうとしています。
Advanced Custom Fieldsというプラグインを使い、カスタムフィールドだけで商品紹介のページを作りました。商品の詳細ページはできたのですが、トップページなどに、さっきの商品紹介ペ?ジのデータを呼出し、商品名、価格、サムネイルなどを表示し、商品群を一覧表示しようとしてつまづいてしまいました。図の左側みたいな感じで出力させるデータが、商品名、サムネイル、価格、キャッチフレーズなどが全て一行で表示されてしまい、次の商品との境目もなく全てがつながり、一行で表示されてしまいます。コードは下記のような感じです。
これを図の右側のようにしたいのです。ズバリのお答えをいただけた場合、高ポイントを差し上げます。参考コードまで書いていただける場合は更にポイントをはずませていただきます。

現在のコ?ド
<?php
$args = array(
'post_type' => 'product',
'productcategory&tag_id' => 1,
);
$myposts = get_posts($args);
foreach( $myposts as $post ) : setup_postdata($post);
the_field('productname');
the_field('price');
the_field('catch');
endforeach;
wp_reset_postdata();
?>

1374655342
●拡大する

●質問者: ykhpno1
●カテゴリ:インターネット ウェブ制作
○ 状態 :終了
└ 回答数 : 4/4件

▽最新の回答へ

1 ● kaji0120
●75ポイント

改行されていないのが原因のように思えますが、

<?php
$args = array(
'post_type' => 'product',
'productcategory&tag_id' => 1,
);
$myposts = get_posts($args);
foreach( $myposts as $post ) : setup_postdata($post);
the_field('productname');
print("<br>");
the_field('price');
print("<br>");
the_field('catch');
print("<br>");
endforeach;
wp_reset_postdata();
?>

では想像道理の結果にはなりませんか?


ykhpno1さんのコメント
お返事が遅れ、大変もうしわけございません。 改行されたものの、1商品の表示ごとに改行され、いわゆるグリッド表示ではない状態になってしまいます(1行に1商品しか表示されない)。図の右側のようなグリッド表示にしたいのです。説明不足でごめんなさい。

2 ● rouge_2008
●1000ポイント ベストアンサー

記事の取得は変更ありませんので、表示用ループのコードです。

if($myposts) :
echo "<div id='products_list'>\n";
$cnt = 0;
foreach( $myposts as $post ) : setup_postdata($post);
/* $cnt++; */ // この行を下に移動します。
$flg = '';
// 【※修正済み※】1行に2つ表示して3つめで次の行にしたい場合は、「$cnt % 2」とします。(※修正前は「1行に表示したい個数+1」でしたが、修正後は表示したい個数で割ります。)
if('0' == $cnt % 3 ) $flg = ' newline';
echo "<dl class='product" . $flg . "'>\n";
echo "<dt>" . get_field('productname') ."</dt>\n";
// 以下はサムネイル画像のフィールドの設定で、返り値に「画像 ID」を指定している場合です。
echo "<dd>" . wp_get_attachment_image(get_field('サムネイル画像のフィールド名'), 'thumbnail') . "</dd>\n";
echo "<dd>" . get_field('price') . "</dd>\n";
echo "<dd>" . get_field('catch') . "</dd>\n";
echo "</dl>\n";
$cnt++; // この行を上から移動しました。
endforeach;
wp_reset_postdata();
echo "</div>\n";
endif;



・スタイルシートは一例ですので、好みに合わせて適宜修正してください。

products_list {
width: 100%;
}
.product {
float: left;
border: 1px solid #666;
width: 250px;
text-align: center;
margin: 15px 10px;
}
dt, dd {
padding: 4px;
}
.newline {
clear: both;
}



※スタイルがリセットされている事が前提です。
以下に該当部分だけを抜粋していますが、利用しているテーマでスタイルがリセットされていない場合は、デフォルトのテーマからコピーして使用してください。(※「/* =Reset ?」のコメントから次のコメントまでの箇所がリセット用のスタイルです。)

/* =Reset
-------------------------------------------------------------- */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}

...(略)


【追記】

この回答では「the_field()」の代わりに「get_field()」を使っています。
※関数で利用する場合やPHPコード内で<img src="?">などHTMLタグと一緒に出力する場合に便利です。(「Advanced Custom Fields」では、画像のフィールドの返り値に「画像 URL」以外を選択した場合、そのまま出力しても画像は表示できませんので、「get_field()」を使って何らかの処理をしてから表示します。)
※「the_field()」を使ってHTMLタグ内などに表示する場合は、次のようにPHPとHTMLを完全に分けて出力します。

 <p><?php the_field( "text_field" ); ?></p>

http://www.advancedcustomfields.com/resources/functions/the_field/


※WordPress本体の関数でも「the_ID()」や「the_content()」など表示まで行うものと「get_the_ID()」や「get_the_content()」など取得だけ行うものがありますので、同じように使い分けます。


【※修正報告※】

返信で指摘があった件でコードを修正しました。
※「$cnt++」を元の位置のまま、条件分岐を「if('1' == $cnt % 4 )」(※1行に3つ表示の場合)と変更しても同じ結果になります。


rouge_2008さんのコメント
記事の取得に関してですが、「get_posts()」等に「productcategory」というパラメータはありませんので、「'productcategory&tag_id' => 1」の指定は間違えていると思います。 記事の取得ができているのでしたらいいのですが、削除しても問題のない記述ではないでしょうか?

a-kuma3さんのコメント
三行以上になるときに、一行の個数がおかしくなりません? newline のようなクラスをプログラムで入れるのではなく、nth-child を使う方がすっきりするような。 >|css| .product { float: left; width: ○○; ... } .product:nth-child(3n+1) { /* 一行に三つ */ clear: both; } ||<

rouge_2008さんのコメント
確かにおかしくなりますね・・・ ありがとうございます。修正します。 > newline のようなクラスをプログラムで入れるのではなく、nth-child を使う方がすっきりするような。 IE9以降とモダンブラウザのみ対応でいいならこちらでいいかもしれませんね。

ykhpno1さんのコメント
本当にありがとうございます。書いていただいたコ?ド、まんまで望み通りの形にはなりました。CSSまで書いていただきありがとうございます。こちらもたいへん参考になりました。 ただ現在、表示の形は望み通りなのですが、狙っていたカテゴリ?ではない商品群が表示されてしまいます。 それも5商品までの表示の繰り返しになってしまいます。6商品目から後の商品が表示されず、延々と1番目?5番目までの商品が繰り返し表示されてしまう状態です(5回繰り返されております)。 しかも他カテゴリ?の商品なのです。 タクソノミ?のところにマウスを合わせると、 「??&taxonomy=productcategory&tag_ID=1&post_type=product」と表示されます。 phpコ?ドの方には質問時の通り、 'post_type' => 'product', 'productcategory&tag_id' => 1, ); と書いております。このあたりが問題なのでしょうか。 何が原因なのか、さっぱりでお手上げ状態になっております。 なにかお気づきの事はございますでしょうか?? すみませんが、引き続き教えていただけませんでしょうか。 また、返事が遅くなり大変申し訳ございませんでした。なにとぞご寛恕下さい。

rouge_2008さんのコメント
上にも書きましたが「productcategory&tag_id」というパラメータは存在しませんので、おそらく無視されているのだと思います。 取得・表示されるのがカスタム投稿タイプ「product」の商品だけでしたら、正常な動作ですので問題ありません。 カテゴリーはどのように分類しているのでしょうか? 標準のカテゴリー機能を利用していますか? それともカスタムタクソノミーを作成して分類しているのでしょうか? > タクソノミ?のところにマウスを合わせると、 >「??&taxonomy=productcategory&tag_ID=1&post_type=product」と表示されます。 対象のタクソノミーの編集ページのURLが上記なのでしたら、次のように指定してみてください。 >|| $args = array( 'post_type' => 'product', 'tax_query' => array( array( 'taxonomy' => 'productcategory', 'field' => 'id', // ドキュメントの例のように「'slug'」を指定して、「terms」にはスラッグ名を指定する事もできます。 'terms' => 1 // 複数指定する場合は「array(1,3,...)」のように配列で指定します。カンマで区切る。 ) ) ); ||< http://wpdocs.sourceforge.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#.E3.82.BF.E3.82.AF.E3.82.BD.E3.83.8E.E3.83.9F.E3.83.BC.E3.83.91.E3.83.A9.E3.83.A1.E3.83.BC.E3.82.BF http://wpdocs.sourceforge.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/WP_Query#Taxonomy_Parameters なお、繰り返し5件ずつ表示されるという事ですが、「設定」→「表示」で1ページあたりの表示件数を5件に設定していないでしょうか? 繰り返しという事ですが、ページナビゲーションを作成したのでしょうか? どのような方法で作成しましたか? トップページ「index.php」の一覧表示でしたら、メインクエリの変更が必要ですので「get_posts()」ではなく「query_posts()」を使ってみてください。 >|| $args = array(? 略 ?); query_posts($args); ||< http://wpdocs.sourceforge.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/query_posts それでもページ送りが上手くいかない場合は、次のようにしてみてください。 >|| $paged = (get_query_var('paged')) ? get_query_var('paged') : 1; $args = array( 'post_type' => 'product', 'tax_query' => array( array(? 略 ?) ), 'posts_per_page' => 5, // 1ページに表示する件数 'paged' => $paged ); query_posts($args); ||< http://codex.wordpress.org/Pagination#Adding_the_.22paged.22_parameter_to_a_query http://wpdocs.sourceforge.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/query_posts#.E4.BD.BF.E3.81.84.E6.96.B9 >> <span style="font-weight:bold;">オリジナルクエリの保持(ページングなど)</span> デフォルトでは query_posts を実行すると、引数で指定した変数を除きページング,カテゴリー,日付などの現在のページのクエリ変数はすべて上書きされます。この時、オリジナルのクエリを保持したい場合は、query_poats() の引数にグローバル変数である $query_stringを用いることができます。 例えば、残りの投稿文字列に影響をおよぼすこと無く投稿の表示順を保持する時、ループの前に下記を記述することができます。 >|| global $query_string; query_posts( $query_string . '&order=ASC' ); ||< query_posts() をこのように用いる時、''で囲まれたパラメーターはアンド記号 & で始まる必要があります。 あるいは、元のクエリ配列を引数配列に統合することもできます。 >|| global $wp_query; $args = array_merge( $wp_query->query, array( 'post_type' => 'product' ) ); query_posts( $args ); ||< << あるいは上記のように元のクエリ「$wp_query->query」と結合しても上手くいくかもしれません。(※未確認) >|| global $wp_query; $args = array( 'post_type' => 'product', 'tax_query' => array( array(? 略 ?) ) ); $merge_args = array_merge( $wp_query->query, $args ); query_posts( $merge_args ); ||<

ykhpno1さんのコメント
rouge_2008さん、大変親切にしていただいて本当にありがとうございます。 カスタム投稿タイプ「product」で、スラッグは「cake」「pickup」がございます。 標準のカテゴリー機能を利用せず、カスタムタクソノミーを作成しております。 現在、コ?ドの書き換えを試みまして、下記のようにしてみました。 (cakeというスラッグに属している商品を表示させようとしています) <?php $args = array( 'tax_query' => array( array( 'taxonomy' => 'productcategory', 'field' => 'slug', 'terms' => 'cake' ) ) ); $myposts = get_posts($args); foreach( $myposts as $post ) : setup_postdata($post); if($myposts) : echo "<div id='products_list'>\n"; $cnt = 0; foreach( $myposts as $post ) : setup_postdata($post); /* $cnt++; */ // この行を下に移動します。 $flg = ''; // 【※修正済み※】1行に2つ表示して3つめで次の行にしたい場合は、「$cnt % 2」とします。(※修正前は「1行に表示したい個数+1」でしたが、修正後は表示したい個数で割ります。) if('0' == $cnt % 4 ) $flg = ' newline'; echo "<dl class='product" . $flg . "'>\n"; echo "<dt>" . get_field('productname') ."</dt>\n"; // 以下はサムネイル画像のフィールドの設定で、返り値に「画像 ID」を指定している場合です。 echo "<dd>" . wp_get_attachment_image(get_field('s-image'), 'thumbnail') . "</dd>\n"; echo "<dd>" . get_field('price') . "</dd>\n"; echo "<dd>" . get_field('s-text') . "</dd>\n"; echo "</dl>\n"; $cnt++; // この行を上から移動しました。 endforeach; wp_reset_postdata(); echo "</div>\n"; endif; endforeach; wp_reset_postdata(); ?> こちらのコ?ドでは何も表示されない状態になりました。 また、「設定」→「表示」で1ページあたりの表示件数は30件にしておりまして、こちらは問題なさそうでした。 また、ペ?ジナビゲ?ションは作成しておりません。 その他になにか私が変な設定にしているのだと思います。。 そのあとの、rouge_2008さんに教えていただいた事を今あちこちで調べております。 中途半端な返信になってしまいまして申し訳ないです。

rouge_2008さんのコメント
※書き直して再投稿しています。 「post_type」の指定が抜けてしまっています。 デフォルトでは投稿の「post」になっていますので、以下の状態ではタクソノミー「productcategory」の「cake」に関連付けられた「post」を取得する設定になりますが、該当する投稿が何もないので表示されないのだと思います。 >|| $args = array( 'tax_query' => array( array( 'taxonomy' => 'productcategory', 'field' => 'slug', 'terms' => 'cake' ) ) ); ||< 次のように「post_type」の指定も加えて試してみてください。 >|| $args = array( 'post_type' => 'product', 'tax_query' => array( array( 'taxonomy' => 'productcategory', 'field' => 'slug', 'terms' => 'cake' ) ) ); ||< 商品一覧はトップページに表示しているのですね? 繰り返し5件ずつとはどこに繰り返し表示されるのでしょう? 1ページに30件まで同じ投稿が5件ずつ繰り返し表示されるのですか? 商品一覧以外に何か投稿を表示していますか? あるいは、表示していなくても投稿「post」の記事が30件以上ありますか? それから、表示部分のコードが一部重複しているようです。(「foreach( $myposts as $post ) ?」と「endforeach;」が2つずつあります。) 次のコードを使用してください。 >|| $args = array(?略?); $myposts = get_posts($args); if($myposts) : echo "<div id='products_list'>\n"; $cnt = 0; foreach( $myposts as $post ) : setup_postdata($post); /* $cnt++; */ // この行を下に移動します。 $flg = ''; // 【※修正済み※】1行に2つ表示して3つめで次の行にしたい場合は、「$cnt % 2」とします。(※修正前は「1行に表示したい個数+1」でしたが、修正後は表示したい個数で割ります。) if('0' == $cnt % 3 ) $flg = ' newline'; echo "<dl class='product" . $flg . "'>\n"; echo "<dt>" . get_field('productname') ."</dt>\n"; // 以下はサムネイル画像のフィールドの設定で、返り値に「画像 ID」を指定している場合です。 echo "<dd>" . wp_get_attachment_image(get_field('s-image'), 'thumbnail') . "</dd>\n"; echo "<dd>" . get_field('price') . "</dd>\n"; echo "<dd>" . get_field('s-text') . "</dd>\n"; echo "</dl>\n"; $cnt++; // この行を上から移動しました。 endforeach; wp_reset_postdata(); echo "</div>\n"; endif; ||<

ykhpno1さんのコメント
rouge_2008さん、書いていただいたコ?ドでものすごく前進しました。 「cake」というタクソノミ?に属する商品が5品だけですが出力されました。 (いままでは全く違うタクソノミ?のものが表示されておりました) 現在、表示は5件だけになっています。 このcakeは現在、18品登録しているのですが、そのうちの5件だけが表示されます。 ただ、繰り返しの現象はなくなりました、おかげさまです、ありがとうございます。 この「cake」の一覧は固定ペ?ジに出力しようとしています。 固定ペ?ジ用のテンプレ?トに直接書きこんでおります。 ただ他の固定ペ?ジにも影響してしまうので、page.phpを名前だけ変えた「product.php」を作り、それを使っています(このテンプレ?トに直接書きこんでおります)。 以前の表示ですが、1ペ?ジに30件まで同じ投稿が5件ずつ出力されているのではなく、なぜか5件ずつが5回繰り返されておりました。しかも「cake」に属していないものがです。これを固定ペ?ジに表示させておりました。 ちなみに一覧を表示させる以外に、固定ペ?ジの投稿として画像を表示させております。 (コ?ドはproduct.phpに直接書き込んでおります) 現在「設定」→「表示設定」では60件としております。

rouge_2008さんのコメント
「get_posts()」の定義は次のようになっています。 取得件数のデフォルトが「'numberposts' => 5」とあるように5件ですので、現在正常な動作になっているようです。(※管理画面の設定の影響を受けるのはメインクエリだけのようですので、設定値を元に戻しても大丈夫です。) >|| function get_posts($args = null) { $defaults = array( 'numberposts' => 5, 'offset' => 0, 'category' => 0, 'orderby' => 'post_date', 'order' => 'DESC', 'include' => array(), 'exclude' => array(), 'meta_key' => '', 'meta_value' =>'', 'post_type' => 'post', 'suppress_filters' => true ); ... ||< パラメータ「posts_per_page」を追加して、希望の表示件数を指定してみてください。 >|| $args = array( 'post_type' => 'product', 'tax_query' => array( array( 'taxonomy' => 'productcategory', 'field' => 'slug', 'terms' => 'cake' ) ), // 次行にパラメータを追加したので、カンマを追加してます。 'posts_per_page' => -1 ); ||< ※上記のように「-1」を指定すると全件表示されます。 http://wpdocs.sourceforge.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/WP_Query#.E3.83.9A.E3.83.BC.E3.82.B8.E9.80.81.E3.82.8A.E3.83.91.E3.83.A9.E3.83.A1.E3.83.BC.E3.82.BF >> <span style="font-weight:bold;">ページ送りパラメータ</span> - <span style="font-weight:bold;font-size:small;">showposts</span> (int) - number of post to show per page. Deprecated as of Version 2.1 in favor of 'posts_per_page'. - <span style="font-weight:bold;font-size:small;">posts_per_page</span> (int) - number of post to show per page (available with Version 2.1). Use 'posts_per_page'=>-1 to show all posts. Note if the query is in a feed, wordpress overwrites this parameter with the stored 'posts_per_rss' option. To reimpose the limit, try using the 'post_limits' filter, or filter 'pre_option_posts_per_rss' and return -1 <<

rouge_2008さんのコメント
一部修正します。 ×『※管理画面の設定の影響を受けるのはメインクエリだけ?』 ○『※管理画面の設定が反映されるのは、メインクエリおよびWP_Queryで作成したクエリで、「posts_per_page」等による取得件数が指定されていない場合?』 「get_posts()」だけは初期値が設定されているので、管理画面での表示件数設定の影響は受けません。

ykhpno1さんのコメント
ありがとうございます!できましたできました! 本当に思うような表示です!本当にありがとうございました! ここまで親切にしていただけた事に本当に感謝しております。 書いていただいたCSSもバッチリでした。 質問していた内容以上のお答えをいただきました。超ベストアンサ?とさせていただきます。 昨日は寝オチしてしまい、コメントが遅くなり申し訳ございませんでした。 ありがとうございました。 これにて質問は終了させていただきます。本当におかげさまでした。 あと、この表示された表品リストに、それぞれの詳細ペ?ジへのリンクを貼りたいのですが、もしオマケで教えていただけそうでしたらお願いいたします。 質問内容が複雑になってしまうのでリンクの件はあえて書いていませんでしたが、本当はリンクさせたいのです。

rouge_2008さんのコメント
とてもたくさんのポイントとベストアンサーをありがとうございます。 個別投稿(※カスタム投稿タイプも含む)のURLの取得・表示には「the_permalink()」または「get_permalink()」を利用します。(※今回はPHPコードメインの箇所で利用するので「get_permalink()」を利用しています。) ※以下は必要箇所(商品名と画像の出力行)だけ抜粋しています。(商品名と画像の両方にリンクを貼っています。どちらか一つでいい場合は片方を元のコードに戻してください。) >|| echo "<dt><a href=\"". get_permalink() . "\">" . get_field('productname') ."</a></dt>\n"; // 以下はサムネイル画像のフィールドの設定で、返り値に「画像 ID」を指定している場合です。 echo "<dd><a href=\"". get_permalink() . "\">" . wp_get_attachment_image(get_field('s-image'), 'thumbnail') . "</a></dd>\n"; ||< http://wpdocs.sourceforge.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/the_permalink http://wpdocs.sourceforge.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

ykhpno1さんのコメント
ありがとうございます。バッチリでした。 こちらの環境にまで気を配っていただき感謝しております。 本当にありがとうございました。

3 ● だわかき
●75ポイント

下記のスクリプトをお試しください。
画像のフィール名が分からなかったので、下記の該当箇所を置き換えてみてください。

<?php
$args = array(
 'post_type' => 'product', 
 'productcategory&tag_id' => 1, 
);
$cols = 4; //1行あたりに表示したい商品数
$count = 0;
echo "<table syle=\"border:none; padding:10px;\">\n";
$myposts = get_posts($args);
foreach( $myposts as $post ) : setup_postdata($post);
 if ($count == 0) echo "<tr>\n";
 echo "<td>\n";
 the_field('画像のフィールド名');
 echo "<br />\n";
 the_field('productname');
 echo "<br />\n";
 the_field('price');
 echo "<br />\n";
 the_field('catch');
 echo "</td>\n";
 count++;
 if ($count == $cold) {
 echo "</tr>\n";
 $count = 0;
 }
endforeach;
echo "</table>\n";
wp_reset_postdata();
?>

ykhpno1さんのコメント
回答いただきありがとうございます。 試させていただいたところ、サ?バ?エラ?となりまして表示できませんでした。 私では原因が探れず、申し訳ございません。。

4 ● holoholobird
●75ポイント

現状でもボックス要素ごとの数はきちんとしているので、前の回答のような列の表示数の処理は行う意味がないと思います。
原因はCSSだとおもうので、PHPではなくCSSのコードも見せていただきたいです。


ykhpno1さんのコメント
現在、rouge_2008さんに書いていただいたPHPコ?ドとCSSコ?ドを採用させていただいており、表示は望み通りになりました。ただ、表示が、違うカテゴリ?の商品の1番目から5番目までの商品の繰り返しになってしまっており、現段階ではそこだけがネックになっております。回答が遅れ申し訳ございませんでした。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ