分類: 架站實務

用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 進去

響應式圖片（Responsive Images）作法

參考文章：https://cythilya.github.io/2018/08/24/responsive-images/

google 的文章：https://support.google.com/webmasters/answer/114016?hl=zh-Hant

最基本的用法
<img src=”small.jpg”
srcset=”small.jpg 640w, medium.jpg 960w, large.jpg 1024w”
/>

裡面的640w，960w，1024w，就是
螢幕寬度640px時，顯示small.jpg
螢幕寬度960px時，顯示medium.jpg
螢幕寬度1024px時，顯示large.jpg

解決iphone、ipad 無法顯示自訂英文字體的問題

解法說明：https://stackoverflow.com/questions/9351352/font-not-getting-applied-in-a-web-site-viewed-in-ipad

線上產生自訂英文字形的 svg 字體檔：https://www.fontsquirrel.com/tools/webfont-generator

簡單來說，iphone系列不吃普通 .ttf 字體格式，所以你把這個丟到自己空間，只有一般電腦跟安卓系列手機會正常顯示你要的字體。蘋果系列手機跟平版使用 iOS devices 只吃 SVG format font files，就會 GG。

不過我在測試的時候遇到很奇怪的事情，後來回去看 stackoverflow 裡面，解答者底下有人的回覆。我懷疑我們遇到的是類似的狀況。

簡單來說就是我套用失敗，但我的狀況比較奇葩，就是我用線上svg字體產生檔他產生的範例檔案，在ipad上確實可以正常顯示。但是我套用到我自己的網頁的時候，卻又一直卡關。我交叉測試確認路徑是否正確，跟電腦還有安卓手機吃到的是否是我產生出來的檔案，都確認沒問題，但就是 ipad 上怎麼看都看不到，用無痕視窗開也一樣。

stackoverflow 裡面有人回說
We tried out the solution.. Still its not working… How ever its showing a default font not the original “whitney” font
Well.. we figured it out on our end itself.. the corresponding font “.otf” file fixed the problem.. thought of sharing it others.. (BTW svg didn’t worked for us)

我猜他可能遇到的狀況跟我類似。然後他們後來改用 .otf 的格式解決。

所以結論是有兩種解法

  1. 轉成 SVG format font files ，用上述工具會轉出 .woff 跟 .woff2 兩種。然後我測試的結果是如果手機曾經連到該網頁，莫名的還是會吃不過去。後來換瀏覽器好了以後才都好。感覺是 iphone 針對字體的快取這塊吃的有點難清除的感覺。
  2. 轉成 .otf。但這方法我沒用，所以不知道效果如何。

大概是這樣。

blogger 套用付費樣版 & 自訂 amp 版本

最近接了幾個案子都用 blooger ，有些之前不知道現在才知道原來可以這樣的東西記錄一下。

[教學] 自訂 Blogger 行動版範本與自適應設計原理

我本來以為 AMP 版本是自帶不能改。但看這裡寫是可以，只是要先從「主題 > 行動服務」那裡切換。他可以切換成不要用 AMP，直接用網頁本身手機版（其實就還是電腦版啦，只是有做RWD的顯示就會是手機版），或是用 AMP 但可以自訂樣版內容，但就要在行動版內的「主題」選擇自訂。這樣在自訂範本的時候，裡面才匯出現對應的原始碼讓你自己調整。

wordpress 架站樣板哪裡買？外掛推薦與踩雷紀錄

最近很常用 wordpress 架站，也因此用了一些 plugin 跟踩到一些以前沒踩過的雷。趁還有印象做一下紀錄

【web theme 網站樣板去哪買】

如果你跟我一樣主要要架的是「媒體站」，推薦可以到 wordpressplugintheme 買樣板，比起其他站他的樣板選擇其實不多，但重點是很便宜且沒有限制只能使用在幾個網址上。我這次幾個站都用 Newspaper9 這個樣板，可調整性蠻高的。因為在這裡買 theme 或 plugin 便宜太多，之後別的站我應該會考慮在這裡買一些 plugin 來玩玩試用。

【plugin 外掛要裝哪些？】

因為這次有個業主有一些要求，所以我有特別多找了一些外掛。但也因為以前沒裝過，踩了一些雷，在這裡就一起記錄一下。這裡我只列自己額外裝的，搭配樣板 Newspaper9 必要裝的我就不在這裡列出。

有雷外掛

All In One WP Security

有雷是後來發現裡面有個防火牆的設定，造成google機器人完全無法爬網站以至於不收錄內容。這根本宣判網站死刑….一開始我完全搞不清楚為什麼，跑去找 seo 大手朋友求救。後來自己重新去比照兩個站，想到有問題的站有多裝這個外掛，就去用英文搜了一下找到這篇 AIOWP security plugin blocks google from indexing site.

bingo！跟我用一樣的外掛，遇到一樣的問題。不過我沒有停用這個外掛，因為這個外掛有很多功能，讓我可以裝了他一個就夠。後來有找出擋掉 google bot 的設定大概在哪裡，最後解決問題。這裡來說說為什麼我還是保留這個外掛。

  1. 調整 .htaccess 加強網站安全性
    這是這個外掛最大的優點，他有很多設定，設定完他會給你一個數字，讓你知道現在整個網站的安全性提升到什麼程度。像我不是工程師，對 .htaccess 根本不熟悉，但其實在 .htaccess 增加一些調整，可以提高 wp 網站的安全性。這時候這個外掛就很方便，後台直接提供圖形介面，讓你勾一勾選一選就可以設定完畢，不用去了解語法要怎麼寫。
  2. 方便的匯出匯入功能
    直接提供 .htaccess 跟 wp-config.php 的匯出匯入功能
  3. 提供後台防護的相關功能
    我這裡直接寫我透過這個外掛設定跟可以查看的幾個東西

    • 隱藏 WP version info：不要讓人輕易就知道你這個站是用哪個版本的 wp 架設的
    • 限制後台最多連續登入次數
    • 設定強制登出時間
    • 查看目前有登入的帳號，可手動強制把這些帳號登出
    • 所有帳號的登入紀錄
    • 把預設wp-admin網址改成別的
    • 在後台登入加上 google 驗證碼：要自己先去申請 google api 金鑰，回來這裡勾選填寫後，後台就可套用 Google reCAPTCHA

這幾個是我覺得這個外掛好用且方便的地方，因為如果不是用這個外掛，我得另外找別的好幾個外掛才可以把上述設定都處理好。用這個外掛一次就可以解決很方便。

但這個外掛實際上可以做的設定更多，這個就請要裝的自己去研究吧！

然後踩到雷的部分，我後來推敲應該是在 firewall 那裡的設定，但因為我實在是太害怕網站不被 google 收錄了，所以這部分我索性直接把防火牆裡面所有設定都讓他恢復預設，就是都沒有勾，等於不設防火牆。這樣做以後 google 收錄的部分就恢復正常。但至於到底是哪些設定造成擋掉，我沒有那個實驗精神所以也不確定。只能說確定一定是 firewall 裡面的設定造成的。

所以這個外掛我還是會推薦下載安裝，只是設定的時候自己要多注意。

無雷外掛

Cloudflare Flexible SSL

最近我手上兩個媒體網站都是在 linode 上架站，使用 cloudflare 的免費 ssl。但是在 wp 上使用 cloudflare 的免費 ssl 是會有雷的。簡單來說就是如果直接使用 Cloudflare Flexible SSL ，會出現幾種狀況：

  1. 整個網站只要切到 https 路徑就會完全不對，以致於 css 跟 js 都會路徑錯誤，造成跑版跟使用不能。
  2. 網站無限 loop 死掉：如果自己在網站上用 .htaccess 強制把 http 轉 https，並且使用 Cloudflare Flexible SSL 的時候會發生。

我手上兩個站一個遇到1一個遇到2，兩者使用的解法也不同，基本上擇一種方法使用即可。在這裡簡單寫給大家參考，詳細的就請自己去找 cloudflare 的說明囉。

  1. 使用 Flexible SSL：如果要用這個SSL，必須要搭配使用 Cloudflare Flexible SSL 外掛
  2. 使用 Full SSL：如果不另外弄外掛，另外一種解法是自己主機上要先用自簽CA搭配 .htaccess 強制把 http 轉 https，然後使用 Cloudflare Full SSL。參考文章「使用 CloudFlare SSL 憑證後出現過多重新導向的問題」
  3. 其他參考：使用 Really Simple SSL 外掛：這個方法我沒用過，但是寫這篇文章的時候搜到。放在這裡給大家參考看看。參考文章「WordPress使用CloudFlare免費SSL快速教學」

Google XML Sitemaps

這是無心插柳裝的，但推薦裝一下，簡單來說就是自動生成可以提交給 google 的 sitemap，還不錯用。

Heartbeat Control by WP Rocket

因為一開始裝的時候發生一些狀況，所以去找了幾個跟效能調校有關的 plugin ，這是其中之一。參考文章「WordPress 效能調教心得」。下載外掛

Hyper Cache

網頁快取外掛，加速瀏覽者讀取網站的速度，同時可以降低主機負擔。
參考文章「Hyper Cache 效果非常好的WordPress快取外掛！」

Revision Control

wp有自動把文章不斷儲存版本的功能，但是我覺得這個實在太吃空間跟效能了。所以找了這個，可以自訂要儲存幾個版本，以及手動把多餘的版本刪除。

Simple Tooltips

因為網站文章有註解的需求，最後選了這個，簡單好用。

google map 改用 api方式嵌入

原因：幫客戶做網站，要嵌入英文版的地圖。原本先使用google map的嵌入語法。結果對方說我們看到的都是中文。雖然說只要對方語系會是英文就會自動轉，不過想說如果可以強迫轉英文是更好，客戶也比較沒得說嘴。所以就上網搜了一下。然後最近真的是覺得記憶退化嚴重，趁這次有做出來趕快紀錄一下，免得下次要用又要重來….

參考了這幾篇：

然後可以先比較一下google map平常提供的嵌入語法，是長這樣

<iframe src=”https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3615.550013102598!2d121.5367189!3d25.015402!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xec78966a3d7b4efc!2z5ZyL56uL6Ie654Gj5aSn5a2455Sf5ZG956eR5a246aSo!5e0!3m2!1szh-TW!2stw!4v1534244255311″ width=”600″ height=”450″ frameborder=”0″ style=”border:0″ allowfullscreen></iframe>

嵌入結果是這樣

API的嵌入語法則是長這樣

<iframe src=”https://www.google.com/maps/embed/v1/place?key=AIzaSyBOLwZNcRE9yn0-tythMMwX5OIkpEbpFWw&q=106台北市大安區舟山路237號(NTU Department of Life Science)&language=en” width=”600″ height=”450″ frameborder=”0″ style=”border:0″ allowfullscreen></iframe>

嵌入結果長這樣

參數說明：

wordpress 套用 templatemonster 樣板流程整理

這是以 wordpress 架站，跟 templatemonster 購買版型後的套板流程。之前寫在杉語網頁設計的部落格上。這裡留一份備份囉。

  1. 先安裝好基本的wp
  2. 裝完之後把mySQL先匯出備份
  3. 把樣板上傳到ftp，傳到themes資料夾、把樣板裡面的​uploads傳到wp-content資料夾裡
  4. 把plugin上傳上去並且啟用
  5. 把買來的樣板裡面的mySQL先複製一份出來，然後用文字編​輯器打開，把裡面的your_website_url_here用搜尋取代​改成你的網址，例如 http://www.firtalks.com.tw/ ，如果你在安裝wp的時候有把資料庫的前綴詞做修改，則要多一步把wp_找出來修改成你設定的前綴詞。然後存檔
  6. 到phpadmin把剛剛改過的mySQL匯入

大概這樣就可以先把樣板裝起來了。
簡單的樣板mySQL可以不用灌，不過有的樣板有用到自定資料內​容的，
或是有的有使用到「選單」設定的，
不灌裝起來會跟原來的有落差，
為了避免自己在那裡找到底問題出在哪，
建議還是先灌進去，再自己去後台研究資料對應會比較省時間。

不灌mySQL會有落差的原因大概有兩個

  1. 樣板內有自定的post-type：因為不灌就沒有這個資料，所以自然顯示就會有問題
  2. 樣板內有使用自定選單：等於他的下拉選單不是在分頁設定子母關係就會自動出現，要到選單內再設定，外加css寫法可能是用指定ID的作法寫，因此會發生自己新增的選單有顯示，但是樣式怪怪的狀況。

大概是這樣～

WordPress架站實務案例（三）

在前公司用Wordpress架過三個站，都是使用 templatemonster 的付費版型。有一個站因為沒續約，已經消失了就不寫囉，紀錄一下另外兩個。這個部份當初都有寫在杉語網頁設計的網站上，不過這內容原本就是我寫的啦，這裡保留一份順便加新的註解～

案例一：友敍企業有限公司
網址：http://usea.com.tw/
說明：
這個版型使用了很多的jQuery效果，像是右欄的相片展示，工程實績裡的照片展示。還有上方下拉選單。但是下拉選單在套用的時候發現原來的樣板在這個部分並沒有跟後台作完全的串接，當分類刪除，自己新增的分類沒辦法增加到下拉選單中。

考慮到未來客戶使用的擴充便利性，因此將原來有JQuery效果的下拉選單刪除，使用原始樣板的模組替代，CSS的部份自行重寫。工程實績的部份在原始樣板中也沒有跟資料庫串接，是純手工排版的。

註解：
事後想想，應該不是下拉選單沒有整合，而是那個樣板要使用 WP 內的「選單」去設定，但是當時只知道分頁在預設版型的情況底下，下拉選單都會自動新增。那時候對「選單」的設定不熟，所以才會做那樣的調整。

案例二：原宏企業
網址：http://www.yuanhorn.com.tw/
說明：
調整的地方主要有

  1. 首頁只保留表頭SlideShow與邊欄商品資料連結，
  2. 將SlideShow的高度做調整。
  3. 網站字體大小CSS調整
  4. 前台樣板中文化調整
  5. 將商品加註文字直接寫入到樣板內。

註解：
這個套版比較麻煩的地方是後來客戶希望可以調整商品列表內、每個商品的圖片尺寸。我原本以為是直接做在列表頁的樣板內，後來用圖片尺寸搜尋才發現不是，是寫在另外一個負責壓圖的程式檔案內。