WordPress 主題製作學習筆記:幫你的主題加上 jQuery 特效「圖片顯隱+平滑滾動」功能

Share on facebook
Share on google
Share on twitter
Share on linkedin


記得我們在上一篇主題製作學習筆記裡面曾經加載了 jQuery 主程式嗎?不要浪費,我們還可以加上其它 jQuery 特效來美化你的主題。

本格的常客們應該都有發現,本格自從啟用目前主題之後,首頁以及所有文章頁的圖片都有顯隱特效,也就是圖片有一層白霧、但滑鼠移到圖片就能看清楚的特效,這樣的特效是採用了 jQuery。現在我們就來將這個特效加進主題裏吧!

必須說明的是,這兩種 jQuery 特效代碼,我都是由對岸博客網友萬戈那裡學習得來的,在此要先跟萬戈說句:謝謝!

 

jQuery圖片顯隱特效

首先請你將以下代碼複製之後另存為 img-hook.js 的檔案:(存在主題資料夾裏的 js 資料夾)

jQuery(document).ready(function($) { $('.alignleft img,.entry img').animate({"opacity": .5 }); $('.alignleft img,.entry img').hover(function() { $(this).stop().animate({ "opacity": 1 }); }, function() { $(this).stop().animate({ "opacity": .5 }); }); });

然後請你打開主題的 footer.php 檔案,在:

<?php wp_footer(); ?>

之前加入以下代碼調用這個特效:

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/img-hook.js"></script><!-- jQuery圖片顯隱特效 -->

如此即大功告成。

 

jQuery平滑滾動

好,緊接著,再跟大家分享平滑滾動的 jQuery 特效。本格常客應該都知道在這裡看文章時,你可以按下標題下方的向下箭頭圖片去看該文章的所有留言;在留言評論處,也可以按下「發表評論」直接跳到書寫框去留言;而本格每一個頁面的頁尾右下角也都有一個向上箭頭的圖片供你點擊,點擊之後就會回到頁首處。而這樣的移動,都有平滑特效產生,這種效果就是運用了 jQuery 的平滑滾動特效。

現在就請大家把以下的 jQuery 特效代碼複製,直接貼在主題的頁尾檔案(footer.php)

<script type="text/javascript">$(document).ready(function() { $('a[href*=#]').click(function() { if (location.pathname.replace(/^\https://, '') == this.pathname.replace(/^\https://, '') && location.hostname == this.hostname) { var $target = $(this.hash); $target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']'); if ($target.length) { var targetOffset = $target.offset().top; $('html,body').animate({ scrollTop: targetOffset }, 1000); return false; } } });});</script><!-- jQuery 平滑'捲動 -->

大家可以發現,在代碼第三行的地方,使用了

$('a[href*=#]').click(function()

這樣的代碼函數,這代表你要為你的平滑滾動加上 # 開頭的 a link 屬性,譬如我的向上箭頭圖片,代表我要點擊該圖片就能回到頁首處,那麼代碼要怎麼添加呢?以下是我的返回頁首的代碼,你記得把屬性換成適合你使用的主題。

<div id="top"> <a href="#header" title="返回頁首"><img src="<?php bloginfo('template_url'); ?>/images/top.png" alt=""回頁首" /></a></div>

大家可以看到我的 a link 屬性使用的是 #header,這代表點擊向上圖片,就能回到頁首的地方。至於其他的平滑滾動連結,大家可以此類推,自己試驗看看囉 :mrgreen:

 

 

 

文by覺非/WordPress 主題製作學習筆記.之七


 飛翔於文字國裏的蝴蝶,我是愛寫文的女子,不要看我的人,請你看看我的文,那裡面全是我的心.和我想對你說的話……

 StartOver.回。到。原。點 https://carrielis.com


5 thoughts on “WordPress 主題製作學習筆記:幫你的主題加上 jQuery 特效「圖片顯隱+平滑滾動」功能”

發佈回覆給「Carrie」的留言 Cancel Reply

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

你可能會喜歡⋯⋯

第六期 Vista 寫作陪伴計畫
好康分享

推薦:Vista 寫作陪伴計畫

第六期 Vista 寫作陪伴計畫:在這個行動時代,「內容力」是每個人都需要具備的能力,Vista 老師希望透過這個寫作陪伴計畫,以手把手的方式協助每位成員擬定寫作計畫,並設定寫作主題與方向。本計畫係根據每位學員的需求量身打造,主題涵括個人品牌、網站經營、文案寫作、內容行銷與內容策略等相關面向,讓您能夠獨當一面,成為一位內容駭客。

WantEasy 網易資訊台灣虛擬主機
Trending

WantEasy 網易資訊台灣主機 TWW-E02 評測,1 核 10G $1800/年,預裝高速 LiteSpeed 網頁伺服器

這次有幸獲得網易主機的邀請,爲他們主機進行評測。有別於其它主機商,他們特別提出請我公開說明:『現在市面上的虛擬主機,空間都是很大,或是流量很多,有的是寫不限制,但其實這都有成本,我們公司比較保守,沒辦法也這樣做,但我們給的方案,基本上對一般網站來說很足夠使用才是。』,我覺得就我個人觀點來看,他們真是很實在的一間主機商;不願意刻意壓低價格、畫大餅說流量無限的套路做法,也引起我的好感。

生活拾綴

全新展望 2019

2019 年,將會是全面翻轉的一年。這兩年我的跨年都是在教會度過,除了為自己和家人親友祈福之外,最重要的是為這個世代、為我的國家台灣祈福,為我生活的花蓮這個城市祈福,我相信,一切都在上帝的手中,所以我誠心為眾人祈福,因為只有你們好,這個世界才會更好。

WordPress 技巧教學
Trending

WordPress Tips: 一段程式碼簡單關閉 Gutenberg 編輯器

一句程式碼關閉 Gutenberg 編輯器。

WordCamp Taipei 2018 - 台灣的第一場 WordCamp 盛事
Trending

WordCamp Taipei 2018 – 台灣的第一場 WordCamp 盛事

第一屆的 WordCamp Taipei 2018 就在 2018/10/21 週日上午正式舉行了,在此之前台灣的總召阿竣就已經在台北內湖的管地台北據點連續舉辦每月一次的 WordPress 小聚,累積了許多寶貴經驗,所以這回才有如此成功的 WordCamp Taipei, 屬於 WordPress 同好的世界級年會,此前全球早已舉辦無數次這樣的開發者大會,而這是台灣的第一次。

Scroll to Top