by Rain Chu | 2 月 21, 2024 | PHP , wordpress
在處理大量數據和高流量的情況下,WordPress網站可能會面臨效能問題。這時,使用高效的緩存解決方案變得尤為重要。Object Cache Pro是一款專業級的物件緩存插件,它能夠顯著提升WordPress網站的性能和響應速度。本文將介紹如何在WordPress中安裝和配置Object Cache Pro。
安裝Object Cache Pro
步驟1:獲取插件
先從Object Cache Pro官方網站 購買插件。完成後會取得授權金鑰。
步驟2:上傳並安裝插件
登入您的WordPress後台。
點擊「插件」>「新增」。
選擇「上傳插件」,然後選擇您下載的Object Cache Pro插件文件。
上傳並安裝插件。
跟一般外掛不一樣的地方,這邊要自己手動在 /wp-content/wp-config.php 中,去配置參數,配置方法如下
define('WP_REDIS_CONFIG', [
'token' => '<your-license-token>',
'host' => '127.0.0.1',
'port' => 6379,
'database' => 0, // change for each site
'maxttl' => 86400 * 7,
'timeout' => 1.0,
'read_timeout' => 1.0,
'split_alloptions' => true,
'debug' => false,
]);
define('WP_REDIS_DISABLED', false);
步驟4:清除舊資料
步驟4:啟用插件
安裝完成後,點擊「啟用插件」。
進階配置 Object Cache Pro
超快速度的配置
Object Cache Pro 進階配置,將序列話變成二進制,並且啟用快速壓縮等功能,再加入多主機支援
define('WP_REDIS_CONFIG', [
'token' => '...',
'host' => '127.0.0.1',
'port' => 6379,
'database' => 0, // change for each site
'timeout' => 0.5,
'read_timeout' => 0.5,
'retry_interval' => 10,
'retries' => 3,
'backoff' => 'smart',
'compression' => 'zstd', // `zstd` compresses smaller, `lz4` compresses faster
'serializer' => 'igbinary',
'async_flush' => true,
'split_alloptions' => true,
'prefetch' => true,
'strict' => true,
'debug' => false,
'save_commands' => false,
'prefix' => 'mysitename',
]);
define('WP_REDIS_DISABLED', getenv('WP_REDIS_DISABLED') ?: false);
安裝 PHP 外掛支援超快速配置
想要享用超快速 的 object cache pro 配置的話,有兩個前提要先做好
1.安裝igbinary serializer
簡易安裝
pecl install igbinary
pecl install --configureoptions='enable-redis-igbinary="yes"' redis
原始檔安裝
https://github.com/igbinary/igbinary#installing
2.安裝 lzf/lz4/zstd compression
簡易安裝
# Use prompts
pecl install redis
# Skip prompts
pecl install --configureoptions='enable-redis-lzf="yes" enable-redis-zstd="yes" enable-redis-lz4="yes"' redis
原始檔安裝
https://github.com/phpredis/phpredis/blob/develop/INSTALL.md
測試和優化
安裝並配置好Object Cache Pro後,您應該進行測試,以確保一切運作正常。您可以使用速度測試工具如GTmetrix來檢查網站效能的提升。
結論
使用Object Cache Pro可以顯著提升WordPress網站的效能。通過合理配置和優化,您可以為您的用戶提供更快、更流暢的瀏覽體驗。
by Rain Chu | 2 月 19, 2024 | woocommerce , wordpress
在預設的情況下,wordpress 中的 woocommerce 的商品頁面,會出現相關商品,如果需要移除,不需要安裝外掛,只要在佈景主題中的 function.php 加入一行程式碼即可
例如以下畫面,打算移除相關商品的區塊
我們找到使用中的佈景主題下的 function.php 並且加入以下程式碼即可
// 移除相關商品
remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );
by Rain Chu | 2 月 17, 2024 | wordpress
什麼是 HTTP/2 Server Push?
HTTP/2 Server Push 是一項新的優化技術,允許伺服器在客戶端請求之前推送資源。這可以提高頁面載入速度而不需要等待瀏覽器先發出請求,因為它可以減少客戶端請求的數量,這意味著網頁所需的 CSS、JavaScript 或圖像文件可以更快地被載入,從而減少頁面加載時間。
在 Cloudflare 中啟用 HTTP/2 Server Push
要啟用 HTTP/2 Server Push,您需要登入到您的 Cloudflare 帳戶並轉到「Speed」頁籤。然後,您需要點擊「HTTP/2」頁籤並啟用「Server Push」。
啟用 HTTP/2 Server Push 的優勢
WordPress 安裝 Cloudflare 外掛
在 wordpress 中,需要去安裝 cloudflare 官方的外掛
設定 wp-config.php
編輯 wp-config.php 檔案,並且加入設定
define('CLOUDFLARE_HTTP2_SERVER_PUSH_ACTIVE', true);
by Rain Chu | 1 月 26, 2024 | Elementor , wordpress
在網站開發的世界中,時間就是金錢。對於專業和業餘網頁設計師來說,尋找可以提高效率且功能豐富的工具至關重要。這就是為什麼 JetPlugins for Elementor 成為了眾多設計師的首選:它不僅能讓網站建設快速且高效,還提供了超過150個小工具(Widgets)和多種插件,以及動態模板,使得打造專業、具吸引力的網頁成為可能。
快速建立網頁
JetPlugins for Elementor 的主要賣點之一是它能顯著提高網頁建設的速度。借助於 Elementor 的拖放界面和 JetPlugins 豐富的小工具庫,即使是非技術背景的用戶也能快速搭建出專業級的網站。從基本的版面配置到複雜的功能元素,一切都變得觸手可及。
150+ 小工具
擁有超過150個小工具,JetPlugins 為用戶提供了前所未有的靈活性和創造性。這些小工具覆蓋了從基本的文本和圖像處理到進階的功能,如滑塊、表格、社交媒體整合等。這意味著用戶可以為他們的網站添加獨特和動態的內容,而無需編寫一行代碼。
多個插件和動態模板
除了豐富的小工具,JetPlugins 還提供了一系列的插件和動態模板,進一步擴展了 Elementor 的功能。這些插件包括了從表單建立器到高級圖庫顯示等等。動態模板則讓創建重複性內容變得輕而易舉,大大節省了時間和資源。
總結
總而言之,JetPlugins for Elementor 是一個強大且用戶友好的工具,適合任何希望快速且有效地建立專業網頁的人。它豐富的小工具、插件和動態模板使得設計工作變得簡單且有趣,無論你是專業設計師還是剛入門的愛好者。如果你尋求一個能讓你的網站設計工作更上一層樓的工具,那麼 JetPlugins for Elementor 絕對值得一試。
JetPlugins for Elementor
by Rain Chu | 12 月 20, 2023 | wordpress
在WordPress中利用JavaScript隱藏特定欄位是一種有效的方式來改善網站的用戶體驗和介面設計。這需要創建並嵌入自定義的JavaScript腳本到你的WordPress主題中。這個過程涉及幾個關鍵步驟,包括在主題資料夾中創建JavaScript檔案、編寫用於隱藏特定元素的JavaScript代碼、並透過functions.php
檔案將這個腳本加入到WordPress網站中。
1.創建JavaScript檔案 :
在你的主題資料夾(通常位於wp-content/themes/你的主題名稱
)中創建一個新的JavaScript檔案。例如,你可以創建一個名為custom-script.js
的檔案。
2.編寫JavaScript代碼 :
在custom-script.js
檔案中,寫下用於隱藏欄位的JavaScript代碼。例如,如果你想隱藏一個ID為my-field
的元素,代碼可能如下:
document.addEventListener('DOMContentLoaded', function () {
var field = document.getElementById('my-field');
if (field) {
field.style.display = 'none';
}
});
3.將JavaScript檔案加入到WordPress :
在你的主題的functions.php
檔案中,使用wp_enqueue_script
函數將剛剛創建的JavaScript檔案加入到你的網站中。例如:
function add_custom_scripts() {
wp_enqueue_script('custom-script', get_template_directory_uri() . '/custom-script.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'add_custom_scripts');
這段代碼會將你的custom-script.js
檔案加入到WordPress,並確保它在網頁加載時被執行。
4.更新並檢查你的網站 :
更新你的WordPress網站並訪問前台,檢查欄位是否已被隱藏。
5.注意 js 的路徑
如果你使用的是子佈景主題,那需要把 get_template_directory_uri() 更改成 get_stylesheet_directory_uri()
function add_custom_scripts() {
wp_enqueue_script('custom-script', get_stylesheet_directory_uri() . '/custom-script.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'add_custom_scripts');
這個技術對於希望定制其網站外觀和功能的WordPress用戶來說非常有用,特別是對於那些希望隱藏不必要元素以簡化頁面佈局的用戶。雖然這個過程可能需要一些基本的PHP和JavaScript知識,但它為用戶提供了增強和個性化其網站的機會。
值得注意的是,在進行這些更改時,應該小心操作,並在更改主題檔案之前進行備份。此外,如果你使用子主題,應在子主題中進行所有更改,以避免在主題更新時丟失定制的代碼。這種方法不僅提高了網站的專業程度,還有助於保持良好的用戶體驗。
延伸閱讀:
by Rain Chu | 6 月 30, 2023 | web , wordpress
Redis作為一款開源的高性能key-value數據庫,已經在眾多頂尖科技公司和網站獲得廣泛應用。本文將引領您走過安裝和配置Redis資料庫的過程,並提供實用的優化技巧,助力您的系統性能達到新的高峰。
為什麼選擇Redis?
首先,讓我們理解一下為什麼您應該選擇Redis。Redis以其極速性能、靈活的數據結構和高可用性成為獨一無二的選擇。它可以作為緩存,消息佇列,以及在高壓情況下用作可靠的數據存儲。
安裝Redis
Ubuntu安裝Redis
sudo apt install redis-server
Windows 安裝 Redis
直接下載微軟製作的安裝包,下載網址 https://github.com/MicrosoftArchive/redis/releases
驗證Redis是否安裝成功
如果是剛安裝好,並且在同一台機器上可以直接打指令 redis-cli 就可以連線
redis-cli
redis-cli ping
redis-cli info
如果是別台機器的話,記得要開防火牆,並且指定 IP 以及指定 Port 和指定密碼
redis-cli -h 192.168.0.X -p 6379 -a 123456
設定Redis
設定檔案通常位於 /etc/redis/redis.conf ,編輯完記得要重開服務 sudo systemctl restart redis ,不確定conf檔案的位置的話,可以用 redis-cli info 查找,會顯示以下資訊
executable:/usr/bin/redis-server config_file:/etc/redis/redis.conf
sudo nano /etc/redis/redis.conf
bind
:若要遠端連入Redis伺服器,就會需要設定 bind 0.0.0.0 ::
databases
:設定可用的資料庫數量,在索引的時候是從0
開始數,預設會使用索引值為0的資料庫。這個項目的預設值是16
save
:設定在一定的間隔時間內若資料庫有發生一定程度的改變,就將記憶體中當下的資料存成檔案(快照)。save
的撰寫格式為save <seconds> <changes>
,save 60 10000
表示在60秒內至少有10000個key被改變則做一次快照。
requirepass
:設定客戶端與Redis伺服器連線時所需要的密碼。預設沒有設定,表示不啟用密碼驗證功能。
maxclients
:設定最大連線數。預設沒有設定,當作10000
。
maxmemory
:設定最大的記憶體使用量,如果記憶體用量達到限制,就會根據maxmemory-policy
項目設定的策略來嘗試移除key,如果無法移除,就會使該次插入或修改的操作回傳錯誤。預設沒有設定,表示不限制。
maxmemory-policy
:記憶體用量達到限制時採取的策略。預設沒有設定,當作noeviction
,不移除key。其它策略如下:
volatile-lru
:根據LRU演算法移除過期的key。
allkeys-lru
:根據LRU演算法移除key。(不管有沒有過期)
volatile-lfu
:根據LFU演算法移除過期的key。
allkeys-lfu
:根據LFU演算法移除key。(不管有沒有過期)
volatile-random
:隨機移除過期的key。
allkeys-random
:隨機移除key。(不管有沒有過期)
volatile-ttl
:移除已過期的key中,TTL最小的key。
#bind 127.0.0.1 ::1
bind 0.0.0.0 ::
重啟服務
sudo systemctl restart redis
清除Redis的資料
利用 redis-cli 進去 Redis 主機後,輸入
清除單一資料的指令是
在 WordPress 中使用 Redis
Redis Object Cache 外掛網址 https://wordpress.org/plugins/redis-cache/
設定 wp-config.php
// adjust Redis host and port if necessary
define( 'WP_REDIS_HOST', '127.0.0.1' );
define( 'WP_REDIS_PORT', 6379 );
// change the prefix and database for each site to avoid cache data collisions
define( 'WP_REDIS_PREFIX', 'my-moms-site' );
define( 'WP_REDIS_DATABASE', 0 ); // 0-15
// reasonable connection and read+write timeouts
define( 'WP_REDIS_TIMEOUT', 1 );
define( 'WP_REDIS_READ_TIMEOUT', 1 );
/* That's all, stop editing! Happy publishing. */
require_once(ABSPATH . 'wp-settings.php');
組態檔
Configuration constant Default Description WP_REDIS_HOST
127.0.0.1
The hostname of the Redis server WP_REDIS_PORT
6379
The port of the Redis server WP_REDIS_PATH
The path to the unix socket of the Redis server WP_REDIS_SCHEME
tcp
The scheme used to connect: tcp
or unix
WP_REDIS_DATABASE
0
The database used by the cache: 0-15
WP_REDIS_PREFIX
The prefix used for all cache keys to avoid data collisions, replaces WP_CACHE_KEY_SALT
. Should be human readable, not a “salt”. WP_REDIS_PASSWORD
The password of the Redis server. Supports Redis ACLs arrays: ['user', 'password']
WP_REDIS_MAXTTL
0
The maximum time-to-live of cache keys WP_REDIS_CLIENT
The client used to communicate with Redis: predis
, phpredis
or relay
WP_REDIS_TIMEOUT
1
The connection timeout in seconds WP_REDIS_READ_TIMEOUT
1
The timeout in seconds when reading/writing WP_REDIS_IGNORED_GROUPS
[]
Groups that should not be cached between requests in Redis
常用控制指令
Command Description wp redis status
Shows the object cache status and diagnostics wp redis enable
Enables the object cache wp redis disable
Disables the object cache wp redis update-dropin
Updates the object cache drop-in
效能考量,安裝 Phpredis
請先到 phpredis 這邊搜尋對應你平台的檔案,用 Linux Ubuntu 為例,下載 redis-6.0.2 版本 ,並且解壓縮他
wget https://pecl.php.net/get/redis-6.0.2.tgz
tar -zxvf redis-6.0.2.tgz
cd redis-6.0.2
接下來先編譯原檔案
sudo phpize
sudo ./configure
sudo make && sudo make install
完成編譯檔案後,要把 .so 檔案放到 php 的 modules 中,先把該目錄找出來
php -i | grep extension_dir
系統回應我,extension_dir => /usr/lib/php/20220829 => /usr/lib/php/20220829 ,則將剛編譯好,放在 modules 下的 redis.so 複製到正確的目錄中
sudo cp ./modules/redis.so /usr/lib/php/20220829/
複製完畢後,需要去修改 php.ini 檔案,讓他支援 redis,這邊我示範用 Nginx
sudo nano /etc/php/8.2/fpm/php.ini
將 extension 打開,請找到 Dynamic Extensions ,並且在下面加入
設定完成後,重開 php 讓他生效
sudo systemctl restart php8.2-fpm
檢查方法,利用info.php,並且搜尋是否有redis字眼,如下圖就是成功了
關於Redis的大小事
預設安裝完畢,初始話是支援16個資料庫的,分別由編號 0-15 ,要增加資料庫,要去 Redis 的組態檔裡面修改 redis/redis.conf 中,找到 databases ,並且調整數值後,重新啟動即可
Redis 讀取資料
redis-cli set my_key "Value"
redis-cli get my_key
Redis 列出所有的 KEY
相關文章
詳細的指令操作介紹
近期留言