jQuery應用 – 製作首頁文章伸縮效果顯示

閱讀須知:

This site is best viewed with IE 11.0 higher and 1024*768 resolution HighColor.

連結內容時效性依所在網頁分享為主!

**本站內容無断転載禁止!

*本站圖庫放置於Flickr,少部分國家/地區因封鎖可能無法正常讀取!

*本站雜談內容相關記事為當下日時所記錄,不沿用至往後!

*小站いきものがかり相關訊息一切歡迎交流!

本站歡迎中國、香港、日本以及台灣等等華人圈訪客,極少部份中國人以及黑名單不歡迎到訪!

2016年10月(9/3測試完畢,近期進行無縫轉移)起新域名即將啟用,網站名稱以及內容將大幅減少個人色彩朝公眾化趨近,相關資源整合轉移進行中,舊域名屆時自動同步轉換至新域名!

9/7告知︰
為了配合網站以及新域名的使用,2016/10/1起能正常連線網站者的國家/地區如下︰
中國、香港、日本、澳門、美國、台灣、馬來西亞、新加坡、韓國

您的IP記錄位置(自動):
54.167.253.186

**10/26新增說明(補),轉移之後的頁面呈現目前只限現在可登入的訪客,登入後(新站)與登入前(舊站)的頁面呈現樣貌完全不同,登入後留言不顯示於舊站,日後開放註冊所公開的首頁顯示將僅以概略方式呈現!**

**12/25,新站兩次測試後運作穩定,2017年1月進行第三次測試(已測試結束)!**

**2017年4月起,正式嵌入新站影音區影音資料,既有facebook影音區不再使用(舊站不定期使用放置)!

**目前新舊站相併運行,新站放牧期間暫時不開放註冊,僅接受Mail申請(留言留下資料即可)!

WordPress從2.7版之後內建了jQuery,jQuery的優點就在於能夠兼容各種不同的瀏覽器,一些網頁效果也可以利用jQuery來達成。

之前為了讓首頁前幾篇文章正常顯示斷行前的說明,後幾篇只顯示標題讓訪客能點擊標題再顯示,試了好幾次都不夠完善,之後從木木木木木得到方法並實作後,成功的實現了,只需要三個步驟就可輕鬆完成。

步驟一︰【/wp-content/themes/使用中版型/header.php】


在與處加上

<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>

在”postlist”之後加上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,是為了結束前面兩個代碼,如果沒有加上會造成版面錯亂。

這樣子就可以實現文章伸縮效果顯示,步驟三裡的語法請依照所使用版型尋找,大致上都相似,並且這對於搜尋引擎是沒有太大影響的。

閱讀須知:

This site is best viewed with IE 11.0 higher and 1024*768 resolution HighColor.

連結內容時效性依所在網頁分享為主!

**本站內容無断転載禁止!

*本站圖庫放置於Flickr,少部分國家/地區因封鎖可能無法正常讀取!

*本站雜談內容相關記事為當下日時所記錄,不沿用至往後!

*小站いきものがかり相關訊息一切歡迎交流!

阿茂

いきものがかり.ゆず.生物股長.柚子.1年2組.超いきものまつり2016 台湾參戦団-海老名初日 8/27.いきものがかり テレビ收藏愛好者 2006 ~ 2016/11/10.NEW收藏2016/11/10 ~ 現在.日文: 閱讀O.慣用語: 中文.台灣-高雄

Latest posts by 阿茂 (see all)

4則留言在 “jQuery應用 – 製作首頁文章伸縮效果顯示

  1. 还是搞不定,感觉你说的最后那几步加代码描述的有点乱,博主有空帮我看看吧

    阿茂回覆:
    這也難怪了,因為步驟三的開頭寫錯了,已經做了修正,麻煩再試看看囉~

    Internet Explorer 6.0 Windows XP
  2. 应该把你弄好的文件代码发出来。哈。这下更清楚。呵

    阿茂回覆:
    基本上源碼跟木木木木木的差不多~

    Firefox 3.5.7 Windows XP

此篇已經關閉留言功能.