【问题标题】:How do I wrap an a tag around a div tag?如何将 a 标签包裹在 div 标签周围?
【发布时间】:2019-01-28 17:04:17
【问题描述】:

我正在修改一个 WordPress 主题,我有这段代码:

// Product link
$product_link_atts = ' href="' . esc_url( get_permalink() ) . '"';

<a<?php echo $product_link_atts; ?>><!-- Begin my a tag -->
    <div class="nm-shop-loop-details">
        <?php if ( $nm_globals['wishlist_enabled'] ) : ?>
        <div class="nm-shop-loop-wishlist-button"><?php nm_wishlist_button(); ?></div>
        <?php endif; ?>

        <h3><a<?php echo $product_link_atts; ?>><?php the_title(); ?></a></h3>
        <?php 
            /**
             * Hook: woocommerce_shop_loop_item_title.
             */
            do_action( 'woocommerce_shop_loop_item_title' );
        ?>

        <div class="nm-shop-loop-after-title <?php echo esc_attr( $nm_theme_options['product_action_link'] ); ?>">
            <div class="nm-shop-loop-price">
                <?php
                    /**
                     * Hook: woocommerce_after_shop_loop_item_title.
                     *
                     * @hooked woocommerce_template_loop_price - 10
                     */
                    do_action( 'woocommerce_after_shop_loop_item_title' );
                ?>
            </div>

            <div class="nm-shop-loop-actions">
                <?php
                    if ( $quickview_enabled ) {
                        echo apply_filters( 'nm_product_quickview_link', '<a' . $quickview_link_atts . '>' . esc_html__( 'Show more', 'nm-framework' ) . '</a>' );
                    }

                    /**
                     * Hook: woocommerce_after_shop_loop_item.
                     *
                     * @hooked woocommerce_template_loop_add_to_cart - 10
                     */
                    do_action( 'woocommerce_after_shop_loop_item' );
                ?>
            </div>
        </div>
    </div>
</a><!-- Close my a tag -->

我正在尝试在这段代码周围加上一个 a 标签(从第 4 行开始)。

<a<?php echo $product_link_atts; ?>><!-- Begin my a tag -->

但不知何故,a标签在编译时被破坏了。

这是通过 Chrome 检查时的样子:

如您所见,a 元素在包裹 div 之前已被关闭。我做了一些研究,我读到自 HTML5 以来,可以将元素包裹在 div 元素周围。

我不确定我在这里错过了什么,我只是错过了一些愚蠢的东西,还是我实际上正在尝试做一些不起作用的事情。

【问题讨论】:

  • $product_link_atts 中有什么?也许有一个“>”或类似的东西
  • 我也试过一次,因为没有明显的错误,所以它为什么不起作用令人费解,总结一下元素只有一个字母的事实,准确地找到它也有点复杂为什么它不能工作。
  • @Hackbard 我更新了代码以显示 $product_link_atts 变量,它位于第 2 行

标签: php html wordpress woocommerce


【解决方案1】:

我们需要查看其中一些 php 值的输出,以便更好地了解 html 的真实外观。如果您可以截取源代码的屏幕截图(ctrl+U),这将比 chrome 解释的内容更有帮助。

但是,我注意到您在另一个元素中有一个锚元素。

避免这样做。

https://www.w3.org/TR/2011/WD-html5-20110525/text-level-semantics.html#the-a-element

【讨论】:

  • 好吧,如果 HTML 禁止它,没有什么可以避免的。你不妨试试。 HTML 无论如何都会忽略它。 ://
【解决方案2】:

HTML 禁止在其他锚标签中嵌套锚标签。

这就是为什么你无法做到这一点,这就是为什么它会在它发生之前自行关闭。

Why are nested anchor tags illegal?

【讨论】:

  • 感谢您的信息。我会想办法解决的!
  • 当我在这方面犯了错误时,我只是创建了一个包含其他按钮的按钮对象,并将它的可点击区域设置为链接。
  • 是的,我通常做的只是显示:阻止元素,然后一切都呈现可点击。但是因为这是一个 woocommerce 模板,很多东西都是通过钩子调用的,所以我无法控制所有嵌套元素。还不确定我将如何解决这个问题:D
猜你喜欢
  • 1970-01-01
  • 2011-07-06
  • 1970-01-01
  • 2011-12-26
  • 2012-11-17
  • 2014-01-25
  • 2013-09-15
  • 1970-01-01
  • 2015-05-26
相关资源
最近更新 更多