制作一個 <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!"); 
});