零程式技能的網站建置-實作分享

更新於 發佈於 閱讀時間約 5 分鐘
raw-image

一開始,先來看看現在網站長怎樣 → https://chickensoupfamily.com/

raw-image

接下來我會按照我在Wordpress實作的歷程,從構思到弄出來的三個步驟來分享。

STEP1 想清楚要幹嘛並寫下來

如果你跟我一樣是0程式語言技能的人類,在將網站改版之前應該會覺得一團混亂,不知從何開始。沒關係,我們一步步來,寫下來自己的網站有哪些改版的需求(我的改版是指從「版面較為凌亂,不敷龐大內容量的」狀態改版成現在的樣子)。比如說我那時候就找了一面可以亂寫亂改的白板,寫下來…

raw-image

STEP2 從大結構到小細節,安排好順序再進行

(1)找一個適合的「佈景主題」(途徑:wp-admin/外觀)

在網站購買網域之後會比免費架設網站時多出許多「佈景主題」可以選擇。選擇時除了要找看起來順眼美觀的,更要確保該佈景主題的屬性是不是適合你的網站用途。


對我來說,「佈景主題」很像模板,選擇模板之前要先知道設計模板的人是為何而打造的,例如生產大量文章內容的網站,如果選到一個讓人放個人攝影照片作品集的「佈景主題」,那肯定覺得很難用。


所以我一開始先在「安裝佈景主題」的地方用關鍵字搜尋(下圖的搜尋欄位),例如敝網站是會放大量科普文章、人物故事、課程報導……,比較接近市面上的媒體/新聞網站。因此我就以「媒體/新聞/報導/內容」等相關關鍵字進行搜尋。搜尋後,針對被篩選出的佈景主題,進行「預覽模式」,看看誰的感覺比較合用,許多欄位、顏色都是可以改的,但重點是誰要修改的幅度比較小,想要強調的內容模式和你希望的比較相近?可以選2–3個進行下一步驟。


raw-image

(2)暫時關閉網站(途徑:編輯後台/設定)

我選的是「coming soon」,也就是網址和搜尋還是找得到網站,但會看到「即將推出」的字樣,這樣在改版期間來到你網站的人,至少會知道過幾天再來試試,不會以為這個網站倒了/消失了。

raw-image

(3)匯出(途徑:編輯後台/工具)

選擇「export」選取匯出「全部內容」,會下載了一個打包所有東西的檔案。看不懂那個檔案是什麼沒關係,先備份就對了!

raw-image

(4)更換佈景主題(途徑:wp-admin/外觀)

把剛剛選出來覺得可能適用的佈景主題按「套用」試試看,此時可以看出比之前只是預覽更完整的內容樣貌,然後選定一個最喜歡、要修改幅度相對最小的佈景主題。

raw-image

(5)開始調整細節:Menu、小工具、裝外掛、最後才是一些版面問題

整體而言,我傾向從越大的問題先處理,先把整體的menu(可能牽動「分類」)先調整好,接著設定小工具(可能牽動左右欄位、下方欄位),並安裝「適量」外掛(網路上有不少人提醒,外掛不是越多越好,裝太多有可能功能相衝或網站速度變慢;至於多少為「適量」,我也不知道,但我想就是裝一些需要的功能即可)。

以下列出一些我覺得還不錯的外掛,網路上都有許多教學,我也是爬文爬來的。當然我爬得過程也有很多看不懂,但我想就把是把想要的功能盡可能「打出來」,加上「外掛」兩個字,估狗就會盡可能幫你找到教學了,然後再盡可能找看得懂用弄得成功的使用!(並留意該外掛的下載使用數量、評分星星數、和自己的佈景主題是否相容)

  • Smart Slide:滿版橫幅飛照片上面可加字和連結按鈕
  • Chaty:漂浮聊天室,可自訂管道
  • AddToAny:分享按鈕,可自訂連結平台
  • Insert Headers and Footers:下方版權或固定欄位
  • All in One WP Migration:匯出匯入備份
  • Category Order and Taxonomy Terms Order:分類編輯,層次超清楚!
  • LikeCoin:創作有價,讓讀者登入並拍手,獲得回饋

STEP3 修改歪掉、漏掉的疑難雜症

在這個搬動的過程中,基本上是會把所有原先的東西都保留,但畢竟有這麼大的更動還是會有一些圖片被裁切到、尺寸不符,或是某篇文章漏掉等小問題發生。建議不要在前面處理「大結構」的過程中做這些「小細節」的處理,不然會一直覺得進度被卡住,又或者在修改其他大結構時,又有小細節歪掉,以致白做工。

本文轉自J編聊自媒體,更多文章點我前往

留言
avatar-img
留言分享你的想法!
avatar-img
joyce editor. (J編聊自媒體)的沙龍
0會員
7內容數
你可能也想看
Thumbnail
這篇文章介紹了網站的整體架構以及開發時所使用的工具和套件,包括 Next.js、Tailwind CSS 和 socket.io 等。文章回顧了程式碼的重構與優化,幫助開發者提高工作效率,適合希望深入瞭解前端開發和網站架構的讀者。
Thumbnail
這篇文章介紹了網站的整體架構以及開發時所使用的工具和套件,包括 Next.js、Tailwind CSS 和 socket.io 等。文章回顧了程式碼的重構與優化,幫助開發者提高工作效率,適合希望深入瞭解前端開發和網站架構的讀者。
Thumbnail
這篇涵蓋了 Notion 建立網站的基礎,還有免費的教學資源,讓你不用寫程式,就能用 Notion 快速建立個人網站! Notion 簡易入口網站適合學生、求職、接案、小店家使用,能快速產出一個網站,節省成本又快速方便。
Thumbnail
這篇涵蓋了 Notion 建立網站的基礎,還有免費的教學資源,讓你不用寫程式,就能用 Notion 快速建立個人網站! Notion 簡易入口網站適合學生、求職、接案、小店家使用,能快速產出一個網站,節省成本又快速方便。
Thumbnail
如果你也是從事軟體相關工作的人,一定會遭遇突然需要你去學習一套你不熟悉的程式語言狀況吧,此時你會怎麼做呢? 是趕快去買書來看嗎? 還是趕快找一門程式課來上? 又或者乾脆去找會的同事來教學?
Thumbnail
如果你也是從事軟體相關工作的人,一定會遭遇突然需要你去學習一套你不熟悉的程式語言狀況吧,此時你會怎麼做呢? 是趕快去買書來看嗎? 還是趕快找一門程式課來上? 又或者乾脆去找會的同事來教學?
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
Thumbnail
前面已經安裝好IIS後,並且也新建站台了,那麼接下來這篇就會分享如何使用它
Thumbnail
前面已經安裝好IIS後,並且也新建站台了,那麼接下來這篇就會分享如何使用它
Thumbnail
本文章介紹了建立網頁的整個流程,包括設置 Templates, Views, Urls 等步驟。透過這些步驟,大家便能創建一個新的網頁,並成功測試。
Thumbnail
本文章介紹了建立網頁的整個流程,包括設置 Templates, Views, Urls 等步驟。透過這些步驟,大家便能創建一個新的網頁,並成功測試。
Thumbnail
本篇介紹:設定about與categories、tags相關獨立頁面,讓自己的文章利於統整與搜尋。
Thumbnail
本篇介紹:設定about與categories、tags相關獨立頁面,讓自己的文章利於統整與搜尋。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News