1374655342 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();
?>

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2013/07/24 17:42:22
  • 終了:2013/07/30 07:41:34

ベストアンサー

id:rouge_2008 No.2

rouge_2008回答回数593ベストアンサー獲得回数3502013/07/25 07:23:02

ポイント1000pt

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

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つ表示の場合)と変更しても同じ結果になります。

他11件のコメントを見る
id: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

2013/07/30 18:57:24
id:ykhpno1

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

2013/07/30 22:54:19

その他の回答(3件)

id:kaji0120 No.1

kaji0120回答回数59ベストアンサー獲得回数132013/07/24 20:57:41

ポイント75pt

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

<?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();
?>

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

id:ykhpno1

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

2013/07/29 06:10:25
id:rouge_2008 No.2

rouge_2008回答回数593ベストアンサー獲得回数3502013/07/25 07:23:02ここでベストアンサー

ポイント1000pt

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

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つ表示の場合)と変更しても同じ結果になります。

他11件のコメントを見る
id: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

2013/07/30 18:57:24
id:ykhpno1

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

2013/07/30 22:54:19
id:dawakaki No.3

だわかき回答回数797ベストアンサー獲得回数1222013/07/25 11:17:38

ポイント75pt

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

<?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();
?>
id:ykhpno1

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

2013/07/29 06:20:53
id:holoholobird No.4

holoholobird回答回数574ベストアンサー獲得回数1042013/07/28 21:59:31

ポイント75pt

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

id:ykhpno1

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

2013/07/29 07:10:40

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません