分類彙整: 網站建構

行動裝置網頁轉向的插件(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的設定來解決。

讓首頁背景圖片符合視窗大小

每個訪客的畫面都不一樣大,為了讓背景圖片可以跟著縮放,可以在網頁裡加上這樣的語法。其中第一段是利用java script判斷訪客的畫面大小,第二段是用css調整背景圖片尺寸。

第一段,請加在script的標籤之間:

for (var i = 0; i < images.length; i++) { var image = images[i], width = String(image.currentStyle.width); if (width.indexOf('%') == -1) { continue; } image.origWidth = image.offsetWidth; image.origHeight = image.offsetHeight; imgCache.push(image); c.ieAlpha(image); image.style.width = width; }

第二段,請加在style的標籤之間:

body {
background-image: url(welcome.jpg);
background-size: 100%;
}

資訊來源:http://stackoverflow.com/questions/376253/stretch-and-scale-css-background

WordPress 部落格搬家與多部落格系統

因為要幫藝術街建立一個部落格系統,希望未來可以讓更多商家加入。但是建立過程一直不順利,最後決定用搬移複製舊部落格的方式來進行,結果成功了!

東海藝術街部落格群:http://blogs.artstreet.tw

閱讀全文