WordPress

WordPress 通常作為Blog 來設計的會以兩欄設計，這是最基礎的 Blog 版型結構模式，做為這種規劃時左欄做為文章內容欄，右欄則為側邊欄，以這樣的基礎規劃作為本次的版型設計教學。 [blq] 需要準備的頁面有：single.phpstyle.csssidebar.php [/blq] 首先，如果首頁 index.php 要以不同的樣貌呈現，可以不考慮用兩欄的形式作為基底，只需要考慮內頁 single.php （或者其他頁面）的呈現，如果真的很懶得用的話，可以考慮所有頁面都一致為同樣兩欄設計，在此先用 single.php 教學。 先在 single.php 內加入 CSS 類別

本篇要來介紹製作 WordPress 佈景主題之一的attachment.php檔案，主要用於顯示圖片附件頁面，簡單來說一般來說點圖片可以設定為無連結、媒體連結、圖片附件頁面，這裡的attachment.php就是指圖片附件頁面，當你點選文章的圖片之後會轉到另外一個圖片頁面，將這篇文章所有圖片集中彙整觀看使用。 像之前index.php作法一樣，先取得之前header.php、footer.php、sidebar.php短碼語法引用到 attachment.php。 取得文章標題。 然後在標題下方加入秀出圖片附件的語法。 接下來的話可以使用the_excerpt()秀出文章摘要，因...

本篇要來介紹製作 WordPress 佈景主題之一的author.php檔案，主要是用來做為作者彙整使用，當使用者搜尋或者點選作者連結時，會自動連結到作者文章彙整頁面，將目前此作者所有的文章全部列出來。 只需要在 WordPress 佈景主題內放置author.php頁面即可，機制會自動判斷是否為搜尋結果，所以其實是不需要另外寫其他語法，只需要將之前的index.php秀出文章的語法放到此頁面，使用者搜尋後就成自動產生搜尋結果。 當然也可以製作一些作者相關資訊，這部份的語法之後再額外進行教學，目前就先教學結構方面的。

WordPress 單篇文章數字分頁功能，能將較長的文章以數字分頁的方式呈現，像是以顯示數字、上一頁、下一頁方式連結，藉由文章分頁的功能來區分文章的段落，讓較長的文章能夠更方便閱讀，也能用來規劃區分章節段落來呈現給使用者。 [blq] 難度（5/10）：■■■■■□□□□□ [/blq] 文章分頁的使用方法 使用文章分頁時可以避免文章過於沉長，區隔文章之間的段落，此外用文章分頁的好處在於可以不需要再額外撰寫其他篇文章，可以一直接續著文章寫下去。 先來使用看看這項功能的運用吧，首先直接進入到 WordPress 的後台新增文...

Facebook是相當多人使用的社群網站之一，所以WordPress的頁面加入Facebook按讚及分享的功能，能夠使更多人來瀏覽及分享你的網站資訊，透過WordPress也能製作出單一篇文章（single.php）按讚及分享的功能，這次就來教學如果加入Facebook按讚及分享功能囉。 先進入到Facebook 「讚」按鈕配置器內設定資料，根據自己的需求可以先試一下樣式（建議版面設計為：button_count，為單篇文章按贊及分享較常見樣式）。 [blq] 網址：https://developers.facebook.com/docs/plugins/like-button/ [/blq] 設定完畢之後，點選【...

本篇要來介紹製作 WordPress 佈景主題之一的header.php檔案，WordPress 中的header.php檔案是用來專門放置一些標題、外部載入語法 CSS、JS 檔案及選單…等項目語法，所以也是 WordPress 佈景主題架構中最重要的頁面之一。 header.php基本結構 建立 WordPress 佈景主題header.php前必需要先了解 HTML 最基本的結構，簡單來說一個網頁只需要有一般的 HTML 結構。 可以先觀看此篇文章，會有更詳細的 HTML 解說：HTML基本介紹及語法介紹篇 WordPress 雖然也是能夠直接用上述 HTML 架構方式建立，不過基本的 WordPress...

WordPress 使用一些預設或者常見佈景主題時，往往在首頁只會顯示最新、最舊的文章，不過大部分的使用者都會希望將原先這類型架構改為數字分頁，所以這次會教學 WordPress 佈景主題加入數字分頁，讓你在架構 WordPress 也能多一個選擇。 [blq] 難度（5/10）：■■■■■□□□□□ [/blq] 在 functions.php 內加入此語法： function home_pagenavi() { global $wp_query; $big = 999999999; echo '共 '.$wp_query->max_num_pages.' 頁'; echo paginate_links( array( 'base' => str_replace( $big, '%#%', esc_url( get_pagen...

WordPress 只需要透過安裝外掛的形式就能額外增加許多的功能，也是長期使用 WordPress 自架版的人依賴的功能之一，尤其是對於一些功能不知道怎麼編寫程式的人來說，在透過安裝外掛之後就能立刻擁有此項功能。 WordPress 外掛雖然說使用起來很方便，但因為裝了過多的外掛還是會降低系統效能，所以還是必須要斟酌安裝使用，盡量還是尋找外掛的替代品。此外也有一些外掛會導致系統崩壞或者插入一些惡意程式碼，以下也會教一些個人使用經驗，簡易判斷外掛在安裝外掛時也能夠較安心。 [blq] 教學版本：WordPress 自架版...

WordPress 自從區塊編輯器更新以來加入了許多不少便利排版、美化版面的功能，其中有一項「圖片比較」功能也是相當方便，尤其是對於有些美妝、產品等等…結果前、後的比較來說，能夠讓使用者觀看時容易清楚的知道及比較圖片。 [blq] 使用版本：WordPress 5.8 自架版本使用工具：區塊編輯器注意事項：需搭配 JetPack 外掛。 [/blq] 首先點選左上角(1)或者內文(2)中的【＋】來增加區塊。 選擇【圖片比較】工具，呈現綠色就代表需安裝 JetPack 外掛才能出現及使用。 然後選擇或上傳兩張要前後比較的圖片。 比較前 bef...

先前已經介紹過 WordPress 要如何安裝外掛，不過如果遇到與 WordPress 不合的版本，想要將 WordPress 外掛版本降級時，該如何回頭去找外掛的舊版本來安裝呢？ [blq] 教學版本：WordPress 自架版 5.8 [/blq] 安裝 WordPress 外掛教學 外掛的搜尋及安裝請參考此篇文章 WordPress 如何安裝外掛，使用上傳的方式來安裝 WordPress 外掛。 搜尋 WordPress 舊版本的方法 先搜尋要的外掛，點選搜尋進入到 WordPress 後點選左側的選單【安裝外掛】。 點選外掛中的【更多詳細資料】。 點選【WordPress 外掛頁面】。 此外也可...

WordPress 有一項能作為類似於文章摘要的功能，能讓文章編輯者插入「繼續閱讀」來進行分段，只需要透過傳統編輯器或者區塊編輯器就能夠插入分段功能，之後使用者在類似於首頁、彙整頁面時，就只會看到所分段的摘要內容，需要觀看完整內容時必需要點選進入文章頁面觀看。 使用方法很簡單，只需要插入編輯器內的「繼續閱讀」按鈕，依照個人需求摘要進行分段功能。 例如： 我是摘要---繼續閱讀---以下內容不在首頁、彙整顯示，只在文章頁面顯示。 傳統編輯器 點選編輯器內的「繼續閱讀」按鈕即可插入分段。 區塊編輯...

WordPress 區塊編輯器除了之前所介紹的功能之外，還有一項美化個人網站、部落格必備的「幻燈片（slide show）」，能夠藉由這項工具來輪播文章中的所插入的圖片，除了能夠美化版面之外也能夠藉此當做一個集合式的小相簿。 [blq] 使用版本：WordPress 5.8注意事項：必須搭配 JetPack 外掛。 [/blq] 安裝 JetPack 外掛功能 在要新增幻燈片之前必須要安裝 JetPack 外掛，可以參考下面安裝教學。 新增 WordPress 區塊編輯器幻燈片功能 首先打開區塊編輯器後，點選(1)或者(2)新增區塊。 然後選擇【幻燈片】，呈現綠色就...

麵包屑（breadcrumbs）是一種導覽式的階層連結，能夠用來清楚的標示網頁的主要階層，大部分常見的網站也會都會使用到這個功能，在網頁瀏覽時能夠讓使用者更方便快速尋找到目的，也能夠用來增進SEO的優化幫助搜尋引擎抓取網站內容。這次要介紹的就是WordPress的外掛Yoast SEO，透過Yoast SEO外掛提供的麵包屑功能，即使是不會使用語法的人來說也能更快的建立麵包屑功能。 [blq] 使用版本：WordPress 5.8 [/blq] 安裝Yoast SEO外掛 首先必須要安裝 Yoast SEO 外掛，無論是免費版或者付費版皆可以使用此功能麵包屑（b...