網頁設計如何讓電腦手機加載不同廣告

將自己網站調整成響應式網頁
我在將自己網站調整成響應式網頁的過程中,找到的教學資料,用的方法大同小異:在CSS上加上一段媒體程式碼,設定當裝置寛度小於某個程度,不要加載側邊和底部,以我的網站為例:
/* for 600px or less */
@media screen and (max-device-width: 600px) {
#home{display: none;}
#header{display: none;}
.comment{display: none;}
#sidebar {display: none;}
#footer{display: none;}
如此一來,我測試用手機瀏覽網頁,的確沒有展示#sidebar(側邊)和#footer(底部),但是馬上發現有問題,我一個廣告JS代碼是寫在底部裡面,雖然手機已經不顯示底部了,那個JS廣告仍然跑出來,由此判斷,就算網頁自適應看不到底部,不代表底部區塊的代碼沒有被加載。自己架網站的想必都能理解,JS代碼很吃伺服器資源,會影響網頁加載負擔和速度,既然手機瀏覽的網頁不需要底部,那麼最好乾脆不要加載底部代碼,不然只是浪費而已。
和這個問題直接相關的,還有另一個考量。有些類型的廣告是電腦版、有些廣告是手機版,我希望同樣網址,在網頁和手機不但呈現的內容精簡不同,更希望能加載不同的廣告代碼,這個,單單CSS3的媒體設定沒辦法做到。
在查找了一些教程中,我偶然發現wordpress有一個非常棒的函數:「wp_is_mobile()」,利用這個是否手機裝置的判斷函數,很輕鬆完全解決了我的問題,實際運用上有三種方式,以我自己的網站為例:
wordpress有一個非常棒的函數:wp_is_mobile()
一、手機上才加載的代碼:
<?php if (wp_is_mobile() ): ?>
<!– 百度移動插屏廣告 –>
XXXXXX(移動廣告代碼)
<?php endif; ?>
二、電腦上才加載的代碼:
<?php if ( wp_is_mobile() ) { ?><?php }
else { ?>
<!– 百度圖加廣告 –>
<!–[if !IE]><!–>
XXXXXX(電腦廣告代碼)
<!–<![endif]–>
<?php } ?>
三、電腦手機若P則Q合併代碼:
<?php if ( wp_is_mobile() ) { ?>
<!– 百度移動插屏廣告 –>
XXXXXX(移動廣告代碼)
<?php } else { ?>
<div id=”sidebar”><?php get_sidebar(); ?></div>
<div id=”footer”><?php get_footer(); ?></div>
<?php } ?>
第三種方式非常合乎我的需求,不但設置了電腦和手機呈現不同廣告,同時也限制了側邊和底部只在電腦瀏覽時才加載。
設置了電腦和手機呈現不同廣告

部落格廣告聯盟:BloggerAds、GoogleAdsense、百度聯盟

百度聯盟
在部落格上放廣告,至今有三年。一開始文章發表在樂多,等於在別人地盤上擺攤位,雖然免費,但也因此,有許多先天上限制。當時我唯一能放的廣告,是BloggerAds,所以這個台灣本土的廣告聯盟,我是使用最久,也最有感情。
後來文章越寫越多,逐漸手癢,首先是買網址,在Blogger上面擁有自己的網路地址,因此敲開GoogleAdsense的大門,後來,追逐夢想一發不可收拾,於是乾脆自己架站,而且因為是在大陸,直接租阿里雲主機,裝載wordpress,跑完域名備案流程,www.b88104069.com正式上線,六個月之後,符合百度聯盟資格,能掛上百度圖案的廣告,至此,我的部落格和廣告聯盟之旅,走到一個有模有樣的里程碑。
自從掛上百度廣告,到現在半年,這半年間,我BloggerAds、GoogleAdsense、百度三家廣告沒有一家放過,只不過依照版面和收益率的考量,在網頁側邊欄、網頁置底欄、移動置頂欄、移動置中欄、移動置底欄之間,三家聯盟試過各種不同的排列組合。
現在,打算放棄BloggerAds的側邊長條廣告,如前所述,這是我最早一塊廣告,裡頭參雜著歲月和情感,我既然是個部落格寫手,在放棄之前,必須寫篇文章以資說明、以資紀念。
簡單講,三岸三地的三家廣告聯盟,作個比較。
百度圖+
Bloggerads我掛了三年,這三年來,一直都只有兩種規格:多重廣告(180X940)、橫式廣告(450×120),像這種情況有兩種可能,一種是這家公司原地踏步(沒進步),一種是廣告聯盟不是這家公司的業務主力,看著Bloggerads網頁上一直都在的「活動案件」、「問卷調查團」、「推薦貼紙」等業務,我寧可相信後者。
相較之下,GoogleAdsense規格五花八門,不但在網頁上,有各種大小的豎形橫形版塊,也有開發專屬移動手機的小單元,雖然受限於手機螢幕,大不到哪去,所以廣告規格不多,可是比起Bloggerads,感覺就是iPhone跟Nokia的差別,Bloggerads還活在桌機電腦為王的年代,Google畢竟是跨國公司,早已走在潮流的前端,佈局往移動市場發展。
於廣告形式上,GoogleAdsense比起Bloggerads再怎麼厲害,遇上百度,根本小巫見大巫,因為GoogleAdsense和Bloggerads都是嵌入性版塊廣告,而百度,早就擺脫這種形式,不但有「懸浮」、「圖+」、「內文」、「貼片」這些已經制式化的廣告花樣,而且持續不斷有創新,像是原生廣告、櫉窗廣告、信息流廣告,每次登入百度聯盟,百度就會提醒用戶考慮一下,試試新的廣告花樣。
我是百度的愛好者,因為畢竟是華文第一大搜索引擎,如今在世界上,也排得上數一數二,都進軍日本和巴西市場了。只不過,我持續試驗結果,客觀上(殘酷地)根據收入報告,至少就我這個小咖部落格而言,花樣畢竟只是花樣,並沒有因為廣告形式的創新,帶來更多的收入。
於是,回到部落格廣告的原點,一切的一切,都是為了錢呀。
Google Adsense
廣告形式再怎麼多樣,收入的計算只有兩種,一個是曝光量,一個是點擊量,可想而知,點擊量所帶來的收入,遠遠超過曝光量。首先以曝光量來說,我是部落格小咖,架站幾個月以來的努力,勉勉強強維持在每天100ip的讀者,然而同樣的曝光量,各家廣告聯盟給的報酬不同,平均而言是GoogleAdsense>Bloggerads>百度,我想這個跟企業文化和產業規模有關,谷歌雖然丢了大陸市場,但畢竟是世界龍頭,掌握的資源多,給的出手、給的大方。
曝光量再怎麼算,很難靠這個賺錢,幾千幾百的曝光量,不如一次點擊,所以廣告的實質收入,來自於點擊率。這方面,Bloggerads雖然三年,很慘,是個位數,本來以為是我的問題,可是經過持續不懈的板塊調整,發現好像不是這樣,因為除了Bloggerads之外,我終於找到自己的那一桶小金礦。
首先是百度。
前面說過,百度強項是各種廣告形式的創新。什麼「懸浮」「貼片」之類的,我都試過,使用者(讀者)體驗很不好,廣告置入性太強,超過所能忍受的正常閱讀版面,有機會看看百度首頁的新聞聯播,就可以理解創新的廣告置入,終究到達了什麼程度。不過,百度有個挺有創意的「圖+」廣告,是在文章附圖嵌入跳窗式廣告,等於保留了讀者接受廣告的自主性,而且不怎麼影響正常閱讀,我覺得很有意思,事實證明,「圖+」點擊率高,以我的部落格流量來說,平均一天有一次點擊,帶來的收益讓我很有成就感。
點擊率高低,除了廣告形式,更多的重點廣告內容。這部份,我的Bloggerads做得不好,因為三年來,它的廣告就那幾項,圖文都一樣,當然沒辦法有效吸引點擊,百度廣告也是相同情況,大部份為遊戲,並且兩個不同大小的版塊,竟然 掛的是雙胞胎廣告,真的是夠啦。
BloggerAds
移動廣告部份,我的網站有繁有簡,大陸地區GoogleAdsense輕微障礙,百度則是放諸兩岸毫無阻礙皆,所以原本我掛的是首選百度。但,百度聯盟的曝光收益率低,沒賺到什麼錢,於是試著投放GoogleAdsense的移動廣告,結果出乎意料,點擊率漂亮,足以媲美百度的明星產品「圖+」,近乎每日一擊!
這歸功於GoogleAdsense的全球性規模,所以它的廣告多樣性夠,例如我網頁上放三個GoogleAdsense,三個展現出全然不同的廣告內容,不像百度是雙胞胎,Bloggerads是千篇一律,所以長期而言,GoogleAdsense點擊率比較漂亮。
目前百度我除了「圖+」,還保守放了兩個側邊欄嵌入廣告,這兩個廣告只有曝光、沒有點擊,收益近乎零,打算撒掉。Bloggerads本來是多重廣告(180X940)、橫式廣告(450×120),多重廣告太長,很佔空間,收益率低,也打算撤掉,留下一個小橫式廣告作紀念。
最後,對於收入微薄的小站長而言,還有一個挺關鍵的:何時能收到第一桶金。Bloggerads的門檻是1000NTD,GoogleAdsense是100USD,百度聯盟是100RMB,目前我的百度圖+後來居上,指日可望,GoogleAdsense的移動廣告速度加快,可以再加把勁,至於Bloggerads,真的是很難,可能真的要等到牛年馬月了。
衷心期盼,哪天我的部落格事業,能夠回收成本,達到損益兩平。我相信這是文化創意產業,具有無形資產的特色,一旦跨越了門檻,後續要再往上爬,就輕鬆多了。
百度聯盟的各種廣告形式

如何在臉書(facebook)分享時展示網站圖片

臉書(facebook)是個功能強大的社交分享媒體,通常在臉書上分享網站文章,臉書會自動抓取網站的相關摘要和圖片,使得網站分享在臉書上很好看。我習慣將自己部落格文章分享到自己臉書上,以前都蠻順利出現摘要和圖片,自從我在Wordpress安裝「All in One SEO」之後遇到麻煩,在此分享我的經驗:
一、安裝「All in One SEO」之後,每次分享文章,圖片都是一個沒有表情的大頭人,醜斃了。
 
安裝「All in One SEO」之後
二、仔細檢視網址原始碼,發現是og:image在作怪,圖片網址在「All in One SEO」外掛目錄下。
og:image在作怪
三、原來是「All in One SEO」預設了分享圖片,於是我在後台把圖片刪了,更改分享圖片設置。
「All in One SEO」預設了分享圖片
四、更改完雖然沒有大頭人了,但還是有問題。好不容易寫好一篇圖文並茂的文章,想分享到自己臉書,沒想到在臉書貼上網址,真的就只有網址而已。
沒想到在臉書貼上網址,真的就只有網址而已。
五、明明我的網站有圖片也有文字,「All in One SEO」也更改好摘要和圖片的設定,臉書卻抓不到。
明明我的網站有圖片也有文字
六、正常臉書是會自動抓取網址資料,但可能由於瀏覽獸緩存等種種原因,抓取無效,這時候必須把這個無效訊息回饋給臉書,回饋機制的臉書網址如下:https://developers.facebook.com/tools/debug/。
回饋機制的臉書網址如下
七、輸入自己文章網址,按下「Debug」之後,臉書開發者網頁會出現紅色的驚嘆號警示,表示沒有資料被抓取,所以要手動讓臉書再重新抓取,按下「Fetch new scrape information」。
手動讓臉書再重新抓取
八、OK!出現了我在「All in One SEO」設定的文章圖片及摘要。
出現了我在「All in One SEO」設定的文章圖片及摘要
九、再次在臉書上貼上網址,終於出現了圖文並茂的分享,這就是我要的。
終於出現了圖文並茂的分享

Wordpress圖片管理-上傳

沒架站之前,文章發表在樂多,吃米一向不知米價,從來沒有節制的觀念,圖片愛傳多少是多少,反正算別人的帳嘛。等到自己租主機架站,5G空間老實說不知道牛年馬月才能消化完,可是心裡終究會犯嘀咕,因為每1G每1G都是錢,一張一張圖片持續上傳,總有一天完蛋,要再掏腰包了。
以前在部落格上傳完圖片,大中小尺寸任我選擇,可以直接在文章裡編輯轉換,平常不覺得這很神奇,可是等到自己架站,開始學會計較,開始懷疑這圖片怎麼能忽大忽小呢,只有兩種可能:一個是系統很厲害,可以在網頁伺服器即時原圖轉換,但這不可能,因為架站之後開懂流量概念,網速再怎麼快,依指令先將圖片加工轉換再傳到客戶瀏灠端,黃花菜早涼了,所以只有第二種可能,圖片在一開始上傳後馬上被複製成三份,隨時等著視情況被讀取。
Wordpress便是如此作業,當今最普遍主流程式尚且如此,其它服務商我猜差不了多少。想想,每張圖片生成三種不同規格,10張圖片30張,100張圖片就有300張,而其實文章只會從中選出一張使用,等於其它三分之二圖片閒置不用,白白耗費空間,這不是佔著毛坑不拉屎嗎?為了有效節省資源,總得想想辦法。
首先,既然是自己架站,理當要很清楚上傳圖片到哪了、是怎麼設置分成三種規格。透過Xshell遠端連線到Linux主機,最好再透過Xftp以資料夾方式訪問主機空間。Wordpress預設的上傳圖片目徑為「home/www/default/wp-content/uploads」,並且採用年月分層的方式儲放,圖片規格設定在Wordpress控制台的「設定-媒體」。
實際操作,媒體設定為預設值,上傳一張3,264X1,840的jpg圖片,檔案取名為「example」訪問主機,發現多生成了四張圖片,規格不同,所以在文章插入圖片時,有四種規格可以選,選擇其中一個,其它三個就沒用了,雖然像素小檔案不大,可是一旦上傳的圖片多了,日子久了總是個負擔。
wordpress媒體設定
wordpress媒體資訊設定
wordpress主機圖片檔案
四種圖片規格選擇
依照體制操作,第一個解決辦法是改變設定,狠一點把所有圖片大小都設為零,儲存變更之後再上傳,為了區別起見,檔案名稱改為「example2」,訪問主機空間,這次只多生成一張144X144的圖片,我們可以事先依照想要的規格剪裁圖片,再將圖片上傳到主機空間,嵌入文章採用原圖尺寸,這樣空間容量至多浪費一張縮圖(144X144)。
媒體設定為零
主機裡的wordpress圖片檔案
兩種圖片規格可選
由上述例子可見,即使媒體設定為零,Wordpress照樣硬是多產生一張縮圖,如果想連這一張縮圖都省了,那就只能繞過Wordpress圖片上傳程式,直接Xftp在主機網頁新增一個資料夾(pictures),並且也透過Xftp上傳剪裁好的圖片,在瀏覽器網址列輸入:https://www.b88104069.com/pictures/example2.jpg,網頁便會顯示剛才那張圖片,表示已經放在網頁伺服器供瀏覽,這時便可以網址形式插入到文章中,成功達到一開始目的:文章用到一張圖片,主機空間裡面也只有一張圖片,絲毫不浪費。
wordpress主機新增資料夾
網站圖片網址
自網址插入文章圖片
透過Wordpress上傳圖片,跟透過Xftp上傳圖片,雖然在文章中一個由媒體櫃插入,一個自網址插入,但對於主機而言,實質效果相同,同樣是把一張圖片儲存在主機空間,透過網頁伺服器運作,包裏在文章中封包出去,遠端瀏覽器透過網路讀取內容,這個觀念更上一層樓的境界,便是圖床。

如何在Wordpress插入視頻

先前於樂多發表文章,在編輯版面有個視頻按紐,要插入線上視頻時,我只要點選這個按紐,依照圖示說明複製網址即可,儲存好之後,檢視文章會有視頻縮圖,能在文章頁面直接播放。
後來我改用Wordpress,想要在文章插入線上視頻,找不到視頻按紐,於是我直接將視頻網址貼上去,結果悲劇了:
直接將視頻網址貼上去,結果悲劇了
沒辦法直接將視頻網址貼上去
仔細研究過,wordpress不支持直接插入視頻,只能以輸入HTML代碼的方式完成,以優酷網為例分享我的流程:
一、點擊優酷視頻下面分享,出現小視窗,有flash地址,更貼心的HTML代碼都寫好了。
點擊優酷視頻下面分享
二、代碼使用HTML5新增的標籤「embed」,能在網頁上嵌入任何類型檔案,通常是多媒體文件,優酷使用swf格式,以Adobe的Flash播放,只要瀏覽器安裝Adobe Flash Player,即可在網頁直接觀看視頻。
三、優酷並且有「把視頻貼到Blog或BBS怎麼貼?」的說明文檔鍵接,夠貼心的了。
把視頻貼到Blog或BBS怎麼貼?
四、實地操作!將Wordpress編輯模式切換到「文字」,直接輸入HTML代碼,在想要插入視頻的地方,複製貼上優酷代碼。
將Wordpress編輯模式切換到「文字」
五、大功告成,在Wordpress預覽編輯模式出現一個空白的影片框,更新後打開網頁,呵,一切,都是那麼地美好!
在Wordpress預覽編輯模式出現一個空白的影片框
更新後打開網頁

Wordpress圖片管理-前言

剛開始當部落客,圖省錢圖方便,在無名、樂多、痞客邦等眾多服務商中挑一個進駐,這些服務商風格不一,但肯定相同的是免費。然而隨著孜孜不倦的文章圖片越來越多,早晚發現寄人籬下並非長久之計,畢竟那是別人家的地盤,生殺大權操於別人之手,不知哪天無名小站的悲壯故事會再重演,突然一則關門公告殺的你挫手不及。
所以長期經營部落格的寫手,總有一天心底浮現一個渴望:如果有專屬自己的網誌小窩該有多好!於是乎找資料考慮自行架站,其中渉及很多網路應用,在這個過程中會長很多見識,有了這些見識,便有很多方法技巧,將網上公開的文章集更完美呈現出來。
乞丐穿西裝,不說話沒人當他是乞丐。同樣一堆商品擺在店裡,不用統計就能得到結論:店面裝潢越是美觀,越是能吸引更多客人,而人氣越旺表示熱銷大有可為。架設部落格當「站長」,推銷的是數位文化創意產品,同樣適用開實體店的道理:留住讀者最終靠紮紮實實的文章本事,可是吸引讀者駐足的關鍵前三秒,絶對是網站整體門面夠不夠高大上。
此此之外開實體店店需要成本,自行架站也有成本考量,所以身為站長除了在主題版面動腦筋,在控制流量檔案大小這方面,必須也得琢磨琢磨,不然一旦發現伺服器卡關跑不動了,總得再掏腰包加碼,否則等不及的讀者都跑光了。Wordpress是目前博客架站主流,不免俗我也是安裝Wordpress框架,主機買的是阿里雲最低標準,少得可憐的配備羅列如下:CPU:1核、內存:1GB、帶寛:1Mbps、雲磁盤:5GB。
云服務器ECS
有了這艘堪用的阿里雲服務器,我開啓自行架站的偉大航線,歷經幾個月奮鬥,如今不再是吳下阿蒙,Linus、PHP、Apache、Wordpress、HTML、CSS這些以前有看沒有懂的網路名詞,現在有個最起碼概念,能說上幾句話,不會像一開始百度搜索或看到教程時,心底就發麻。
通往站長的路上看到了很多,也學到了很多,現在打算這個歷程寫成日誌,先從Wordpress圖片管理開始!

Wordpress圖片管理-文字說明

Wordpress文章上傳圖片之後,可以設置圖片的說明文字,詳細情形如下:
一、在文章編輯頁面,點擊圖片左上角的鉛筆,進入圖片資訊的設定視窗。
點擊圖片左上角的鉛筆
二、上面版塊是圖片的描述文字。「說明」欄位的內容給讀者看的,會體現在文章中圖片下方作補充,「替代文字」欄位的內容留給搜索引擎看,當百度或Google的蜘蛛爬到這篇文章,無眼蜘蛛藉由「替代文字」讀懂圖片內容,考慮是否收錄和建立關鍵詞。
「替代文字」欄位的內容留給搜索引擎看
三、中間版塊關乎圖片在文章如何呈現。「對齊」有左、置中、右、無的選項,有閒功夫可以每個選項試看看,分別更新再檢視文章圖片的變化,「連結到」這裡如果選擇圖片網址,讀者點擊圖片便會超連結到圖片所在的網址,如果選擇無,點擊圖片不會產生超連結,此外Wordpress貼心提供第三選擇:自訂網址,在欄位輸入天涯海角任何一個網址,點擊圖片就會超連結到那裡,我做了小小實驗,將自訂網址設為百度首頁,結果點擊文章就真的百度一下了,有點搞笑。言歸正傳,很多新聞網頁有「點擊圖片進入下一頁」的功能,毫無疑問就是利用這自訂網址的神奇功能。
中間版塊關乎圖片在文章如何呈現
四、下面版塊可以展開或隱藏,在「圖片Title Attribute」輸入文字,當滑鼠移動到圖片區域,所輸入的文字就會浮現出來,「圖片 CCS Class」這個我在百度和奇摩都找不到相關說明,Wordpress官方論壇也搜索不到相關帖子,我有嘗試輸入HTML的標題標籤h1、h2等,更新後檢視文章沒發現變化,這部份要請教高人指點了。最下面有一行「在新視窗或分頁開啓鍵結」,打勾了之後,點擊圖片的超連結會在新網頁打開。
下面版塊可以展開或隱藏