WordPress 桌面版應用程式免費下載!打造閱讀器、離線編輯及管理三合一體驗

前段時間 WordPress 發佈全新管理介面 Calypso,以桌面版應用程式形式提供使用者免費下載,創辦人 Matthew Mullenweg 認為,現今行動裝置非常流行,但一般撰寫或編輯文章仍多半侷限在電腦上進行,因此提供一個最佳化的部落格管理工具就顯得格外重要。這也促使 WordPress 持續獲得更多使用者。

WordPress.com 應用程式一開始只有 Mac 版,現在已延伸至 Windows 及 Linux ,搭配原有 iOS 及 Android 應用程式,幾乎可以說已經完成桌面端及行動裝置佈局。

本文要介紹新推出的 WordPress 應用程式,或者你可以稱它為部落格軟體,這個應用身兼三大功能:閱讀器、離線編輯器及管理工具!以往這三個部分要透過不同服務或軟體來達成,現在,WordPress 原生應用程式就能做到。將資訊來源及內容生產整合在一起,可以說是目前看過最強大的產生力工具。

除此之外,重頭戲仍擺在這次的 Calypso 更新,眾所皆知 WordPress 有非常易用且功能完整的控制台(WP-Admin),但每次要進行操作都必須登入網站,有時候不是那麼方便。WordPress 讓你能直接從桌面端來管理多個網站,全新設計的控制台有非常流暢的操作速度,在管理上更為輕鬆簡單。

不過 WordPress 應用程式最大特色是:可以拿來做為離線編輯器使用!

以往你可能會使用第三方離線編輯器來寫文章,例如:Open Live Writer,因為使用內建文章編輯器並不是那麼方便。在 WordPress 應用程式中,你可以透過全新可視化編輯器來寫文章,內建自動草稿儲存、插入圖片、設定分類與標籤及發佈等功能。

WordPress 應用程式不限於 WordPress.com 使用,如果你是採 WordPress.org 開放原始碼程式自行架站,安裝 Jetpack 一樣能夠支援。這是一款由 Automattic(WordPress 母公司)開發的外掛程式,包含幾項我曾介紹過的功能:

  • Photon 免費 CDN 圖片分流加速服務
  • Jetpack Monitor 免費 24/7 網站監測服務,網站無法連線自動提醒
  • 啟用 Jetpack「單一登入」機制教學,讓你的 WordPress 網站更安全

當然,如果你是使用 WordPress.com 免費部落格服務,只要下載應用程式,登入你的帳號密碼,即可讓軟體與你的部落格連線。

軟體資訊

軟體名稱:WordPress.com 桌面應用程式
軟體語系:多國語言
作業系統:Windows、Mac、Linux
官方網站:https://desktop.wordpress.com/
下載鏈結:官方網站免費下載

使用教學

STEP 1

開啟 WordPress.com 應用程式後,輸入你的使用者名稱、密碼來登入,這裡要輸入的不是你網站的登入帳號密碼,而是網站所連結的 WordPress.com 帳號資訊。

若你是使用 WordPress 自行架站,點選下方「Add self-hosted site」取得更多資訊。

STEP 2

WordPress.com 應用程式的預設畫面為「讀取器」,也就是前面提到的閱讀器。在這裡可以將你喜歡的網站內容加入「關注」,WordPress 會推薦你可能有興趣的相關網站內容。你還可以新增清單、加上標籤來分類不同的網站主題。

在閱讀器裡,你可以新增任何有 RSS Feed 功能的網站,不限於 WordPress 類型。

STEP 3

WordPress.com 應用程式的另一個特色是可以隨時收到通知。它就像一般軟體,當有人關注你,在你的網站按讚或留言,它會立即跳出提示讓你知道。

STEP 4

這個應用程式的亮點應該是管理功能,或許你之前在網頁端試用過,軟體把操作介面帶到桌面端,讓你不用從瀏覽器就能進行網站管理,包括新增文章頁面,或是更新升級佈景主題及外掛等等(必須從 Jetpack 開啟「Manage」模組才能用)。

不過我最喜歡的是 WordPress.com 的統計功能(Stats),它會清楚記錄下每天的網站流量變化,包括最熱門的文章頁面、來源網址、國家等資訊,相較於 Google 分析來說,內建的統計資料更為清楚易懂。

STEP 5

前面介紹有提到:WordPress 桌面版應用程式本身就是一個離線編輯器!現在,你可以直接在桌面端透過官方軟體來撰寫文章。

應用程式的編輯器功能非常好用,不但速度快、設計簡單大方,也和 WordPress 有更緊密的結合,因為它已經加入了網站相關設定,例如分類與標籤、特色圖片、分享等功能。

下圖是我使用 WordPress.com App for Windows 桌面版來寫文章的畫面擷圖,可以看到相較於原先網頁編輯器來說,桌面版設計更為乾淨明亮,讓你在寫文章時有更好的寫作體驗(如果常常苦思得不到靈感,就會知道這有多麼重要…)。

這個編輯器的另一特色是:無須連上網路,具備自動儲存草稿功能。若你正在尋找一款免費、好用的部落格寫作工具,WordPress.com App 會是非常棒的選擇!

WordPress 本身只是一個開放原始碼的 PHP 程式,用於架設網站部落格,但憑藉外掛功能,讓它延伸擴展更多更不一樣的變化!Matthew Mullenweg 始終相信開放相較於封閉有更多的好處,WordPress 彈性自由更可以適應不斷變化的網路環境。

這款 WordPress.com 桌面版應用程式耗時二十個月,由來自世界各地的開發者貢獻而生,相信它能跟上接下來的發展趨勢,讓我們有更為便利的數位寫作工具!

值得一試的三個理由:

  1. 開放原始碼,提供 Windows、Mac、Linux 三大平台免費下載
  2. 更好用的寫作工具,將重心聚焦於內容
  3. 速度快、操作簡單,使用現今最流行開發項目
  • 按一下以分享至 Facebook(在新視窗中開啟)
  • 分享到 Twitter(在新視窗中開啟)
  • 分享到 LinkedIn(在新視窗中開啟)
  • 分享到 Pinterest(在新視窗中開啟)
  • 分享到 Pocket(在新視窗中開啟)

相關文章

本站聲明:網站內容來源免費資源網路社群https://free.com.tw,如有侵權,請聯繫我們,我們將及時處理

【精選推薦文章】

如何讓商品強力曝光呢? 網頁設計公司幫您建置最吸引人的網站,提高曝光率!!

想要讓你的商品在網路上成為最夯、最多人討論的話題?

網頁設計公司推薦更多不同的設計風格,搶佔消費者視覺第一線

不管是台北網頁設計公司台中網頁設計公司,全省皆有專員為您服務

想知道最厲害的台北網頁設計公司推薦台中網頁設計公司推薦專業設計師"嚨底家"!!

Imagify 免費線上圖片壓縮服務,三種模式切換壓縮比畫質

我習慣圖片上傳到網路前先手動壓縮處理,這麼做可以大幅節省上傳時間、降低容量,最大優點是使用者開啟網站載入圖片速度更快,也能更省流量。在壓縮工具方面,我傾向使用線上服務,關於這部分曾在「我如何寫出一篇文章?每日必用的寫作相關軟體彙整」文章做過介紹,TinyJPG 是我目前首要選擇,它前陣子也推出了 WordPress 外掛。

本文要介紹的 Imagify 是我私藏許久,本來不打算拿出來介紹的圖片壓縮工具,因為嚴格來說它並不是一款免費服務,Imagify 是一個 WordPress 外掛,可在使用者上傳圖片時,利用遠端伺服器來進行圖片壓縮最佳化,是你想獲得更小尺寸圖片又不損失畫質的好選擇。

Imagify 除了外掛,也提供線上圖片壓縮功能,這也是本文想推薦給大家的好工具。Imagify 有三種壓縮模式調整(讓你選擇要壓縮的程度以及是否破壞畫質),免費帳戶單張圖片不超過 5 MB 限制,最佳化圖片會保存一小時,你必須在刪除前把圖片手動下載下來。

網站名稱:Imagify
網站鏈結:https://imagify.io/optimizer/

使用教學

STEP 1

首先,開啟 Imagify 網站,選擇上方的「Try for Free」功能,會看到如下畫面,簡單介紹一下如何使用,很簡單,只要在左側選擇你要的壓縮模式、輸出設定(必須註冊),然後把圖片拖曳到右邊框框,就能開始壓縮。

STEP 2

Imagify 有三種壓縮模式:Normal、Aggressive 和 Ultra,預設為 Aggressive。

Normal 為無損壓縮,不會破壞原有圖片的畫質,但壓縮程度有限;Aggressive 會對圖片產生些許破壞,不過肉眼幾乎看不出來,能讓圖片獲得最好的壓縮效果。Ultra 將壓縮發揮到極致,讓你有最小的圖片容量,但會對圖片造成損壞。

如果沒有特殊需求,通常使用 Aggressive 就可以了。

STEP 3

最後把圖片拖曳到右邊欄位,Imagify 就會使用它們的演算法來進行壓縮處理。壓縮後圖片會出現在下方,同時顯示原有檔案大小、最佳化大小、總共節省下來的百分比。

點選圖片最後面的「Download」可下載最佳化後的圖片,或者點選「Download All Optimized Files」將所有圖片打包下載。

如果你覺得 Imagify 不符合你的需求,或者想試試看其他類似工具,可參考以下:

  • Compressor.io 線上將圖片壓縮 90%,但不減損畫質(支援 JPEG、PNG、GIF、SVG)
  • Optimizilla 線上壓縮 JPG、PNG 圖片,不降低畫質有效減少檔案大小
  • PP鴨:為你的圖片壓縮減肥!在維持畫質情況下有效減少圖片大小

值得一試的三個理由:

  1. 免下載或安裝軟體,透過瀏覽器即可進行圖片壓縮
  2. 三種壓縮模式,可調整壓縮比例和畫質
  3. 將最佳化圖片一鍵打包下載
  • 按一下以分享至 Facebook(在新視窗中開啟)
  • 分享到 Twitter(在新視窗中開啟)
  • 分享到 LinkedIn(在新視窗中開啟)
  • 分享到 Pinterest(在新視窗中開啟)
  • 分享到 Pocket(在新視窗中開啟)

相關文章

本站聲明:網站內容來源免費資源網路社群https://free.com.tw,如有侵權,請聯繫我們,我們將及時處理

【精選推薦文章】

自行創業 缺乏曝光? 下一步"網站設計"幫您第一時間規劃公司的門面形象

網頁設計一頭霧水??該從何著手呢? 找到專業技術的網頁設計公司,幫您輕鬆架站!

評比前十大台北網頁設計台北網站設計公司知名案例作品心得分享

台北網頁設計公司這麼多,該如何挑選?? 網頁設計報價省錢懶人包"嚨底家"

ShortPixel 免費圖片壓縮服務!支援四大相片格式,無失真最高 90% 壓縮比

上個月我介紹過一款個人非常推薦的 Imagify 免費線上圖片壓縮服務,內建三種模式可切換壓縮比畫質,在文章中提到這其實並非免費服務,嚴格來說是一款 WordPress 外掛功能,當使用者在上傳圖片時,就能利用遠端伺服器來自動進行圖片最佳化功能,但很可惜這項服務並非完全免費,我們僅能使用它的線上圖片壓縮工具來達成相同目的,和 TinyPNG 類似,雖然無法全自動處理,但仍比直接上傳原圖來得好一些。

如果你是使用 WordPress 架站,又希望能利用外掛功能來對文章內的圖片自動壓縮、最佳化以節省檔案大小,本文要介紹的 ShortPixel 就是個可以考慮的選擇,ShortPixel 是一項線上圖片最佳化服務,或者可以說主要用於「加速你的網站」,提高使用者載入頁面速度。

ShortPixel 包含失真與不失真的可用壓縮方式,最高可壓縮達 90% 大小!支援圖片格式包括 JPG、PNG、GIF 和 PDF,並提供 WordPress 外掛程式免費下載。若不是使用 WordPress 架站,一樣能透過 ShortPixel 線上圖片壓縮工具來對圖片壓縮及最佳化。

ShortPixel 依照使用者每月的圖片壓縮用量分為免費及付費方案,若透過免費資源網路社群的推薦鏈結進行註冊,可以免費額外再獲得 100 張(每月)配額升級!也就是每月可以壓縮圖片量為 200 張,對於一般網站來說其實是非常足夠的,要如何開始呢?請繼續往下看下去吧!

網站名稱:ShortPixel
網站鏈結:https://shortpixel.com/ (推薦鏈結,可額外獲得 100 張配額)

使用教學

STEP 1

開啟 ShortPixel 網站後,有一個網站圖片最佳化的快速測試工具,輸入你的網站網址,它就能幫你計算出壓縮前後可節省的網頁百分比,從下圖能看到,如果我使用 ShortPixel 來壓縮免費資源網路社群的圖片,可以再減少 41% 的網頁大小!

STEP 2

點選上方的「Compress」開啟線上圖片壓縮工具,在這裡無須註冊,直接將圖片拖曳到網頁中就能夠遠端來進行相片壓縮,支援格式 JPEG、PNG 和 GIF,單檔不能超過 10 MB 大小。當然如果你想使用 ShortPixel 提供的 WordPress 外掛程式,為媒體庫裡的圖片進行最佳化,請記得先註冊一下帳號。

STEP 3

把圖片拖曳到 ShortPixel 線上壓縮器後,圖片就會開始上傳、最佳化,完成後每張相片下方會有原始大小、壓縮後的大小比較,看起來壓縮技術非常強大,幾乎有 80% 左右的壓縮比表現!

點選壓縮後的圖片,開啟 Compare Images 圖片比較工具,中間捲軸將原始圖片及壓縮後的圖片分成左右兩邊,可以移動一下滑鼠來看看壓縮前後的效果比較,應該很難發現圖片差異(無失真壓縮),但神奇的是圖片容量竟然已經大幅降低了!

STEP 4

點選圖片下方的「下載」圖示,就能把壓縮圖片下載到電腦中保存或使用,比較可惜的是 ShortPixel 並未提供打包批次下載,只能一張一張將圖片下載下來。

STEP 5

最後,如果你使用 ShortPixel 外掛程式來壓縮網站圖片,可在控制台內看到目前剩餘圖片張數(以及配額重置時間),簡單來說,ShortPixel 提供免費帳戶一個月 100 張圖片壓縮配額,搭配上免費資源網路社群推薦鏈結,單月可使用的配額是 200 張!

值得一試的三個理由:

  1. 包含失真及無失真壓縮模式,最高減少 90% 圖片大小
  2. 支援格式包括 JPG、PNG、GIF 和 PDF
  3. 提供 WordPress 外掛免費下載使用
  • 按一下以分享至 Facebook(在新視窗中開啟)
  • 分享到 Twitter(在新視窗中開啟)
  • 分享到 LinkedIn(在新視窗中開啟)
  • 分享到 Pinterest(在新視窗中開啟)
  • 分享到 Pocket(在新視窗中開啟)

相關文章

本站聲明:網站內容來源免費資源網路社群https://free.com.tw,如有侵權,請聯繫我們,我們將及時處理

【精選推薦文章】

智慧手機時代的來臨,RWD網頁設計已成為網頁設計推薦首選

想知道網站建置、網站改版該如何進行嗎?將由專業工程師為您規劃客製化網頁設計及後台網頁設計

帶您來看台北網站建置台北網頁設計,各種案例分享

廣告預算用在刀口上,網站設計公司幫您達到更多曝光效益

Hostinger 頂級免費虛擬主機推薦,練習架站最佳 PHP、MySQL 平台

雖然免費資源網路社群有免費網站空間分類,但讀者會發現,我已經很久沒有介紹免費虛擬主機服務,原因很簡單,因為太多免空到後來都變得極為不穩定,甚至無預警關閉服務,對於架站者來說,辛苦經營網站被停用,不僅損失寶貴內容,更是對於免費服務劃上一個大大的問號。因此我會建議真正想架站的朋友花點錢去租用虛擬主機,尤其現在價格相較於幾年前來說已經非常實惠,搭配申請網域名稱可能每個月只要幾百元左右就能輕鬆架站。

不過還是很多人跑來問我:有沒有推薦的免費虛擬主機呢?如果你純粹想練習架站,又不想要花錢(或者想先試試看 WordPress 或其他架站程式是不是合乎你的需求),本文要來介紹一個老牌頂級免費虛擬主機服務。

Hostinger 是一個在全球超過 35 個國家提供免費虛擬主機的公司,旗下還有幾個可能你曾經見過的經銷主機(Reseller Hosting,例如 YouHosting)、帳務管理、VPS 和網站建置服務。Hostinger 提供免費內建 PHP、MySQL 架站空間,預設 2000 MB(2 GB)空間、每月 100 GB 流量限制,最棒的是具備中文介面,而且沒有任何廣告!

或許你曾經聽過或使用過 cPanel 主機,Hostinger 就是一個客製化 cPanel 控制台,可以在平台上使用各項功能。本身也提供付費升級,只要支付費用就能獲得無限制空間。之所以會想介紹 Hostinger ,除了有很簡單易懂中文控制台,內建一鍵快速安裝各種程式功能,讓你在架站時更快、更順暢,也能將資料庫匯出,將網站搬移到其他空間。

不過還是要再次提醒:Hostinger 並非長久之計!如果你想要認真經營網站、部落格,或是想透過架站來協助你達成某些目的,那麼最終仍要走上付費服務一途,不過相較於其他免費空間來說,Hostinger 無論在速度或穩定性都值得一用。本文會介紹如何申請 Hostinger 以及透過它來架設一個中文 WordPress 網站。

網站名稱:Hostinger
網站鏈結:http://www.hostinger.com.hk/

使用教學

第一步,申請 Hostinger 免費版帳號

開啟 Hostinger 中文版網站後,會有簡體中文版介面,雖然 Hostinger 在全世界很多國家都有提供在地化語言網站,但其實功能操作上並沒有太大不同。點選首頁的「現在訂購」就能開始申請帳號。

申請時直接以 Google 帳號登入,或者輸入姓名、Email 及密碼來註冊帳號。

註冊後必須先到信箱收取 Email,點選信中的確認鏈結才能啟用帳號,跟一般我們熟悉的網路服務相同。啟用帳號後點選藍色「主機」下方的「新主機」來開啟第一個空間。

第二步,開啟第一個 PHP、MySQL 網站空間

申請帳號後 Hostinger 不會自動幫你建立主機帳號,因此要點選「新主機帳號」按鈕來開啟新帳號,在這裡可以點選右上角來切換語言,Hostinger 提供繁體中文,不過預設情況下是使用簡體中文。

Hostinger 提供免費版、高級版和商業版三種套餐組合,在這裡選擇「免費版」繼續。如果你需要更多的空間或流量限制、SSH 或選擇更穩定的伺服器節點,可以付費升級。

接著設定一個要使用的免費二級網域名稱,Hostinger 提供一些簡短後綴,或者你也可以切換回一級域名來綁定自己申請的網址,之後再把 DNS 對應到 Hostinger 就能使用。

免費方案只能選擇位於英國的伺服器區域,速度上可能相較於美國來說會慢一些,不過整體來說還算穩定,付費的話可選擇包括美國、新加坡、巴西及俄羅斯在內等其他區域。最後設定好密碼就能建立免費空間。

在確定送出申請表單前,Hostinger 會要求使用者輸入你申請帳號的用途,可以寫一些你要架設網站目的、類型或相關原因。因為 Hostinger 每天收到超過兩萬封免費空間申請,為了過濾嚴重的濫用情形會多一道審核程序。

我在申請後 Hostinger 空間就立即開通,狀態顯示為「已激活」就表示可以使用啦!

第三步,使用 Hostinger 架設 WordPress 網站教學

點選你的空間會開啟更多功能,包括「管理」、「自助建站」、「一鍵安裝助手」以及比較少人用到的「E-mail」,點選「管理」就能開啟 cPanel 控制台,不過在這裡我要先示範如何快速安裝一個 WordPress 網站,我們點選「一鍵安裝助手」來開啟快速架站功能。

如果有用過 cPanel 的話,應該知道它有提供快速架站工具,內建許多常見與不常見的開放原始碼專案程式,能讓我們快速建置出 CMS、部落格、討論區或其他服務,從中找出我們要使用的 WordPress,點選來進行安裝。

設定一下安裝路徑、語言(可以選擇臺灣,有正體中文)、管理員帳號密碼、E-mail,網站標題跟標語之後可以隨時再做修改調整,最後點選「安裝」就能自動架站。

不得不說 Hostinger 或類 cPanel 網站空間的自動化架站程式非常好用,只要幾秒鐘時間就能把 WordPress 網站架設完成!在網址後面加上 /wp-admin/ 可以開啟控制台,不過你會先遇到登入畫面,輸入剛才安裝時設定的管理員帳號密碼。

從 WordPress 後台就能對網站進行完整操控,包括更換佈景主題、安裝外掛功能、加入新帳號,以及新增文章、頁面、媒體等等,Hostinger 快速架站功能會在安裝後內建一些外掛程式,不需要的話可以把它停用移除(沒想到還內建兩階段功能的 Clef ,我曾經有寫過專文來介紹這個外掛)。

現在,你就簡單架設好一個 WordPress 網站了!

延伸閱讀:

  • WordPress 桌面版應用程式免費下載!打造閱讀器、離線編輯及管理三合一體驗
  • 殺手級 WordPress 體檢項目:101 個建立新網站的超簡易捷徑!
  • 安裝 WordPress 後你應該做的 25 件事
  • 11 個強化 WordPress 網站安全的 .Htaccess 設定技巧

後記

前面有提到,Hostinger 本身已有一個客制化的 cPanel 控制台,因此使用者可以很方便快速地從控制台進行虛擬主機相關操作,不僅限於架設 WordPress,若是其他的開放原始碼程式或單純的 HTML 網站都能勝任。

如果你不常接觸這類的架站平台,cPanel 是個很容易上手的選擇,之後若要租用其他付費主機,也可以尋找使用 cPanel 控制台的服務。

另外,Hostinger 已經支援最新的 PHP 7.0,我建議可以從控制台的「高級 -> PHP 版本切換」來進行設定,將它選擇到 PHP 7 以獲得更好的速度及效能。

最後,如果你想使用 Hostinger 架站,請務必要備份好自己的檔案,因為免費空間並不會保障你的使用權益,且可能因為不夠穩定或任何因素而發生問題,若有備份的話,就能隨時搬遷到其他虛擬主機上。此外,我也建議無論如何都要註冊一個網域名稱,未來當你搬移空間時就不用重新開始啦!

  • 按一下以分享至 Facebook(在新視窗中開啟)
  • 分享到 Twitter(在新視窗中開啟)
  • 分享到 LinkedIn(在新視窗中開啟)
  • 分享到 Pinterest(在新視窗中開啟)
  • 分享到 Pocket(在新視窗中開啟)

相關文章

本站聲明:網站內容來源免費資源網路社群https://free.com.tw,如有侵權,請聯繫我們,我們將及時處理

【精選推薦文章】

如何讓商品強力曝光呢? 網頁設計公司幫您建置最吸引人的網站,提高曝光率!!

想要讓你的商品在網路上成為最夯、最多人討論的話題?

網頁設計公司推薦更多不同的設計風格,搶佔消費者視覺第一線

不管是台北網頁設計公司台中網頁設計公司,全省皆有專員為您服務

想知道最厲害的台北網頁設計公司推薦台中網頁設計公司推薦專業設計師"嚨底家"!!

Flask學習之旅–數據庫

一、寫在前面

  在Web開發中,數據庫操作是很重要的一部分,因為網站的很多重要信息都保存在數據庫之中。而Flask在默認情況下是沒有數據庫、表單驗證等功能的,但是可以用Flask-extension為Web應用添加這些功能。

 

二、Flask SQLite

  SQLite是一款輕型的數據庫,是遵守ACID的關係型數據庫管理系統。由於Python對SQlite有內置的支持,因此在Flask應用程序中和SQLite進行交互是比較容易的。

  首先需要創建一個SQLite數據庫“user.db”,並在其中創建一張用戶表。代碼如下:

1 import sqlite3 2 
3 
4 conn = sqlite3.connect("user.db") 5 print("Connected!") 6 
7 conn.execute("CREATE TABLE USER(username TEXT, password TEXT, EMAIL TEXT)") 8 print("Table created successfully!") 9 conn.close()

  這裏就不貼HTML代碼了,就是一個註冊頁面,在註冊的時候會將用戶輸入的用戶名、密碼和郵箱傳到後台。在app.py中需要導入sqlite3模塊,然後連接前面創建的user.db,在建立連接之後創建一個游標對象,然後編寫SQL語句進行數據庫操作,整個過程都算是比較容易的。app.py中的代碼如下:

 1 from flask import Flask, render_template, request  2 import sqlite3 as sql  3 
 4 app = Flask(__name__)  5 
 6 
 7 @app.route('/register', methods=['GET', 'POST'])  8 def register():  9     if request.method == 'GET': 10         return render_template('register.html') 11     else: 12         msg = ""
13         try: 14             username = request.form["usr"] 15             password = request.form["pwd"] 16             email = request.form["email"] 17             print(username, password, email) 18             with sql.connect("user.db") as con: 19                 cur = con.cursor() 20                 cur.execute("INSERT INTO USER (username, password, email) VALUES (?,?,?)", 21  (username, password, email)) 22  con.commit() 23             msg = "註冊成功!"
24         except: 25  con.rollback() 26             msg = "註冊失敗!請重試!"
27         finally: 28  con.close() 29             return render_template('register.html', msg=msg) 30 
31 
32 if __name__ == '__main__': 33     app.run()

 

三、Flask SQLAlchemy

  Flask-SQLAlchemy是Flask擴展,它將對SQLAlchemy的支持添加到Flask應用程序中。在Flask Web應用程序中使用原始SQL對數據庫執行CRUD操作可能很繁瑣,不過SQLAlchemy 為應用程序開發人員提供了SQL的全部功能和靈活性。它是一個對數據庫的抽象,讓開發者不用這些編寫SQL語句,而是使用其提供的接口去操作數據庫,這其中涉及到一個非常重要的思想:ORM(Object Relation Mapping,對象關係映射),主要的功能是實現模型對象到關係型數據庫數據的映射。說白了就是使用通過對象去操作數據庫。

1.Flask-SQLAlchemy安裝

  使用pip install flask-sqlalchemy進行安裝。不過在安裝的時候可能會出現如下錯誤:

pip._vendor.urllib3.exceptions.ReadTimeoutError: HTTPSConnectionPool(host=’files.pythonhosted.org’, port=443): Read timed out.

  這是因為在下載python庫的時候,由於國內網絡原因,導致python包的下載速度非常慢,查看pip 文檔,只要在 pip的時候控制超時即可, 具體參數為 –default-timeout=100, 後面的時間可以自己指定。因此可以用如下命令進行下載安裝:

pip install –default-timeout=100 flask-sqlalchemy

2.Flask-SQLAlchemy配置

  從此模塊導入SQLAlchemy類,創建一個Flask應用程序對象併為要使用的數據庫設置URI的代碼如下:

from flask_sqlalchemy import SQLAlchemy


app = Flask(__name__)

# URI的格式為:用戶名:密碼@ip地址:端口號(默認可以不寫)/數據庫名
app.config['SQLALCHEMY_DATABASE_URI'] = "mysql://root:qwer1234@localhost/flask"

3.配置的時候可能出現的問題及解決辦法

1)ModuleNotFoundError: No module named ‘MySQLdb’

解決辦法:

  使用pymysql模塊,URI改為:

app.config['SQLALCHEMY_DATABASE_URI'] = "mysql+pymysql://root:qwer1234@localhost/flask"

2)Warning: (1366, “Incorrect string value: ‘\\xD6\\xD0\\xB9\\xFA\\xB1\\xEA…’ for column ‘VARIABLE_VALUE’ at row 481”)

解決辦法:

  改用mysql-connector,使用pip install mysql-connector下載安裝,URI改為:

app.config['SQLALCHEMY_DATABASE_URI'] = "mysql+mysqlconnector://root:qwer1234@localhost/flask"

3)sqlalchemy.exc.NotSupportedError: (mysql.connector.errors.NotSupportedError) Authentication plugin ‘caching_sha2_password’ is not supported

解決辦法:

  出現這個錯誤是因為MySQL8.0採用了Use Strong Password Encryption for Authentication即強密碼加密,而mysql.connector的引擎不支持caching_sha2_password的加密格式,所以解決思路有如下幾種:

  (1)重裝MySQL,在Authentication Method中選擇第二項(重裝比較麻煩,我就沒有嘗試):

  (2)在client端,將加密格式選擇成mysql_native_password,命令如下(個人嘗試后無效):

ALTER user ‘root’@’localhost’ IDENTIFIED WITH mysql_native_password BY ‘root’

  (3)最後一種是我自己摸索出來的,就是在URI設置的時候加上一個參數auth_plugin並設置為mysql_native_password:

app.config[‘SQLALCHEMY_DATABASE_URI’] = “mysql+mysqlconnector://root:qwer1234@localhost/flask?auth_plugin=mysql_native_password”

4.Flask-SQLAlchemy的基本操作

1) 常用查詢過濾器:

  過濾器得到的還只是一些對象,需要使用執行器來獲取真正的數據。

filter(): 把過濾器添加到原查詢上,返回一個新查詢,需要使用模型類名去獲取字段來進行比較;

filter_by():把等值(只能使用=比較操作)過濾器添加到查詢上,返回一個新查詢;

order_by():根據指定條件對查詢結果進行排序,返回一個新查詢;

group_by():根據指定條件對原查詢結果進行分組,返回一個新查詢。

2.)常用查詢執行器

all():以列表的形式返回查詢的所有結果;

first():返回查詢的第一個結果;

first_or_404():同first(), 只不過如果沒有找到的話,返回404錯誤;

get():返回指定主鍵對應的行;

get_or_404():返回指定主鍵對應的行,如不存在,返回404錯誤;

count():返回查詢結果的數量;

paginate():返回一個Paginate對象,包含指定範圍內的結果。

3.)查詢條件

startswith('xx'):查詢以xx開頭的所有數據;

endswith('xx'):查詢以xx結尾的所有數據;

not_():取反;

and_():返回and()條件滿足的所有數據;

or_():返回or()條件滿足的所有數據。

5.使用示例

  app.py中代碼如下:

 1 from flask_sqlalchemy import SQLAlchemy
 2 import mysql.connector
 3 
 4 
 5 app.config['SQLALCHEMY_DATABASE_URI'] = "mysql+mysqlconnector://root:qwer1234@localhost/flask?auth_plugin=mysql_native_password"
 6 app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = True
 7 app.config['SQLALCHEMY_COMMIT_ON_TEARDOWN'] = True
 8 
 9 
10 # 獲取SQLAlchemy實例對象
11 db = SQLAlchemy(app)

  然後新建一個model.py,編寫如下代碼進行測試:

 1 from app import db
 2 
 3 
 4 # 創建模型對象
 5 class User(db.Model):
 6     __tablename__ = "users"
 7     id = db.Column(db.Integer, primary_key=True)
 8     username = db.Column(db.String(16), unique=True)
 9     password = db.Column(db.String(16))
10     email = db.Column(db.String(32), unique=True)
11 
12     def __repr__(self):
13         return '<User %r>' % self.username
14 
15 
16 # 1.創建表
17 db.create_all()
18 print("Created Successfully!")
19 
20 # 2.增加記錄
21 usr1 = User()
22 usr1.id = 1
23 usr1.username = "wang"
24 usr1.password = "wangwang"
25 usr1.email = "wang@163.com"
26 usr2 = User(id=2, username="yang", password="yang", email="yang@163.com")
27 db.session.add(usr1)
28 print("Add usr1")
29 db.session.add(usr2)
30 print("Add usr2")
31 db.session.commit()
32 
33 # 3.查詢記錄,注意查詢返回對象,如果查詢不到返回None
34 users1 = User.query.all()  # 查詢所有
35 print(users1)
36 print("User Count:", len(users1))
37 
38 # 4.刪除
39 user = User.query.get(1)
40 db.session.delete(user)
41 print("Delete usr1")
42 db.session.commit()
43 
44 users2 = User.query.all()  # 查詢所有
45 print(users2)
46 print("User Count:", len(users2))

  運行結果如下所示:

Created Successfully!
Add usr1
Add usr2
[<User ‘wang’>, <User ‘yang’>]
User Count: 2
Delete usr1
[<User ‘yang’>]
User Count: 1

 

【精選推薦文章】

自行創業 缺乏曝光? 下一步"網站設計"幫您第一時間規劃公司的門面形象

網頁設計一頭霧水??該從何著手呢? 找到專業技術的網頁設計公司,幫您輕鬆架站!

評比前十大台北網頁設計台北網站設計公司知名案例作品心得分享

台北網頁設計公司這麼多,該如何挑選?? 網頁設計報價省錢懶人包"嚨底家"

.NET中擴展方法和Enumerable(System.Linq)

LINQ是我最喜歡的功能之一,程序中到處是data.Where(x=x>5).Select(x)等等的代碼,她使代碼看起來更好,更容易編寫,使用起來也超級方便,foreach使循環更加容易,而不用for int..,linq用起來那麼爽,那麼linq內部是如何實現的?我們如何自定義linq?我們這裏說的linq不是from score in scores  where score > 80 select score;而是System.Linq哦。了解Ling之前先要了解擴展方法,因為linq的實質還是擴展方法。

擴展方法

擴展方法使你能夠向現有類型“添加”方法,而無需創建新的派生類型、重新編譯或以其他方式修改原始類型。 擴展方法是一種特殊的靜態方法,但可以像擴展類型上的實例方法一樣進行調用。 

例如:

namespace ExtensionMethods
{
    public static class MyExtensions
    {
        public static int WordCount(this string str)
        {
            return str.Split(new char[] { ' ', '.', '?' }, 
                             StringSplitOptions.RemoveEmptyEntries).Length;
        }
    }   
}
//添加引用
using ExtensionMethods;  
//使用
string s = "Hello Extension Methods";  
int i = s.WordCount();  

微軟擴展方法建議

微軟MSDN上的建議:通常,建議只在不得已的情況下才實現擴展方法,並謹慎地實現。只要有可能,都應該通過創建從現有類型派生的新類型來達到這一目的。

擴展方法建議

1. 當功能與擴展類型最相關時,可以考慮使用擴展方法。
2. 當對第三方庫進行擴充的時候,可以考慮使用擴展方法。
3. 當您不希望將某些依賴項與擴展類型混合使用時,可以使用擴展方法來實現關注點分離。
4. 如果不確定到底使用還是不使用擴展方法,那就不要用。

擴展方法是C#語言的一個很好的補充,她使我們能夠編寫更好,更容易讀的代碼,但是也應該小心使用,不恰當的使用擴展方法可能導致可讀性降低,使測試困難,容易出錯。

System.Linq

System.Linq用起來那麼好,她內部是如何實現的,當然是查看源碼了。

Where源碼

public static IEnumerable<TSource> Where<TSource>(this IEnumerable<TSource> source, Func<TSource, bool> predicate) {
    if (source == null) throw Error.ArgumentNull("source");
    if (predicate == null) throw Error.ArgumentNull("predicate");
    if (source is Iterator<TSource>) return ((Iterator<TSource>)source).Where(predicate);
    if (source is TSource[]) return new WhereArrayIterator<TSource>((TSource[])source, predicate);
    if (source is List<TSource>) return new WhereListIterator<TSource>((List<TSource>)source, predicate);
    return new WhereEnumerableIterator<TSource>(source, predicate);
}

這個方法就是一個擴展方法,對數據進行了處理,具體的處理都是在對象中的MoveNext中

public override bool MoveNext() {
    if (state == 1) {
        while (index < source.Length) {
            TSource item = source[index];
            index++;
            if (predicate(item)) {
                current = item;
                return true;
            }
        }
        Dispose();
    }
    return false;
}

可以看出就是一個循環處理,如果你覺得還是不清楚,可以看WhereIterator方法

static IEnumerable<TSource> WhereIterator<TSource>(IEnumerable<TSource> source, Func<TSource, int, bool> predicate) {
    int index = -1;
    foreach (TSource element in source) {
        checked { index++; }
        if (predicate(element, index)) yield return element;
    }
}

這下明白了,linq就是擴展方法,對數據進行處理,返回所需要的數據,知道了原理之後,可以寫自己的linq擴展方法了。
我想寫一個帶有控制台輸出的Where擴展方法

public static IEnumerable<TSource> WhereWithLog<TSource>(this IEnumerable<TSource> source, Func<TSource, bool> predicate)
{
    if (source == null)
    {
        throw new ArgumentNullException("source", "不能為空");
    }

    if (predicate == null)
    {
        throw new ArgumentNullException("predicate", "不能為空");
    }


    int index = 0;
    foreach (var item in source)
    {
        Console.WriteLine($"Where item:{item},結果:{predicate(item)}");
        if (predicate(item))
        {
            yield return item;
        }
        index++;
    }
}

實現一個打亂數據的擴展方法,這裏的方法用了約束,只能是值類型。

public static IEnumerable<T> ShuffleForStruct<T>(this IEnumerable<T> source) where T : struct
{
    if (source == null)
        throw new ArgumentNullException("source", "不能為空");

    var data = source.ToList();
    int length = data.Count() - 1;
    for (int i = length; i > 0; i--)
    {
        int j = rd.Next(i + 1);
        var temp = data[j];
        data[j] = data[i];
        data[i] = temp;
    }

    return data;
}

到此為止是不是覺得Enumerable中的方法也就是那麼回事,沒有那麼難,我也可以實現。

【精選推薦文章】

智慧手機時代的來臨,RWD網頁設計已成為網頁設計推薦首選

想知道網站建置、網站改版該如何進行嗎?將由專業工程師為您規劃客製化網頁設計及後台網頁設計

帶您來看台北網站建置台北網頁設計,各種案例分享

廣告預算用在刀口上,網站設計公司幫您達到更多曝光效益

TDD(測試驅動開發)死了嗎?

01、前言

很早之前,曾在網絡上見到過 TDD 這 3 個大寫的英文字母,它是 Test Driven Development 這三個單詞的縮寫,也就是“測試驅動開發”的意思——聽起來很不錯的一種理念。

其理念主要是確保兩件事:

  • 確保所有的需求都能被照顧到
  • 在代碼不斷增加和重構的過程中,可以檢查所有的功能是否正確

但後來很長一段時間里,都沒再聽過 TDD 的消息。有人說,TDD 已經死了,給出的意見如下:

1)通常來說,開發人員不應該在沒有失敗的測試用例下編寫代碼——這似乎是合理的,但是它可能導致過度測試。例如,為了保證一行生產代碼的正確性,你不由得寫了 4 行測試代碼,這意味着一旦這一行生產代碼需要修改,你也得修改那 4 行測試代碼。

2)為了遵循 TDD 而寫的代碼,容易進入一個誤區:代碼是為了滿足測試用的,而忽略了實際需求。

02、TDD 到底是什麼?

不管 TDD 到底死了沒有,先讓我們來回顧一下 TDD 到底是什麼。

TDD 的基本思想就是在開發功能代碼之前,先編寫測試代碼。也就是說在明確要開發某個功能后,首先思考如何對這個功能進行測試,並完成測試代碼的編寫,然後編寫相關的代碼滿足這些測試用例。然後循環進行添加其他功能,直到完成全部功能的開發

TDD 的基本過程可以拆解為以下 6 個步驟:

1) 分析需求,把需求拆分為具體的任務。

2) 從任務列表中取出一個任務,並對其編寫測試用例。

3) 由於沒有實際的功能代碼,測試代碼不大可能會通過(紅)。

4) 編寫對應的功能代碼,儘快讓測試代碼通過(綠)。

5) 對代碼進行重構,並保證測試通過(重構)。

6) 重複以上步驟。

可以用下圖來表示上述過程。

03、TDD 的實踐過程

通常情況下,我們都習慣在需求分析完成之後,儘快地投入功能代碼的編寫工作中,之後再去調用和測試。

而 TDD 則不同,它假設我們已經有了一個“測試用戶”了,它是功能代碼的第一個使用者,儘管功能代碼還不太完善。

當我們站在“測試用戶”的角度去寫測試代碼的時候,我們要考慮的是,這個“測試用戶”該如何使用功能代碼呢?是通過一個類直接調用方法呢(靜態方法),還是構建類的實例去調用方法呢(實例方法)?這個方法如何傳參呢?方法如何命名呢?方法有返回值嗎?

有了測試代碼后,我們開始編寫功能代碼,並且要以最快地速度讓測試由“紅”變為“綠”,可能此時的功能代碼很不優雅,不過沒關係

當測試通過以後,我們就可以放心大膽的對功能代碼進行“重構”了——優化原來比較醜陋、臃腫、性能偏差的代碼。

接下來,假設我們接到了一個開發需求:

汪汪隊要到小鎮冒險島進行表演,門票為 99 元,冒險島上唯一的一個程序員王二需要開發一款可以計算門票收入的小程序。

按照 TDD 的流程,王二需要先使用 Junit 編寫一個簡單的測試用例,測試預期是:銷售一張門票的收入是 99 元。

public class TicketTest {

    private Ticket ticket;

    @Before
    public void setUp() throws Exception {
        ticket = new Ticket();
    }

    @Test
    public void test() {
        BigDecimal total = new BigDecimal("99");

        assertEquals(total, ticket.sale(1));
    }

}

為了便於編譯能夠順利通過,王二需要一個簡單的 Ticket 類:

public class Ticket {

    public BigDecimal sale(int count) {
        return BigDecimal.ZERO;
    }

}

測試用例運行結果如下圖所示,紅色表示測試沒有通過:預期結果是 99,實際結果是 0。

那接下來,王二需要快速讓測試通過,Ticket.sale() 方法修改后的結果如下:

public class Ticket {

    public BigDecimal sale(int count) {
        if (count == 1) {
            return new BigDecimal("99");
        }
        return BigDecimal.ZERO;
    }

}

再運行一下測試用例,結果如下圖所示,綠色表示測試通過了:預期結果是 99,實際結果是 99。

綠了,綠了,測試通過了,到了該重構功能代碼的時候了。99 元是個魔法数字,至少應該聲明成常量,對吧?

public class Ticket {
    private final static int PRICE = 99;

    public BigDecimal sale(int count) {
        if (count == 1) {
            return new BigDecimal(PRICE);
        }
        return BigDecimal.ZERO;
    }

}

重構完后再運行一下測試用例,確保測試通過的情況下,再增加幾個測試用例,比如說門票銷量為負數、零甚至一千的情況。

public class TicketTest {

    private Ticket ticket;

    @Before
    public void setUp() throws Exception {
        ticket = new Ticket();
    }

    @Test
    public void testOne() {
        BigDecimal total = new BigDecimal("99");

        assertEquals(total, ticket.sale(1));
    }

    @Test(expected=IllegalArgumentException.class)
    public void testNegative() {
        ticket.sale(-1);
    }

    @Test
    public void testZero() {
        assertEquals(BigDecimal.ZERO, ticket.sale(0));
    }

    @Test
    public void test1000() {
        assertEquals(new BigDecimal(99000), ticket.sale(1000));
    }

}

銷量為負數的時候,王二希望功能代碼能夠拋出異常;銷量為零的時候,功能代碼的計算結果應該為零;銷量為一千的時候,計算結果應該為 99000。

重新運行一下測試用例,結果如下圖所示:

有兩個測試用例沒有通過,那麼王二需要繼續修改功能代碼,調整如下:

public class Ticket {
    private final static int PRICE = 99;

    public BigDecimal sale(int count) {
        if (count < 0) {
            throw new IllegalArgumentException("銷量不能為負數");
        }

        if (count == 0) {
            return BigDecimal.ZERO;
        }

        if (count == 1) {
            return new BigDecimal(PRICE);
        }

        return new BigDecimal(PRICE * count);
    }

}

再運行一下測試用例,發現都通過了。又到了重構的時候了,銷量為零、或者大於等於一的時候,代碼可以合併,於是重構結果如下:

public class Ticket {
    private final static int PRICE = 99;

    public BigDecimal sale(int count) {
        if (count < 0) {
            throw new IllegalArgumentException("銷量不能為負數");
        }

        return new BigDecimal(PRICE * count);
    }

}

重構結束后,再運行測試用例,確保重構后的代碼依然可用。

04、最後

從上面的實踐過程可以得出如下結論:

TDD 想要做的就是讓我們對自己的代碼充滿信心,因為我們可以通過測試代碼來判斷這段代碼是否正確無誤。

也就是說,TDD 流程比較關鍵的一環在於如何寫出有效的測試代碼,這裡有 4 個原則可以參考:

1)測試過程應該盡量模擬正常使用的過程。

2)應該盡量做到分支覆蓋。

3)測試數據應該盡量包括真實數據,以及邊界數據。

4)測試語句和測試數據應該盡量簡單,容易理解。

注意,這 4 個原則不僅適用於 TDD,同樣適用於任何流程下的單元測試。

最後,我想說的是,不管 TDD 有沒有死,TDD 都不是銀彈,不可能適合所有的場景,但這不應該成為我們拒絕它的理由。

 

【精選推薦文章】

如何讓商品強力曝光呢? 網頁設計公司幫您建置最吸引人的網站,提高曝光率!!

想要讓你的商品在網路上成為最夯、最多人討論的話題?

網頁設計公司推薦更多不同的設計風格,搶佔消費者視覺第一線

不管是台北網頁設計公司台中網頁設計公司,全省皆有專員為您服務

想知道最厲害的台北網頁設計公司推薦台中網頁設計公司推薦專業設計師"嚨底家"!!

Emotify 為網站加入心情投票按鈕,依照使用者喜好推薦相關文章

記得幾年前開始流行在新聞網站或部落格加入「心情」功能,讓讀者在閱讀內容後可以快速點選想法投票,不用輸入留言來提高使用者參與度,其實是非常聰明的作法。如果你也想在網站內加入心情按鈕,但又苦無技術開發能力,本文介紹的 Emotify 或許可滿足需求,同時它也是一項完全免費的服務,支援一般網站、WordPress、Tumblr 和 Ghost 等平台。

Emotify 是一個提供心情按鈕功能的免費服務,如同在網站加上 DISQUS 留言、LinkWithin 相關文章,只要在網站內放置一段程式碼,Emotify 就能在你的網站或部落格運作心情按鈕功能,同時在點選後依照心情提供讀者更多相關文章,增加停留在網站的時間和黏性。

Emotify 是收集使用者反應及意見回饋的方法,一般來說,我們很難得到使用者真實心情體驗,即使透過意見調查或口頭詢問,也不容易在短時間內獲得全面的想法。Emotify 讓這些數據更加容易收集整合,亦能運用分析來判斷使用者偏好的內容類型。

網站名稱:Emotify
網站鏈結:https://www.goemotify.com/

使用教學

STEP 1

開啟 Emotify 網站後,點選「Sign Up」來免費註冊帳號,註冊時依序填入姓名、Email 和密碼就能完成註冊,別忘記至信箱收取驗證信才能完成啟用。

STEP 2

登入 Emotify 網站後,我們需要先將自己的網站加入平台,填入網站名稱、網址,從底下選擇網站分類及描述,點選「Continue」即可。

最後,Emotify 會將程式碼顯示給你,你可以從頁面中選取平台,例如:WordPress、Tumblr 或 Ghost,若你使用的平台不在網站列出範圍,那麼直接使用 Web / Js 程式碼吧!

STEP 3

以下我使用 WordPress 來進行 Emotify 安裝範例,我們先從外掛功能來搜尋 Emotify,將它安裝到網站裡,同時啟用這項外掛。

最後,把 Emotify 給我們的 API Key 輸入到 Emotify 設定頁面,儲存後就安裝完成。

STEP 4

隨即可以在文章頁面下方看到 Emotify 心情按鈕功能,如下圖所示。

其實它的設計還算簡單,可惜目前沒有中文化,要不應該更能提高中文使用者點選意願。依照讀者閱讀心情,分成:Amazing、Elated、Great、Happy、Inspired 和 Excited 六種,如果不知道這些單字的意思,透過表情圖案應該也能略知一二。

點選「More」會出現更多可以選擇的表情圖案,例如:Love、Happy、LOL、Surprised、Sad 和 Angry,表情非常可愛。當收集到足夠的資料和網址時,使用者在點選心情後會在下方推薦其他可以閱讀的相關內容,也算是能有效提升使用者參與度及停留時間的方法。

STEP 5

點選任一表情圖案後,其他圖案會變成灰色顯示,同時出現一個快速輸入想法(或建議)的小對話框,如果你覺得點選心情按鈕不太夠,想要稍微抒發想法,下方允許輸入 160 個字。

STEP 6

最後,網站管理者可以從 Emotify 控制台來查看目前點選心情按鈕的人數。

從分析頁面找到每一篇文章被按下的心情按鈕頻率、分佈情形和分別按了那些心情,就網站經營觀點來說,Emotify 能幫助我們確定文章或頁面內容是否符合使用者喜好,或者應該要如何調整方向來滿足大多數人喜好,這裡收集到資訊有非常多可以分析思考的面向。

當前 Facebook 僅提供讓網站使用按讚和分享按鈕,不知道什麼時候會把表情符號功能開放讓一般網站或部落格使用呢?雖然好像有點在半開玩笑,但未嘗不是提高參與度或收集使用者想法的好辦法,趁著還沒開放前可先使用 Emotify 替代,讓你的網站增添一些動態功能。

  • 按一下以分享至 Facebook(在新視窗中開啟)
  • 分享到 Twitter(在新視窗中開啟)
  • 分享到 LinkedIn(在新視窗中開啟)
  • 分享到 Pinterest(在新視窗中開啟)
  • 分享到 Pocket(在新視窗中開啟)

相關文章

本站聲明:網站內容來源免費資源網路社群https://free.com.tw,如有侵權,請聯繫我們,我們將及時處理

【精選推薦文章】

自行創業 缺乏曝光? 下一步"網站設計"幫您第一時間規劃公司的門面形象

網頁設計一頭霧水??該從何著手呢? 找到專業技術的網頁設計公司,幫您輕鬆架站!

評比前十大台北網頁設計台北網站設計公司知名案例作品心得分享

台北網頁設計公司這麼多,該如何挑選?? 網頁設計報價省錢懶人包"嚨底家"

Social Warfare 輕量美觀的社群分享按鈕

如果你是免費資源網路社群長期讀者,應該注意到我不時在調整網站各項設定,其中大家最熟悉、也最常使用的就屬社交網站按鈕吧!許多人習慣在看到不錯內容時,順手點擊頁面分享按鈕來把網址轉載到其他社群,早期我使用過 AddThis,後來覺得它功能太過強大,拖延到網站載入速度,改採 SumoMe 結合多種免費社群按鈕,讓網站流量成長 20% 分享按鈕整合平台。SumoMe 最近換了全新計價方式,對於流量較大的網站來說是不小的負擔,因此我又尋尋覓覓找到另外一款也很棒的分享按鈕替代方案。

Social Warfare 是一款 WordPress 社群分享按鈕外掛程式,在國外小有名氣,但台灣就比較少看到網站使用。Social Warfare 最大賣點是程式碼非常輕量,載入速度飛快無比,不會造成網站載入延遲等問題,因此可以替換掉原先放在網站內的社群網站官方按鈕。

外掛內建功能正合我意,例如可以快速自訂要顯示的分享按鈕、分享數計算,以及最重要的是支援響應式設計(Responsive),因此無論在什麼樣的裝置螢幕瀏覽,按鈕都會自動調整到最好的大小,避免因為尺寸不合而破壞網站版面,也能在行動裝置上正常顯示。

Social Warfare 在上個月推出全新 2.0 大改版,整體控制台煥然一新,除此之外,也加入更多功能來改善原有外掛不足。不過最大的消息是從 2.0 開始在 WordPress 官方外掛資料庫上架!現在即使沒有付費,也能使用 Social Warfare 部分功能,讓它在你的網站上正常顯示分享按鈕功能。

Social Warfare 依照網站數量提供不同規格的授權費用,單一網站每年為 $29 USD,如果一次購買五個網站可以降到 $27 USD($135 USD),最優惠的價格是一次購買十個網站授權,單一網站可優惠至 $25 USD($250 USD)。

雖然 Social Warfare 免費版功能受限,但並不影響一般使用,沒有付費依然能把它加入自己 WordPress 網站,常用按鈕例如 Facebook、Twitter、Google+、Pinterest 和 LinkedIn 等皆內建於外掛中,也能顯示分享次數和總分享數,設定浮動分享按鈕。

網站名稱:Social Warfare
網站鏈結:https://warfareplugins.com/

使用教學

STEP 1

開啟你的 WordPress 外掛控制台,點選左側的「外掛 -> 安裝外掛」,接著在右上角搜尋框輸入 Social Warfare 搜尋。

Social Warfare 是 WordPress 外掛功能,唯有使用 WordPress.org 自行架站才能夠於控制台內下載、安裝新外掛,不適用於 WordPress.com。

出現 Social Warfare 後,點選右上角的「立刻安裝」,就能把它下載到自己網站。

STEP 2

安裝後,左側選單會多出一個「Social Warfare」設定鏈結,點選後開啟外掛控制台。預設情況下會有五個常見常用的社交網路按鈕,拖曳到 Active 區塊為啟用狀態,其他按鈕則不允許免費版使用,但其實這五個按鈕已經非常足夠。

STEP 3

將視窗往下拖曳,把 Share Counts(分享計數器)功能開啟,就能在分享按鈕上顯示該鏈結或文章被分享的次數。

STEP 4

另一個很重要的部分是從下方的「Position Share Buttons」功能來設定按鈕顯示位置,跟一般外掛不同的是 Social Warfare 把顯示位置設定的非常單純簡單,只有顯示於內容上方或下方、不顯示或同時顯示四種選項,建議把右側的 Side Floating Buttons 開啟(後面會介紹這功能)。

STEP 5

別忘記在 Social Identity 裡設定一下你的 Twitter、Pinterest、Facebook 鏈結或帳號,當使用者點選分享按鈕時,就會自動帶入你指定的帳號,藉此提高能見度。

STEP 6

Social Warfare 按鈕設計確實蠻簡單優雅,且平面化風格無論對於那一種網站來說都非常合適,如果你有打開分享按鈕計數器,可能不會立刻就跑出數字,必須給 Social Warfare 一些時間來抓取數據和快取(以避免過度抓取資料而被第三方網站封鎖)。

當你把網頁寬度縮小,模擬成在手機、平板電腦上顯示時,Social Warfare 按鈕也會自動縮小到適當寬度,這就是前面提到的支援響應式設計(Responsive)特色。

Social Warfare 最讓我喜愛的是當你把頁面往下拖曳時,分享按鈕會自動固定於頁面的上方或下方(從控制台的 Floating Share Buttons 可以調整顯示位置),對於提高使用者分享率來說會有顯著提升!而且按鈕固定在頁面下方比較不會造成畫面空間浪費。

很久沒有寫文章向大家推薦 WordPress 外掛功能了,其實這一路以來接觸過無數外掛,很少讓我興起寫文章念頭的(說不定只是因為功能太多不知道要從那裡開始介紹…),但在使用 Social Warfare 後,我認為團隊很用心在開發,致力於提供更好的分享按鈕功能,因此決定寫篇文章介紹來推薦給所有 WordPress 使用者,希望大家喜歡!

透過本文推薦鏈結(Affiliate Link)購買 Social Warfare 能讓我獲得一些回饋,我會非常感謝你的,但如果你想直接連回官方網站而不用推薦鏈結,請點選這裡。

  • 按一下以分享至 Facebook(在新視窗中開啟)
  • 分享到 Twitter(在新視窗中開啟)
  • 分享到 LinkedIn(在新視窗中開啟)
  • 分享到 Pinterest(在新視窗中開啟)
  • 分享到 Pocket(在新視窗中開啟)

相關文章

本站聲明:網站內容來源免費資源網路社群https://free.com.tw,如有侵權,請聯繫我們,我們將及時處理

【精選推薦文章】

智慧手機時代的來臨,RWD網頁設計已成為網頁設計推薦首選

想知道網站建置、網站改版該如何進行嗎?將由專業工程師為您規劃客製化網頁設計及後台網頁設計

帶您來看台北網站建置台北網頁設計,各種案例分享

廣告預算用在刀口上,網站設計公司幫您達到更多曝光效益

100HUB 免費台灣虛擬主機,採Plesk控制台

有不少朋友問我,這幾年好像很少介紹免費虛擬主機?原因很簡單,因為不容易找到我認為足夠穩定、可靠的選項,尤其虛擬主機維持長時間營運實屬不易,通常要有其他營利項目才足以打平開支,對於沒有先經過一段時間「洗禮」的服務我不輕易推薦給讀者。當然要架站的話我認為還是去付費租用虛擬主機會比較可靠一些,例如我在 WordPress 教學文件就曾經推薦過五個虛擬主機服務,價格都不貴,而且有不滿意全額退款保證。

本文要介紹的免費虛擬主機服務 100HUB 並不是新服務,除了提供免費但有廣告的虛擬主機外,也有不同客戶族群適用的主機方案,包括 VPS、網域名稱及 SSL 憑證等項目。如果你不想那麼快付費,想先試試看使用 WordPress 架站是否合乎你的需求,那麼免費的廣告型虛擬主機或許是可考慮的選擇。

100HUB「威利 100 專業主機」是我在 CloudFlare 合作夥伴找到的少數台灣主機商,因為有合作關係,支援 Railgun 功能,100hub.com 客戶搭配 CloudFlare 時將可以獲得更快的連線速度!可惜的是免費虛擬主機不支援 Railgun,但因為主機位於日本,從台灣或亞洲任何國家連線速度都是相當順暢的。

100HUB 免費虛擬主機分成兩種,一種是免費試用 14 天,另一種是廣告型免費主機,但能永久使用,而現今大部分虛擬主機服務都已有不滿意全額退款保證,有時間限制的試用方案倒不那麼吸引人,我會建議使用廣告型空間(沒有時間限制),如果你只是想要練習架站或個人部落格,這個方案規格已相當充裕。

廣告型免費主機提供 300 MB 空間,每月有 6 GB 流量限制,主機位於日本 GMO 東京機房,從台灣連線速度很不錯,對於小型個人網站或部落格來說已經非常充裕。不過必須要提醒的是 100HUB 採用 Plesk 控制台,而不是大部分使用者熟悉的 cPanel,一樣也有提供中文介面,若不是非 cPanel 不用的話倒是沒什麼影響。

接下來我簡單介紹 100HUB 免費日本虛擬主機的註冊申請方式,以及如何在 Plesk 快速架設一個自己的 WordPress 網站。

網站名稱:100HUB 威利100專業主機
網站鏈結:https://100hub.com/

使用教學

申請 100HUB 免費日本虛擬主機教學

STEP 1

開啟 100HUB.com 網站後,從首頁的規格方案中點選「免費」下方「立即申請」,接著會看到三種免費產品,其中有兩種是免費試用 14 天,最後一種為「廣告型免費主機」,我們點選廣告型免費主機最下方的「馬上申請」鏈結。

由於註冊新的網域名稱或移轉(Transfer)都必須付費,因此我們選擇使用 100HUB 提供的免費域名,網址結尾為 .100hub.net,設定一個你要使用的名稱。

STEP 2

如果你選擇的名稱還沒有被佔用,就會跳出支付結帳畫面,價格確認為 0 元,沒問題的話點選右側「結帳」綠色按鈕來跳到下一個畫面。

STEP 3

接著要填寫你的個人資料和帳單資訊,100hub.com 規定使用者必須填寫正確且可供驗證的資料,這部分記得花點時間填寫,如果亂填或資料有誤可能無法通過審核。

STEP 4

註冊後,你的 100HUB 免費帳戶狀態會顯示為「確認中」,大約要等待數小時,站方審核後才會開通、啟用帳號。

使用虛擬主機快速架設 WordPress

STEP 1

當 100hub.com 審核完你的免費虛擬主機申請,就會以 Email 通知,從主機商的控制台可以取得包括使用者名稱、主機名稱、IP 位址和進入 PLESK 後台的登入鏈結。

STEP 2

下圖就是 HUB100 免費虛擬主機使用的 PLESK 控制台介面,怎麼看起來好像跟印象中差了很多?無論如何,控制台就是一個網站最核心的部分,從這裡可以進行主機設定、應用程式安裝、網域名稱管理、Email、資料庫、統計等功能,因此要妥善保存你的帳號密碼。

點選 PLESK 控制台左側選單的「應用程式」,找到「WordPress」後按下「安裝」,當然你也可以選擇要安裝的 WordPress 版本(建議還是以安裝最新版為主)。

STEP 3

選好後就會以自動化工具來安裝、設定 WordPress,其實 WordPress 本身安裝介面設計已經非常簡單,甚至可以在五分鐘以內架設好一個網站,不過如果使用自動化安裝程式的話幾乎不用做任何設定,可以算是最快的安裝法。

安裝後,PLRSK 會顯示你的網址、安裝位置、帳號密碼,建議把「自動更新」功能開啟以增加安全性,未來當有任何新的版本釋出,WordPress 就會自動更新檔案,以保持你的網站在最新、最安全狀態。

STEP 4

進入你的 WordPress 網站後,點選側邊欄右下角的「登入」,以 PLESK 提供的帳號密碼即可登入控制台。或者你可以先試著體驗一下 100HUB 免費虛擬主機的速度,我在台灣連線速度是還蠻快的,換頁也不會有感覺卡卡的問題。

因為 100HUB 免費虛擬主機是會顯示廣告的,因此左下角會有一個 LOGO 圖案,但廣告只是一個鏈結,不會侵入你的內容部分,倒也還可以接受。

如果你覺得自動化安裝工具設定的帳號密碼很難記憶,記得在登入後從「帳號」功能來新增新的管理員帳戶,這麼做除了可增加安全性外,亦能將最初建立的帳號移除,同時熟悉一下 WordPress 帳戶權限設定。

開始享受你的網站吧!

當然,免費虛擬主機不是只能安裝 WordPress,你也可以安裝其他開放原始碼程式,或者拿來單純做為 HTML 網頁託管使用,並沒有侷限於單一功能,不過還是要提醒,如果有任何重要內容,不建議直接放到免費主機上,因為無法保證網站能夠持續運作,若要使用免費主機,也記得要時時備份網站資料,以免發生任何狀況而讓資料遺失無法救回喔!

  • 按一下以分享至 Facebook(在新視窗中開啟)
  • 分享到 Twitter(在新視窗中開啟)
  • 分享到 LinkedIn(在新視窗中開啟)
  • 分享到 Pinterest(在新視窗中開啟)
  • 分享到 Pocket(在新視窗中開啟)

相關文章

本站聲明:網站內容來源免費資源網路社群https://free.com.tw,如有侵權,請聯繫我們,我們將及時處理

【精選推薦文章】

如何讓商品強力曝光呢? 網頁設計公司幫您建置最吸引人的網站,提高曝光率!!

想要讓你的商品在網路上成為最夯、最多人討論的話題?

網頁設計公司推薦更多不同的設計風格,搶佔消費者視覺第一線

不管是台北網頁設計公司台中網頁設計公司,全省皆有專員為您服務

想知道最厲害的台北網頁設計公司推薦台中網頁設計公司推薦專業設計師"嚨底家"!!