WORDPRESS不懂程式0-1 自架部落格 | 佈景主題SOLEDAD(頁面+文章篇)

by 點子
WORDPRESS不懂程式0-1 自架部落格 | 佈景主題SOLEDAD(頁面+文章篇))
為你自己設計一個專屬的頁面吧!

WORDPRESS不懂程式0-1 自架部落格 | 佈景主題SOLEDAD(頁面+文章篇)

經過了 Soledad佈景主題 的購買+下載,然後基本設定完成了,終於要開始編寫屬於你自己的文章給你的觀眾看囉!WordPress網站部落格最重要的就是呈現最好的內容給你的觀眾看,要怎麼樣寫好一篇文章,用Soledad佈景主題搭配舒服的視覺感來呈現也是不能錯過的一個重點哦!這一篇點子將繼續帶著你手把手的完成最後的設定,並告訴你如何開始寫一篇文章,以及WordPress的文章和頁面又有什麼不同?文末還有貼心好物推薦,一定要繼續堅持到最後哦!

如果你才準備開始,可以先從WORDPRESS新手架站教學 | 10分鐘自架BLUEHOST主機和網域這邊開始哦!

WORDPRESS不懂程式0-1 自架部落格 | 佈景主題SOLEDAD(頁面+文章篇)
Soledad佈景主題自訂的列表總覽

相關文章:WORDPRESS不懂程式0-1 自架部落格 | 佈景主題SOLEDAD(下載設定篇)


頁首設定(Homepage)

WORDPRESS不懂程式0-1 自架部落格 | 佈景主題SOLEDAD(頁面+文章篇)
頁首設定(Homepage)

一般(基本)設定

自訂>Homepage>General

WORDPRESS不懂程式0-1 自架部落格 | 佈景主題SOLEDAD(頁面+文章篇)
自訂>Homepage>General
  1. 設定頁首呈現的主要版型
  2. 頁首顯示文章的數量
  3. 在頁首開啟"閱讀更多"按鈕
  4. 每次閱讀更多的文章數量
  5. 在頁首上開啟側邊欄
  6. 自定義標題設定

備註:這個部個主要只針對網站的首頁單一頁面的設定,其他新增的頁面皆不會有同樣的變化哦。


精選盒子

自訂>Homepage>Home Featured Boxes

WORDPRESS不懂程式0-1 自架部落格 | 佈景主題SOLEDAD(頁面+文章篇)
自訂>Homepage>Home Featured Boxes
  1. 選擇你格字呈現的模板樣式
  2. 載入你的圖片
  3. 圖片上面的字
  4. 點選圖片可以連結到的網址

備註:這個特色圖片區塊可以設定到9個圖片清單,可以自己決定要設定幾個。


熱門文章

自訂>Homepage>Home Popular Posts

WORDPRESS不懂程式0-1 自架部落格 | 佈景主題SOLEDAD(頁面+文章篇)
自訂>Homepage>Home Popular Posts
  1. 在頁首啟用熱門文章
  2. 文章輪動的數量
  3. 自定義標題設定
  4. 標題顯示的字數長度設定

大圖輪播設定

自訂>Featured Slider

%E5%A4%A7%E5%9C%96%E8%BC%AA%E6%92%AD%E8%A8%AD%E5%AE%9A
自訂>Featured Slider

文章版面設定

自訂>Posts Layouts

%E6%96%87%E7%AB%A0%E7%89%88%E9%9D%A2%E8%A8%AD%E5%AE%9A1
自訂>Posts Layouts
  1. 基礎設定:是針對文章分類展示的第一個文章的樣式設定。
  2. 其他版面:是除了第一個文章樣式之外的,所有文章展示的版面設定。

備註:這個部份的設定,是點選文章分類後,呈現出來給觀眾的佈局樣式。


單一文章設定

自訂>Single Posts

%E5%96%AE%E4%B8%80%E6%96%87%E7%AB%A0%E8%A8%AD%E5%AE%9A
自訂>Single Posts
  1. 一般設定:單一文章,整頁的板型設計,可在選項中挑選自己喜歡的樣式
  2. 內連相關文章:在文章中自動生成的相關內連結,可設定數量和相關性
  3. 相關文章:於文章最下方以圖片輪動式呈現設定
  4. 意見表單:可讓觀眾回覆留言評論的設定
  5. 無限滾動加載:設定單一頁面文章讀完後,會接著繼續下一個文章無限滾動加載

設定永久連結

幫你的WordPress做一個永久連結的設定,讓後續的網頁建置更加方便順手。下圖示範的是網址連結更改成顯示在網址上的形式,幫助提升SEO優化和訪客找在尋的過程中更好的閱讀體驗。

WORDPRESS不懂程式0-1 自架部落格 | 佈景主題SOLEDAD(頁面+文章篇)
設定永久連結

進入WordPress的後台,點選 設定>永久連結

若你是初學者沒有太多的文章分類或其他連結,可以選擇點選"文章名稱",若你的分類比較多,也希望能有更多的連結選項,可以選擇自訂結構,範例中是以"分類"/"文章"的結構來做為永久連結的設定,下方有很多選項,例如年、月、日、時、分..等,都可以依自己的需求來做設定點選。


設定文章顯示方式

這裡是全局的文章顯示方式,如果在後續自製頁面上不想用原本的設定,也是可以各別在製作中獨立修改的。

%E8%A8%AD%E5%AE%9A%E6%96%87%E7%AB%A0%E9%A1%AF%E7%A4%BA%E6%96%B9%E5%BC%8F1 2
設定文章顯示方式

進入WordPress的後台,點選 設定>閱讀

  1. 網站首頁顯示內容:當觀眾來到你的網站,第一個看到的頁面。(大部份都會是首面)如果你沒有特別製做一個首頁或是登入頁面,可以設定最新文章為你的主畫面。
  2. 網站文章頁面每頁文章顯示數量:在你的每一個頁面中,所分享出來的文章數量。
  3. 資訊提供中的近期文章顯示數量:若你有在頁面上顯示"最新文章"列表,所顯示出來的數量。
  4. 資訊提供中的文章顯示方式:因為每個文章都不是簡單的幾個字,往往就是很長的內容,為了提高觀眾的使用體驗,建議點選內容摘要來簡單的表述單篇文章的內容,讓觀眾容易找搜自己需要的資訊。
  5. 搜尋引擎可見度:讓Google可以找到你。若你還在修改你的網站,暫時不想讓別人找到你,這邊可以先勾選,但請記得當你想讓大家找到你的時候,一定要來這邊把它取消勾選哦。
Frame 54

sloedad%E6%96%B0%E5%A2%9E%E9%A0%81%E9%9D%A2%E6%96%87%E7%AB%A0

要如何分辨"頁面"和"文章"的不同呢?

終於來到了要新增內容的教學囉!在新增頁面和文章之前,你一定要注意的事情,就是要了解頁面和文章的區分。 Wordpress網頁系統,把呈現給觀眾看的網頁,分為了頁面和文章這2種類型,在新增內容的時候,要特別注意是要新增的是文章或是頁面哦!不要選錯了。

頁面:單一個頁面,無法做分類,大部份會用在品牌官網首頁,關於我們,服務內容等,具有較特定功能的頁面。

文章:一般部落格分享的文章系列,可以做分類,製定標籤,方便整理。

新增一篇文章

在前台的上方按+新增項目>文章,或是於WordPress後台點選"文章>新增文章"

%E6%96%B0%E5%A2%9E%E6%96%87%E7%AB%A01

一般來說,文章都是以文字+圖片來呈現,所以不需要太多的特效來支撐,我一般就使用WordPress的區塊編輯器編寫內容即可,操作上也非常簡單。


文章編寫操作

%E6%96%B0%E5%A2%9E%E6%96%87%E7%AB%A012
%E6%96%B0%E5%A2%9E%E6%96%87%E7%AB%A04
  1. 文章的標題
  2. 文章的內容
  3. Wordpress區塊編輯器,裡面的功能非常多,可以插入圖片,表格,清單等,都是視覺化的呈現,可以試看看自己需要哪些。
  4. 在google搜尋上呈現出來的樣子
  5. 設定模組區:可設定本篇文章預定發佈的日期和模式
  6. 文章的分類
  7. 設定文章的標籤,提高SEO的效率
  8. 顯示在google搜尋和你個人頁面上的文章圖片(吸睛的關鍵)文章的標題-可於4中模擬查看
  9. 顯示在google搜尋頁面上的簡單介紹說明(吸睛的關鍵)-可於4中模擬查看

如果你的文很長,建議可以先使用"儲存草稿",避免不小心的當機或是意外發生。編寫完後也可以使用”預覽"來確認你的文章呈現在觀眾面前的樣子,是否符合自己的現望。全部都確認寫好沒問題後,只要按右上方的"發佈",你的文章就可以呈現在觀眾面前囉。


新增一個頁面

在前台的上方按+新增項目>頁面,或是於WordPress後台點選"頁面>新增頁面"

%E6%96%B0%E5%A2%9E%E9%A0%81%E9%9D%A21

在頁面部份,如果你想設計的型態是比較簡單的,不用太多的變化效果,WordPress網站提供的區塊編輯器也可以滿足我們製作一個頁面,但如果你的頁面需求比較複雜和多元,那會建議使用Elementor編輯器來操作哦!

WordPress區塊編輯器操作方法

%E6%96%B0%E5%A2%9E%E9%A0%81%E9%9D%A2%E6%96%B9%E6%B3%95
  1. 輸入你的頁面名稱
  2. 內容區塊部份,編寫你想給觀眾的文字或圖檔
  3. 配合2的編輯區塊模組
  4. 輸入一個網址代稱(如果沒有輸入,系統會直接設定為你頁面的名稱)一般建議使用英文,比較利於SEO優化。
  5. 放入你給頁面設計好的圖檔,這個部份會顯示於6
  6. 模擬你這個頁面在google搜索時出現的畫面

Elmentor編輯器

Elementor 是 WordPress 網站專業的平台編輯器。Elementor 為 Web 提供專業的服務,包括開發人員、設計師和營銷人員,Elementor 可以很容易的創建任何頁面或文章。Elementor 的90幾種小工具擁有強大的視覺化編輯,可滿足各種需求,對於新手來說,在沒有頭緒的時候是很好的幫手,非常容易上手。

Frame 1

Elementor編輯器操作方法

一般來說,因為要呈現較亮眼和質感的面貌給你的觀眾,用WordPress的基本編輯器雖然也可以做到,但是Elementor編輯器相較而言,因它的視覺化編輯效果更為簡單好上手,在製作的過程中,也可以省掉非常多的時間哦!話不多說,跟著點子來操作吧!

Elementor%E7%B7%A8%E8%BC%AF1

點選新增頁面後,由於Elementor編輯器不會顯示出標題的字樣,所以你在上圖中的2,頁面的標題要先在這邊設定完成後,再按1點選進入Elementor編輯器哦!


進入Elementor編輯器

WORDPRESS不懂程式0-1 自架部落格 | 佈景主題SOLEDAD(頁面+文章篇)
  1. Elementor編輯器的區塊選單欄
  2. 文字內容區塊(可以設定自己的文字,或是放入特效區塊的地方)
  3. 頁面格式設定區塊

製作一個精選盒子

Elementor%E7%B7%A8%E8%BC%AF3
Elementor%E7%B7%A8%E8%BC%AF4
  1. 點選3的+,就會出現4的區塊選項,它有很多種格式可以選擇,我們點選單一區塊格式
  2. 選擇5的Penci Featured Boxes,直接拖拉到剛才開啟的區塊內,就會立即出現下方顯示的圖塊了。

製作精選類別+側邊欄

Elementor%E7%B7%A8%E8%BC%AF5
Elementor%E7%B7%A8%E8%BC%AF6
  1. 點選3的+,選擇5的雙格區塊
  2. 精選類別:將Penci Featured Cat拖拉到7的區塊內
  3. 側邊欄:將Penci Sidebar拖拉到8的區塊內
  4. 即可見到區塊內完成的樣式,再依自己的需求更改內部小細節即可
Frame 43

結語

恭禧你堅持到最後了,這幾天辛苦你啦!先拍拍自己的肩膀跟自己說"我真的好棒!"。我們從主機的架設一路到了這邊,不知道你在操作上是否還順利呢?如果有任何不清楚的地方,也歡迎留言告訴我,讓我知道可以怎麼樣再修正的更好,幫助到更多的人。

在架站的過程中,你一定有發現Soledad佈景主題BlueHost主機+網域都是英文,並且很多相關的外掛和軟體也都是英文的,對於不太熟悉英文的我來說,一開始真的是很吃力。不過因為現在科技的進步,google真的是很好的朋友,做了很多友善的外掛來協助,讓我在這一塊降少了很多的不適應。

點子一定要貼心跟你推薦這個好物!(Google翻譯)
如果你也跟我一樣,建議你可以使用Google Chrome流覽器內的Google 翻譯擴充功能,將會讓你事半功倍哦!


覺得實用嗎?快把文章儲存起來!
創業之路有我陪你一起成長,希望我所有的分享都能夠幫助到你解決問題。
如果你喜歡我的分享,可以點一下愛心,讓我知道我為你創造的內容是有幫助的。
也歡迎你分享這個文章給你的朋友,讓他也可以從迷惘中快速的找到方法。
訂閱我的電子報,讓我能在第一時間把有價值的內容送給你。
歡迎你留言或寫信給我,告訴我你遇到的問題,讓我們一起為疑惑找到出路。


你可能也喜歡