如何做一個WordPress的鏈接塊？

有沒有人有一個想法在CSS會把下面的鏈接塊？如何做一個WordPress的鏈接塊？

<div class="one_third"> 
<?php 
//The Query 
query_posts('posts_per_page=1&cat=15'); 
    //The Loop 
    if (have_posts()) : while (have_posts()) : the_post(); ?> 
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2> 
<small><?php the_time('F jS, Y') ?></small> 
    <?php if (has_post_thumbnail()) the_post_thumbnail('medium-thumbnail'); ?> 
<div class="entry"> 
<p><a style="display: block;" rel="bookmark" href="<?php the_permalink(); ?>"><?php echo strip_tags(get_the_excerpt());?></a></p>

對不起，沒有職位符合您的條件。

感謝

來源

2011-06-05 Nsokyi

你能發表嗎？生成的html和你的css？ – Sotiris 2011-06-05 15:52:37

你是什麼意思的一個「鏈接塊」？你想要禾潛水工作就像一個鏈接？ – 2011-06-05 16:04:50

@大衛是的，我希望「one_third」div包裝內的所有東西都成爲一個鏈接。請參閱下面的代碼。感謝 – Nsokyi 2011-06-06 19:07:27

@Sotiris

對不起已故的答覆只得到下班後在這個網站的工作。

<div class="one_third">  
    <h2><a href="http://localhost:8888/edinburghshiatsuclinic/news-offers/news-letters-suday-test-post/." rel="bookmark" title="Permanent Link to News Letters Suday test post">News Letters Suday test post</a></h2> 
<small>May 15th, 2011</small> 
    <div class="thumbnail"><a href="http://localhost:8888/edinburghshiatsuclinic/news-offers/news-letters-suday-test-post/." title="News Letters Suday test post"><img width="190" height="140" src="http://localhost:8888/edinburghshiatsuclinic/wp-content/uploads/2011/05/front-page3-200x147.jpg" class="attachment-medium-thumbnail wp-post-image" alt="front-page3" title="front-page3" /></a></div> <div class="entry"> 

    <p><a style="display: block;" rel="bookmark" href="http://localhost:8888/edinburghshiatsuclinic/news-offers/news-letters-suday-test-post/.">Suspendisse tempus semper dignissim. Pellentesque ac tempus ligula. Aenean eu nisi eu mi consequat vehicula venenatis et leo. Praesent ornare aliquam ultricies. Nunc justo tellus, varius quis viverra a, scelerisque non justo. Suspendisse leo turpis, elementum in dignissim sed, facilisis &hellip; Continue reading &rarr;</a></p> 
</div> 
</div>

來源

2011-06-06 19:03:09 Nsokyi

好吧，根據您發佈的代碼，div中的所有內容都已經是鏈接了。如果你想單擊div上的任意位置來像鏈接一樣工作，則需要使用Javascript--不能在塊內元素（<a>）中包含塊級元素（<div>）。

這裏是一個jQuery的方式來做到這一點：

$('#one_third').click( function(){ $(this).find('h2 a').click(); });

它只是說「當你點擊ID爲'one_third'股利，尋找其中的元素'h2 a'並觸發該元素上的點擊（我把它縮小到只是其中一個鏈接，如果你沒有這樣做，如果你剛纔說的話（'a'），它會點擊所有的鏈接，這也許會很有趣。）

來源

2011-06-09 02:55:25

感謝大衛，我試過 \t <腳本類型= 「文/ JavaScript的」> \t \t的jQuery（函數（）{ \t \t $（ 'one_third'）。點擊（函數（）{$（這個）.find（'h2 a'）。click（）;}）; \t 但是沒有運氣？ – Nsokyi 2011-06-12 12:34:09

我看到你已將'＃one_third'改爲'.one_third'，這對你的代碼是正確的。也包裝了'jQuery（function（）{'，我猜想因爲Wordpress可能會與其他庫衝突，如果你這樣做的話，確保你正在關閉函數，嘗試添加另一個'}）;'at最後，像這樣： 'one_third ' '<腳本類型= 「文本/ JavaScript的」> jQuery的（函數（）{ $（）點擊（ \t函數（）{ \t $（本）.find（' H 2的' ）。單擊（）; \t}）; }）; ' – 2011-06-13 03:17:22

當然，請確保您鏈接到jQuery的工作版本。我喜歡做的事情，如果你使用的是Firebug，Safari或Chrome，請在代碼中添加'console.log（$（this））;'（這裏我將它放在最內層的函數中）。如果它記錄了一個錯誤或者意想不到的事情，它可以幫助你找到問題所在。 – 2011-06-13 03:20:14

如何做一個WordPress的鏈接塊？

回答

相關問題