jQuery應用 - 製作首頁文章伸縮效果顯示
十二月 26th, 2009 文章分類於:WordPress系列, jQuery應用
WordPress系列
jQuery應用
BY 阿茂的隨手札記
WordPress從2.7版之後內建了jQuery，jQuery的優點就在於能夠兼容各種不同的瀏覽器，一些網頁效果也可以利用jQuery來達成。
之前為了讓首頁前幾篇文章正常顯示斷行前的說明，後幾篇只顯示標題讓訪客能點擊標題再顯示，試了好幾次都不夠完善，之後從木木木木木得到方法並實作後，成功的實現了，只需要三個步驟就可輕鬆完成。
步驟一︰【/wp-content/themes/使用中版型/header.php】
在<head>與</head>處加上
<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="http://檔案放置網址/postlist.js"></script>
★第一行的jquery.min.js直接調用Google的，至於postlist.js檔案請從下方載點下載後放置到網路空間上調用，.請注意js檔案裡".post-title:first"這段後面的"first"為首頁只有第一篇正常顯示，如果想要多篇顯示請將"first"改為"lt(這裡請填上想要正常顯示的篇章數量)"。
載點︰請按此處下載
步驟二︰【/wp-content/themes/使用中版型/style.css】
#postlist .post-content{display:none} /* 讓id="postlist"下的class="post-content"隱藏，注意修改！ */步驟三︰【/wp-content/themes/使用中版型/index.php】
尋找下列語法
<div id="post-<?php the_ID(); ?>"></div>
在"post-< ?php the_ID(); ?>"之後加上class="post-home"
尋找下列語法
<div id="post-<?php the_ID(); ?>"></div>
在這行之上加上
<div id="postlist"></div>
尋找下列語法
<h2><a href="<?php the_permalink() ?>"</a></h2>
在這行之前加上
<div class="post-title"></div>
尋找下列語法
< ?php the_content(__(' ')); ?>
用下列語法包住
<div class="post-content"></div>接著請在下方加上
<div class="post-messages"></div>★最後需額外添加兩個div，是為了結束前面兩個代碼，如果沒有加上會造成版面錯亂。
這樣子就可以實現文章伸縮效果顯示，步驟三裡的語法請依照所使用版型尋找，大致上都相似，並且這對於搜尋引擎是沒有太大影響的。
Loading ...
三月 18th, 2010 at 19:04:19
还是搞不定，感觉你说的最后那几步加代码描述的有点乱，博主有空帮我看看吧
一月 27th, 2010 at 00:03:36
应该把你弄好的文件代码发出来。哈。这下更清楚。呵
一月 26th, 2010 at 23:48:46
刚在木木木木 上看的搞了半天没搞会，你这写的挺细的。我看看再整整。哈
十二月 27th, 2009 at 10:39:49
阿茂又在上課嚕!!~ ^^