サポート » 使い方全般 » loop内でのバグ?aタグが増殖?

  • 解決済 unmoneko

    (@unmoneko)


    オリジナルテーマでブログを作成しているのですが、
    loop内でaタグが増殖するバグ?がおきてしまうのです。
    ソースを見れば正しく表示はされているのですが、ブラウザの要素の検証などでみるとまた別の表示になります。

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

    <?php
    if ( have_posts() ) : while ( have_posts() ) : the_post();
    ?>
    <!–
    問題のタグ↓
    –>
    <a href=”<?php the_permalink(); ?>”>
    <!–
    問題のタグ↑
    –>
    <?php
    if ( have_posts() ) : while ( have_posts() ) : the_post();
    ?>
    <!————————————————————
    問題のタグ↓
    ————————————————————–>
    <a href=”<?php the_permalink(); ?>”>
    <!————————————————————–
    問題のタグ↑
    ————————————————————–>
    <section>
    <div class=”section”>
    <div class=”thumbnail”>
    <?php
    if ( has_post_thumbnail() ) {
    the_post_thumbnail();
    }
    ?>
    </div>
    <div class=”title-comment”>
    <h2><?php the_title(); ?></h2>
    <p class=”comment”><?php the_excerpt(); ?></p>
    <div class=”-social”>
    <!————————————-
    ここからul↓
    —————————————>
    <ul>
    <li>
    <a href=”http://twitter.com/share?text=<?php the_title(); ?>” target=”blank”>
    <img src=”<?php echo get_template_directory_uri(); ?>/twitter.png” />
    </a>
    </li>
    <li>
    <a class=”facebook” onclick=”window.open(this.href, ‘facebookwindow’, ‘width=550, height=…nalbar=0,toolbar=0,scrollbars=1,resizable=1′); return false;” href=”http://www.facebook.com/share.php?u=<?php the_permalink(); ?>” target=”_blank”>
    <img src=”<?php echo get_template_directory_uri(); ?>/facebook.png” />
    </a>
    </li>
    <li>
    <a class=”google” onclick=”javascript:window.open(this.href, ”, ‘menubar=no,toolbar=no…able=yes,scrollbars=yes,height=600,width=600’);return false;” href=”https://plus.google.com/share?url=<?php the_permalink(); ?>”>
    <img src=”<?php echo get_template_directory_uri(); ?>/entry-google.png” width=”40″ />
    </a>
    </li>
    <li>
    <a href=”http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>” class=”hatena-bookmark-button” data-hatena-bookmark-layout=”simple” title=”このエントリーをはてなブックマークに追加”>
    <img alt=”<?php the_permalink(); ?>” src=”<?php echo get_template_directory_uri(); ?>/entry-hatena.png” />
    </a>
    </li>
    </ul>
    <!————————————-
    ここまでul↑
    —————————————>
    </div>
    </div>
    </div>
    </section>
    </a><!– 全体を囲むaタグ –>

    <?php
    endwhile;
    endif;
    ?>

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

    <a href=”<?php the_permalink(); ?>”>
    このaタグが6個、囲んである上のタグから順にタグの前に配置されてしまうのです。
    なおこの増えたaタグの中身はありません。
    <a href=”とびさき”></a>


    <a href=”http://twitter.com/share?text=<?php the_title(); ?>” target=”blank”>
    <img src=”<?php echo get_template_directory_uri(); ?>/twitter.png” />
    </a>

    こんな感じになったりします。

    因みに<ul>から</ul>で囲んだの自作ソーシャルボタンを全て消せばこの現象が収まることを確認したのですが、原因がさっぱりわからないのです。
    原因はul,li,imgタグ、画像自体にはなく【ソーシャルボタンを囲んでいるaタグ】だとことも確認しました。
    aタグが増殖することによってaタグ同士が絡み合う?感じになって正常に閉じられていないような気はします。

    せっかく作ったソーシャルボタンはぜひ使いたいのですが、どうしたらいいのでしょうか。

5件の返信を表示中 - 1 - 5件目 (全5件中)
  • tmatsuur

    (@tmatsuur)

    unmonekoさん

    the_permalink関数は、パーマリンクのaタグを出力するものなので、
    次のように記述すると、aタグのhref属性の値にパーマリンクのAタグが
    入ることになりますね。
    <a href="<?php the_permalink(); ?>">

    上記であれば、
    <?php the_permalink(); ?>">
    だけでいいです。

    きちんとCodexを確認しましょう。

    モデレーター gatespace

    (@gatespace)

    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

    unmoneko さん、
    ソースコードを投稿するときはその部分を「code」ボタンで囲ってください。
    あと、投稿してもらった部分で
    if ( have_posts() ) : while ( have_posts() ) : the_post();
    が複数回出てきていたりで、何が原因かはこのコードだけでは分かりません。

    tmatsuur さん。
    the_permalink(); は「投稿の パーマリンク の URL を表示」するだけでaタグそのものは出力しません。
    リンクとして使うときは
    <a href="<?php the_permalink(); ?>">文字列</a>
    にとダメです。(Twenty Twelve の content.php などを参照してください)

    tmatsuur

    (@tmatsuur)

    gatespaceさん
    失礼しました。何かと勘違いしていたみたいですね。

    a要素が入れ子になっているからではないでしょうか?
    section要素を囲むa要素の中にソーシャルへのリンクがあるように見えます。

    a要素はインタラクティヴ内容要素(a要素含む)を含むことはできません。
    http://www.marguerite.jp/Nihongo/WWW/RefHTML5/a.html

    トピック投稿者 unmoneko

    (@unmoneko)

    gatespace,tmatsuur様
    申し訳ありません、以後注意致します。

    Takashi Kitajima様
    インタラクティヴ内容要素・・・なる程です。
    formタグなど利用して無理やり飛ばそうかと思いましたがこれは盲点でした。
    HTML5になってブロック要素も包めるようになった!くらいしか考えてませんでした。
    本当に助かりました。

5件の返信を表示中 - 1 - 5件目 (全5件中)
  • トピック「loop内でのバグ?aタグが増殖?」には新たに返信することはできません。