制作一个 <div> 在Wordpress中可点击

Question

我正在修改现有的wordpress产品组合页面。 剩下要做的就是做到这一点，因此，当用户单击文章列表中的任意位置时，链接将打开。 当前只是单击标题或图像。

我可以看到可以使用以下设置进行点击：

    <a href="http://example.com">
     <div>
     anything
     </div>
    </a>

但是，Wordpress会在页面加载时像下面那样移动标签：

<a href="http://example.com">
</a>
<div>
 anything
</div>

因此，我开始通过以下设置使用CSS：

HTML

<div class= "box">
</div>

CSS

div.box {
    position: relative;
}

div.box:hover {
    cursor: hand;
    cursor: pointer;
    opacity: .9;
}

悬停起作用，它会触发所有内容，并且会出现一个光标。

但是，那是我到目前为止所能做的。 与.box进行交互的任何尝试都会被击落。 使用以下代码，JavaScript不会触发任何操作：

$(".box").click(function() {
   alert("I am an alert box!"); 
});

我似乎无法与div互动。

页面如下：

<div class= "box">

<article id="post-<?php the_ID(); ?>" class="portfolio-article clearfix">

    <?php if( get_post_meta($post->ID, "portfolio_image", true) ): ?> 
        <a href="<?php the_field('portfolio_link'); ?>" target="_blank"><img src="<?php the_field('portfolio_image'); ?>" class="portfolio-image"></a>
        <!--get PDF if not empty-->
        <?php else: ?>
        <img src="http://domain.com/wp-content/uploads/2014/02/placeholder.png" class="portfolio-image">
    <?php endif; ?>

    <div class="portfolio-content">
        <header>
            <?php  if( get_post_meta($post->ID, "portfolio_link", true) ): ?> 
                <h1 class="portfolio-title">
                    <a target="_blank" href="<?php the_field('portfolio_link'); ?>">
                        <?php the_field('portfolio_title'); ?> <span class="sosa-icon">p</span>
                    </a>
                </h1>
                <!--get PDF if not empty-->
            <?php else: ?>
                <h1 class="portfolio-title"><?php the_field('portfolio_title'); ?></h1>
            <?php endif; ?>
        </header>

        <p class="portfolio-meta">
            <?php the_field('portfolio_publication_and_date'); ?> 
            &nbsp;
            <?php if( get_post_meta($post->ID, "portfolio_pdf_upload", true) ): ?> 
                <a href="<?php the_field('portfolio_pdf_upload'); ?>" target="_blank"><span class="sosa-icon">H</span> Open Pdf</a><!--get PDF if not empty-->
            <?php endif; ?>
        </p><!-- END ortfolio-meta -->
       </div><!--portfolio-content-->


</article>

</div>

Answer 1

说要访问jQuery库可能存在问题时，NewToJS处于正确的位置。 在这种情况下，我已经正确链接了jQuery，它已经过测试并且可以正常工作。

需要通过将以下内容添加到functions.php中来使Wordpress中的jQuery入队

wp_enqueue_script("jquery");

我的错是因为我没有将'$'更改为'jQuery'，因为在使用Wordpress时这是必需的。

这是不正确的用法：

$(".box").click(function() {
   alert("I am an alert box!"); 
});

这是正确的用法：

jQuery(".box").click(function() {
   alert("I am an alert box!"); 
});