wordpress 佈景主題 Newspaper 不支援中文網址

之前有一個 wordpress 架站的案子,佈景主題使用 Newspaper ,最近遇到發現 tag 點進去頁面會一律顯示 403 ,找問題找半天想說到底卡在哪裡。如果預設網址就沒有問題,但只要改成自定網址結構,就會出事。但這時候我原本以為是不是 .htaccess 有什麼問題。後來想說是不是 plugin 相衝,但問題是我安裝的是跟佈景主題相關的必要 plugin,如果不啟用就會直接破版,所以也無法把 plugin 移除測試。

後來又找了幾個方向,想說是不是網址編碼有問題?因為我發現自定網址把單篇文章改成中文網址的時候,也會顯示403,如果是純英數沒有中文的網址就正常。找到早期(十幾年前) wordpress 確實對非拉丁語系的網址會有把網址截短的問題,但看起來又好像跟我遇到的問題不太一樣。因為我遇到的問題不是網址編碼被截斷,而是網址正常但頁面 403。而且我的中文網址經編碼後並沒有超過系統預設的長度。

後來在外國網站找到這篇:How do I do ‘non-English characters in a WordPress URL cause 404 error’ in WordPress? 我覺得這篇是關於非英文語系頁面網址遇到錯誤整理的最詳細的一篇。其實他提的可能性跟前面我找的資料差不多,但有提到佈景主題或外掛都有可能跟自定網址衝突。我才用我自己的部落格測試,發現一樣的網址結構設定,我的部落格就是正常的,我的部落格也有安裝別的付費佈景主題。所以這樣比較下來那應該就是佈景主題(或相關外掛)跟自定中文網址相衝突。

Newspaper 必要安裝的外掛有兩個:tagDiv Composer , tagDiv Cloud Library。因為必要安裝,不裝就沒辦法自定頁面設定,所以對我來說他就是這個佈景主題的一部分。總的來說就是 Newspaper 佈景主題不支援中文網址。上面那篇文章強調僅能使用 ASCII 編碼,後來測試唯一解法是一個一個去把中文tag的代稱改成純英文,不要用預設的中文。只要讓網址只使用英文數字,網址就可以正常顯示。也就是確定 Newspaper 僅能使用符合ASCII 編碼的網址。

我本來以為是一開始架站就這樣。結果我回頭看以前提供給業主的網站使用說明,我裡面就建議要設定標籤,而且當時給的標籤頁網址後面就是中文。代表最早以前一開始架好站時其實是沒問題的。這種中間經歷過 Newspaper 版本大升級,我不太確定是不是反而後來的版本衝到。但為了系統安全也不可能去降級。只能說就是遇到了只能這樣…

wordpress 佈景主題與外掛使用心得整理

這些是最近這一個月使用測試過的佈景主題與外掛,把一些未來還有機會使用的外掛記錄一下。


佈景主題

divi

非常強大。與其說是佈景主題,不如說是佈景主題自定器 / 佈景主題引擎。我太久沒接觸wordpress的佈景主題,不知道現在的佈景主題已經發展成這樣。簡單來說 wp 架構下的所有頁面都可以自定,以前要透過改 code 的方式做的很多事情,用這個可以 no code 就做到。但有寫 code 背景的人用起來應該還是會比沒背景的人用會來的更得心應手。

divi 已經發展出一套自己的生態圈,所以除了很多用這個做出來的各種佈景主題可以下載使用,還有很多 divi 的外掛,可以做內容區塊的擴充。

費用除了月費訂閱也有買斷的方案,買斷方案對接案者來說算是可以投資的東西。建議年底黑色星期五或新年初特價的時候入手。

Newspaper

這是以前別的案子用過的佈景主題,想說這篇寫了就一起記錄一下。他比較接近我印象中的佈景主題,但是又比那些佈景主題強一點,就是有很多現成模組跟樣板,拉下來之後自己最多做小部分的調整。這個佈景主題非常適合新聞類網站。我當時是拿來做一個出版社的網站,也是蠻合適的。買斷制,買斷以後若版本有更新,可以免費升級。


表單外掛

Contact Form 7

非常老牌的表單外掛,在我一開始玩wordpress就有的外掛。現在很好的是有專屬的電子郵件儲存外掛 Flamingo。搭配使用就可以把所有表單記錄在後台。

另外用 divi 的外掛可以很方便的自定 Contact Form 7 的樣式。

Forminator

除了聯絡我們,還有專門適用問卷調查跟測驗兩種類型。在設定頁面就有留自定css的欄位。單選多選的項目免費版就可以設定「圖片」。


Coming soon 維護中頁面外掛

SeedProd

可以自定 coming soon,維護中的頁面。如果網站本身沒有使用 divi ,可以用這個外掛處理。包含簡易的版面設定,設定方式類似 elementor。

Divi Coming Soon

這功能很簡單,就是直接指定一個頁面作為 Coming soon。設定之後,只要沒有登入狀態,連到網站上任何一個頁面都會導去 Coming soon。如果要自定頁面內容要額外搭配別的外掛。


網站安全外掛

WPS Hide Login

可以修改預設後台網址的外掛,很輕量。輕量到他設定頁面甚至沒有獨立一個,直接放在「設定 > 一般」的頁面最下面多一塊 WPS Hide Login 而已。但是有時候會遇到後台網址一直轉去 404,但又不是每一個網站都會遇到,我手上三個網站裡面本來都裝這個,結果有一個站一開始很正常,突然有一天不知道為什麼遇到這個問題,怎麼都解不了問題。所以後來我就換成別的外掛。

Easy Hide Login

可以修改預設後台網址的外掛,也很輕量,獨立的設定頁面。不過他們因為有付費版,所以設定頁面上廣告多很多。

WP Ghost Lite

跟上面兩個外掛比,這個應該比較可以稱得上「網站安全外掛」。但前面兩個我主要是要把後台網址改掉,所以就一起歸類在網站安全外掛上。

這個外掛很強大,除了可以把後台網址改掉外,還可以幫你掃描網站,提示你哪些有安全問題建議調整修正。因為 wp 是開源,也就意味大家都拿的到原始碼,很多預設資料夾大家都知道位置在哪。他可以改掉前台顯示的預設位置。

實際上功能更多,但其他我不太會用就沒特別設定。比較有怕入侵的網站我都會裝這個外掛,當做保平安。

All In One WP Security

這個是以前用過的外掛,就順便記錄一下。他跟 WP Ghost Lite 很像,屬於可以稱得上是「網站安全外掛」。還有像防火牆等等的設定。不過這個缺少像 WP Ghost Lite 可以把一些預設資料夾路徑(至少對外顯示)改掉的功能。但其他安全性相關的設定看起來比較多。


自定欄位類外掛

Custom Post Type UI

可自定 Post Types ,如果只是要自定 Post Type 但沒有要額外的自定欄位。用這個外掛就足夠。舉例來說,網站可能有最新消息,跟活動資訊,雖然欄位都只需要標題跟內文,但是你希望這兩項在wp後台是直接左邊有兩個選項分開選擇,且兩項的分類也要分開管理,而不是單純用wp的分類去區分兩者,那就可以用 Post Type 來設定。

Advanced Custom Fields

如果除了要自定 Post Type 且要增加欄位,那就要用這個外掛,因為這個外掛可以增加 Post Type 也可以自定欄位。我原本以為他只能自定欄位,所以一開始同時裝了Custom Post Type UI,後來才發現裝了這個就不用裝前面那個外掛了。

舉例來說,如果網站要增加「產品內容」,那很顯然欄位會跟「最新消息」差異來得大很多,就不太適合用文章裡面的分類單純做區隔,這時候就可以用這個先增加 CPT ,然後再增加針對產品展示的自定欄位。

如果不是有特別欄位的需求,免費版就已經包含了大部分會使用到的欄位格式。付費版有一些比較特別的欄位格式,未來某個案子有機會用到。但目前還沒用。等用到再來分享心得。


批次匯入外掛

WP All Import

操作上很直覺的外掛程式。就是先上傳自己的 csv ,然後會進入配對流程,把自己的 csv 欄位跟實際匯入的資料欄位做配對,然後匯入完成。

實際測試,免費版除了圖片欄位(文章縮圖)不能匯入外,所有預設的文字欄位都可以匯入。如果 CPT 使用的欄位也是既有 post type 有的預設欄位,也可以匯入。

若要匯入自定欄位就要用付費版了,只有提供訂閱制,訂閱制還分很多種方案,價格有點高。

Import WP

我一開始其實不會操作,以至於不知道怎麼用。後來用了 WP All Import ,想說流程是不是應該差不多?再回來突然看懂了….

簡單來說一開始 WP All Import 的介面比較簡單,就是叫你上傳檔案。Import WP 一開始匯入提供很多種來源設定方式,反而讓我看不懂要怎麼用。

針對匯入 post type 的部份,免費版只能匯入 post ,不能匯入 CPT 。但是他可以匯入縮圖,就是把指定圖片位置設定為縮圖。但設定上要多勾一個選項。我一開始不知道的時候匯入失敗,但看他網站上明明寫說免費版的可以,想說應該是我哪裡沒設定好,後來才找到在哪裡設定。

若要可以所有 CPT 都能匯入,以及匯入自定欄位,就要付費版,買斷制,價錢還算可接受。因為某案子有這方面的需求,所以先研究起來。價格因素會選擇這一個外掛。


其他外掛

Advance Custom HTML

這是安裝 Advanced Custom Fields 選錯結果誤打誤撞安裝到的。他是在寫文章的時候,左邊區塊的一個選項。如果你要在文章裡面安插一些自定要運作的 code ,預設區塊有「自定HTML」可以選。跟預設的差別是他底是黑色的,算是在後台自己編輯內容的時候,比較好做一個區隔吧。另外他除了預覽跟 html ,還有一個 html with 預覽,這時候預覽會用浮動視窗顯示,然後打的 html 都會即時在預覽裡面顯示,蠻方便的。

用AE製作向量動畫參考資料

Upwork收到一個工作邀請,雖然因為英文能力還不夠沒辦法接,卻因此找資料發現原來現在AE搭配plugin可以匯出向量動畫。上網找了一下相關文章,中文資料大多是在2021之後發佈,代表這東西還算新(至少不太舊),可以來摸摸看。以下是其他找到的資料筆記

英文資料:

中文資料

幾個重點

  • AE編輯動畫的時候要把置入的ai圖檔轉換成向量圖層:
    預設不管置入什麼檔案,他匯出都是點陣圖檔,所以要做成向量動畫,或是直接在AE內編輯節點位置做動畫效果,圖層都要轉換成向量圖檔。我之前不知道可以這樣,總會覺得ai放到AE內可以做的動畫效果沒有An內來的彈性,如果可以編輯節點,那可以做的效果會多很多,即使不是用在做向量動畫也是會方便很多。
  • AE要安裝Bodymovin的plugin:
    這是可以把AE動畫匯出成不同的SVG動畫格式,上面英文參考資料有兩個影片,一個是匯出成SMIL格式,一個是匯出成Lottie Animation。都是透過這個套件去匯出的。

之前就有疑惑有些網站的向量動畫不知道是怎麼做的,總覺得不太可能是直接寫原始碼去做,當時也不知道相關資料。這次收到的工作邀請裡面提到Lottie Animation,才去查到相關的資訊。感覺這部份很適合我來看怎麼使用。

leafletjs 使用筆記

因為用 google map api 在我的案子上不可行(簡單來說就是客戶不會想支付這部份的費用,也不可能請他們設定綁信用卡跟金鑰給我),那時候合作提案的公司給了我農業易遊網的網址,說那是他們想做的效果。我仔細看了地圖發現他們並不是使用 google map ,就研究一下他們是用哪個套件,想說不難使用的話也許我可以拿來用。

他們用的是這套:https://leafletjs.com/

由於我是 js 苦手,上網找其他說明有時候照貼 code 地圖也跑不出來。下面這個是我測試後確定可以跑起來的寫法:

head 裡面先引用這些

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>

body裡面則是這些

<div id="map" style="width:100%;height: 400px;"></div>
//地圖顯示的區塊

<script>

	const map = L.map('map').setView([25.06303099468595, 121.53381965219468], 16);
//建立一個新的地圖,中心位置設定在行天宮的經緯度,還有預設的倍率為16

	const customIcon = L.icon({
	  iconUrl: 'https://divi.joyhsu.com/wp-content/uploads/2024/12/icon@2x.png',
	  iconSize: [30, 37],
	});
//建立自定的地標icon圖示

	const tiles = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
		maxZoom: 19,
		attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
	}).addTo(map);
//引用OpenStreetMap,跟最大放大倍率為19

	const marker_1 = L.marker([25.06303099468595, 121.53381965219468],{icon: customIcon}).addTo(map)
		.bindPopup('<a href="https://www.youtube.com/" target="_blank">行天宮</a>').closePopup();
//第一個地標。如果使用自定icon需要在經緯度後面多加{icon: customIcon}
//因為我預設都不顯示彈跳視窗,所以用closePopup()
//如果要顯示就寫openPopup()

	const marker_2 = L.marker([25.063018150649686, 121.52995702521183],{icon: customIcon}).addTo(map)
		.bindPopup('<a href="https://www.youtube.com/" target="_blank">亞都大飯店</a>').closePopup();
//第二個地標

</script>

map 的 style 用行內樣式寫是因為我要置入在 divi 的區塊內,如果不這樣寫他高度顯示會不正常。如果是自己單獨寫的 html 的話, css 可以不用行內樣式寫。

之後使用比較費工的反而是要去手動查找地點的經緯度。這個就是去 google map 先搜到地點,在地點上按右鍵就會跳出一個框框,顯示該點的經緯度,拷貝起來即可使用。詳細可參考這篇的在 Google 地圖中查看地點座標

wp 的 divi 與 google api 相關設定

主要是有兩個東西會需要設定 google api:

  1. google font
  2. google map

divi 內使用 google font

如果只是要使用google font,在 divi 內設定google api的話,可以很方便的使用所有google font,會比下載字型檔案後上傳引入的方式好用很多。且若上傳,還得額外去調整php.ini裡面單一檔案上傳的限制調大。

設定方式如下:

  1. 到 google cloud 新增一個專案
  2. 啟用「Web Fonts Developer API」
  3. 建立一個憑證,取得金鑰複製起來,如果只使用字體的話,不用綁信用卡
  4. 回到wp後台的 Divi Theme Options ,到 General 的 Google API Key 輸入金鑰,並且把Google Fonts Subsets 改成 enabled (這樣才能選同一字體的子集,以中文來說就是不同的粗細)後儲存
  5. 之後再使用 divi 設定字體的時候,輸入字體名稱(字體名稱要到 google font 去看他的英文,例如思源黑體就是 Noto Sans TC)就可以搜到 google font 的相關字體來使用

divi 內使用 google map

這個主要是使用 google map api 的方式來使用 google map。如果只是使用 iframe 嵌入,不需要額外設定 google api

設定方式如下:

  1. 到 google cloud 新增一個專案
  2. 啟用的API:粗斜體這三個我確定一定要開。特別是 Address Validation API ,這個若不開的話,在 divi 裡面的 map 模組想設定地址去標地標就會沒辦法設定。其他是跟map有關的api,我也有開,但不確定哪幾個跟 divi 的 map 模組有關
    • Maps JavaScript API
    • Geocoding API
    • Address Validation API
    • Maps Elevation API
    • Maps Embed API
    • Maps SDK for Android
    • Maps SDK for iOS
    • Maps Static API
    • Places API
    • Places API (New)
    • Roads API
    • Street View Publish API
    • Street View Static API
  3. 建立一個憑證,取得金鑰複製起來,因為要用 map api ,系統會要求綁訂信用卡
  4. 回到wp後台的 Divi Theme Options ,到 General 的 Google API Key 輸入金鑰
  5. 之後使用 divi 插入 map 模組的時候,map框框內資料就會正常顯示,輸入地址也可以正常把地點 pin 進去

網頁 sticky 特效

sticky 特效簡單來說就是網頁滑動的時候,可以把某個物件原本滑動但滑到某個高度後就固定在一個位置,然後再滑動到某個高度的時候,又不固定了讓他滑走。可以看像這個網站,滑動的時候左右區塊固定,但滑到底的時候,又不會固定了就往上滑走了。

然後上網找到這個網頁
https://www.hongkiat.com/blog/sticky-elements-jquery-plugins/

但他提供的特效更多種,應該說都跟滑動有關。除了滑動後「黏住(sticky)釘住(pin)」的效果,還有滑動後可以出現動畫這類的,像是 ScrollMagic,應該很多滾動動畫可能就是用這類的套件吧。

然後因為我要的效果是被黏住的元件太長的話,要先滑到底,到底才黏住。然後到母元件結束的時候就不要黏住。所以後來是選擇 HC-Sticky 看起來最符合需求,套用上也不會太困難。