製作特色圖片點擊WordPress的

我努力使特色圖片點擊使用JavaScript：製作特色圖片點擊WordPress的

<div class="post-wrapper"> 
 
    <section class="post-image"> 
 
    <img alt="Targ3t Band" class="img-responsive" src="http://i2.wp.com/www.example.com/wp-content/uploads/example.jpg"> 
 
    <div class="image-shadow"></div> 
 
    </section> 
 
    <div class="post-container"> 
 
    <div class="container"> 
 
     <section class="post-title" style="color:;"> 
 
     <h2 class="post-heading"><a href= 
 
        "http://www.example.com/category/example/">Band &#8211; 
 
        Targ3t</a></h2> 
 
        <ul class="post-info"></ul> 
 
     </section> 
 
    </div> 
 
    </div> 
 
</div>

有誰知道如何添加<a>到<img>標籤？

來源

2016-05-31 Stefan Georgiev Andonov

是否需要用JavaScript製作？或者你可以修改WordPress模板？ –

發現如何，用一個標籤包裝元素，它具有php - > get_post_permalink（），並不那麼難 –

假設你只是表示圖像應該將用戶鏈接到一個單獨的頁面，這裏是你如何進行調整。你要做的就是包裹元素在a標籤，如下所示：

<div class="post-wrapper"> 
 
    <section class="post-image"> 
 
    <a href="http://i2.wp.com/www.djentmag.com/wp-content/uploads/TARG3T-2016-A-e1464397193853.jpg?resize=1400%2C600"><img alt="Targ3t Band" class="img-responsive" src="http://i2.wp.com/www.djentmag.com/wp-content/uploads/TARG3T-2016-A-e1464397193853.jpg?resize=1400%2C600"></a> 
 
    <div class="image-shadow"></div> 
 
    </section> 
 
    <div class="post-container"> 
 
    <div class="container"> 
 
     <section class="post-title" style="color:;"> 
 
     <h2 class="post-heading"><a href= 
 
        "http://www.djentmag.com/artist/targ3t/">Band &#8211; 
 
        Targ3t</a></h2> 
 
     <div class="post-sub-title"> 
 
      <p>Deathcore, Hardcore - Romania</p> 
 
     </div> 
 
     <ul class="post-info"></ul> 
 
     </section> 
 
    </div> 
 
    </div> 
 
</div>

與WordPress，還有，你要添加到圖像網址可能動態值。如果是這種情況，請提供其他信息，或者如果這不能完全解決問題。

來源

2016-05-31 20:09:45

您需要將id屬性添加到img標籤。（id =「image1」）在這種情況下。然後你需要創建一個Javascript函數，當你點擊圖片時會調用它。

下面的代碼將在加載頁面時單擊圖像時運行函數啓動器。

<script> 
var image; 
function clicked() { 
    alert("Image clicked"); 
    } 
function starter() { 
    image = document.getElementById("image1"); 
    image.onclick = clicked; 
    }  
window.onload = starter; 
</script>

來源

2016-05-31 20:18:50

正如我上面提到的，我發現，編譯代碼的PHP腳本，並用<a>標籤，有get_post_permalink()，它做了很好的工作包的形象。使用String locator在我的主題中找到編譯這些元素的.php文件。

來源

2016-09-15 12:24:52

好吧，刪除問題，我是新來的stackoverflow，10倍，傢伙 –

製作特色圖片點擊WordPress的

回答

相關問題