Bước 1: Khởi tạo giao diện bằng ux block
Tạo một block (khối) mới bằng công cụ UX Block trong theme flatsome.
Đây là một block toàn cục, anh/chị thiết kế giao diện web tại đây.
Sau khi tạo xong giao diện thì hãy sao chép đoạn shortcode trong hình để chuyển qua bước 2.
Bước 2: Đặt block đến vị trí mong muốn
Xong phần khởi tạo, dùng action hook để kéo block toàn cục này đến các vị trí mặc định của theme flatsome mà anh/chị mong muốn.
Muốn biết được chúng ta có thể kéo các block này ra vị trí nào? Em đã có viết một bài chia sẻ cách hiển thị tất cả các hook trong flatsome tại đây.
Sau khi bật plugin hiển thị hook flatsome của em xong, thì giao diện trang web của anh/chị sẽ xuất hiện các đoạn code ví dụ flatsome_before_blog,…
Các đoạn code này chính là tên của hook và vị trí nó sẽ hiển thị.
Như vậy, anh/chị đã có đủ kiến thức cần thiết để thực hiện.
Hãy làm theo công thức sau.
Công thức
function tên_tùy_ý(){
echo '[shortcode-của-ux-block]';
};
add_action('tên-của-hook','tên_tùy_ý');Lưu ý không ghi dấu trong đoạn mã.
Ví dụ thực tế
function gaco_footer_a(){
echo '[block id="custome-footer"]';
};
add_action('flatsome_footer','gaco_footer_a');Kết quả:
Em đã sử dụng đoạn mã sau để hook block footer trở thành footer hiện tại của trang web gaco.vn.
Cảm ơn anh chị đã đón xem bài hướng dẫn, chúc anh chị thành công.
