戰國策 24 小時客服專線 4499319(手機請加02)
27 1 月 2020

2020更新資訊,一篇輕鬆掌握WordPress網站架設大小事

wordpress網站說到網頁設計,許多人首先閃過腦海的都是WordPress網站架設,因為WordPress在現今網頁設計的世界當中,對於許多不是那麼熟悉網站架設語法的網頁設計人來說,可說是一大利器,因為WordPress不僅讓網站架設更加便利輕鬆,也幫忙免去了許多煩雜的語法設定,同時還結合了許多WordPress外掛程式以及電商功能,讓整體的網站架設更為簡單易上手。

 

WordPress網站範例

wordpress網站提到WordPress的厲害之處,從許多知名大網站都是使用WordPress網站來架設就不能看出,包括國際知名的雜誌Vogue、跨國電腦軟體Adobe的部落格、著名Walt Disney的官方網站、美國音樂龍頭Sony Music等等,都是使用WordPress網站架設而成的。

 

WordPress後台教學wordpress網站

圖片來源:維基百科

想要在WordPress網站架設專屬於自己的網頁其實並不困難,只需掌握簡單的幾個步驟,就可以架設好一個簡單的網站

1. 購買網址

架設往這的第一步,你需要西擁有一個專屬自己的網址,當然你也可以使用WordPress內建的免費網域,但如果想要專業點的,建議可以上像是戰國策集團購買網域。

2. 申請主機

擁有自己的網址後就要來申請主機,主機決定了網站整體的速度以及穩定度,網路上有許多提供免付費虛擬主機的服務,然而往往不穩定或是表現不甚理想,導致網站後續問題層出不窮,因此在挑選主機時千萬別為了金額而因小失大,應該挑選像戰國策集團這種擁有不同成功案例,口碑評價良好的主機供應商,才能取得合理價格,以及有一定的水準表現的速度與穩定度。

3. 設定網頁外觀

在有了自己的網址以及主機後,就可以開始進入網站內部設定,WordPress網站中提供許多不同類型的模板,有免付費以及付費的樣式,讓使用者可以根據自身的需求以及喜好選擇相對應的樣式,此外,也可以透過上傳的方式,將自己喜歡的主題樣式上傳到WordPress網站進行修改。換好了喜愛的樣式之後,也別忘記為自己的網頁設定專屬的logo,以上這些都可以在WordPress網站的「外觀」功能中進行修該以及調整。

4. 熟悉網站後台

在WordPress網站後台中,左方欄內有需多不同的設定功能,在欄位中你可以選擇你想要操作的功能,像是新增文章、上傳媒體、設定頁面、新增外掛、設定彈跳視窗等等,建議新手使用者可以一個一個點開去試試不同的功能,在摸索的過程中往往能獲得許多不同的經驗以及驚喜。

5. 新增內容

當基本設定都設定完成後,最重要的就是為你的網站加上你想呈現的內容,不論是部落格的文章或者是新的商品頁面、作品集等等,此外也可以設定網站專屬的頁首以及頁尾,內容新增完畢後,一個基本的網站就已經完成了!

6. 新增外掛

在WordPress網站中提供了許多免付費以及付費的外掛程式給使用者,從支援電商設定的woocommerce到幫助WordPress網站備份以及搬家的All-in-One WP Migration,許多不同功能的外掛程式都能在後台左方欄中的「外掛」選單中搜尋的到,使用者可以根據不同的需求進行關鍵字搜尋,也可以先在網路上做好功課後,選定欲下載的外掛工具,直接在搜尋列中進行搜尋。

 

WordPress外掛

Elementor Page Builder

wordpress網站

Elementor Page Builder是WordPress上一個網頁編輯器的外掛,它的操作介面直接不繁瑣、提供多元的擴充功能還可以即時預覽以及更新,此外Elementor Page Builder也支援繁體中文,讓使用者可以輕易藉由搭配Elementor Page Builder的使用,就在WordPress網站上建立出一個具有設計質感的網頁。更方便的是,Elementor Page Builder也提供了許多不同的設計模板給使用者使用,使用者只需要透過幾個按鍵的編輯以及拖拉,就可以快速建立區塊創建出網頁。

WooCommerce

wordpress網站WooCommerce是一個WordPress網站上的電子商務外掛,操作簡單、設定容易的特性,讓他在推出後,就受到許多商業網站的喜愛。

All-in-One WP Migration

wordpress網站All-in-One WP Migration讓使用者可以輕鬆的按幾個按鍵,就能完整匯出WordPress網站,從所有的內容、設計、媒體庫、佈景主題到外掛等等都可以一鍵下載下來,此外,匯出的檔案格式也根據使用者需求提供了不同的匯出檔案格式,讓要將網站搬移到另一個虛擬主機的網頁使用者免去了不少的麻煩。

 

雖看看似透過簡單的幾個步驟就可以使用WordPress網站架設出一個初步的網站,然而WordPress的功能以及設定一直不斷更新進化,對於有些不熟悉網頁架設或是沒有多餘時間摸索的人來說,還是有些困難,這時,適時的尋求像戰國策集團這類,針對不同的客戶需求提供不同網頁設計方案的網站架設公司,也可以獲得不少的幫助!

 

Share this
26 1 月 2020

RWD入門,2020最新攻略,響應式網頁設計一篇全搞懂

RWD

RWD,英文全名Responsive Web Design,中文譯作響應式網頁設計,顧名思義是一種前端網頁設計師或是後端工程師在設計網頁時,會運用到的一種技術做法,讓其網頁設計可以針對不同的裝置(例如桌電、筆電、平板、手機等等),而呈現出不同的瀏覽方式以及最適合的解析度,讓使用者在操作時,可以免去許多縮放或是捲動等行為。

 

RWD觀念

隨著近年來,行動網路與行動裝置的普及,使用者有越來越多的裝置可做為上網的選擇,從手機平板到桌機筆電,就算是在同種裝置分類中,也有許多不同的大小尺寸,為了因應這樣的趨勢,許多網頁設計師,開始針對不同的行動裝置以及尺寸做出不同的網頁版本,有的甚至會開發出手機APP,為了就是讓使用者有更好的使用體驗,然而在這樣龐大的做工下,同時也需要花費許多的人力、心力、時間以及預算成本去做維護。

 

RWD寫法

要設定網頁RWD,不外乎以下幾個步驟:

1. 設定HTML檢視區

所謂的檢視區(viewport)指的就是當使用者在瀏覽頁面時,顯示內容的畫面範圍。而不同的使用裝置,有不同的顯示範圍,這時為了讓網頁可以因應不同的螢幕裝置大小,就會在HTML的head中設定檢視區,來完成RWD的設定。

舉例來說:為了適合手機使用者的最佳閱讀解析度,W3C特地為手機版網頁制定了專屬的HTML檢視區語法:<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

 

2. 決定RWD外觀設計模式

RWD設定完HTML檢視區後,接著需要設定在不同的檢視區範圍下,網頁該如何配置以及呈現方式,目前RWD主要的五大外觀設計模式為:主體流動(Mostly Fluid)、欄內容下排(Column Drop)、版面配置位移(Layout Shifter)、微小調整(Tiny Tweaks)以及畫布外空間利用 (Off Canvas)。

 

3. 使用 CSS3 Media Queries

設定頁面的版面配置是CSS的主要工作之一,因此為了在RWD中可以針對不同瀏覽器的寬度,提供最合適的頁面樣式,就需要使用CSS3 Media Queries。舉例來說,當我們要針對「螢幕尺寸在 400 – 500px間,針對 <p> 設定字體大小為 20px 」:

<style>

   <!– 當螢幕大小在 400 – 500px 間時使用 –!>

 @media (min-width: 400px) and (max-width: 500px) {

  p {

    font-size: 20px;

  }

}

</style>

(min-width: 400px) and (max-width: 500px) 即是篩選條件,表示當螢幕大小在 400 – 500px 間時的 CSS 內容都包含在此範圍中。當我們使用Media Queries時,就能在你所預想設定的範圍下,呈現給使用者不同的畫面,包括字體大小、顏色、圖片大小等等。

另外,必須注意的是,一般在設定Media Queries時,內容的寬度、大小等等建議使用相對寬度而非絕對寬度,例如:min-width、max-width、min-height 和 max-height 等屬性,這樣才能讓在設定煩為下的檢視區達到最佳的RWD效果。

 

4. 使用相對比例的多媒體大小

最後,需要為不同的裝置,設定不同的多媒體(包含圖片、影片)顯示解析度,以符合不同的瀏覽模式,與設定Media Queries相同,建議使用相對寬度而非絕對單位。

 

RWD開發工具

RWD

對於不熟習撰寫語法或是初次接觸RWD設定的網頁設計人來說,在面對這些密密麻麻的文字以及不同的規定時,總需要能夠有一兩個實用的小工具來輔助,像是BootstrapZURB FoundationPure.css等等。這些工具內往往包含大部分在為網頁設定RWD時,會需要使用到的CSS工具以及語法,像是下拉式選單、表格、按鈕、格線等等。

如果有了小工具的輔助,還是覺得一頭霧水,不妨試試尋找專業的網頁設計公司來操刀,舉例來說戰國策集團,針對不同的客戶需求而制定不同的網頁設計方案,為網站提供更全面、專業的RWD設定。

 

順應當今的時代潮流以及使用者使用習慣的改變,RWD早已成為當今網頁設計不可或缺的重要一環,擁有設計精美的頁面早已不再是贏的使用者芳心的首要條件,而是針對不同使用者需求以及使用環境,提供不同的瀏覽方案。然而在眾多的使用裝置中,該如何通過最少的設定方式,滿足最多元的瀏覽頁面,這便是RWD設定誕生的原因,讓每個不同使用頁面大小,都能擁有最佳的使用體驗。

Share this
Click Me