讓我們來測試看看崁入 Facebook 的貼文的效果吧! 只要貼入 Facebook 貼文的連結,Gutenberg 就會自動幫你崁入貼文成上面的樣子喔! 你們可以按讚看看,還可以分享看看!可以直接互動真的很方便! 而且,Gutenberg 不是只能崁入 Facebook,他總共能崁入35種不同的多媒體與社群資訊! 我越用越喜歡啊… 離不開它了!謝謝 WordPress 的開發團隊!大家辛苦了~ ❤️
WordPress教學
-
-
這是一篇完全用 Gutenberg 編輯器所寫的文章,以下是我在研究 Gutenberg 編輯器的過程當中,所蒐集到的一些資訊。雖然都是英文的,不過還是整理紀錄起來。10/21 的 WordCamp,我再跟大家分享我的心得喔! Gutenberg 與其他編輯器的相容性 Beaver Builder https://kb.wpbeaverbuilder.com/article/588-how-beaver-builder-works-with-gutenberg Elementor https://elementor.com/blog/upcoming-elementor-v2/ Divi Builder https://www.elegantthemes.com/blog/theme-releases/divi-feature-update-introducing-initial-gutenberg-support Avada – Fusion Builder https://theme-fusion.com/documentation/avada/wordpress/avada-and-gutenberg-important-info-on-publishing-your-content/ WPBakery Page Builder https://visualcomposer.io/help/content-elements-structure/gutenberg-element/ 延伸Gutenberg:更多第三方的Blocks外掛 Advanced Gutenberg: https://tw.wordpress.org/plugins/advanced-gutenberg/ Atomic Blocks: https://tw.wordpress.org/plugins/atomic-blocks/ Stackable: https://tw.wordpress.org/plugins/stackable-ultimate-gutenberg-blocks/ Bokez: https://tw.wordpress.org/plugins/bokez-awesome-gutenberg-blocks/ Editor Blocks for Gutenberg: https://tw.wordpress.org/plugins/editor-blocks/ Advanced Gutenberg Blocks: https://tw.wordpress.org/plugins/advanced-gutenberg-blocks/ Gutenberg 與其他外掛的相容性 Yoast SEO https://yoast.com/how-we-designed-yoast-seo-for-gutenberg/ https://yoast.com/yoast-seo-8-0-introducing-the-yoast-seo-gutenberg-sidebar-a-revamped-meta-box/ Gutenberg 的官方文件 Gutenberg 的設計理念 Gutenberg 的開發過程 Gutenberg 的常見問題 其他相關文章 WordPress 的歷史 (from WP Beginner) Matt Mullenweg discusses the past, present and future of Gutenberg Gutenberg and The Customizer Are The Future Of WordPress
-
WordPress 5.0 即將預設搭載Gutenberg 編輯器!Gutenberg 到底可以做些什麼?做出來是什麼樣子呢?快來預覽看看吧!
-
帶路姬幫客戶做網站十幾年了,每天忙著做網站,其實一直沒有認真經營過 Facebook 粉絲頁,一直到今年五月,我才創立了這個「WordPress 網站帶路姬」的網站,才開始學習經營社群。 目前自己也還在摸索當中,不過近期有發現,因為大部分的人是用手機 APP 在看粉絲頁的,所以,紛絲頁貼文的寫作方式需要調整,才能便於使用者一邊行動、一邊快速瀏覽。以下是我的一些小建議,希望對大家有幫助。 粉絲頁貼文的寫作 ➡️ 可以一句話一行 ➡️ 可以省略標點符號 ➡️ 適時善用括弧 «»「」【】《》 ➡️ 適時善用 Emoji 表情符號 ➡️ 段行的技巧:兩個空格 + Enter = 真正的分段 (我竟然現在才發現 ?) ➡️ 一開始的前三行非常重要 網站文章的寫作 ✅ 盡量不要一句話一行,手機上會出現不規則斷句 ✅ 盡量不要省略標點符號 ✅ 要善用 H1~H6 標題格式,來幫助閱讀與優化SEO ✅ 偶爾也可加入 Emoji 表情符號 ✅ 要注意調整內文行距,建議是1.5~2之間 ✅ 要注意每個段落不要太長 大概先列出這些喔~ 不知道還有沒有其他我漏掉的呢? 尤其是粉絲頁的部分,歡迎大家幫忙補充~~ 謝謝你們!❤️
-
這是新手們一開始製作 WordPress 網站時很常遇到的問題之一。 很多人選定了佈景主題後,安裝過程中,發現有子主題 (child-theme) 這種東西,開始覺得手足無措,不知道到底該不該安裝?該不該啟用? 子主題的目的 過去,還沒有子主題時,工程師在客製化網站時,可能會直接修改佈景主題的「檔案」,但是,WordPress 核心程式一直在更新進化,佈景主題也會跟著需要更新,佈景主題一更新,就把我們工程師辛苦「客製化的檔案」又覆蓋過去了。 為了避免這種情況的發生,子主題於是誕生了,子主題的設定本身繼承了父主題所有的功能,但是子主題可以讓工程師把「客製化的檔案」分開存放,就不會被父主題的更新的檔案直接覆蓋掉。 還是很抽象嗎?換個方式說… 如果這樣解說,還是有點難理解的話,帶路姬畫了一張圖 (請看下圖),用比較生活化的方式來解釋,不論你是使用 Apple 手機或 Android 手機,剛拿到時都是原廠設定,有原廠的桌布等等,後來手機都會請你綁定一個 iTunes 或 Google 帳號,有些客製化的資料就存在這個帳號中,這樣不論 iOS 或 Android 的版本再怎麼更新,都不會害你的手機變回原廠設定。所以,子主題的存在就和 iTunes 或 Google 帳號的情況類似,目的是要把「客製化的資料另外存放管理」。 如果有子主題時,要啟用父主題還是子主題呢? 當你要上傳主題的時候,假如有同時看到兩個 ZIP 壓縮檔案,例如: Avada.zip 和 Avada-Child-Theme.zip,請兩個檔案都上傳安裝,並且啟用子主題就可以了。 假如我選的主題,沒有提供子主題怎麼辦? 子主題並不是必要的,有些比較便宜或比較舊的主題,可能沒有提供子主題,這不代表你就不能客製化,你還是能透過主題商在後台提供的「主題設定」來做客製化,你的設定值還是會被儲存在資料庫中。只是對「工程師」來說,如果想要做更進一步的客製化 (主題設定以外的) 並且修改檔案,可能就會比較不方便了。因此,對一般新手來說,其實不用太擔心有沒有子主題這件事 (因為新手不需要開發主題、更動到檔案)。 可以自己建立子主題嗎? 是有外掛可以幫忙快速建立子主題的,不過,據我知道,並不是每個佈景主題都適合用外掛直接產生子主題,如我前面所說,其實工程師才比較需要用到子主題,帶路姬建議新手,除非你有想要學習開發寫程式,否則不需要執著於建立一個子主題。 換個角度說,一開始選擇主題時,如果能選擇本身就有子主題的,可以保有主題本身的彈性,未來如果要請工程師幫忙開發時,可以方便快速很多。 這篇文章,帶路姬一直想寫,想了很久了… 因為希望能不要講得太難,又希望新手能略有了解,比喻也不許不是最正確,不過希望意思有傳達到,歡迎與我分享你們的想法喔!(如果工程師們覺得帶路姬寫得不夠正確,也歡迎指正) 如果你對 WordPress 的很多觀念,都還是一知半解的話… 帶路姬建議你來參考看看「五天自學衝刺班」的影音教學喔,如果能從頭到尾跟著做當然是比較不會卡關,但是如果你已經有主機或主題了,也沒關係喔,只要認真看過這些影音教學,觀念會清楚很多喔!快找一個你有興趣的網站類型來看看吧! 如果有其他疑問,也歡迎你到 「WordPress 不懂程式的新手站長 — 網站帶路姬學園」Facebook 社團,來跟大家交流喔!
-
在我的「五天自學衝刺班」系列的教學中,我建議新手們使用 Avada主題來做網站,這個主題預設的編輯器是Fusion Builder,不過,有很多新手問我,可以用 Avada 並且搭配 Elementor 編輯器嗎? 答案是:Avada + Elementor 是可以的喔! 老實說,我本來以為不可以,不過我認真搜尋了一下,找到了 Elementor 官方的介紹文章,證實他們是可以相容的! 不過,這代表什麼呢? 如果你已經成功做過一個網站,不是超級新手了,才建議你使用 Elementor來搭配,並且建議你停用 Fusion Builder,不要兩個同時啟用,比較容易會有衝突的問題。 如果你真的決定要用 Elementor,請注意,Avada 會有理由不支援你遇到的問題,任何與第三方外掛相關的問題,Avada 客服會拒絕為你處理問題。 這兩個編輯器各有各的優缺點,如果使用 Fusion Builder,你可以快速匯入Avada 所有展示網站裡的任何一個頁面的範例內容;如果使用Elementor,你可以快速匯入 Elementor 編輯器的範例內容與範例區塊。 Elementor 編輯器 (免費版就可以),可以快速修改手機版排版時,每個區塊內外、元素周邊的留白間距,可以讓手機版更美觀;相較之下,Fusion Builder 這方面沒有這麼方便。 Elementor Pro (付費的進階版)可以讓你不只編輯網站的內容,甚至可以編輯網站的頁首(LOGO選單區)和頁尾(最下面的資訊聲明區)。 Elementor 功能真的很強大,但建議已經有經驗一點的人再用。所以,如果你是新手、第一次做網站,建議還是跟著帶路姬五天自學衝刺班裡的教學做一次、也不用多花錢。 希望這些資訊對大家有幫助囉! ☺️官方證實是相容的,不過帶路姬還沒親身嘗試過,歡迎有經驗的人與大家分享你的心得喔!?
-
很多新手來問帶路姬, WordPress 的佈景主題商這麼多,到底要跟誰買?除了價錢以外,他們還有什麼主要的差別呢? 你喜歡別人幫你組裝好的電腦?還是自己組裝的電腦? Themeforest 上面的主題都比較像是,有人幫你組裝好一台電腦賣給你,比較像是一條龍的方案,為了讓你方便,主題商幫你搭配你需要的功能,預先設計好一些你喜歡的樣子,讓你花錢買一次就可以永久使用。通常他會依照你的行業類別,直接把你可能需要的功能都是先包在一個主題裡,像是旅遊業主題,可能包含了訂房功能;教學平台主題,就包含了課程安排功能等等,再來就是萬用型主題,像是知名的 Avada、Soledad、Flatsome、BeTheme, the7 這些,就是適用於各種形象網站、購物網站、部落格等等,因為金額較低的關係,這些主題搭配的功能性外掛不一定是最好的,而且還不能隨便換,但是它的優點是,只要是他包在一起的東西,表示他們測試過,不會有功能外掛之間衝突的問題,有任何問題,只要在購買後的半年內,都可以跟主題商聯絡尋求支援。 另一方面,現在有很多專業的設計師們,更常買 Blocksy, Kadence, Astra Pro, OceanWP, GeneratePress 和 Divi 這種主題,因為它可以讓你自由搭配你喜歡的功能性外掛,就像可以自己買一堆電腦零件,自己組裝一台電腦一樣,你可以選自己喜歡的內容編輯器,像是很熱門、功能很強的 Elementor Pro, Beaver Builder 和 Divi。這些主題和編輯器都非常好用,可是缺點是他們比較貴,他們全部都只讓你一年內可以更新,一年後如果想更新,就得另外延展你的 License (許可證),你還可以搭配最好用的飯店訂房外掛,或是教學平台外掛等等,全部都是自己的選擇,而不像 Themeforest,可能已經搭配好 WPBakery Page Builder,你如果買Elementor Pro來換掉原本的編輯器,主題商就有理由不提供支援服務,不保證相容。用這些主題和內容編輯器,當然站長本身要稍微有一點經驗,就像一個完全不懂電腦的人,也不太適合自己到處買零件亂裝… 其他的細節差別,可以參考這篇 WordPress 五大熱門主題的終極比較,這裡我用買電腦的比喻,來讓大家做初步的了解。下面我列出幾個現在很熱門的主題,比較他們的價錢、推薦搭配的內容編輯器、可以在幾台電腦上用、可以更新多久等等… Themeforest (例如 Avada,Soledad, Flatsome 等等) Astra OceanWP GeneratePress Divi 主題價格 平均約1800元起 (主題可終生下載與更新) 約1800元起 (僅第一年能更新,第二年起要付費才能更新) 約1200起(僅第一年能更新,第二年起要付費才能更新) 約 1500元 (僅第一年能更新,第二年起要付費才能更新) 約 2700元(僅第一年能更新,第二年起要付費才能更新) 內容編輯器 大部分是WPBakery Page Builder (原 Visual Composer) 推薦搭配 Elementor 和 Beaver Builder 推薦搭配 Elementor 推薦搭配 Elementor 和 Beaver Builder 推薦搭配 Divi Builder 可用在幾個網站 只能用在一個網站 可用在無限個網站 只能用在一個網站 可用在無限個網站 可用在無限個網站 編輯器的費用 通常不需要另外買編輯器 建議購買 Elementor Pro ($1500元/只能更新一年/只能用在一個網站/第二年起 75折) 建議購買 Elementor Pro($1500元/只能更新一年/只能用在一個網站/第二年起 75折) 建議購買 Elementor Pro ($1500元/只能更新一年/只能用在一個網站/第二年起 75折) 包含共88個主題和3個外掛,一年內無限使用 總花費 平均約1800元(不用每年付) 每年3300元 每年2700元 每年3000元 每年2700元 只能更新一年,是什麼意思呢? WordPress 的網站,WordPress 本身的核心系統是常常需要更新的,就像手機 iOS 或 Android 系統常常會跳出訊息請你更新一樣,目的在於讓系統更加安全、更加好用。 可是 iOS 或 Andriod 更新後,有些 APP 勢必要跟著更新,否則,APP 可能會和手機系統不相容,會出現閃退之類的問題,WordPress 也是一樣,如果佈景主題和外掛沒有跟著 WordPress 的核心系統一起更新,網站可能就會開始出現問題。…
-
帶路姬在「五天自學衝刺班」的系列教學裡,我推薦新手們購買「A2 Hosting」的虛擬共享主機,搭配「Avada」的佈景主題,之後,有許多新手在社團中或私訊,陸續問了帶路姬許多相關的問題,社團裡的帶路老師們都很熱心的幫忙回答,我想就統一把 Avada 的相關問題統整到這裡,如果大家想知道答案的話,只要加入帶路姬學園的 Facebook 社團就可以看到了喔! 選主題,好看比較重要還是好用比較重要? https://m.facebook.com/groups/2188631598047942?view=permalink&id=2217575481820220 以上是針對是否要選擇 Avada 主題的一些說明,希望對大家有幫助囉,下面我列一些常見問題,答案全部都在帶路姬學園的臉書社團的「單元」資料裡喔! [Avada] 如何製作數字動畫的特效?(Counter) [Avada] 如何修改 Sticky Header 固定選單的樣 式呢? [Avada] 作品集列表的呈現方式怎麼改? [Avada] Blog頁面的設定與封面照的特效 [Avada] 要用Portfolio還是 WooCommerce 來做產品列表呢? [Avada] 圓圈圈的內容怎麼做 ? [Avada] Fusion Builder裡的內容不小心刪掉了怎麼辦? [Avada] Footer 頁尾欄位裡的空白太多怎麼辦? [Avada] 如何做圖片塞滿欄位的效果? [Avada] 頁面裡的Slider不見了怎麼辦? [Avada] 如何快速匯入範例頁面 小工具是什麼? 網站側邊欄裡的東西從哪裡改? 看不懂主題怎麼用怎麼辦? 主選單如何增加 「不要連結」 的項目? 看了Avada 的教學後 , 可以買其他主題嗎 ? 加碼分享,同學們常問我,「一定要選 A2 Hosting主機嗎?」「不能用國內的嗎?」「可以用 Bluehost嗎?」 其實帶路姬自己親身經歷下,所以最後我只挑了三個主機商推薦給大家,就是因為這三家真的非常穩定,也不會出怪問題,後台速度也很快… 而且,我常常在來諮詢的同學的網站後台,發現他們的後台真的好慢啊… 我都很懷疑這麼慢要怎麼做事啊… 他們才說,當初已經買了 XX 主機,已經買了X年,真可惜沒有早一點認識我… A2 Hosting 主機的好處: 前台後台速度都很快 客服非常快 提供免費搬家服務 30天內零風險試用、可全額退費,30天後可依照使用比例退費(等於不需要綁約) 匯入主題的範例內容時,不會因為PHP設定不符合而匯入中斷 (其他家常常發生) 遇到DDoS攻擊時,主機商因為規模夠大,可以處理的方式較多,讓網站不會斷線 (我就常聽到香港和台灣主機,一遇到DDoS就束手無策) 網站後台不會使用到一半就出現 5xx 伺服器錯誤訊息 不會因為主機設定的問題,造成中文內容和照片顯示不出來 不會在 CPanel 控制台胡亂強制備份,無意義的佔用主機空間 以上大概是為什麼我一直規勸 (不是推薦) 新手選擇 A2 Hosting 的原因,一開始學習 WordPress 已經有點辛苦了,千萬別讓爛主機再來攪局,無端浪費大家寶貴的時間… 另外,因為 Avada 主題的功能真的很多,建議是搭配效能比較好一點的主機,A2 Hosting 或 Cloudways 會是比較好的選擇,可以讓 Avada 網站瀏覽起來更快更順暢。但是,如果你的預算比較低,也是可以考慮買 Bluehost ,他和 SiteGround 有一樣的優點,但是他的速度真的慢一些,可能就盡量不要放太多的內容,或者圖片一定要壓縮過後再上傳喔。 參考閱讀:A2 Hosting:最省錢的主機買法與使用攻略(超易懂、含測試站) 好的主機就像衛生棉一樣,只有剛開始做網站時你會意識到他的存在,之後,你就專心的做網站,幾乎都忘記主機的存在了,就不用整天鬱悶心情不好了… (哈哈,這個比喻大概女同學比較能感受得到)
-
進階的內容編輯器的最終目標? 讓使用者不用寫程式就可以做出各種排版的頁面 與新增各種互動式的內容。所見即所得,用視覺化的方式直接建立內容, 用拖拉的方式來改變內容位置等等… 如果用預設的內容編輯器 來編輯網頁時的樣子 頁面排版比較單調 如果用進階的內容編輯器 來編輯網頁時的樣子 頁面排版比較有變化 知名的編輯器有哪些? ElementorBeaver BuilderDivi BuilderFusion BuilderWPBakery Page Builder… 進階的內容編輯器怎麼用?有共通點嗎? 畫棋盤 1. 新增列 Row (Container) 2. 新增欄位 Columns 在格中放置內容 3. 插入元素 Element (Module) 四種編輯器的簡短示範 進階的內容編輯器都包含什麼功能? 編輯內容區塊 (建立、複製、刪除) 儲存區塊成樣板 從樣板庫快速加入「範例區塊」 在手機上顯示或隱藏 什麼主題都能裝任何內容編輯器嗎? Elementor/Beaver Builder: 主題要支援全寬的版型 Elementor/Beaver Builder: 主題要可以隱藏頁面標題 Divi Builder 只能用在 Divi 的主題 Fusion Builder 只能用在 Avada 主題 UX Builder 只能用在 Flatsome 主題 知名的編輯器的最大特色? Elementor: 可以「輕鬆完美」掌控邊界空間、可以快速匯入範例「區塊」、可以從「選單模式」快速移動區塊的上下順序、可以搭配 Toolset來建立動態內容的網站。 Beaver Builder: 搭配 Pods 和 Beaver Themer 可以快速創造自訂內容類型的彙整列表頁面。 Divi Builder: 可以快速切換「視覺模式」與「區塊模式」的編輯方式 Fusion Builder: 內建的元素很多,不需額外購買,搭配Avada主題,整體功能彈性大。 WPBakery Page Builder: 內建的元素很多,不需額外購買元素,可搭配大部分的主題。 內容編輯器的未來? WordPress 5.0 起預設搭載 Gutenberg 內容編輯器,其視覺化的編輯方式,是否將完全取代其他現有的內容編輯器? 現有的內容編輯器將做什麼樣的改變?才能與Gutenberg 完美共存? 請和帶路姬一起關注內容編輯器的未來… 內容編輯器哪裡買? Elementor 官方網站 Beaver Builder 官方網站 Divi Builder 官方網站 Fusion Builder /Avada 主題官方網站 WPBakery Page Builder 官方網站
-
帶路姬在社團中,時常聽很多同學說,英文不夠好,不想用國外的主機等等… 其實,基本的WordPress的操作真的非常簡單,否則也不會全球有1/3的網站都是用WordPress做的了,可是,畢竟因為佈景主題和外掛大部分的作者都是外國人,也不是所有的主題和外掛都已經本地化,所以,偶爾要面對英文是在所難免的事… 不過,身為台灣人,英文不夠好怎麼辦?不習慣看英文的教學文章或後台介面怎麼辦? 帶路姬今天來教大家,透過Chrome瀏覽器的擴充功能,就可以馬上把網頁中的英文瞬間全部翻譯成中文喔! 使用方式非常簡單: 安裝Chrome 瀏覽器 安裝「Google翻譯」的擴充功能 安裝好後,記得在Google翻譯的擴充功能選項的地方改一下設定 (請看影片) 就可以開始使用了喔! 是不是很棒呢?記得幫我按讚分享喔!謝謝你們!❤️