標籤: wordpress

如何在 WordPress 中預覽 n8n 流程範本

技術

n8n 有很多好用的範本可以使用。如果我們也有很棒的流程要告訴大家，官方很貼心提供「n8n 流程預覽網頁元件」，可以在自己網站分享。我實作時遇到顯示失敗問題，也一併奉上解決方法。

wordpress 該如何安裝使用，有兩個方式：

方法(一)：安裝外掛

我們可以借助外掛「WPCode Insert Headers and Footers 」，將 n8n 流程預覽網頁元件的 javascript 加上去，這樣以後發文，就可以直接引用該元件不用每次都加。

　

　

　

<script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs@2.0.0/webcomponents-loader.js"></script>
<script src="https://www.unpkg.com/lit@2.0.0-rc.2/polyfill-support.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@n8n_io/n8n-demo-component/n8n-demo.bundled.js"></script>

寫文章的時候，選擇自訂HTML

　

# 輸入 n8n 語法
<n8n-demo workflow='n8n的節點json字串' frame=true></n8n-demo>

　

方法(二)：不安裝外掛，直接貼上 n8n javascript 與 n8n 語法


<script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs@2.0.0/webcomponents-loader.js"></script>
<script src="https://www.unpkg.com/lit@2.0.0-rc.2/polyfill-support.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@n8n_io/n8n-demo-component/n8n-demo.bundled.js"></script>

<n8n-demo workflow='n8n的節點json字串' frame=true></n8n-demo>

實際上我實作的時候，一直出現 json 錯誤

　

　

最後在 這個地方 發現有個神人做了一個 n8n 流程，其功能為：

將"流程 json 字串"，轉化成一個可用的 "Encoded URL" 字串

我們將 Encoded URL 取代 json，這樣就可以解決 Invalid JSON 的問題了。

　

該神人做好的 n8n 流程，我放在下面，我們只要修改其第二節點的內容，改成自己的 json 字串，第三節點產出的就是我們要的 Encoded URL。

題外話

由於「n8n 流程預覽網頁元件」只能顯示出英文，因此我請 gemini pro 改寫能顯示中文的版本(檔案在這），只是我不懂 npm ，最後載入失敗。

Leave a comment , , ,

wordpress 6.5.5 出現ERR_TOO_MANY_REDIRECTS error

其他, 技術

場景

  1. 有對外IP充當反向代理程式VM(CentOS 7.9)
    httpd reverse proxy 2.4.6
  2. 無對外IP，內部vm (RockyLinux 9.4)
    Docker CE + Container WordPress 6.5.5

讓反向代理程式連到wordpress，網頁測試居然出現ERR_TOO_MANY_REDIRECTS 錯誤

爬文之後，要在wordpress的wp-config.php加上

if (isset($_SERVER['HTTP_X_FORWARDED_PROTO']) && $_SERVER['HTTP_X_FORWARDED_PROTO'] === 'https') {
  $_SERVER['HTTPS'] = 'on';
}

再不行，要加上

if (isset($_SERVER['HTTP_X_FORWARDED_HOST']) && isset($_SERVER['HTTP_X_FORWARDED_PORT'])) {
  $_SERVER['HTTP_HOST'] = $_SERVER["HTTP_X_FORWARDED_HOST"];
  $_SERVER['SERVER_PORT'] = $_SERVER["HTTP_X_FORWARDED_PORT"];
}

來源 https://lukashermann.dev/writing/wordpress-too-many-redirects/

Leave a comment , , , ,

關掉wordpress的xml-rpc API呼叫功能

技術

最近發現我安裝的nextcloud常常優雅的關閉(shutting down gracefully)，當然原因很多很多，終究是我不好(一副政治人物的口吻)；我接著查看log的時候，意外發現有個xmlrpc.php一直被呼叫，於是查了一下，原來是被攻擊了，當然這種無差別攻擊最後也是失敗告終。

像我這種對資安敏感度差的人，又管很多很多開源網站，一般只知道版本更新，不看是否有資安漏洞，除非網站出問題。現在問題來了，我爬了文，一般都建議關閉xml-rpc api，反正99.99%都用不到。wordkpress裡面就能找到停用XML-RPC外掛。

同場加映，我從wordpress 4.9開始使用，裡面有個阻擋廣告留言的Akismet Anti-Spam，很好用，後來升級5.x之後，又出現另一個Akismet Anti-Spam，所以我的網站有兩個Aiti-Spam但版本不同，我也不以為意；但期間我這個網站一直會要求訪問網站的人「同意訂閱」，這問題我找了很久，終於抓到是舊版Akismet Anti-Spam搞的鬼，或許是該外掛有漏洞我不自知，兼沒移除所致。現在刪掉就清爽多，也不再詢問訪問網站者是否訂閱惹。

舊版Akismet Anti-Spam存在的時候，會有一個wp_pushup目錄，裡面時常出現一個js檔案，刪了又會出現，導致來我網站的人們，都會被要求訂閱；在移除舊版Akismet Anti-Spam之後，該wp_pushup目錄也隨之被移除，也不會出現要求訂閱的訊息了。

Leave a comment , , , ,

小公司應用軟體系統-戰略與戰術

技術

對於一個小公司來說，當然非常想用各式各樣的應用軟體系統，可是公司沒人懂IT，對於所謂的上雲端更是丈二金剛摸不著頭腦，搞不清楚，若找來軟體公司，公司說了一大堆，一開口說預算多少，老闆也跟著張大口嚇得不要不要的。

所以我常建議軟體公司，必須提供小企業能負擔的解決方案，至少要能解決小公司「辦公室能用到的軟體系統」，如nextcloud這樣的雲端檔案系統，同樣也必須做到虛擬伺服器(proxmox ve) + 虛擬主機(容器服務)；一個應用系統必須虛擬化、容器化，千萬不要安裝在一台實體主機(除非是故意的，這樣才能賺錢，反正客戶都不懂)。

前幾天看到YT閱部客談到《跨能致勝：顛覆一萬小時打造天才的迷思，最適用於AI世代的成功法》這本書，提到「戰略與戰術」，我相當認同其中的見解：單一專業的部分交給AI，綜觀全局的部分就交給人類。

https://www.youtube.com/watch?v=-j8MSMqDfs0

https://www.youtube.com/watch?v=-j8MSMqDfs0

軟體公司能提供給小公司的戰略重點就是「備份」，而且要麻瓜都懂的備份方式，我先前就遇到一家小公司透過朋友輾轉向我求救，他們IT突然跑了，沒有交接，他做好的系統是運行3年多的實體機，看起來搖搖欲墜，後端NAS也無人知曉如何登入。

我接手後，先確認他們只需要mail server 與 對會員收費網站(wordpress)，我花了很多功夫，終於移植到一台單一主機(ssd*1 for os、hdd*3 for zfs)，pve 8.0 +RockyLinux 9.2 +podman container。

系統移植成功後，還要考慮麻瓜備份問題，戰略戰術一併考慮，我額外安裝一個容器：nextcloud雲端檔案系統，透過此雲端檔案系統能連到外部空間的特異能力(external storage support)，直接俗又有力的掛載宿主(pve)主機已準備好的備份目錄，最後只要讓麻瓜安裝nextcloud 用戶端app，就能同步備份目錄到麻瓜其他檔案空間，達到離線備份的效果，離線異地備份就再也跟IT沒關(頂多半年協助做個還原演練即可)，我也能全身而退。

Leave a comment , , , , , , ,

nginx 反向代理wordpress容器，出現failed (111: Connection refused) while connecting to upstream

技術

系統大概長這樣，一個RockyLinux 9.2 主機安裝 iRedMail 1.6.3版(容器還在Beta版)，iRedMail安裝滿簡單的，很快就搞定；但因為太霸氣應改主機的nginx設定，並且深度修改，若這主機只當mail server倒是沒問題，但可惜因為種種原因需要再安裝一個wordperss容器，這就麻煩了，我得了解如何讓nginx使用反向代理方式(proxy)，才能連到wordpress，nginx反向代理設定似乎很簡單，也成功了，可惜log卻一直跳出錯誤：

connect() failed (111: Connection refused) while connecting to upstream

我祭出google大神，試了很多建議與解法卻失敗了，就在第9999次嘗試之後，突然意識到甚麼，將設定改了一下，只是簡單的將原本連到容器的方式 http://127.0.0.1:8080 改成該具名稱連線 http://www.test.com:8080 (該wordpress容器對外連結為https://www.test.com)，錯誤訊息居然就停止了，真是神奇。

proxy_pass http://127.0.0.1:8080;
改成以下具名設定
proxy_pass http://www.test.com:8080;

算一算農曆七月快到了，就當作是靈異事件好了。

Leave a comment , , , , ,

安裝wordpress(容器)掛載在子網址(目錄)

其他, 技術

安裝wordpress這麼多次，第一次遇到掛載子目錄的需求，也就是安裝完畢，透過反向代理程式，網址看起來像這樣：

https://xxx.xxx.xxx/subfolder

一樣感謝google, 我爬了很多文，說法很多，自己覺得修改檔案這方式很靠譜(非透過web設定)，可以避免掛載正式網址時候，若因錯誤很難進入網址改或是到資料庫研究要改哪個table：

1.、修改 wp-config.php

 define('WP_SITEURL', 'https://你的網站名稱/你的子目錄');
 define('WP_HOME', 'https://你的網站名稱/你的子目錄');
 #以下是可以不使用ftp就安裝外掛
 define('FS_METHOD', 'direct');

2、修改.htaccess (與wp-config.php都是在wordpress根目錄)

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /你的子目錄/
    RewriteRule ^index\.php$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /你的子目錄/index.php [L]
</IfModule>

3、nginx反向代理

 location /你的子目錄 {
    proxy_set_header Host $http_host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_headers_hash_bucket_size 128;
    proxy_pass http://容器ip(通常127.0.0.1):port/你的子目錄;
  }

4、apache 反向代理

等待遇到實例
Leave a comment , , ,

wordpreess直接播放mp4改由peertube串流系統

其他, 技術

wordpress有個外掛「Super Video Player」能播放mp4影音檔案，但是很耗流量，若放在雲端費用將會很高；因此有必要考慮改用串流方式播放，可以節省一些流量，有個peertube串流系統很棒，也可以安裝容器，我們公司使用到現在，很穩定又好用，安裝方式請按這裡。

朋友wordpress網站使用 super video player 播放mp4，可以隱藏下載選項，讓麻瓜使用者不是很容易取得(麻瓜以上就很容易了)；若要改成 peertube，則會看到下載選項，這樣朋友就不願意了，於是我爬文爬丫爬，最後發現只要加上一行，也能做到與super video player 一樣，讓麻瓜不容易取得/下載檔案。

[root@firewall ~]# docker exec -it peertube_peertube_1 bash
root@770eb53d9cf6:/app# find .|grep embed.html
./client/dist/standalone/videos/test-embed.html
./client/dist/standalone/videos/embed.html
./client/src/standalone/videos/embed.html
./client/src/standalone/videos/test-embed.html
root@770eb53d9cf6:/app# vi ./client/dist/standalone/videos/embed.html

## 編輯 embed.html ，在head之前加上以下語法，然後退出重新執行peertube容器
# 出處 https://framacolibri.org/t/how-to-disable-context-menu-for-peertube/10998
<style> .vjs-contextmenu-ui-menu { display: none !important; } </style>

## 編輯 embed.html ，body 改成以下這樣
<body id="custom-css" class="standalone-video-embed" oncontextmenu="return false" onselectstart="return false" ondragstart="return false">

另外peertube 連結要嵌在網頁上，只要滑鼠移到影片上，右鍵選「複製嵌入程式碼」，再稍微修改一下即可。


我使用 「aspect-ratio : 16/9」方式自動會依照網頁大小而微調 ，很方便

<iframe src="https://peertube.test.com.tw/videos/embed/1586a669-b649-4e3f-974c-ec4d42a0bf9e" style="aspect-ratio: 16/9;height: 100%; width: 100%;" frameborder="0" width="560" height="315" allowfullscreen="" sandbox="allow-same-origin allow-scripts"></iframe>

2023/08/20
—
後來發現peertube有個bug，就算網路正常撥放，chrome還是會出現轉圈圈的情況，但firefox不會，我後來發現乾脆先暫時停掉轉圈圈功能，一樣在head前加上一行。(很可惜peertube主要開發者很剛愎自用，以前就交手過了，所以我不會回報這問題，前幾週也有人反應，但都沒受到重視)

.vjs-loading-spinner{display:none!important;}
Leave a comment , , ,

自架wordpress避開docker早期–link參數，該如何連到mariadb資料庫

技術

以前安裝wordpress容器的時候，可以利用–link參數，綁定以有的資料庫容器(mariadb)，讓資料庫容器主機名稱變身成「mysql」，就可以不用安裝一大堆資料庫容器惹。(wordpress容器只認mysql這個主機(host)名稱，所以我們不得已而這樣做)

我先前的文章舊版(Docker)(WordPress)如何使用docker安裝wordpress (帳密皆為guest)，也是建議醬做；可是好景不常，docker終於受不了了，新版廢棄–link參數，podman也跟進。

當然會這樣做一定是為了區分子網路，方便管理使用，我也「被」樂見其成，因此我安裝wordpress也必須避開–link參數。

該如何做呢? 以podman為例子，首先我們要想一個很威的網路橋接名稱mynet(可自訂)：

 podman create network mynet

然後將以前就有的資料庫容器，加到這個網路橋接器上：

podman network connect mynet mariadb-container

接下來賦予資料庫容器別名，讓資料庫變身成wordpress心目中的mysql：

 podman network connect  --alias mysql mynet mariadb-container

這樣一來安裝wordpress就可以不用加上 –link 這個參數，且wordpress容器也能自動認得資料庫容器了。

先前的文章新版(Docker)(WordPress)如何使用docker安裝wordpress

Leave a comment , , , , , ,

自架wordpress網站如何重設管理帳號密碼

軟體介紹

wordpress 4、5、6這三個大版本，密碼皆使用hash方式加密，若我們忘記管理者帳號密碼，且無法從資料庫看到明碼密碼；此時如果你有資料庫(mariadb)管理者權限那就好辦了，可以先以資料庫的管理者帳號登入，該帳號為整個wordpress資料庫最高權限，而非wordpress管理者帳號；登入後，找出wordpress管理者帳號名稱，然後進行hash密碼加密。

網路上有提供該加密的網站，請google WordPress Password Hash Generator，就可以輕易產出密碼，甚至有些網站還產出SQL語法，修改一下語法內之管理者名稱即可使用，非常方便。

　－－

　－－

Leave a comment , , , , ,
1 2