分享本文

分享在 facebook
分享在 twitter
分享在 linkedin
分享在 whatsapp
分享在 telegram
大家應該有發現最近只要本站一有新文章更新,該篇新文章標題的右方就會顯現一個閃動的 new 圖標,現在我就在這裡跟大家分享一下我的作法,這是我在對岸網友流年觀影的博客看到的教法,這裡我就借花獻佛一下囉!

 

幫 WordPress 的最新文章加上 new 圖標
幫 WordPress 的最新文章加上 new 圖標

 

 大家應該有發現最近只要本站一有新文章更新,該篇新文章標題的右方就會顯現一個閃動的 new 圖標(如上圖),現在我就在這裡跟大家分享一下我的作法,這是我在對岸網友流年觀影的博客看到的教法,這裡我就借花獻佛一下囉 😉

 其實很簡單,我只是按照流年觀影提供的程式語法,把它加在我的 index.php 檔案裏,以下是我的語法:

 

post_date;$t2=date("Y-m-d H:i:s");$diff=(strtotime($t2)-strtotime($t1))/3600;if($diff<24){echo "24小時內最新發表";}?>

 記得先自己用 PhotoShop 做一個 new 圖標,或是使用 Ulead GIF Animator 做一個會閃動的 gif 圖檔,如果都不會做,請自行 Google 搜尋 new 圖標囉!接著將圖標檔案上傳到你的主機空間裏,然後把上述語法的『圖標網址』部份換成你的圖標網址即可,然後將語法中的 24 換成你想維持的時間數,例如 12,這個數字部份就是代表文章發表時間,我是設定 24 小時之內發表的文章,所以我還是維持 24 的數值,你就看你自己要設定幾小時囉!

 再說明一下,如果你想將圖標顯示在標題左方,請將語法裏的 float: right 改成 float: left 即可。

 

 

 至於非自己網站的連外網址總是在新分頁開啟的方式,則是借鏡海芋小站這篇文章的教法,大家不妨看看。

 這是採用了目前最流行的 jQuery 語法來達成的,我自己是非常簡單的在我使用的主題 js 檔案裏加上以下這段語法:

$("a").click(function(event){ $("a").not("[href*=blogs.carrielis.com]").attr("target","_blank");});

 其中那個網址部份,請你們自行改成自己部落格的網址,最主要的其實就是那個 “target”,”_blank” 相信熟悉 HTML 語法的人對它都不陌生吧!這段語法簡單就是說,只要跟你部落格無關的連外網址,點擊下去都會以新視窗或新分頁開啟。

 如果你跟我使用的主題一樣,請在 yinheli.js 這個檔案搜尋 https://out links 字串,主題作者原本就有寫下這個功能,你可以自己修改,記得把 /* 和 */ 刪除,就可以使用此功能了。如果你是使用其它主題,請在 頁首 (header.php) 檔案裏先寫下

 接著再在底下寫下我上面提供的語法,這樣就可以囉!

 

 

 最後要再更新我曾經提過的 Tab pane 功能,也就是我側邊欄的那個 Tab 功能(如下圖),這裡我也曾經使用過 jQuery 的 tab 功能,但後來還是徹掉了,因為我覺得那個功能會與本主題其它功能相衝,也會跟一些插件衝突,所以我還是用回這個 Tab pane。

側邊欄的 Tab Pane 功能
側邊欄的 Tab Pane 功能

 

 一樣,我們還是去原作者網站下載這個 JS 元件,然後把它上傳到你主機中的主題目錄之下。之後,把以下語法加入你頁首 (header.php) 檔案裏

之前:

 接著使用 Widgets(模組)的方式,在你的側邊欄加上 tab pane,同樣也是使用下述語法:

General

This is text of tab 1. This is text of tab 1.This is text of tab 1. This is text of tab 1.

Privacy

This is text of tab 2. This is text of tab 2.This is text of tab 2. This is text of tab 2.

 記得把

General

 中間的 General 改成你要的 tab 名稱,還有把

 

This is text of tab 1. This is text of tab 1.
This is text of tab 1. This is text of tab 1.

 

 改成你的程式代碼,這樣就可以囉!

 

 

 文by覺非/各種小功能就是這樣一點一滴建構出來的喔!


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

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


請拍掌支持我繼續創作

↓↓↓ 若你喜歡我的文章,請在下方的「讚賞鍵」按讚,我會因此獲得收入。

回饋由 LikeCoin 基金會出資,您只要註冊/登入帳號(fb、google 帳號都可以註冊,流程超快),按五次左鍵,就可以贊助我的文章,完全免費。感謝支持。 ↓↓↓

飛翔於文字國裏的蝴蝶,我是愛寫文的女子,不要看我的人,請你看看我的文,那裡面全是我的心.和我想對你說的話……
StartOver.回。到。原。點 https://carrielis.com

分享本文

分享在 facebook
分享在 twitter
分享在 linkedin
分享在 whatsapp
分享在 telegram

“這裡│WordPress 為新文章添加 new 圖標.連外網址總以新分頁開啟” 有 18 則留言

  1. @Arno Ruan 我之前有用過,不過好像會和我主題裡面不曉得哪一個 jQuery 功能起衝突呢!沒關係,現在這個 Tabpane 也很好用,顯示速度也挺快。

    @拆組達人 OK,那就等你更換版型時再來使用這些我介紹的功能吧 😉

    @SMILE 哈,我不是老師啦,只是愛跟大家做分享,我算是比較雞婆的人而且又健忘,所以記在這裡做個備忘錄囉 😛

  2. ❗ 真能折騰,可是你的折騰往往很快就可以得到想要的效果,我卻沒有這種效率,越來越佩服你了。這個插件一直沒有用過,目前還沒打算開始折騰,等過一段時間發現新式的主題,再加上這個效果吧。這篇文就收藏了。

    PS:還有一些可以同時把評論更新到Twitter的插件,你也可以試一下噢。

  3. @阿婆 呵,也不算怎麼折騰啦,就是找出自己究竟想要甚麼效果,找出來研究一下就用上了 🙂

    同時把評論更新到Twitter的插件

    ↑給個網址吧~

  4. @xD~碳 如果我沒有記錯的話,"alt"代表的是圖片顯示不出來時所呈現的文字,也是圖片要給搜尋引擎的含意,讓搜尋引擎不會被這些HTML代碼誤解擾亂、進而影響了網站的SEO。
    至於"Title"則是網址連結所要呈現給搜尋引擎得知的意義,讓搜尋引擎知道這個跳轉會連結到哪裡去。
    "alt""Title"所代表的含意原本就不一樣喔~
    另外,你說火狐顯示不出"alt"的圖標,但是我所使用的就是火狐啊!顯示很正常,並不會不能顯示喔!

  5. 本來覺得安裝 TABPANE 有點麻煩,後來還是安裝上去了,其實還算簡單,效果也不錯。
    注意JS套件是要複製到theme\下”所用的主題”的資料夾內。
    若要搭配網站風格,可能要去改 css 檔案,但我是有看沒有懂說。
    我只是把字型”微軟正黑體”全給加上去,讓顯示畫面好看些。。
    原作者提供三款樣式,但我不知如何切換。還好預設的樣式還可以接受。

    謝謝格主提供這個套件的使用說明,用起來挺不錯的。
    有空請來造訪我的blog看看,謝謝。嘻!

  6. @BigELK176 Tabpan 的安裝其實並不難,只是要搞懂 js 的呈現方式就有點難度,不過還好原作者將他寫好的程式釋出分享,所以我們只需要在 CSS 上做些調整即可,基本上他會以你部落格主題的 CSS 為主要呈現方式,我也沒有特別調整過 CSS 喔!

    我是將下載的 Tabpan 檔案解壓縮之後得到 Tabpan 這個資料夾,然後放在我所使用的 philna 主題底下,也就是你的 Tabpan 資料夾會是在 /wp-content/themes/你的主題 底下,這樣就可以了,我連 CSS 都沒有調整過呢 😉

    我去看過你的部落格,是以心智圖為主的一個部落格,真的很棒!我對於心智圖是完全不懂的,若以後有這方面的問題請教你,屆時再請你幫忙指導一下囉 🙂

  7. 我也覺得我用jQuery 的 tab 功能怪怪的,大概我不會改吧,哈哈
    用用你教的,看看會不會比較美觀,我網站竟然被說醜…

  8. 想要請問一下 tab panel 中使用「最近留言」還有「最近文章」中的語法是?

    因為習慣都是用 widget 直接拖拉,忽然要用語法也看不懂,所以特地請教!

  9. @HHH.: 語法我也不是很熟,不過我會 Google 搜尋,這裡有一位美女兼才女提供了不使用插件就能實現你要的功能的語法代碼,建議你去她部落格的這篇文章觀看囉~

請留言

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

相關文章

捲動至頂端