從 Blogger 轉移到 WordPress 的技巧

本站已經由 GoogleBlogger 轉移到 WordPress,這是轉移到 WordPress 之後的第一篇文章。

用過 WordPress 之後才知道 WordPress 的好,WordPress 相對於 Blogger 的優點如下:

  1. 標籤雲、搜尋、繼續閱讀、最新文章、最新留言、分頁…等等基本功能,已經內建在 WordPress 裡了,不需要辛辛苦苦去改範本、研究程式碼,而 Blogger 往往因為手動加了這些功能,而變得極為擁腫。
  2. 可以上傳圖片、影片、音樂…等檔案,以往這些在 Blogger 裡,都需要再尋找額外的網頁空間存放,並且 WordPress 上傳的圖片會自製縮圖。
  3. 對於讀取權限的控管,WordPress 可以做到完全公開、公開給特用用戶、單篇密碼保護、禁止搜尋引摯、完全隱藏。
  4. WordPress 已經內建幾個知名部落格系統的轉移工具,當然包括 Blogger。
  5. WordPress 同時有免費線上部落格(BSP)部落格架站程式
  6. WordPress 的佈景主題(Themes)更多、更漂亮。
  7. 琳瑯滿目的外掛程式,很難找不到你想要的功能。

繼續閱讀

下載本站的 Template

訪客留言要索取本站的 Template,不過他沒有留下 E-Mail,所以我就直接打包釋出給大家下載。

這是 Blogger 的 Template,而不是 WordPress 的 Template。

這個 Template 的原始版本應該是來自 DesignfruitBlogcrowds,我把這個 Template 改成 Blogger 可用,並且是 「不限寬度」 的版本,也加入了一些我自己寫的 Script,如果覺得改得還可以的,請直接取用。

安裝至 blogger 時須選取 「展開小裝置範本」,將 template.txt 的內容全部貼上即可,裡面很多連結至 http://citypig.googlepages.com/ 的項目,請自己上傳、更改至自己的網路空間,本站下次如有改版,可能就會全部刪除了。

另外,這個 Template 在 IE 下是有 Bug 的,如果螢幕不夠寬,內容的部份會跑到側邊欄的下面,就等待 CSS 能力比較強的人來解決了。

解決當 Blogger 的 "隱藏全文/繼續閱讀" 功能因為點選較新或較舊的文章而失效的狀況

在 Blogger 加入 「隱藏全文/繼續閱讀」 的功能之後,會因為點選 Blogger 下方的 "較新" 或 "較舊" 的文章連結而導致功能失效!!

會失效原因是因為你在點 "較新" 或 "較舊" 的連結時,所要切換的內容會以 AJAX 的方式載入,而大家所寫的 「隱藏全文/繼續閱讀」 都是以 JavaScript 所寫的,當 AJAX 直接切換內容時,並沒有觸發到用 JavaScript 所寫的程式,所以,我們要做的就是讓 AJAX 的這個功能失效。

修改 Blogger 範本,點選 「展開小裝置範本」,找到下列原始碼,這些原始碼就是新舊文章的連結,將 「紅色」 的字串去掉,最後再存檔即可:

<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>

將 Blogger 中的標籤改成標籤雲(Tag Cloud)

當 Blogger 中的文章一多,標籤也跟著變多,而 Blogger 的標籤元件就會變得落落長,不好看也不好搜尋。

這時候如果改成 「標籤雲」 就會是一個不錯的作法。在標籤雲中運用字體大小及顏色的變化,就可以很快的找你要的標籤。

修改步驟

  1. 編輯 Blogger 樣板,並 「展開小裝置範本」。
  2. 在 <Style> 區塊內加入:
    #Label1 ul { font-family:Arial; padding:0px; text-align:justify; }
    #Label1 li { display:inline; }
  3. 搜尋 </head>,在上一行加入:
    <script>
    function parseTag(){
      var tagA = document.getElementsByTagName('a');
      for(var i=0; i<tagA.length; i++){
        if(tagA[i].id == 'tag'){
          var tag = tagA[i];
          var width = tagA[i].title;
          tag.style.fontSize = 14 + parseInt(width/5);
          tag.style.color = 'rgb(0,0,' + width*5 + ')';
        }
      }
    }
    </script>

    其中的第 8 行可用來調整字體大小,第 9 行用來調整顏色變化。

  4. 繼續搜尋 <body>,在標籤內的 onload 事件加入:
    parseTag();
  5. 繼續搜尋:
    <li>
      <b:if cond='data:blog.url == data:label.url'>
        <data:label.name/>
      <b:else/>
        <a expr:href='data:label.url'><data:label.name/></a>
      </b:if>
      (<data:label.count/>)
    </li>

    取代成:

    <li>
      <b:if cond='data:blog.url == data:label.url'>
        <a id="tag" expr:title='data:label.count' expr:href='data:label.url'><u><data:label.name/></u></a>
      <b:else/>
        <a id="tag" expr:title='data:label.count' expr:href='data:label.url'><data:label.name/></a>
      </b:if>
    </li>
  6. 存檔完成。

blogger 資料整理

RSS 相關

  • blogger 的 ATOM/RSS 預設是依更新時間排序,網址為:
    • http://vixual.blogspot.com/feeds/posts/default
    • http://vixual.blogspot.com/feeds/posts/default?alt=rss

    如果要讓它依發表時間排序,網址須改為:

    • http://vixual.blogspot.com/feeds/posts/default?orderby=published
    • http://vixual.blogspot.com/feeds/posts/default?alt=rss&orderby=published
  • Label(標籤)的 RSS 網址:
    • http://vixual.blogspot.com/feeds/posts/default/-/label
    • 將上方的」label「換成 Blogger 上的標籤名稱即可。

  • blogger 的留言的 ATOM/RSS 網址為:
    • http://vixual.blogspot.com/feeds/comments/default
    • http://vixual.blogspot.com/feeds/comments/default?alt=rss

如何讓 blogger 不自動載入 ajax

    在 <body> 的下一行加上:

    <script type='text/freezescript'>
    _WidgetManager._Init=function(){};
    _WidgetManager._SetPageActionUrl=function(){};
    _WidgetManager._SetDataContext=function(){};
    WidgetManager._SetSystemMarkup=function(){};
    WidgetManager._RegisterWidget=function(){};
    </script>

如何讓版面依內文或列示載入不同項目

  • 判斷是否為內文:
    <b:if cond='data:blog.pageType == "item"'>
    載入的項目
    </b:if>
  • 判斷是否為文章列示:
    <b:if cond='data:blog.pageType != "item"'>
    載入的項目
    </b:if>