サポート » プラグイン » advanced-custom-fieldsとacf-repeaterの組み合わせでメインビジュアルの出力について

  • 今回、作成者が私でないHPの修正を依頼され困っています・・・
    修正内容はメインビジュアルがスライドショーでadvanced-custom-fieldsとacf-repeaterの組み合わせで出力されているのですが、
    ワードプレスで制作されており、現在3つ画像が登録されています。
    この画像を管理画面(固定ページ)で画像を追加を押し、5つに増やすと、
    メインビジュアルのサイズが大きく表示されてしまいます。

    デベロッパーツールで確認したところ、
    3つの場合は、
    <ul class=”imgs” style=”width: 900%; margin-left: -300%;”>
    となっているのですが、
    5つにした際、
    <ul class=”imgs” style=”width: 2500%; margin-left: -500%;”>
    となってしまいます。

    しかも、このstyleのところがデベロッパーツールでは、インラインで記述されていると表示されているのですが、この該当箇所のphpを確認したところ、以下の形で記述されており、

    <ul class=”imgs”>
    <?php
    while(have_rows(‘main’)): the_row();
    $imgID =get_sub_field(‘img’);
    $img = wp_get_attachment_image_src($imgID,’full’);
    $alt =get_sub_field(‘alt’);
    $url =get_sub_field(‘url’);
    $newwin =get_sub_field(‘newwin’);
    ?>

    • <?php if($url): ?>“<?php if($newwin): ?> target=”_blank”<?php endif; ?>><?php endif; ?>” width=”960″ height=”400″ alt=”<?php echo($alt); ?>”/><?php if($url): ?><?php endif; ?>
    • <?php endwhile; ?>

      インラインのstyleの記述がありません。
      どのファイルをいじればいいのかわからず、困り果てております。
      また上記のコード以下は、
      3つの場合、
      <li style=”width: 11.1111%;”>
      となっており、
      5つの場合、
      <li style=”width: 4%;”>
      となります。

      5つの場合の、
      <ul class=”imgs” style=”width: 2500%; margin-left: -500%;”>
      のstyleがstyle=”width: 1500%にデベロッパーツールで変更すれば、正しく表示されます。

      たぶん、自動生成されていると思うのですが、
      何をいじればよろしいでしょうか。

      $img = wp_get_attachment_image_src($imgID,’full’);
      のfullが怪しいかと思い、直書きでwidth設定等、色々変更してみましたが、反映されませんでした。

      まだ、コーディングに詳しくなく情報不足等あるかも知れませんが、
      何卒ご教授頂けますと幸いです。

      よろしくお願い申し上げます。

1件の返信を表示中 - 1 - 1件目 (全1件中)
  • こんにちは

    デベロッパーツールではなく、出力されているHTMLソースコードではどうなっているでしょうか。

    そこでもインラインの記述がないのであれば、JavaScriptで設定されているのではないかと思います。
    ロード時にJavaScriptが実行されている箇所を探してみてください。

1件の返信を表示中 - 1 - 1件目 (全1件中)
  • トピック「advanced-custom-fieldsとacf-repeaterの組み合わせでメインビジュアルの出力について」には新たに返信することはできません。