wordpress 彙整 - 第 2 頁，總計 9 頁

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

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

Woocommerce Divi Shop的手機版本頁面，要改成兩欄顯示

Divi Theme 繁體中文化

WordPress Divi UTM 應用

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

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

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

延伸閱讀：

WordPress站長必學：Windows環境下利用FFmpeg壓縮WebP/WebM格式檔案提升效能

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

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

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 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 ，並且在下面加入

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 *

windows server iis 下的 wordpress web.config 設定

詳細的指令操作介紹

Contact Form 7 – WP PLUGINS – 紀錄登入者資訊

by Rain Chu | 5 月 22, 2023 | wordpress, 未分類

有需要想要在 WordPress 中紀錄聯絡表單是那一個登入者所寫的，這時候我採用的解決方案是，Contact Form 7 ，在裡面多加兩個欄位，並且用隱藏欄位來做記錄，其中隱藏欄位寫法可以看 https://contactform7.com/hidden-field/ ，可以帶入的參數，則是可以在 https://contactform7.com/setting-default-values-to-the-logged-in-user/ 這邊找的到

最後的完成品如下

[hidden login-name default:user_login]
[hidden user-email default:user_email]

如何在 Ubuntu 20.04 上安裝 PHP 8.0、Nginx、MariaDB、WordPress CMS

wordpress logout 登出時候導向特定網頁

by Rain Chu | 3 月 28, 2023 | PHP, woocommerce, wordpress, 程式

許多擁有會員的 wordpress 用戶都希望在用戶登出後能將他們重新定位到特定的頁面，此功能在提供用戶的體驗流程時候非常好用，在登入的時候，以下將提供方法，方便大家可以使用此功能

在 functions.php 撰寫程式碼

可以直接在佈景主題下的 functions.php 中把登出後的導向頁面程式碼加入，加入方法如下

1.找到 wp-content 然後 themes 和你現在在使用的主題文件夾

2. 編輯 functions.php

3.加入以下代碼

3.1 登出後直接導引到首頁

add_action('wp_logout','auto_redirect_after_logout');
function auto_redirect_after_logout(){
  wp_safe_redirect( home_url() );
  exit();
}

3.2 登出後導引到特定頁面

add_action('wp_logout','auto_redirect_external_after_logout');
function auto_redirect_external_after_logout(){
  wp_redirect( 'https://www.yourwebsite.com' );
  exit();
}

3.3 採用 add_filter 來實作導引到特定頁面

function custom_logout_redirect($logout_url) {
    $redirect_page = 'https://yourwebsite.com/your-redirect-page/';
    return add_query_arg('redirect_to', urlencode($redirect_page), $logout_url);
}
add_filter('logout_url', 'custom_logout_redirect');

其中 yourwebsite.com 要置換成你自己想要導引過去的頁面

4.將 functions.php 存檔並且關閉

之後就可以自定義客戶登出的行為了

參考資料

如何讓 WordPress 登入後自動跳轉到指定頁面上?

解決 wordpress 外掛 Limit Login Attempts 封鎖帳號以及IP的方法

How to use WordPress plugin – Social login shortcode

logout_url

如何讓 WordPress 登入後自動跳轉到指定頁面上?

by Rain Chu | 3 月 21, 2023 | PHP, wordpress, 程式

想要客製化會員登入 WordPress 後的行為，例如說要跳到某一個指定的網頁，其實有很多個外掛可以使用，例如：https://www.paidmembershipspro.com/ ，但麻煩的就是常常會跟其他的會員外掛衝突，而且為了一個小功能，要一個龐大的會員系統來支撐，不太划算，建議可以自行寫寫看。

佈景主題 Functions.php

其實只要找到佈景主題下的 functions.php 然後加入以下程式碼即可

function my_login_redirect( $redirect_to, $request, $user ) {
    //檢查是否有建置會員制度
    if (isset($user->roles) && is_array($user->roles)) {
        // 檢查是否為管理者
        if(in_array('administrator', $user->roles)){
            // 每次當入都到 woocommerce 的管理頁面中
            $redirect_to =  home_url('wp-admin/edit.php?post_type=shop_order');
        }
        //確認是不是訂閱會員
        else if (in_array('subscriber', $user->roles)) {
            // 導向指定頁面，程式範例是導向會員專屬頁面。 
            $redirect_to =  home_url();
        }        
    } 
    return $redirect_to;
}
 
add_filter( 'login_redirect', 'my_login_redirect', 10, 3 );

區分權限

管理員登入 WordPress 後，預設會到 /wp-admin 中，一般的使用者登入後通常是引導到首頁，或是他自己的介紹頁，要區分管理員或是一般使用者則可以使用 in_array(‘administrator’, $user->roles) 做判斷

// 判斷是否為管理員
in_array('administrator', $user->roles)

自己寫就是有一個好處，可以完全客制使用者行為，也比較輕量，真的有問題就問 ChatGPT 4 大神吧