分類彙整: 網站建構

Jquery Mobile 網頁的選單(menu)功能外掛 – mmenu

行動裝置版本的網頁,常常可以有個「選單」的按鈕在頁面左上角(或是右上角),非常方便好用。所以我上網找了個現成的來用,mmenu!這個外掛除了使用簡單之外,還有階層式的選單,相當好用。

官方網頁:http://mmenu.frebsite.nl/

閱讀全文

WordPress Plugins 百大外掛精選

使用Wordpress以來,外掛是非常重要的附加功能,但是也常常不知道那個外掛比較好用,甚至剛開始的時候有些外掛還不會用。最近看到有作者把常用、好用的外掛整理出來,實在忍不住要推薦給大家。只不過對我來說有點相見恨晚,裡面很多說明對我來說已經不大需要了。所以我沒有買這本書,只是把他的「目錄」列在這篇文章下面,相信這個「目錄」對很多人來說就足夠了。

getImage
作者: Pseric
出版社:博碩
出版日期:2014/02/26

閱讀全文

行動裝置網頁轉向的插件(WP Mobile Redirect)

一個很簡單的插件,可以讓行動裝置在看Wordpress的時候轉向到另一個頁面。

WP Mobile Redirect

不過很好笑的是,作者的程式碼有錯(V2.4),會導致「回到正常網站頁面的連結」失效,所以要手動把mobi.php這個檔案裡面的其中一行:

1
if(substr_count($session_check, 'main=true')>0){

改成

1
if(substr_count($session_check_lite, 'main=true')>0){

就可以了。

Facebook轉貼連結的縮圖不正確

常常在要把部落格文章轉貼到Facebook的時候,系統自動就選擇了縮圖又不能改的時候,就是Facebook已經把這篇文章網址的縮圖放進快取(cache)了,把他清掉應該就可以。如果還能夠直接指定縮圖,那就更萬無一失。

清除Facebook快取:進入https://developers.facebook.com/tools/debug頁面,輸入你要清除快取的網址,按下「debug」按鈕。(資料來源:Fundesigner

直接指定縮圖:在部落格文章中加入

<link href="圖片連結網址" rel="image_src" type="image/jpeg">

(資料來源:阿福

WordPress搬家時遇到中文檔名的問題

最近在幫部落格搬家的時候,遇到新主機伺服器讀不到中文檔名的問題。我當然知道用中文檔名本來就是自找麻煩,可是已經有中文檔名的檔案也要要解決啊!以下是我的解決方法:

1.先壓縮原伺服器主機上的部落格檔案(我是從GoDaddy上搬出來)才下載,否則FTP時中文檔名的檔案下載就可能會出錯。

2.把壓縮檔上傳到新伺服器主機上(我是搬到HostMonster)再解壓縮,中文檔名應該還是可以正常顯示,只是網頁會讀不到。

3.再把壓縮檔另外下載一份到PC,解壓縮,用搜尋的方式,把中文檔名所在的資料夾找到(如果很多就累了)。

4.把舊部落格的資料庫檔案備份出來。

5.確認了中文檔名檔案所在的目錄,例如wordpress部落格的檔案室是在upload/20xx/oo的目錄(20xx是年,oo是月),就要用文字編輯器打開剛剛備份的資料庫檔案(xx.sql),搜尋upload/20xx/oo/中文檔名,取代成新取的英文檔名,再把伺服器上對應的中文檔名檔案改成英文檔名。

6.到新主機上匯入修改好的資料庫檔案即可。

換個主機商,揮別老爹懷抱(Goodbye GoDaddy),投入怪獸門下(HostMonster)

網站搬家實在是一件很累的事,如果不是情非得已,我也不願意這麼做。最近我對GoDaddy的忍耐已經到了極限,終於決定搬家到HostMonster的主機。如果你是因為搜尋主機商評價而找到這篇文章的話,我建議你仔細看一下。

閱讀全文

在wordpress中顯示程式碼的外掛SyntaxHighlighter Evolved

最近在做android app製作的筆記,會用到很多程式碼,就去找了wordpress裡面的程式碼顯示外掛,這個SyntaxHighlighter Evolved很好用,除了可以顯示程式碼,以不同顏色顯示標籤,還可以加行號並針對特定行數高亮度顯示,很好用。

示範說明網頁:http://en.support.wordpress.com/code/posting-source-code/
Wordpress 外掛網頁:http://wordpress.org/plugins/syntaxhighlighter/

隨螢幕調整字型大小

在font-size的設定用vw或vh當單位,其中vw是相對畫面寬度,vh是相對畫面高度。

參考資料: css-tricks Viewport Sized Typography

但是手機的瀏覽器好像不支援?行動裝置好像要用em當單位,可是em當單位在一般瀏覽器好像又不行?

後來我在手機瀏覽模板的style.css檔裡面增加一個div的設定來解決。