Những addon của flatsome
1. Editor Cleanup For Flatsome: FDP add-on to clean up the Flatsome UX Builder
Editor Cleanup For Flatsome là một tiện ích bổ sung củaFreesoul Deactivate Pluginsđểdọn dẹp trình chỉnh sửa củaFlatsome (UX Builder).
Nó sẽ không chỉ làm sạch các nội dung được thêm bởi các plugin khác, mã PHP của chúng cũng sẽ không chạy.
Trình chỉnh sửa của Flatsome sẽ tải nhanh hơn và không có xung đột với các plugin khác.
Cả hai plugin Freesoul Deactivate và Flatsome đều phải được cài đặt và hoạt động, trong trường hợp khác, plugin này sẽ không chạy.
CÁCH DỌN DẸP TRÌNH CHỈNH SỬA FLATSOME
- Cài đặt và kích hoạt Freesoul Deactivate Plugins nếu chưa hoạt động
- Cài đặt và kích hoạt Flatsome nếu chưa hoạt động
- Cài đặt và kích hoạt Trình dọn dẹp trình chỉnh sửa cho Flatsome
- Vào Flatsome => Editor CLeanup
- Nhấp vào “Dọn dẹp trình chỉnh sửa bên ngoài” để tắt các plugin mà trình chỉnh sửa bên ngoài không cần (thường là không cần plugin)
- Nhấp vào “Dọn dẹp trình chỉnh sửa bên trong” để tắt các plugin mà trình chỉnh sửa bên trong không cần (trình chỉnh sửa bên trong giống như trang trên giao diện người dùng, nhưng được tải bên trong Trình tạo UX)
- Nhấp vào “Dọn dẹp các hành động của trình chỉnh sửa” để tắt các plugin được gọi trong bất kỳ hành động nào được kích hoạt bởi UX Builder (cập nhật một phần tử, thêm một phần tử…) (thường không cần plugin, việc tắt plugin ở đây có thể giải quyết xung đột với các plugin khác)
2. Flatsome Title With Category
Plugin thêm thêm tiêu đề với phần tử danh mục sản phẩm cho chủ đề phẳng.
Tính năng chức năng:
- Chức năng mặc định:
- Thay đổi logo đăng nhập,
- Tự động cập nhật wordpress, plugin, theme
- Ẩn bảng điều khiển menu cho bất kỳ vai trò người dùng nào
- Sử dụng trình chỉnh sửa cổ điển cho bài đăng
- Hỗ trợ một số cấu hình PHP
- Xác định hằng số của bạn
- Hình thu nhỏ phân loại
- Yêu cầu:
- Phông chữ bên ngoài và một số phông chữ được hỗ trợ
- Các tệp JS bên ngoài và mã tùy chỉnh
- Tệp CSS bên ngoài và mã tùy chỉnh
- Tập lệnh mặc định và Thư viện JS được bao gồm và đăng ký bởi WordPress
- Nút nhóm liên hệ:
- 4 phong cách
- Hỗ trợ Woocommerce
- Tùy chỉnh nút thêm vào giỏ hàng
- Thêm nút mua ngay bây giờ
- Xóa trường quanity
- trường thanh toán đơn giản: tên + điện thoại + địa chỉ
- Liệt kê tất cả các móc tác vụ woocommerce cho các mã ngắn của bạn
- Bộ lọc sản phẩm và biểu mẫu tìm kiếm
- Elementor
- Hỗ trợ một số phần tử: Carouse, Đệ quy danh mục, Lưới bài đăng.
- Flatsome https://quyle91.github.io/administratorz/flatsome.html
- Phần tử menu tiêu đề 3 tùy chỉnh mới
- Hỗ trợ một số yếu tố:
- Đếm ngược mới
- Chế độ xem Đếm mới
- Đã nhúng fanpage Facebook mới
- Biểu tượng tùy chỉnh mới
- Bản đồ mới với nhiều điểm đánh dấu
- Bộ chọn điều hướng mới
- Mới Đọc thêm Đọc ít hơn
- Tìm kiếm biểu mẫu Woocommerce mới
- Thanh trượt Flickity mới
- Thanh trượt Fotorama mới
- Số ngẫu nhiên mới.
- Hộp đèn mới
- Danh mục đầu tư mới và biểu mẫu tìm kiếm
- …
- 2 kiểu gói CSS
- Trình biên tập MCE tí hon
- Kiểu mới cho mục Danh sách: Danh sách Kiểu – Không có trong trình chỉnh sửa
- Liệt kê tất cả các móc hành động Flatsome cho các mã ngắn của bạn
- Dành cho AE Việt Nam: Có chức năng cho theme bất động sản (xem thêm trong document)
- Nhập dữ liệu
- Đăng, sản phẩm woocommerce được hỗ trợ
- Tự động lưu hình ảnh vào thư viện
- loại bỏ thẻ html khác
- Chỉ cần 1 cú nhấp chuột cho nhiều bài viết
- Người đưa thư
- Cấu hình smtp của người gửi thư
- Công cụ khác
- Thay thế hình ảnh: Giữ lại ID và url hình ảnh
- Sercurity
- Tắt XML-RPC (bật tự động)
- Tắt X-pingback (bật tự động)
- Tắt API phần còn lại
- Tắt chỉnh sửa tệp (bật tự động)
Có thể tùy biến thêm một số vấn đề liên quan đến HTML một cách nhanh chóng, dễ dàng. Plugin cũng thêm 1 số widget để sử dụng thuận tiện hơn so với bản Flatsome mặc định.
Hiển thị gallery của sản phẩm ra ngoài trang chủ
Bước 1: Copy code vào functions.php
function create_gallery_product_box_congdongblog()
{
global $product;
$product_cat = get_the_terms($product->get_ID(), 'product_cat' );
// var_dump($product_cat);
if ( $product_cat && ! is_wp_error( $product_cat ) ) {
echo '' . $product_cat[0]->name . '';
}
$attachment_ids = $product->get_gallery_image_ids();
$count = count($attachment_ids);
if ($attachment_ids) {
$thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id($product->get_ID()));
$size_full = wp_get_attachment_image_src(get_post_thumbnail_id($product->get_ID()), "full");
echo '
echo ‘
‘; $i = 0; foreach ($attachment_ids as $attachment_id) { if ($i < 3) { echo ‘
‘; } if ($i == 3) { echo ‘Xem thêm + ‘ . ($count – $i) . ‘‘; } $i++; } echo ‘
‘;
}
}
add_action(‘woocommerce_before_shop_loop_item_title’, ‘create_gallery_product_box_congdongblog’);
add_action(‘wp_footer’,’add_script_footer_gallery’);
function add_script_footer_gallery(){
}
Code trên sẽ hiển thị gallery ở dưới ảnh đại diện, nếu bạn muốn hiển thị ở chổ khác hay bất kỳ nơi nào, bạn có thể thay hook bạn muốn vào chổ woocommerce_before_shop_loop_item_title nhé! Code CSS hiển thị gallery < code>
.isures-thumb–wrap {
position: absolute;
bottom: 0;
display: flex;
}
.isures-thumb–items{
max-width: calc(25% – 4px);
width: 100%;
margin-right: 5px;
cursor: pointer;
}
.isures-thumb–items:nth-child(4){margin-right: 0}
.isures-thumb–items.active{
border: 1px solid var(–isures-primary-color)
}
.isures-thumb–items img {
border: 1px solid transparent
}
.isures-more–btn {
position: absolute;
right: 0;
bottom: 0;
width: 25%;
height: 100%;
background: rgba(0,0,0, .54);
color: #fff!important;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.isures-more–btn span{font-size: 10px;text-align: center; font-weight: bold;}
https://flatsomea-z.com/huong-dan-cach-hien-thi-gallery-cua-san-pham-ra-ngoai-trang-chu/
Chèn ảnh thumbnail full-width ở trong post
sử dụng hook flatsome_before_blog và gọi thumbnail của hìnhfunction add_thumnail_post_pttuan(){;?>
<?php if (has_post_thumbnail() && is_single()){;?>
<div class="thumbnail-pt">
<?php the_post_thumbnail('full');?>
</div>
<?php };?>
<style>
.thumbnail-pt img{
width:100%}
</style>
<?php }
add_action('flatsome_before_blog','add_thumnail_post_pttuan');Tham khảo: pttuan410.com/lam-sao-de-chen-anh-full-width-o-dau-bai-post/Bật popup trong flatsome
Giải thích thông số:- Auto_open: Tự động bật
- auto_timer: Thời gian bao lâu để bật, đơn vị tính ms 3000ms = 3s
- auto_show=once/always: Chỉ hiện 1 lần
- width: chiều rộng của popup
- padding: khoảng cách từ viền đến nội dung popup
- block id=”popup” : tạo trong UX Blocks
Cuối cùng, hãy vào Flatsome –> Advanced –> Global setting, chèn đoạn code trên vào Footer script rồi save lại là xongChuyển widget về giao diện cũ ở WordPress 5.8
Thêm đoạn code sau vào function.phpadd_filter( 'gutenberg_use_widgets_block_editor', '__return_false' );
add_filter( 'use_widgets_block_editor', '__return_false' );Tạo gợn sóng phân cách bằng SVG
Vào trang getwaves.io tạo gợn sóng như ý muốn và tải file về. Trước khi tải về nhớ chỉnh lại màu nền của đường gợn sóng lại.
Có 2 section: 1 là Section bên trên có “margin = -15%” hoặc tùy ý bạn, mục đích để các layer trùng lên nhau. Section bên dưới bg_color="rgba(0, 0, 0, 0)" padding="-15%" và Banner chọn background là file svg vừa mới tải, bg_color="rgba(0, 0, 0, 0)"Thêm cột kích thước hình ảnh và sort được trong wordpress media
Thêm cột kích thước file trong admin media nhằm cho biết dung lượng lớn không cần thiết lên website. Thay my-theme-text-domain bằng domain theme của bạnadd_filter( 'manage_media_columns', 'codfe_media_columns_filesize' );
/**
* Filter the Media list table columns to add a File Size column.
*
* @param array $posts_columns Existing array of columns displayed in the Media list table.
* @return array Amended array of columns to be displayed in the Media list table.
*/function codfe_media_columns_filesize( $posts_columns ) {
$posts_columns['filesize'] = __( 'File Size', 'my-theme-text-domain' );
return $posts_columns;
}
add_action( 'manage_media_custom_column', 'codfe_media_custom_column_filesize', 10, 2 );
/**
* Display File Size custom column in the Media list table.
*
* @param string $column_name Name of the custom column.
* @param int $post_id Current Attachment ID.
*/function codfe_media_custom_column_filesize( $column_name, $post_id ) {
if ( 'filesize' !== $column_name ) {
return;
}
$bytes = filesize( get_attached_file( $post_id ) );
echo size_format( $bytes, 2 );
}
add_action( 'admin_print_styles-upload.php', 'codfe_filesize_column_filesize' );
/**
* Adjust File Size column on Media Library page in WP admin
*/function codfe_filesize_column_filesize() {
echo
'<style>
.fixed .column-filesize {
width: 10%;
}
</style>';
}
// Make column sortable
function codfe_add_column_sortable_file_size($columns) {
$columns['filesize'] = 'filesize';
return $columns;
}
add_filter('manage_upload_sortable_columns', 'codfe_add_column_sortable_file_size');
// Column sorting logic (query modification)
function codfe_sortable_file_size_sorting_logic($query) {
global $pagenow;
if(is_admin() && 'upload.php' == $pagenow && $query->is_main_query() && !empty($_REQUEST['orderby']) && 'filesize' == $_REQUEST['orderby']) {
$query->set('order', 'ASC');
$query->set('orderby', 'meta_value_num');
$query->set('meta_key', 'filesize');
if('desc' == $_REQUEST['order']) {
$query->set('order', 'DSC');
}
}
}
add_action('pre_get_posts', 'codfe_sortable_file_size_sorting_logic');Thêm bài viết liên quan theo danh mục cho blog
chèn đoạn code sau vào file functions.php của Child Theme/* Dev by Woovn */ add_shortcode('woovn_posts_related','flatsome_related_posts');
function flatsome_related_posts(){
ob_start();
$categories = get_the_category(get_the_ID());
if ($categories){
echo '<div class="relatedcat">';
$category_ids = array();
foreach($categories as $individual_category) array_push($category_ids, $individual_category->term_id);
$my_query = new wp_query(array(
'category__in' => $category_ids,
'post__not_in' => array(get_the_ID()),
'posts_per_page' => 6
));
$ids = wp_list_pluck( $my_query->posts, 'ID' );
$ids = implode(',', $ids);
if( $my_query->have_posts() ){
echo '<h3>Bài viết liên quan</h3>';
//echo do_shortcode('
'); // Slider
echo do_shortcode('
'); // Row
}
echo '</div>';
}
return ob_get_clean();
}Sau đó chúng ta chỉ việc chèn shortcode sau vào HTML after blog posts trong Tùy biến ▸ Blog ▸ Blog Single Post<!-- Chèn vào HTML after blog posts -->
[woovn_posts_related]Bài viết liên quan theo tag
Dán code này vào file functions.php của theme/child theme đang kích hoạt/*
* Code bài viết liên quan theo tag
*/function bvlq() {
global $post;
$tags = wp_get_post_tags($post->ID);
if ($tags){
$output = '<div class="relatedcat">';
$first_tag = $tags[0]->term_id;
$args=array(
'tag__in' => array($first_tag),
'post__not_in' => array($post->ID),
'posts_per_page'=>3,
'caller_get_posts'=>1
);
$my_query = new wp_query($args);
if( $my_query->have_posts() ):
$output .= '<p>Bài viết liên quan:</p><ul class="row related-post">';
while ($my_query->have_posts()):$my_query->the_post();
$output .=
'<li class="col large-4">
<a href="'.get_the_permalink().'" title="'.get_the_title().'">
<div class="feature">
<div class="image" style="background-image:url('. get_the_post_thumbnail_url() .');"></div>
</div>
</a>
<div class="related-title"><a href="'.get_the_permalink().'" title="'.get_the_title().'">'.get_the_title().'</a></div>
</li>';
endwhile;
$output .= '</ul>';
endif; wp_reset_query();
$output .= '</div>';
return $output;
}
else return;
}
add_shortcode('bvlq', 'bvlq');Bài viết liên quan cùng Chuyên mục
/*
* Code bài viết liên quan theo chuyên mục
*/function bvlq_danh_muc() {
$output = '';
if (is_single()) {
global $post;
$categories = get_the_category($post->ID);
if ($categories) {
$category_ids = array();
foreach($categories as $individual_category) $category_ids[] = $individual_category->term_id;
$args=array(
'category__in' => $category_ids,
'post__not_in' => array($post->ID),
'posts_per_page'=>3,
'caller_get_posts'=>1
);
$my_query = new wp_query( $args );
if( $my_query->have_posts() ):
$output .= '<div class="relatedcat">';
$output .= '<p>Bài viết liên quan:</p><div class="row related-post">';
while ($my_query->have_posts()):$my_query->the_post();
$output .=
'<div class="col large-4">
<a href="'.get_the_permalink().'" title="'.get_the_title().'">
<div class="feature">
<div class="image" style="background-image:url('. get_the_post_thumbnail_url() .');"></div>
</div>
</a>
<div class="related-title"><a href="'.get_the_permalink().'" title="'.get_the_title().'">'.get_the_title().'</a></div>
</div>';
endwhile;
$output .= '</div>';
$output .= '</div>';
endif; //End if.
wp_reset_query();
}
return $output;
}
}
add_shortcode('bvlq_danh_muc','bvlq_danh_muc');chèn vào style.css của theme/child theme đang kích hoạt hoặc thêm vào CSS bổ sung trong Tuỳ biến của Flatsome.feature {
position: relative;
overflow: hidden;
}
.feature::before {
content: "";
display: block;
padding-top: 56.25%;
}
.feature .image{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
background-size: cover;
background-position: center;
}
ul.row.related-post li {
list-style: none;
}
.related-title {
line-height: 1.3 !important;
margin-top: 10px !important;
}Sau khi thêm đủ 2 cái đó cho con, chúng ta được 2 shortcode [“bvlq”] và [“bvlq_danh_muc”] (bỏ dấu ” ” khi copy nhé). Chúng ta chọn 1 loại rồi thêm vào Flatsome –> Theme Option –> Blog –> Blog Single Post, chúng ta kéo xuống dưới cùng, tới phần HTML after blog posts. Chúng ta chèn shortcode.Thu gọn nội dung chi tiết sản phẩm
/*
* Thêm nút Xem thêm vào phần mô tả của bài viết sản phẩm
*/add_action('wp_footer','hal_readmore_flatsome');
function hal_readmore_flatsome(){
?>
<style>
.single-product div#tab-description {
overflow: hidden;
position: relative;
}
.single-product .tab-panels div#tab-description.panel:not(.active) {
height: 0 !important;
}
.hal_readmore_flatsome {
text-align: center;
cursor: pointer;
position: absolute;
z-index: 9999;
bottom: 0;
width: 100%;
background: #fff;
}
.hal_readmore_flatsome:before {
height: 55px;
margin-top: -45px;
content: "";
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff00', endColorstr='#ffffff',GradientType=0 );
display: block;
}
.hal_readmore_flatsome a {
color: #318A00;
display: block;
}
.hal_readmore_flatsome a:after {
content: '';
width: 0;
right: 0;
border-top: 6px solid #318A00;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
display: inline-block;
vertical-align: middle;
margin: -2px 0 0 5px;
}
</style>
<script>
(function($){
$(document).ready(function(){
$(window).on('load', function(){
if($('.single-product div#tab-description').length > 0){
var wrap = $('.single-product div#tab-description');
var current_height = wrap.height();
var your_height = 300;
if(current_height > your_height){
wrap.css('height', your_height+'px');
wrap.append(function(){
return '<div class="hal_readmore_flatsome"><a title="Xem thêm" href="javascript:void(0);">Xem thêm</a></div>';
});
$('body').on('click','.hal_readmore_flatsome', function(){
wrap.removeAttr('style');
$('body .hal_readmore_flatsome').remove();
});
}
}
});
});
})(jQuery);
</script>
<?php
}Lưu ý giá trị là 300. Đó chính là chiều dài của khung nội dung. Nếu muốn khung nội dung dài hay ngắn thì hãy chỉnh sửa thông số đó cho phù hợp.Thu gọn nội dung chi tiết danh mục sản phẩm
/*
* Thêm nút Xem thêm vào phần mô tả của danh mục sản phẩm
* Author: anhlinhmkt - https://anhlinhmkt.com
*/add_action('wp_footer','hal_readmore_taxonomy_flatsome');
function hal_readmore_taxonomy_flatsome(){
if(is_woocommerce() && is_tax('product_cat')):
?>
<style>
.tax-product_cat.woocommerce .shop-container .term-description {
overflow: hidden;
position: relative;
margin-bottom: 20px;t
padding-bottom: 25px;
}
.hal_readmore_taxonomy_flatsome {
text-align: center;
cursor: pointer;
position: absolute;
z-index: 10;
bottom: 0;
width: 100%;
background: #fff;
}
.hal_readmore_taxonomy_flatsome:before {
height: 55px;
margin-top: -45px;
content: "";
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff00', endColorstr='#ffffff',GradientType=0 );
display: block;
}
.hal_readmore_taxonomy_flatsome a {
color: #318A00;
display: block;
}
.hal_readmore_taxonomy_flatsome a:after {
content: '';
width: 0;
right: 0;
border-top: 6px solid #318A00;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
display: inline-block;
vertical-align: middle;
margin: -2px 0 0 5px;
}
.hal_readmore_taxonomy_flatsome_less:before {
display: none;
}
.hal_readmore_taxonomy_flatsome_less a:after {
border-top: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #318A00;
}
</style>
<script>
(function($){
$(document).ready(function(){
$(window).on('load', function(){
if($('.tax-product_cat.woocommerce .shop-container .term-description').length > 0){
var wrap = $('.tax-product_cat.woocommerce .shop-container .term-description');
var current_height = wrap.height();
var your_height = 300;
if(current_height > your_height){
wrap.css('height', your_height+'px');
wrap.append(function(){
return '<div class="hal_readmore_taxonomy_flatsome hal_readmore_taxonomy_flatsome_show"><a title="Xem thêm" href="javascript:void(0);">Xem thêm</a></div>';
});
wrap.append(function(){
return '<div class="hal_readmore_taxonomy_flatsome hal_readmore_taxonomy_flatsome_less" style="display: none"><a title="Thu gọn" href="javascript:void(0);">Thu gọn</a></div>';
});
$('body').on('click','.hal_readmore_taxonomy_flatsome_show', function(){
wrap.removeAttr('style');
$('body .hal_readmore_taxonomy_flatsome_show').hide();
$('body .hal_readmore_taxonomy_flatsome_less').show();
});
$('body').on('click','.hal_readmore_taxonomy_flatsome_less', function(){
wrap.css('height', your_height+'px');
$('body .hal_readmore_taxonomy_flatsome_show').show();
$('body .hal_readmore_taxonomy_flatsome_less').hide();
});
}
}
});
});
})(jQuery);
</script>
<?php
endif;
}Tương tự như vậy giá trị là 300, đây là chiều cao của khung mô tảĐưa mô tả danh mục sản phẩm xuống dưới
//* Đưa mô tả danh mục xuống dưới.
remove_action('woocommerce_archive_description','woocommerce_taxonomy_archive_description', 10 );
add_action( 'woocommerce_after_shop_loop', 'woocommerce_taxonomy_archive_description', 100 );Tạo ảnh WebP
- Miễn phí
- Hiển thị ảnh bằng chế độ “via .htaccess” (bạn xem ảnh vẫn thấy đuôi .jpg nhưng bấm save thì ra .webp). Có nghĩa ảnh được load là webp nhưng url cũ vẫn được giữ nguyên.
- Nhiều tùy chọn, dư xài (chất lượng ảnh, auto convert, cache, redirect, regenerate…)
Tự động thêm tên file ảnh vào thuộc tính
Các thuộc tính của ảnh: tiêu đề ảnh, mô tả ảnh trong SEO rất là quan trọng. Một đoạn function để giúp các bạn có thể điền 1 cách tự động các thuộc tính này khi thêm 1 ảnh mới, thông tin thêm mới sẽ dựa trên tên file ảnh mà bạn đặt nhé.
function abl_mc_auto_image_attributes( $post_ID ) {
$attachment = get_post( $post_ID );
$attachment_title = $attachment->post_title;
$attachment_title = str_replace( '-', ' ', $attachment_title ); // Hyphen Removal
$attachment_title = ucwords( $attachment_title ); // Capitalize First Word
$uploaded_image = array();
$uploaded_image['ID'] = $post_ID;
$uploaded_image['post_title'] = $attachment_title; // Tiêu đề ảnh
$uploaded_image['post_excerpt'] = $attachment_title; // Chi tiết ảnh
$uploaded_image['post_content'] = $attachment_title; // Mô tả ảnh
wp_update_post( $uploaded_image );
update_post_meta( $post_ID, '_wp_attachment_image_alt', $attachment_title ); // Image Alt Text
}
add_action( 'add_attachment', 'abl_mc_auto_image_attributes' );khi các bạn thêm ảnh mới thì nó sẽ tự động cập nhật tiêu đề, chi tiết và mô tả ảnh.
Chèn bài viết liên quan vào giữa bài viết
Đầu tiên chúng ta sẽ viết 1 function để có thể hiển thị được các bài viết cùng category với bài viết hiện tại nhé, để có thể viết được function này. Các bạn tìm hiểu giúp mình về WP query. Đầu tiên sẽ tạo 1 shortcode có tên gọi là [post_pttuan]
function recent_post_by_pttuan(){
ob_start();
$cats = wp_get_post_categories( get_the_ID(), array( 'fields' => 'ids' ) );
$the_query = new WP_Query( array(
'post_type' => 'post',
'posts_per_page' => '5',
'post__not_in' => array(get_the_ID()),
'tax_query' => array(
array (
'taxonomy' => 'category',
'field' => 'term_id',
'terms' => $cats,
)
),
) );
if($the_query->have_posts()){
echo '<div class="pttuan_post_recent_main">';
echo '<h3 class="pttuan_post_recent_main_title text-center">Bài viết liên quan</h3>';
echo '<div class="pttuan_post_recent_container">';
while ( $the_query->have_posts() ):$the_query->the_post();?>
<div class="pttuan_post_recent_item">
<a href="<?php echo get_the_permalink();?>">
<div class="pttuan_post_recent_thumbnail">
<?php echo get_the_post_thumbnail();?>
</div>
<div class="pttuan_post_recent_title">
<?php echo get_the_title();?>
</div>
</a>
</div>
<?php endwhile;
echo '</div></div>';
};
wp_reset_postdata();
$list_post = ob_get_contents();
ob_end_clean();
return $list_post;
}
add_shortcode('post_pttuan','recent_post_by_pttuan');Bạn có thể dán shortcode vào bất kì đâu để nó hiển thị các bài viết liên quan đến bài viết hiện tại, nếu bài viết nhiều category thì nó sẽ lấy nhiều category. Các bạn chú ý đến cái dòng ‘posts_per_page’ => ‘5’, Các bạn muốn hiển thị mấy bài viết thì sửa số 5 thành bất kì nhé. Hiển thị bài viết liên quan vào giữa bài post 1 cách tự động Để chèn ký tự hoặc 1 đoạn văn vào giữa bài post 1 cách tự động thì các bạn sẽ phải can thiệp vào filter của wordpress. Để chèn được vào giữa bài viết, cụ thể là mình sẽ chèn vào đoạn thứ 2 của bái viết (Enter 1 lần sẽ là 1 đoạn).
add_filter('the_content', 'contentafter2para');
function contentafter2para($content){
if(is_single()){
$pttuan_content = do_shortcode('[post_pttuan]');
$after = 2;
$end = '</p>';
$content_pttuan = explode($end, $content);
foreach($content_pttuan as $key => $cont){
if(trim($cont)) {
$content_pttuan[$key] .= $end;
}
if(($key + 1) == $after){
$content_pttuan[$key] .= $pttuan_content;
}
}
$content = implode('', $content_pttuan);
}
return $content;
}Bạn chú ý đến đoạn $after = 2; giúp mình, nếu bạn mún nó hiển thị ở đoạn thứ 3 thì sửa thành 3 nhé. Thêm 1 chút CSS cho nó
function css_custom(){;?>
<style type="text/css">
.pttuan_post_recent_main_title{
color: #fff;
font-weight: bolder;
margin-bottom: 15px;
}
.pttuan_post_recent_main{
background: #1d65d8;
padding: 10px 5px;
margin-bottom: 15px;
border-radius: 5px;
}
.pttuan_post_recent_container{
display: flex;
justify-content: space-between;
}
.pttuan_post_recent_container>*{
width: 19%;
background: #fff;
border-radius: 3px;
}
.pttuan_post_recent_thumbnail{
height: 80px;
overflow: hidden;
margin-bottom: 10px;
}
.pttuan_post_recent_title{
font-size: 14px;
line-height: 1.25;
padding: 0 5px;
}
@media only screen and (max-width: 48em) {
.pttuan_post_recent_container>*{
width: 30%;
margin-right: 10px;
}
.pttuan_post_recent_container>*:last-child{
margin-right: unset;
}
.pttuan_post_recent_container{
overflow-x: scroll;
flex-flow: unset;
display: -webkit-box;
}
.pttuan_post_recent_thumbnail{
height: 50px;
margin-bottom: 5px;
}
.pttuan_post_recent_title{
font-size: 11px;
}
}
</style>
<?php }
add_action('wp_footer','css_custom');Cuộn trang Landing Page với “Scroll To”
Trong bài viết này, để các bạn dễ hình dung, mình sẽ lấy ví dụ khi chúng ta click vào button “Nhận Báo Giá“, trang Landing Page sẽ cuộn xuống mục “BáoGiá“. Đầu tiên các bạn mở trình chỉnh sửa UX-Builder lên -> “Addelements” -> Chọn “ScrollTo” -> Tại đây các bạn nhập thông tin:
- Tiêu đề/Title: Title này sẽ hiển thị tại bullet/chấm tròn bên phải màn hình Desktop khi người dùng rê chuột đến.
- Link: các bạn set link bắt đầu với#link.
- Bullet: On hoặc Off để tùy chọn hiển thị chấm tròn bên phải màn hình Desktop.
Sau đó, các bạn click và kéo mục “ScrollTo” đến section mà bạn cần cuộn trang đến. Và chọnbuttoncần chèn link, kéo xuống mục liên kết, paste link#linkmà bạn đã đặt vào.(Như ví dụ ở hình dưới, mình đã set link cho “Scroll To” là #baogia). 
Để chèn link cuộn trang lên thanh menu, các bạn truy cập vào trang quản trị, các bạn chọn “Giaodiện” -> “Menu” -> Chọn “Menu” cần sửa -> Chọn “Liênkếttựtạo” -> Nhập link & Tiêu đề Menu -> “ThêmvàoMenu” -> kéo menu đến vị trí bạn cần đặt & “LưuMenu” để cập nhật. 
Ẩn thông báo trong trang quản trị
// yellow pencil, flatsome activation nag remover
function admin_css() {
echo '<style type="text/css">
#update-nag, .update-nag, .wrap .yellowpencil-notice, #flatsome-notice {display: none !important;}
</style>';
}
add_action('admin_head', 'admin_css'); Thêm Nút Huỷ Đơn Hàng Cho Khách Sau Khi Thanh Toán
Thêm nút “Huỷ đơn hàng” trong trang tài khoản của khách hàng với 1 đoạn code vô cùng đơn giản. //Cho phép KH huỷ đơn hàng sau khi thanh toán // Cài đặt các trạng thái mà bạn cho phép khách hàng huỷ $custom_statuses = array( ‘completed’, ‘pending’, ‘processing’, ‘on-hold’, ‘failed’ ); // Cài đặt số ngày được phép huỷ kể từ khi đặt đơn $duration = 3; // 3 days // Lấy ID đơn đặt hàng và WC_Order if( isset($_GET[‘order_id’])) $order = wc_get_order( absint( $_GET[‘order_id’] ) ); $delay = $duration*24*60*60; // (duration in seconds) $date_created_time = strtotime($order->get_date_created()); // Creation date time stamp $date_modified_time = strtotime($order->get_date_modified()); // Modified date time stamp $now = strtotime(“now”); // Now time stamp // Using Creation date time stamp if ( ( $date_created_time + $delay ) >= $now ) return $custom_statuses; else return $statuses; }
add_filter( 'woocommerce_valid_order_statuses_for_cancel', 'custom_valid_order_statuses_for_cancel', 10, 2 );
function custom_valid_order_statuses_for_cancel( $statuses, $order ){
Thêm ảnh sản phẩm ở trang thanh toán
đơn hàng của trang thanh toán mặc định của woocommerce hiển thị tên sản phẩm, số lượng và tổng tiền nhưng không hiển thị hình ảnh đại diện của sản phẩm. Nếu bạn muốn hiển thị thêm hình ảnh nổi bật của sản phẩm giúp khách hàng kiểm tra lại trước khi đặt hàng. add_filter( 'woocommerce_cart_item_name', 'flatsomeaz_product_image_review_order_checkout', 9999, 3 ); function flatsomeaz_product_image_review_order_checkout( $name, $cart_item, $cart_item_key ) { if ( ! is_checkout() ) return $name; $product = $cart_item[‘data’]; $thumbnail = $product->get_image( array( ’50’, ’50’ ), array( ‘class’ => ‘alignleft’ ) ); return $thumbnail . $name; }
Xoá hình ảnh thừa trên website không cần dùng plugin
add_filter('intermediate_image_sizes', function ($sizes) {
return array_diff($sizes, ['medium_large']); // Medium Large (768 x 0)
});
//
add_action('init', 'remove_extra_image_sizes');
function remove_extra_image_sizes()
{
$sizes = array();
foreach (get_intermediate_image_sizes() as $size) {
if (!in_array($size, $sizes)) {
remove_image_size($size);
}
}
}
flatsome addon
Link: https://wordpress.org/plugins/administrator-z https://wordpress.org/plugins/wp-extra/
Hiển thị thêm mô tả sản phẩm khi hover sản phẩm ngoài trang chủ
Thêm đoạn này vào function
function add_mota(){
global $post;
echo '
'; Tiếp theo thêm css
}
add_action('flatsome_product_box_tools_top','add_mota');
.image-tools.top.right{
right:unset;
left:0;
padding: 0;
}
.exc-custom{
background: rgba(0, 0, 0, 0.6) none repeat scroll 0 0;
padding:10px;
}
.exc-custom *{
color:#fff!important;
}
.title-custom {
font-size: 15px;
font-weight: bold;
}
HƯỚNG DẪN CHẶN XUẤT / NHẬP DỮ LIỆU WEBSITE WORDPRESS
Trong một số trường hợp. Người thiết kế Website hoặc chủ Website muốn chống bị xuất dữ liệu website khi bàn giao cho ‘Tuesday‘ như Ads Agency, SEO Agency, Content Agency … thì function đơn giản dưới đây sẽ giúp Quý anh chị và các bạn làm điều đó.
Tuy nhiên function này nên sử dụng kết hợp với chống sửa theme thì sẽ mang lại hiệu quả tốt nhất nhé.
Bước 1:
Copy và Paste function này vào tệp function.php của Theme đang hoạt động và lưu lại:add_action('admin_menu', function() { remove_submenu_page( 'tools.php', 'export.php' );remove_submenu_page( 'tools.php', 'import.php' ); });
Bước 2:
Reload lại trang chúng ta sẽ thấy mục Nhập vào / Xuất ra (Export / Import) sẽ không còn nữa. Như thế là đã thành công.
Bước 3: NÂNG CAO
Trong trường hợp gặp người dùng có quyền chỉnh sửa Theme. Người ta có thể can thiệp vào file function.php thì chức năng này là vô ích. Vì thế ta cần truy cập vào Hosting / VPS của mình. Sau đó copy dòng dưới đây và dán vào vị trí: ../public_html/wp-config.phpdefine( 'DISALLOW_FILE_EDIT', true );
Nguồn: https://pttuan410.com/huong-dan-cach-chen-bai-viet-lien-quan-vao-giua-bai-viet/ https://pttuan410.com/huong-dan-tang-diem-google-speed-insight-voi-plugin-litespeed/ https://pttuan410.com/huong-dan-tao-popup-co-the-bat-tat-cho-website-cua-ban-ma-khong-can-dung-plugin/ https://pttuan410.com/mot-so-hook-co-ban-cua-theme-flatsome-p-2/ https://pttuan410.com/mot-so-hook-co-ban-cua-theme-flatsome-p-1/
