• Work Team


    奕捷創意(股)公司 EJ-Idea Inc.

    奕捷創意(股)公司 EJ-Idea Inc. 專精 iPhone, iPad , Android 行動平板應用程式開發,亦與多家出版社及 e-Learning 廠商與廣告公司合作,開發出許多手機與平板應用,互動式電子童書,平面電子型錄等等。2011 年開始結合 WordPress 平台創作出更多精采作品!
    了解更多……

  • 版權宣告


    網摘、引用、連結,不轉載

    Creative Commons License
    姓名標示您必須保留原作姓名標示
    非商業性您不得為商業使用本著作
    禁止改作您不得改變或改作本著作

  • 最新評論

  • 這裡│WordPress 為新文章添加 new 圖標.連外網址...

     

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

    的最新文章加上 new 圖標

     

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

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

     

    <div style="float: right; margin: 8px 5px -5px">
    <?php
    $t1=$post->post_date;
    $t2=date("Y-m-d H:i:s");
    $diff=(strtotime($t2)-strtotime($t1))/3600;
    if($diff<24){echo "<img src='圖標網址' alt='24小時內最新發表'>";}
    ?></div>

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

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

     

     

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

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

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

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

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

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>

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

     

     

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

    側邊欄的 Tab Pane 功能

    側邊欄的 Tab Pane 功能

     

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

    </head>

    之前:

    <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/tabpane/js/tabpane.js"></script>
    <link type="text/css" rel="StyleSheet" href="<?php bloginfo('template_url'); ?>/tabpane/css/tab.webfx.css" />

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

    <div class="tab-pane" id="tab-pane-1">
    <script type="text/javascript">
    var tabPane1 = new WebFXTabPane( document.getElementById( "tab-pane-1" ) );
    </script>
    <div class="tab-page" id="tab-page-1">
    <h2 class="tab">General</h2>
     
    <script type="text/javascript">
    tabPane1.addTabPage( document.getElementById( "tab-page-1" ) );
    </script>
    This is text of tab 1. This is text of tab 1.
    This is text of tab 1. This is text of tab 1.
    </div>
    <div class="tab-page" id="tab-page-2">
    <h2 class="tab">Privacy</h2>
     
    <script type="text/javascript">
    tabPane1.addTabPage( document.getElementById( "tab-page-2" ) );
    </script>
    This is text of tab 2. This is text of tab 2.
    This is text of tab 2. This is text of tab 2.
    </div>
    </div>

     記得把

    <h2 class="tab">General</h2>

     中間的 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.回。到。原。點 http://blogs.carrielis.com


    【歷史上的今天】
    相關文章外掛 for WordPress, Blogger...
    本文目前有 18 則回應
    1. @HHH.: 語法我也不是很熟,不過我會 Google 搜尋,這裡有一位美女兼才女提供了不使用插件就能實現你要的功能的語法代碼,建議你去她部落格的這篇文章觀看囉~

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

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

    3. @Joker: 那就希望你改了之後能夠用得順手囉~

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

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

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

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

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

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

    7. @xD~碳 咦?我不知道耶~因為我的火狐不會有你這樣的情況發生啊 :idea:
      會不會是哪個火狐插件衝到了?

    8. @Carrie
      難道是碳碳的火狐特別不同?(驚)

      碳碳也曾經用alt,但火狐就是無法顯示,
      title就是能顯示出來,真的蠻奇怪的(囧)