Category Archives: Wordpress

Wordpress kiến thức & thủ thuật

Di chuyển nút add to cart đến sát phần giá sản phẩm trong Woocommerce

Di chuyen nut add to cart Woocommerce

Trong trang single product page, Woocommerce mặc định sẽ trình bày “tên sản phẩm – product tittle” => “giá sản phẩm” => “mô tả ngắn” => “add to cart – thêm vào giỏ hàng”. Cách bố trí này có vẻ không dễ dùng & tiện bằng cách đưa nút “add to cart” lên sát với giá sản phẩm.

Để xử lý vấn đề này, có 1 cách rất đơn giản là chúng ta thay đổi trật tự ưu tiên thực thi nút “add to cart” như sau: Remove action rồi re-add lại với priority phù hợp như sau:

 /** woocommerce: change position of add-to-cart on single product **/
    remove_action( 'woocommerce_single_product_summary', 
               'woocommerce_template_single_add_to_cart', 30 );
    add_action( 'woocommerce_single_product_summary', 
            'woocommerce_template_single_add_to_cart', 9 ); 

Kết quả có được như sau: 

Di chuyen nut add to cart Woocommerce

Xem thêm: Trật tự xử lý các actions trong page sản phẩm:

 /**
         * woocommerce_single_product_summary hook
         *
         * @hooked woocommerce_template_single_title - 5
         * @hooked <strong>woocommerce_template_single_price - 10 => đưa add to cart vào sát phần này
         * @hooked woocommerce_template_single_excerpt - 20
         * @hooked woocommerce_template_single_add_to_cart - 30
         * @hooked woocommerce_template_single_meta - 40
         * @hooked woocommerce_template_single_sharing - 50
         */ 

Ref: https://www.businessbloomer.com/woocommerce-visual-hook-guide-single-product-page/

https://wordpress.stackexchange.com/questions/114734/how-to-customize-position-of-add-to-cart-of-woocommerce-on-product-page

Hiển thị phương thức thanh toán dựa trên phương thức ship với Woocommerce

Tuy bien phuong thuc thanh toan Woocommerce

Issue: Tùy biến hiển thị phương thức thanh toán dựa trên lựa chọn phương thức giao hàng của khách hàng

Ví dụ:
+ Khi khách hàng lựa chọn phương thức giao hàng COD -giao hàng thu tiền => trang Checkout sẽ ẩn phương thức thanh toán “chuyển khoản”
+ Khi đơn hàng đạt mức free ship & khách hàng lựa chọn phương thức giao hàng miễn phí => trang Checkout sẽ ẩn phương thức thanh toán “COD”

Giải pháp:

+ Can thiệp vào hook “woocommerce_available_payment_gateways”
Code cụ thể:

//hide payment method based on shipping method selected<br />
add_filter( 'woocommerce_available_payment_gateways', 'payment_gateways_based_on_chosen_shipping_method' );<br />
function payment_gateways_based_on_chosen_shipping_method( $available_gateways ) {<br />
// Not in backend (admin)<br />
if( is_admin() )<br />
return $available_gateways;</p>
<p>// Lay phuong thuc ship duoc KH chon<br />
$chosen_shipping_methods = (array) WC()-&gt;session-&gt;get( 'chosen_shipping_methods' );</p>
<p>if ( in_array( 'free_shipping:6', $chosen_shipping_methods ) ) //free_shipping:6 - phuong thuc ship duoc chon<br />
{<br />
unset( $available_gateways['nganluong'] ); //nganluong - phuong thuc thanh toan bi loai bo<br />
unset( $available_gateways['cod'] );//COD - phuong thuc thanh toan bi loai bo<br />
}<br />
elseif ( in_array( 'ghtk_shipping_method', $chosen_shipping_methods ) )//ghtk_shipping_method - phuong thuc giao hang qua GHTK - plugin Le Van Toan<br />
{<br />
unset( $available_gateways['bacs'] );<br />
}<br />
return $available_gateways;</p>
<p>}

Cách lấy value của phương thức vận chuyển & phương thức thanh toán: 

Từ browser console, lấy giá trị trường value của phương thức tương ứng.

Tuy bien phuong thuc thanh toan Woocommerce dua tren phuong thuc van chuyen

Các bạn có thể tùy biến theo nhu cầu.

Reference:

1. Show hide payment methods based on selected shipping method in Woocommerce

2. Hide shipping and payment methods in WooCommerce

Lỗi error 404 phát sinh hàng loạt

Lỗi error 404 phát sinh hàng loạt

Nếu trang wordpress của bạn bị lỗi error 404 tất cả các trang ngoại trừ trang chủ (homepage), bạn cần kiểm tra lại cấu hình server: file domain.conf của Nginx hoặc htaccess của Apache

Hiện tượng:

Toàn bộ các page bị lỗi 404 ngoại trừ trang chủ. Nếu như bạn chuyển setting permalinks của wordpress về option: default thì tất cả các đường dẫn lại hoạt động bình thường, tuy nhiên url sẽ trở về trạng thái default (domain/?p=123).

Giải pháp:

Đối với Nginx, bạn cần kiểm tra và sửa file domain.conf như sau:

a. Tìm đến đoạn dưới đây:

try_files $uri $uri/ /index.php?q=$uri&amp;$args;

b. Tạo một block riêng cho đoạn này:

location / {
    try_files $uri $uri/ /index.php?$args;
}

Chú ý: vị trí file domain.conf trong server nginx: /etc/nginx/conf.d

Đối với Apache, sửa nội dung file htaccess như sau: 

# BEGIN WordPress
&lt;IfModule mod_rewrite.c&gt;
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
&lt;/IfModule&gt;
# END WordPress

Load async css với wordpress

Cải thiện tốc độ web thông qua tối ưu load CSS – cách áp dụng với WordPress

1. Tại sao cần load async CSS với wordpress

Bình thường các browser sẽ load các file CSS theo cách synchronous (đồng bộ) và trong lúc download và đọc các file style này, browser sẽ ngừng page rendering.

Điều này làm cho người đọc web sẽ không nhìn thấy bất cứ nội dung nào trong khoảng thời gian đầu tiên khi vào web. Các file CSS càng lớn thì khoảng thời gian này càng dài và làm cho những người đọc không đủ kiên nhẫn sẽ rời đi. Vì vậy, chúng ta cần áp dụng kỹ thuật load CSS file asynchorous (bất đồng bộ) để rút ngắn khoảng thời gian này.

Lưu ý: Với tổng dung lượng css files < 20kb thì bạn không cần phải áp dụng phương thức tải file css bất đồng bộ vì sự khác biệt đối với tốc độ tải website không chênh lệch nhiều. 

* Điều kiện để áp dụng tải file css bất đồng bộ (Load CSS asynchronously): 

Nếu chúng ta áp dụng phương thức Load CSS async cho toàn bộ css files của webpage thì trong khoảng thời gian CSS chưa được tải và đọc, nội dung của page sẽ được hiển thị unstyled và có thể tạo ra trải nghiệm người dùng không tốt (Hình dưới là FOUC – Flash of Uncontented Style của CNN)

FOUC

Để tránh hiện tượng này, có 2 giải pháp được sử dụng:

+ Thêm attribute “preload” vào các file stylesheet kết hợp với inline critical CSS vào <head> => Để làm được điều này, toàn bộ CSS của webpage cần được chia ra làm 2 phần: Critical CSS và non-Critical CSS => Công cụ tạo Critical CSS cho webpage: công cụ Critical CSS generator

+ Thêm attribute “media” & “onload”

2. Các cách load async CSS với WordPress:

2.1 Sử dụng “preload”: 

Khi sử dụng tag “rel=preload” thay cho phương thức tải đồng bộ “rel=stylesheet”, các web browser sẽ tải bất động bộ non-critical CSS. Tuy nhiên phương thức “preload” này cũng có một số nhược điểm: 

+ Có những web browser không hỗ trợ “preload”, vì vậy chúng ta cần áp dụng thêm kỹ thuật “polyfill” để đảm bảo các web browser này sẽ vẫn tải CSS theo phương thức bất đồng bộ. 

+ “Preload” có thể làm cho web browser ưu tiên tải non-critical CSS hơn những các tài nguyên khác, có thể cần tải trước. 

Các browser hỗ trợ “preload”: Xem tại đây

2.2 Sử dụng attribute “media” & attribute “onload”:

link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'";

+ Attribute “media” = “print”: áp dụng stylesheet rule vào màn hình hiển thị cho người dùng (giống như khi visitor chọn in webpage) => Browser sẽ tải phần CSS tương ứng với nội dung hiển thị đầu tiên, phần css còn lại sẽ được tải async và giảm thời gian page rendering.

 + Attribbute “onload” = this.media =all: áp dụng stylesheet rule cho toàn bộ các màn hình khi css file được tải xong. 

3. Ứng dụng Load async CSS vào WordPress:

Để thêm attribute vào tag <style> html trong wordpress, chúng ta sử dụng hook “style_loader_tagcủa WordPress. 

3.1 Cách thêm attribute media & onload vào các file stylesheet:

+ list các css file có thể load async => get $handle của tất cả các file css cần load async

Cách get handle của tất cả các style và script chạy trong wordpress: 

a. Thêm đoạn code sau vào functions.php của theme đang sử dụng:

function crunchify_print_scripts_styles() {
// Print all loaded Scripts
global $wp_scripts;
foreach( $wp_scripts-&gt;queue as $script ) :
echo $script . ' ** ';
endforeach;
// Print all loaded Styles (CSS)
global $wp_styles;
foreach( $wp_styles-&amp;amp;gt;queue as $style ) :
echo $style . ' || ';
endforeach;
}
add_action( 'wp_print_scripts', 'crunchify_print_scripts_styles' );

b. Copy toàn bộ script và style handle: 

Copy lại toàn bộ các handle hiển thị (tên script 1 | tên style 1 ….)

c. Xóa đoạn code: 

Sau khi đã lấy được list các style & script thì chúng ta nên xóa/uncomment code đi để làm sạch <head>

+ viết function add attribute vào tất cả các file css áp dụng kỹ thuật load async:

Thay thế đoạn media=’all’ thành media=”print” onload=”this.media=’all'”> trong các stylesheet bằng function dưới đây:

 function add_attributes_to_all_styles( $html, $handle ) {
     // add style handles to the array below
     $styles = array( 'font-awesome-5','another-style','bootstrap-css' );
     foreach ( $styles as $style ) 
if ( $style === $handle ) {return preg_replace( /media='all'/, /media='print' onload='this.media='all'/, $html ); };
return $html;
           }
add_filter( 'style_loader_tag', 'add_attributes_to_all_styles', 10, 2 );

+ gắn code vào function.php

+ test lại website trên các web browser mục tiêu.

Xem thêm:

+ Style được register trong wordpress thông qua hàm wp_enqueue_style

 wp_enqueue_style( $handle, $src, $deps, $ver, $media );

3.2 Thêm attribute preload vào file stylesheet:

Để thêm attribute “preload”, tham khảo cách làm tại đây: Namehero defer CSS

Source:
+ https://www.filamentgroup.com/lab/load-css-simpler/
+ https://joshuatz.com/posts/2019/wordpress-script-and-style-tags-adding-defer-async-and-lazy-load/
+ https://stackoverflow.com/questions/28158492/add-attribute-to-link-tag-thats-generated-through-wp-register-style
+ Str_replace: https://freetuts.net/php-function/str_replace.html

Cách thiết lập redirection rule cho wordpress

Setup redirection rule

Cách thiết lập redirection rule sử dụng plugin redirection:

Khi thay đổi cấu trúc permalink (thay đổi cấu trúc thư mục, thay đổi plugin SEO…), chúng ta cần redirect các link bị thay đổi cấu trúc về URL mới. Các old link này có thể bị thay đổi theo một quy luật nào đó và lúc đó chúng ta có thể viết rule để apply cho tât cả các URL thuộc dạng đó thay vì sửa từng URL đơn lẻ. Dưới đây là một số ví dụ:

1. Ví dụ 1:

Cần redirect tất cả các url có dạng domain.com/abc/… thành: domain.com/shop/abc/…    (Thêm shop vào trước /abc)

URL nguồn: domain.com/abc/xyz

URL đích: domain.com/shop/abc/xyz

=> cần viết rule như sau:

URL nguồn:  ^/abc/(.*)   => Trong đó: ^ để wordpress hiểu là /abc được đặt ngay sau domain.com (tránh trường hợp infinite loop sẽ thành: domain.com/shop/shop/shop…); (.*): là bất cứ cụm ký tự đường dẫn nào ở sau đều được ghi lại và chuyển sang URL đích. 

URL đích: /shop/abc/$1/  => Trong đó: $1 – để lấy cụm đường dẫn ở URL nguồn (.*)

Trường hợp này hay gặp khi thay đổi cấu trúc thư mục hoặc sử dụng chức năng ignore base – bỏ các từ như shop/category của các plugin SEO (Rankmath/Yoast). Khi thay đổi plugin SEO sẽ làm cho các link này thành 404.

2. Ví dụ 2: 

Redirect URL có dạng: /năm/tháng/ngày/abc thành /abc 

Trường hợp này hay gặp khi chuyển permalink từ dạng ngày tháng sang URL cố định trong WordPress. 

URL nguồn: domain.com/2018/07/28/abc 

URL đích: domain.com/abc

Cần viết rule như sau: 

URL nguồn: ^/ d{4}/ d{2}/ d{2}/(.*)  => trong đó (.*) được sử dụng để ghi lại cụm đường dẫn phía sau ngày tháng

URL đích: /$1/   =>$1 được dùng để hứng giá trị (.*)

Ref: https://redirection.me/support/redirect-regular-expressions/

Vô hiệu hóa WordPress RSS feed đúng cách

Vo hieu hoa Wordpress RSS feed

WordPress RSS feed được sử dụng để cung cấp các bài mới của website cho người đọc. Tuy nhiên nếu không dùng chức năng này, bạn nên vô hiệu hóa nó để làm gọn phần <head>. Nếu thêm code không đúng cách sẽ tạo ra lỗi error 5xx và gây ra hiệu ứng xấu lên SEO của site (có thể bị Google hạ ranking site).

Để tránh error 5xx, bạn có thể thực hiện như sau:

1. Sử dụng code thêm vào functions.php: 

Bạn vào filemanager của host, tìm đến functions.php (của theme đang sử dụng) và thêm đoạn code sau vào functions.php. Code để vô hiệu hóa RSS feed: 

function itsme_disable_feed() {
wp_die(
        __('No feed available, please visit our <a href="'. get_bloginfo('url') .'">homepage</a>!'),
        'No feed available',
        array('response' => 200)
    );
}

add_action('do_feed', 'itsme_disable_feed', 1);
add_action('do_feed_rdf', 'itsme_disable_feed', 1);
add_action('do_feed_rss', 'itsme_disable_feed', 1);
add_action('do_feed_rss2', 'itsme_disable_feed', 1);
add_action('do_feed_atom', 'itsme_disable_feed', 1);
add_action('do_feed_rss2_comments', 'itsme_disable_feed', 1);
add_action('do_feed_atom_comments', 'itsme_disable_feed', 1);

Code để xóa link feed trong phần head của source code: 

remove_action( 'wp_head', 'feed_links_extra', 3 );
remove_action( 'wp_head', 'feed_links', 2 );

Ghi chú: Nhớ backup funtions.php để nếu theme bị lỗi thì khôi phục lại. 

2. Sử dụng plugin như perfmatters

Cách này khá đơn giản, chỉ cần add plugin và bật các tùy chọn.

Tìm nguyên nhân plugin không hoạt động

Khi bạn cài thêm plugin hoặc triển khai code để tạo chức năng mới cho wordpress và đột nhiên một plugin/chức năng khác của website không hoạt động được hoặc hoạt động như thiết kế. Bạn cần tìm nguyên nhân gây xung đột. Cách đơn giản nhất là sử dụng plugin health check và bật chế độ troubleshooting mode lên.

1. Install và activate plugin health check

2. Chạy chế độ troubleshooting mode

3. Vô hiệu hóa toàn bộ các plugin & sử dụng theme default

4. Kiểm tra chức năng đang bị lỗi xem có chạy không hoặc bật plugin đang lỗi & kiểm tra xem có hoạt động không

5. Bật dần các plugin lên để tìm plugin gây lỗi 

6. Sau khi tìm được plugin gây lỗi => Deactivate plugin, tìm nguyên nhân cụ thể => có thể thử plugin khác có chức năng tương tự hoặc code tay để tránh lỗi. 

Ví dụ: Yoast Seo không hoạt động được chức năng on-page analysis, các page/post đều không hiển thị các gợi ý của Yoast & không hiển thị meta box => Nguyên nhân là do plugin Remove Query String. Sau khi remove & thay bằng code, Yoast Seo đã hoạt động bình thường.  

Source: https://yoast.com/help/how-to-check-for-plugin-conflicts/ 

Xóa wordpress, woocommerce version trong source code website

Để tăng bảo mật cho website wordpress, chúng ta nên xóa version đang sử dụng của wordpress, woocommerce trong source code web bằng cách thêm code vào functions.php của theme như sau:

function wpbeginner_remove_version() {
return '';
}
add_filter('the_generator', 'wpbeginner_remove_version');

Source: https://www.wpbeginner.com/wp-tutorials/the-right-way-to-remove-wordpress-version-number/

Optimize CSS in wordpress by preload tag

Load CSS Asynchronously

Issue:

Some CSS loaded by theme, and others loaded by plugin => Its very hard to choose “critical CSS” to load first and defer the others (non-critical css). 

How to do: 

+ LoadCSS script: need to test & implement. This script provides a JS function to load CSS dynamically & add <link rel=”preload”> to make stylesheet load asynchronously & “onload” to apply the style to pages when the css file is loaded 

Interesting source: https://jasonbaciulis.com/wordpress-performance-optimization/#server-side_caching

+ Using functions to add “preload” tag to css and inline critical CSS to head:

First, add tag rel=”preload” to css files:

function add_rel_preload($html, $handle, $href, $media) {if (is_admin())return $html;$html = <<<EOT<link rel='preload' as='style' onload="this.onload=null;this.rel='stylesheet'" id='$handle' href='$href' type='text/css' media='all' />EOT;return $html;}add_filter( 'style_loader_tag', 'add_rel_preload', 10, 4 );

Second, Insert the critical CSS into <head> by this function:

function hook_css() {?>[insert critical css here]<?php}add_action('wp_head', 'hook_css');

Note:

+ Critical CSS needs to stay in these tags: <style>critical CSS</style>

+ We need to using right tools to create critical CSS => Which tool?

+ We should combine critical CSS of all page types (page/post/product) and inline it in <head>. If the combined critical CSS is too heavy, we can use WP-Rocket or autoptimize paid solution (these tools can dynamically create critical CSS).  

 

Preload, Preconnect, Prefetch, DNS Prefetch, Prerender in WordPress

Cách triển khai các phương thức tối ưu tốc độ load trong WordPress: 

1. Preload: 

Preload: To tell browsers to fetch static resources early (image, font, js, css, videos…)

+ Some plugins to test: Better resource hints (free plugin for CSS & Js); WP Rocket (paid plugin)

+ How to test this technique: check page source (<link rel=”preload” ….>)

2. Preconnect: 

If resources are loaded from other domains (CDN, 3rd party providers…), Preconnect tells browsers to establish a connection to other domains in the background to save time for DNS lookup, redirection, TCP handshake, TLS negotiation,… 

+ Plugin to test:  Better resource hints, Perfmatters (extra tab)

+ How to test: view page source => <link rel=”preconnect”….>

3. Prefetch: 

Prefetch: To let browsers to fetch next page & store it in the local cache and serve it quickly if an user navigates around (after 1st page)

3.1 Link prefetch: prefetch static resources (img, script, css…) 

+ Plugin: Pre Party Resource hints plugin

+ How to check: <link rel=”prefetch” href=”url” as=”type of resource”>

3.2 DNS prefetch: 

DNS prefetch to perform  DNS lookup earlier & lower overall latency

+ How to use: using “perfmatters” or add the following snippet to functions.php: 

//* DNS Prefetching
function dns_prefetch() {
echo '<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="https://YOUROTHERDOMAIN.com" />
<link rel="dns-prefetch" href="https://ANDANOTHERONE.com" />
<link rel="dns-prefetch" href="https://AND.SOMEMORE.com" />
}
add_action('wp_head', 'dns_prefetch', 0); 

4. Prerender: 

Prerender helps load assets in the background but need to test carefully. 

=> Nên sử dụng code, hạn chế plugin.

Source: https://geekflare.com/implementing-preload-prefetch-preconnect-in-wordpress/