カスタムフィールドで複数の価を登録して、ループで表示させたい

  • pecoro

    (@pecoro)


    13年、 2ヶ月前

    こんにちは。
    現在、MacのMAMP内で、ブログ以外のページもあるHTMLサイトをwordpress化しようとしています。

    カスタム投稿の中で、スライドショーで表示される画像ギャラリーを埋め込もうとしています。
    カスタムフィールドに画像のURLを登録しておいて、imgタグのsrc=””に表示されるようにしたいと考えています。

    以下、現在表示がうまくいっているスライドショー部分のコードです。（slideshow.jsというjsファイルで、divの画像が順番に表示され、liタグの●アイコンを押すと切り替わる構造です。）
    ——————————————————————————
    【single-work.php】

    <?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); /* ループ開始 */ ?>

<div id="works">
<div id="slideshow">
<div>
　<div><img width="550" height="490" src="<?php echo get_post_meta($post->ID,'image01',true);?>" alt=""></div>
　<div><img width="550" height="490" src="<?php echo get_post_meta($post->ID,'image02',true);?>" alt=""></div>
　<div><img width="550" height="490" src="<?php echo get_post_meta($post->ID,'image03',true);?>" alt=""></div>
</div>
<ul>
　<li><img width="10" height="9" src="<?php bloginfo('template_directory');?>/images/works/btn_switch_off.png" alt=""></li>
　<li><img width="10" height="9" src="<?php bloginfo('template_directory');?>/images/works/btn_switch_off.png" alt=""></li>
　<li><img width="10" height="9" src="<?php bloginfo('template_directory');?>/images/works/btn_switch_off.png" alt=""></li>
</ul>
</div><!--#slideshow-->
（中略）
</div><!--#works-->
<?php endwhile; ?>
<?php else : ?>

    _________
    |　　　　|
    |　画像　|　←divタグ
    |　　　　|
    _________
    ●○○○　　　←liタグ

    【カスタムフィールド】
    名前：image01 値 : http://サイトURL/wp-content/uploads/2012/10/image_01.jpg
    名前：image02 値 : http://サイトURL/wp-content/uploads/2012/10/image_02.jpg
    名前：image03 値 : http://サイトURL/wp-content/uploads/2012/10/image_03.jpg

    ——————————————————————————

    しかし、これでは画像数固定でしか対応できません。
    画像の数がいくつ登録されていてもひとつのテンプレートで表示されるようにしたいと考えています。

    <やりたいこと>
    【カスタムフィールド】
    名前：images 値 : http://サイトURL/wp-content/uploads/2012/10/image_01.jpg
    名前：images 値 : http://サイトURL/wp-content/uploads/2012/10/image_02.jpg
    名前：images 値 : http://サイトURL/wp-content/uploads/2012/10/image_03.jpg

    (1)<div><img width="550" height="490" src="<?php echo get_post_meta($post->ID,'image01',true);?>" alt=""></div>
    をループに入れて、カスタムフィールドの価を配列で取得してsrc=””の部分に表示されるようにしたい。

    (2)
    <li><img width="10" height="9" src="<?php bloginfo('template_directory');?>/images/works/btn_switch_off.png" alt=""></li>
    の部分もループにして、画像の個数分出力されるようにしたい

    やりたいことと全く同じ事例が見つからず、似た事例をアレンジして試そうとしても途中でエラーが出て、行き詰まってしまいました。（ループをきちんと理解できていないのも要因だと思います…）

    もし、構造自体に無理があるようなら、画像の数ごとに別のテンプレートファイルにしてしまおうかとも考えています。

    どなたか、良い方法をご教授いただけますと幸いです。
    よろしくお願いいたします。

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • nobita

    (@nobita)

    13年、 2ヶ月前

    こんにちは

    カスタムフィールドの使い方の中の「カスタムフィールドを取得する」を参照してください

    カスタムフィールドを配列で取得する方法が書いてあります。

    あとは、foreach()関数などで配列を処理すればいいと思います。

    お手数をかけますが、コードを記述する場合は（htmlのソースの場合でも）、コード部分を選択して、codeボタンを押してください。

    トピック投稿者 pecoro

    (@pecoro)

    13年、 2ヶ月前

    早速のお返事ありがとうございます！！
    教えていただいた「foreach()関数」の使い方を検索して、表示することができました！

    <?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); /* ループ開始 */ ?>
<div id="works">
		<div id="slideshow">
		<div>
		<?php $images=get_post_meta($post->ID,'images',false);//$imagesに配列を格納
			foreach( $images as $value ){
			echo "<div><img width='550' height='490' src='".$value."' alt=''></div>\n";//$valueで値を出力。前後に.を入れる
			}?>
		</div>
		<ul>
		 <?php $image_count=count($images);
		 for($a = 0; $a < $image_count; $a++) {
			echo "<li><img width='10' height='9' src='".get_bloginfo('template_directory')."/images/works/btn_switch_off.png' alt=''></li>";
		 }
		 ?>
		</ul>
</div><!--#slideshow-->
（中略）
 </div><!--#works-->
<?php endwhile; ?>
<?php else : ?>
（中略）
<?php endif; ?>

    配列を取得した後、どのようにHTMLタグの中に値をechoすればいいか悩んでいたので、とても助かりました。
    ただ、上のコードは検索してでてきたものをつぎはぎしているので「こうすればもっと簡潔です」「普通はこう書かないよ」などのアドバイスをいただけますとうれしいです。

    また、投稿の仕方に関してもご助言いただきありがとうございます！
    こういう場での書き込みに慣れていないので、率直に教えていただいてありがたいです。
    以降気をつけます！

    nobita

    (@nobita)

    13年、 2ヶ月前

    上のコードは検索してでてきたものをつぎはぎしているので「こうすればもっと簡潔です」「普通はこう書かないよ」などのアドバイスをいただけますとうれしいです。

    echo を使っている部分は、sprintf() とか、printf() という関数を使うと、あとで、コードを見るときに、htmlの部分と、PHPの変数などを分けて記述できるので おすすめです。

    get_bloginfo()という関数は、’template_directory’、’template_url’という引数が与えられた時には、 get_template_directory_uri()　という関数を使って、値を返しているのですが、
    使い方としては、ワードプレスのテーマレビューなどでは、 get_template_directory_uri()　を、推奨されるので、 get_template_directory_uri()を使って書くほうがおすすめです。

    トピック投稿者 pecoro

    (@pecoro)

    13年、 2ヶ月前

    nobitaさま
    ありがとうございます！
    お返事が遅くなってしまって申し訳ありません。
    sprintf() 、printf() なども試して見ようと思います。

    get_template_directory_uri()についてもアドバイスありがとうございます！

    検索してみたところ「3.0以降は<?php bloginfo(‘template_url’); ?>が非推奨になり<?php echo get_template_directory_uri(); ?>が推奨」との記事をいくつか見かけました。
    （公式な文書ではどこを参照していいかわからなかったのですが…）

    バージョンアップなどで不具合がおこる可能性がでてくるということでしょうか？
    今後のために置き換えておこうかと思います。
    ありがとうございました。

4件の返信を表示中 - 1 - 4件目 (全4件中)

トピック「カスタムフィールドで複数の価を登録して、ループで表示させたい」には新たに返信することはできません。