分類彙整:架站實務

wordpress 架站樣板哪裡買?外掛推薦與踩雷紀錄

最近很常用 wordpress 架站,也因此用了一些 plugin 跟踩到一些以前沒踩過的雷。趁還有印象做一下紀錄

【web theme 網站樣板去哪買】

如果你跟我一樣主要要架的是「媒體站」,推薦可以到 wordpressplugintheme 買樣板,比起其他站他的樣板選擇其實不多,但重點是很便宜且沒有限制只能使用在幾個網址上。我這次幾個站都用 Newspaper9 這個樣板,可調整性蠻高的。因為在這裡買 theme 或 plugin 便宜太多,之後別的站我應該會考慮在這裡買一些 plugin 來玩玩試用。

【plugin 外掛要裝哪些?】

因為這次有個業主有一些要求,所以我有特別多找了一些外掛。但也因為以前沒裝過,踩了一些雷,在這裡就一起記錄一下。這裡我只列自己額外裝的,搭配樣板 Newspaper9 必要裝的我就不在這裡列出。

有雷外掛

All In One WP Security

有雷是後來發現裡面有個防火牆的設定,造成google機器人完全無法爬網站以至於不收錄內容。這根本宣判網站死刑….一開始我完全搞不清楚為什麼,跑去找 seo 大手朋友求救。後來自己重新去比照兩個站,想到有問題的站有多裝這個外掛,就去用英文搜了一下找到這篇 AIOWP security plugin blocks google from indexing site.

bingo!跟我用一樣的外掛,遇到一樣的問題。不過我沒有停用這個外掛,因為這個外掛有很多功能,讓我可以裝了他一個就夠。後來有找出擋掉 google bot 的設定大概在哪裡,最後解決問題。這裡來說說為什麼我還是保留這個外掛。

  1. 調整 .htaccess 加強網站安全性
    這是這個外掛最大的優點,他有很多設定,設定完他會給你一個數字,讓你知道現在整個網站的安全性提升到什麼程度。像我不是工程師,對 .htaccess 根本不熟悉,但其實在 .htaccess 增加一些調整,可以提高 wp 網站的安全性。這時候這個外掛就很方便,後台直接提供圖形介面,讓你勾一勾選一選就可以設定完畢,不用去了解語法要怎麼寫。
  2. 方便的匯出匯入功能
    直接提供 .htaccess 跟 wp-config.php 的匯出匯入功能
  3. 提供後台防護的相關功能
    我這裡直接寫我透過這個外掛設定跟可以查看的幾個東西

    • 隱藏 WP version info:不要讓人輕易就知道你這個站是用哪個版本的 wp 架設的
    • 限制後台最多連續登入次數
    • 設定強制登出時間
    • 查看目前有登入的帳號,可手動強制把這些帳號登出
    • 所有帳號的登入紀錄
    • 把預設wp-admin網址改成別的
    • 在後台登入加上 google 驗證碼:要自己先去申請 google api 金鑰,回來這裡勾選填寫後,後台就可套用 Google reCAPTCHA

這幾個是我覺得這個外掛好用且方便的地方,因為如果不是用這個外掛,我得另外找別的好幾個外掛才可以把上述設定都處理好。用這個外掛一次就可以解決很方便。

但這個外掛實際上可以做的設定更多,這個就請要裝的自己去研究吧!

然後踩到雷的部分,我後來推敲應該是在 firewall 那裡的設定,但因為我實在是太害怕網站不被 google 收錄了,所以這部分我索性直接把防火牆裡面所有設定都讓他恢復預設,就是都沒有勾,等於不設防火牆。這樣做以後 google 收錄的部分就恢復正常。但至於到底是哪些設定造成擋掉,我沒有那個實驗精神所以也不確定。只能說確定一定是 firewall 裡面的設定造成的。

所以這個外掛我還是會推薦下載安裝,只是設定的時候自己要多注意。

無雷外掛

Cloudflare Flexible SSL

最近我手上兩個媒體網站都是在 linode 上架站,使用 cloudflare 的免費 ssl。但是在 wp 上使用 cloudflare 的免費 ssl 是會有雷的。簡單來說就是如果直接使用 Cloudflare Flexible SSL ,會出現幾種狀況:

  1. 整個網站只要切到 https 路徑就會完全不對,以致於 css 跟 js 都會路徑錯誤,造成跑版跟使用不能。
  2. 網站無限 loop 死掉:如果自己在網站上用 .htaccess 強制把 http 轉 https,並且使用 Cloudflare Flexible SSL 的時候會發生。

我手上兩個站一個遇到1一個遇到2,兩者使用的解法也不同,基本上擇一種方法使用即可。在這裡簡單寫給大家參考,詳細的就請自己去找 cloudflare 的說明囉。

  1. 使用 Flexible SSL:如果要用這個SSL,必須要搭配使用 Cloudflare Flexible SSL 外掛
  2. 使用 Full SSL:如果不另外弄外掛,另外一種解法是自己主機上要先用自簽CA搭配 .htaccess 強制把 http 轉 https,然後使用 Cloudflare Full SSL。參考文章「使用 CloudFlare SSL 憑證後出現過多重新導向的問題
  3. 其他參考:使用 Really Simple SSL 外掛:這個方法我沒用過,但是寫這篇文章的時候搜到。放在這裡給大家參考看看。參考文章「WordPress使用CloudFlare免費SSL快速教學

Google XML Sitemaps

這是無心插柳裝的,但推薦裝一下,簡單來說就是自動生成可以提交給 google 的 sitemap,還不錯用。

Heartbeat Control by WP Rocket

因為一開始裝的時候發生一些狀況,所以去找了幾個跟效能調校有關的 plugin ,這是其中之一。參考文章「WordPress 效能調教心得」。下載外掛

Hyper Cache

網頁快取外掛,加速瀏覽者讀取網站的速度,同時可以降低主機負擔。
參考文章「Hyper Cache 效果非常好的WordPress快取外掛!

Revision Control

wp有自動把文章不斷儲存版本的功能,但是我覺得這個實在太吃空間跟效能了。所以找了這個,可以自訂要儲存幾個版本,以及手動把多餘的版本刪除。

Simple Tooltips

因為網站文章有註解的需求,最後選了這個,簡單好用。

google map 改用 api方式嵌入

原因:幫客戶做網站,要嵌入英文版的地圖。原本先使用google map的嵌入語法。結果對方說我們看到的都是中文。雖然說只要對方語系會是英文就會自動轉,不過想說如果可以強迫轉英文是更好,客戶也比較沒得說嘴。所以就上網搜了一下。然後最近真的是覺得記憶退化嚴重,趁這次有做出來趕快紀錄一下,免得下次要用又要重來….

參考了這幾篇:

然後可以先比較一下google map平常提供的嵌入語法,是長這樣

<iframe src=”https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3615.550013102598!2d121.5367189!3d25.015402!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xec78966a3d7b4efc!2z5ZyL56uL6Ie654Gj5aSn5a2455Sf5ZG956eR5a246aSo!5e0!3m2!1szh-TW!2stw!4v1534244255311″ width=”600″ height=”450″ frameborder=”0″ style=”border:0″ allowfullscreen></iframe>

嵌入結果是這樣

API的嵌入語法則是長這樣

<iframe src=”https://www.google.com/maps/embed/v1/place?key=AIzaSyBOLwZNcRE9yn0-tythMMwX5OIkpEbpFWw&q=106台北市大安區舟山路237號(NTU Department of Life Science)&language=en” width=”600″ height=”450″ frameborder=”0″ style=”border:0″ allowfullscreen></iframe>

嵌入結果長這樣

參數說明:

wordpress 套用 templatemonster 樣板流程整理

這是以 wordpress 架站,跟 templatemonster 購買版型後的套板流程。之前寫在杉語網頁設計的部落格上。這裡留一份備份囉。

  1. 先安裝好基本的wp
  2. 裝完之後把mySQL先匯出備份
  3. 把樣板上傳到ftp,傳到themes資料夾、把樣板裡面的​uploads傳到wp-content資料夾裡
  4. 把plugin上傳上去並且啟用
  5. 把買來的樣板裡面的mySQL先複製一份出來,然後用文字編​輯器打開,把裡面的your_website_url_here用搜尋取代​改成你的網址,例如 http://www.firtalks.com.tw/ ,如果你在安裝wp的時候有把資料庫的前綴詞做修改,則要多一步把wp_找出來修改成你設定的前綴詞。然後存檔
  6. 到phpadmin把剛剛改過的mySQL匯入

大概這樣就可以先把樣板裝起來了。
簡單的樣板mySQL可以不用灌,不過有的樣板有用到自定資料內​容的,
或是有的有使用到「選單」設定的,
不灌裝起來會跟原來的有落差,
為了避免自己在那裡找到底問題出在哪,
建議還是先灌進去,再自己去後台研究資料對應會比較省時間。

不灌mySQL會有落差的原因大概有兩個

  1. 樣板內有自定的post-type:因為不灌就沒有這個資料,所以自然顯示就會有問題
  2. 樣板內有使用自定選單:等於他的下拉選單不是在分頁設定子母關係就會自動出現,要到選單內再設定,外加css寫法可能是用指定ID的作法寫,因此會發生自己新增的選單有顯示,但是樣式怪怪的狀況。

大概是這樣~

WordPress架站實務案例(三)

在前公司用Wordpress架過三個站,都是使用 templatemonster 的付費版型。有一個站因為沒續約,已經消失了就不寫囉,紀錄一下另外兩個。這個部份當初都有寫在杉語網頁設計的網站上,不過這內容原本就是我寫的啦,這裡保留一份順便加新的註解~

案例一:友敍企業有限公司
網址:http://usea.com.tw/
說明:
這個版型使用了很多的jQuery效果,像是右欄的相片展示,工程實績裡的照片展示。還有上方下拉選單。但是下拉選單在套用的時候發現原來的樣板在這個部分並沒有跟後台作完全的串接,當分類刪除,自己新增的分類沒辦法增加到下拉選單中。

考慮到未來客戶使用的擴充便利性,因此將原來有JQuery效果的下拉選單刪除,使用原始樣板的模組替代,CSS的部份自行重寫。工程實績的部份在原始樣板中也沒有跟資料庫串接,是純手工排版的。

註解:
事後想想,應該不是下拉選單沒有整合,而是那個樣板要使用 WP 內的「選單」去設定,但是當時只知道分頁在預設版型的情況底下,下拉選單都會自動新增。那時候對「選單」的設定不熟,所以才會做那樣的調整。

案例二:原宏企業
網址:http://www.yuanhorn.com.tw/
說明:
調整的地方主要有

  1. 首頁只保留表頭SlideShow與邊欄商品資料連結,
  2. 將SlideShow的高度做調整。
  3. 網站字體大小CSS調整
  4. 前台樣板中文化調整
  5. 將商品加註文字直接寫入到樣板內。

註解:
這個套版比較麻煩的地方是後來客戶希望可以調整商品列表內、每個商品的圖片尺寸。我原本以為是直接做在列表頁的樣板內,後來用圖片尺寸搜尋才發現不是,是寫在另外一個負責壓圖的程式檔案內。

WordPress架站實務案例(二)

案例:Joyhsu career
網址:career.joyhsu.com

這是我的個人介紹與作品集網站,以往都是作成靜態 html ,但是一但有新作品要放,維護上很麻煩,所以這次也使用 wordpress 來架站。這個更改的幅度相對於 ikuk 小很多,使用 wp 的人應該一看就可以看出來是用預設版型 Twenty Eleven 來修改的。

修改流程如下

1.單欄式設定
使用  Twenty Eleven 的好處就是後台可以直接設定成單欄式,這樣首頁邊欄就會消失囉

2.塞內容
因為首頁要改的比較多,所以先放著,我先把要放在分頁的內容塞進去,並且自訂 css 樣式完成內容排版

3.改首頁
把文章的 loop 程式拿掉, require 自訂的 html 進去,主要是放圖片slide(沒錯,我使用跟 ikuk同一個 slide 效果,這個效果名字是 nivo-slider,相當好用喔!)

4.改列表頁
因為我主要是要用這個來整理作品,但是作品呈現用部落格文章條列方式並不適合,所以這個案例在列表頁改動的比較多。我使用 Page Links To 這個外掛,把頁面先指向特定的文章分類,然後改動 category.php ,原本文章列表內有段原始碼為
<?php get_template_part( ‘content’, get_post_format() ); ?>
等於預設他是去取得一個 post_format ,一樣我不知道這個format要去哪改XD,所以直接把這段原始碼標註起來,然後手動加入以下原始碼
<div>
<article>
<a href=”<?php the_permalink(); ?>” title=”<?php printf( esc_attr__( ‘Permalink to %s’, ‘twentyeleven’ ), the_title_attribute( ‘echo=0’ ) ); ?>” rel=”bookmark”><img src=”<?php echo get_post_meta($post->ID, “small-image”, $single = true); ?>”/></a>
<div>
<h2><a href=”<?php the_permalink(); ?>” title=”<?php printf( esc_attr__( ‘Permalink to %s’, ‘twentyeleven’ ), the_title_attribute( ‘echo=0’ ) ); ?>” rel=”bookmark”><?php the_title(); ?></a></h2>
</div>
</article>
</div>

作品集小圖的部份我是自己做,而不是由程式自動縮,所以我使用 wp 的自訂欄位, 命名為small-image,並且用 <?php echo get_post_meta($post->ID, “small-image”, $single = true); ?>  讓小圖顯示在列表頁內。其他的是參考 content-page.php ,把我要的部份(文章標題跟文章連結)相關的碼拷貝過來用。

排版的部份就是 css 慢慢調整囉!

5.塞作品
然後就是瘋狂塞作品進去啦,後來舊的作品想說就維持放在舊的作品集內,用連結過去的就好,日後新的再更新。

WordPress架站實務案例(一)

案例:愛煮家
網址:www.ikuk.com.tw

本站使用 WordPress 架設,這算是我第二次使用自製版形。有三次是使用付費版型,一次是使用 WP 預設版形做小幅度修改,其他幾次就純粹使用 WP 預設版形寫部落格。別的案例晚點再整理成一篇。

紀錄一下這次修改的內容。主要是針對版型套用時需要調整到的細節做描述,關於網址申請、網站空間購買這類架站基本工作就不贅述,網路上已經有很多相關資訊囉。

ikuk 整個製作流程如下

1.塞文章、首頁調整
由於一開始先要趕在 3/30 先做出一個網站,只有一個禮拜的時間。當時跟客戶說我們先把基本的版面架起來,版型後面再修。因此先把文章內容一個一個填進去、大概做了一個首頁版型。這個時候調整的比較多是首頁 index.php 、頁尾 footer.php 、頁首 header.php 這三個檔案。樣式檔不用說一定是要調整的。

首頁的部份,主要是使用自製的頁面做替換。因此把 index.php 內文章的程式刪掉, require 自製的 html 檔進去。頁首頁尾則是搭配陽春版版型的樣子,有需要增加 id 或 class 的部份就手動加進去,然後把 style.css 根據想要的版型做調整。

2.分頁與文章版型調整
ikuk 的主要內容都是用分頁作成的,只有食譜的部份是使用部落格。我是使用 WP 預設版型 Twenty Eleven 來做修改的,原因是他分頁有單欄的選擇。但他有個問題,就是部落格預設也是單欄。在網路上找到的方法不是很合這次專案的使用(會連同分頁一起被改成兩欄式),於是手動把 sidebar 放到文章內,這裡修改了 single.php ,在裡面加入 <?php get_sidebar(); ?> 。由於這個佈景主題的分頁跟文章的檔案是分開的,所以不用怕改了文章分頁版也一起被更動。

花比較多時間的部份是各分頁的排版,因為不同系列的商品版型分配略有不同。這個部份我是直接在各分頁內容寫 html ,自訂 div ,並且自己另外寫了一個 page_style.css (當然,也要自己改 header.php 把這個樣式 link 進去),用這樣的方式來自行調整排版,為了讓整個內容版面可以完全由自己控制,我把原本的標題用 css 設定為隱藏。等於只有在表頭下拉選單才看的到那個標題,內容的部份看到的完全是自訂內容。

3.版型調整
基本的骨架做出來之後,就回過頭來調整版型囉,一開始先用 PSD 排好讓客戶選擇。確定好要使用的樣子之後,把圖片切一切上傳,回去改 style.css 。

這時候因為內容都已經有塞好了,內頁版面除了表頭表尾修改外,內容動的幅度比一開始少很多。反而是首頁的樣式花了比較多時間調整,因為我想把一個 slide 的效果做在背景上,一樣用 require 的方式置入 html 。

但問題比較大的是首頁跟內頁的表頭表尾要的樣子完全不一樣,怎麼辦?這點只要可以改表頭、在 index 使用的表頭內把 body 加入新的 class ,就可以用 css 設定處理。理想狀況應該是想辦法把 <?php get_header(); ?> 看有沒有辦法作成 <?php get_header2(); ?> 這類的。如果 WP 原來是直接使用 require 的方式的話,這個部份不會太難改,但是他不是用這個方法, WP 為了擴充性,用了很多 hook ,然後用互相呼叫的方式來引用,但是我對這種方法並不熟悉,以至於我也不知道要怎麼才能另外改一個新的表頭,並且用類似 <?php get_header(); ?> 的方式讓 index.php 使用。

所以呢,我直接把 header.php 的 code 拷貝,貼到 index.php 取代掉 <?php get_header(); ?> 。然後自己手動加 class 在 body 上,讓他跟內頁有所區分。

我想這其實不是一個很好的方法,原因是之後要是 header 有改動, index.php 這頁要自己手動再去把有的更動另外更新上去,像是我後來放 google 分析碼就要兩邊都改。但是這個網站算是要先快速架站做出第一版,未來要另外走客制化。所以這個部份可以處理的過就好。

首頁調整的比較多的還有 CSS ,主要是選單的部份,因為新的版型設計的時候,我使用了圖片文字,但是因為有下拉選單,以至於第一層選單使用圖片文字時,第二層選單會跟著繼承樣式,所以必須要再把原本的設定重寫一次。

大致上的流程是這樣,實際修改的內容很瑣碎,就是不斷的調整 css 跟寫新的樣式,這部份就不細寫囉。