Select Page
如何在WordPress中使用Object Cache Pro提升網站效能

如何在WordPress中使用Object Cache Pro提升網站效能

在處理大量數據和高流量的情況下,WordPress網站可能會面臨效能問題。這時,使用高效的緩存解決方案變得尤為重要。Object Cache Pro是一款專業級的物件緩存插件,它能夠顯著提升WordPress網站的性能和響應速度。本文將介紹如何在WordPress中安裝和配置Object Cache Pro。

安裝Object Cache Pro

步驟1:獲取插件

先從Object Cache Pro官方網站購買插件。完成後會取得授權金鑰。

步驟2:上傳並安裝插件

  1. 登入您的WordPress後台。
  2. 點擊「插件」>「新增」。
  3. 選擇「上傳插件」,然後選擇您下載的Object Cache Pro插件文件。
  4. 上傳並安裝插件。

步驟3:配置環境***

跟一般外掛不一樣的地方,這邊要自己手動在 /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:清除舊資料

redis-cli flushall

步驟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網站的效能。通過合理配置和優化,您可以為您的用戶提供更快、更流暢的瀏覽體驗。

woocommerce 要移除商品頁面的相關商品

woocommerce 要移除商品頁面的相關商品

在預設的情況下,wordpress 中的 woocommerce 的商品頁面,會出現相關商品,如果需要移除,不需要安裝外掛,只要在佈景主題中的 function.php 加入一行程式碼即可

例如以下畫面,打算移除相關商品的區塊

我們找到使用中的佈景主題下的 function.php 並且加入以下程式碼即可

// 移除相關商品
remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );
在 wordpress 和 cloudflare 中啟用 HTTP/2 Server push,讓你網站速度飛奔

在 wordpress 和 cloudflare 中啟用 HTTP/2 Server push,讓你網站速度飛奔

什麼是 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);
JetPlugins for Elementor:打造專業網頁的強大工具

JetPlugins for Elementor:打造專業網頁的強大工具

在網站開發的世界中,時間就是金錢。對於專業和業餘網頁設計師來說,尋找可以提高效率且功能豐富的工具至關重要。這就是為什麼 JetPlugins for Elementor 成為了眾多設計師的首選:它不僅能讓網站建設快速且高效,還提供了超過150個小工具(Widgets)和多種插件,以及動態模板,使得打造專業、具吸引力的網頁成為可能。

快速建立網頁

JetPlugins for Elementor 的主要賣點之一是它能顯著提高網頁建設的速度。借助於 Elementor 的拖放界面和 JetPlugins 豐富的小工具庫,即使是非技術背景的用戶也能快速搭建出專業級的網站。從基本的版面配置到複雜的功能元素,一切都變得觸手可及。

150+ 小工具

擁有超過150個小工具,JetPlugins 為用戶提供了前所未有的靈活性和創造性。這些小工具覆蓋了從基本的文本和圖像處理到進階的功能,如滑塊、表格、社交媒體整合等。這意味著用戶可以為他們的網站添加獨特和動態的內容,而無需編寫一行代碼。

多個插件和動態模板

除了豐富的小工具,JetPlugins 還提供了一系列的插件和動態模板,進一步擴展了 Elementor 的功能。這些插件包括了從表單建立器到高級圖庫顯示等等。動態模板則讓創建重複性內容變得輕而易舉,大大節省了時間和資源。

總結

總而言之,JetPlugins for Elementor 是一個強大且用戶友好的工具,適合任何希望快速且有效地建立專業網頁的人。它豐富的小工具、插件和動態模板使得設計工作變得簡單且有趣,無論你是專業設計師還是剛入門的愛好者。如果你尋求一個能讓你的網站設計工作更上一層樓的工具,那麼 JetPlugins for Elementor 絕對值得一試。

JetPlugins for Elementor

改進你的WordPress網站:使用JavaScript隱藏不需要的欄位

改進你的WordPress網站:使用JavaScript隱藏不需要的欄位

在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知識,但它為用戶提供了增強和個性化其網站的機會。

值得注意的是,在進行這些更改時,應該小心操作,並在更改主題檔案之前進行備份。此外,如果你使用子主題,應在子主題中進行所有更改,以避免在主題更新時丟失定制的代碼。這種方法不僅提高了網站的專業程度,還有助於保持良好的用戶體驗。

延伸閱讀:

Redis提升WP性能:一步步教您如何優化安裝與配置Redis資料庫

Redis提升WP性能:一步步教您如何優化安裝與配置Redis資料庫

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 主機後,輸入

flushall

清除單一資料的指令是

flush db0

在 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 constantDefaultDescription
WP_REDIS_HOST127.0.0.1The hostname of the Redis server
WP_REDIS_PORT6379The port of the Redis server
WP_REDIS_PATHThe path to the unix socket of the Redis server
WP_REDIS_SCHEMEtcpThe scheme used to connect: tcp or unix
WP_REDIS_DATABASE0The database used by the cache: 0-15
WP_REDIS_PREFIXThe prefix used for all cache keys to avoid data collisions, replaces WP_CACHE_KEY_SALT. Should be human readable, not a “salt”.
WP_REDIS_PASSWORDThe password of the Redis server. Supports Redis ACLs arrays: ['user', 'password']
WP_REDIS_MAXTTL0The maximum time-to-live of cache keys
WP_REDIS_CLIENTThe client used to communicate with Redis: predisphpredis or relay
WP_REDIS_TIMEOUT1The connection timeout in seconds
WP_REDIS_READ_TIMEOUT1The timeout in seconds when reading/writing
WP_REDIS_IGNORED_GROUPS[]Groups that should not be cached between requests in Redis

常用控制指令

CommandDescription
wp redis statusShows the object cache status and diagnostics
wp redis enableEnables the object cache
wp redis disableDisables the object cache
wp redis update-dropinUpdates 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 ,並且在下面加入

extension=redis

設定完成後,重開 php 讓他生效

sudo systemctl restart php8.2-fpm

檢查方法,利用info.php,並且搜尋是否有redis字眼,如下圖就是成功了

關於Redis的大小事

預設安裝完畢,初始話是支援16個資料庫的,分別由編號 0-15 ,要增加資料庫,要去 Redis 的組態檔裡面修改 redis/redis.conf 中,找到 databases ,並且調整數值後,重新啟動即可

databases 16

Redis 讀取資料

redis-cli set my_key "Value"
redis-cli get my_key

Redis 列出所有的 KEY

redis-cli KEYS *

相關文章

詳細的指令操作介紹