Toàn bộ hook cơ bản theme flatsome hay dùng

 

Chào các bạn! hôm nay mình sẽ chia sẽ toàn bộ hook cơ bản theme flatsome lên đây cho các bạn có thể tùy biến web theo sở thích của các bạn, cá nhân admin cũng hay sử dụng theme này vì tiện ích của nó, nên mình sẽ làm 1 bài toàn bộ trong bài này luôn, các bạn thấy hay thì click quảng cáo ủng hộ mình gói mỳ tôm nhé!

1. Hook là gi?

   Trong WordPress, hooks là điểm móc nằm trong hệ thống mã nguồn của WordPress, bạn có thể bổ sung các đoạn code thông qua hai hàm add_action và add_filter mà WordPress đã cung cấp sẵn qua Hook. Chúng ta có hai nhóm hooks chính đó là filter và action.

   • Filter là các điểm móc liên quan đến xử lý nội dung
   • Action là các điểm móc liên quan đến xử lý hành động

2. Cách sử dụng hook.

   function tenfunction(){
         /*Code bạn muốn hiển thị*/
   }
   add_action('vi_tri_cua_hook','tenfunction');

   vi_tri_cua_hook: là nơi bạn đặt các hook của woordpress vào để sử dụng theo ý của bạn.

3. 1. Toàn bộ hook cơ bản theme flatsome hay dùng.

      1. Hook product box (hiển thị sản phẩm)

         

         Hook product box (hiển thị sản phẩm)

         như hình các bạn có thể thấy tên các hook của flatsome woocommerce nhé, mình sẽ liệt kê ở dưới

         1. 1. WOOCOMMERCE_BEFORE_SHOP_LOOP_ITEM
            2. FLATSOME_WOOCOMMERCE_SHOP_LOOP_IMAGES
            3. FLATSOME_PRODUCT_BOX_TOOLS_TOP
            4. FLATSOME_PRODUCT_BOX_ACTIONS
            5. FLATSOME_PRODUCT_BOX_TOOLS_BOTTOM
            6. WOOCOMMERCE_BEFORE_SHOP_LOOP_ITEM_TITLE
            7. WOOCOMMERCE_SHOP_LOOP_ITEM_TITLE
            8. WOOCOMMERCE_AFTER_SHOP_LOOP_ITEM_TITLE
            9. FLATSOME_PRODUCT_BOX_AFTER
            10. WOOCOMMERCE_AFTER_SHOP_LOOP_ITEMví dụ: Thêm mã sản phẩm vàví dụ :  Code hiển thị mã sản phẩm product box trong image
                

                	function mahinhsp(){
                	global $product;
                	echo '<div class="ma-sp-img">Mã: ' . $product->get_sku().'</div>';
                	}
                	add_action('flatsome_woocommerce_shop_loop_images','mahinhsp');

                view rawmã sản phẩm hosted with  by GitHub
                
                Bạn có thể xem 1 số ví dụ qua bài dưới đây nhé! https://congdongblog.com/cach-tuy-bien-hook-trong-product-box/

      2. Hook BLOG POST (hiển thị tin tức dạng blog post)

         

         Hook BLOG POST (hiển thị tin tức dạng blog post)

         Về blog port thì flatsome có 2 hook

         1. flatsome_blog_post_before (hook nằm trên title)
         2. flatsome_blog_post_after (hook nằm dưới cùng)
         3. ví dụ hook blog

            function show_hook_blog(){
            echo 'nội dụng bạn muốn trên title';
            }
            add_action('flatsome_blog_post_before','show_hook_blog');

      3. Hook single blog post flatsome (chi tiết tin tức)

         Trong chi tiết blog của flatsome thì có 2 hook cơ bản như sau:

         1. the_content

         2. the_title

         3. ví dụ về thêm text trước nội dung

            function hook_before_content( $content ) {
             if( is_single() && ! empty( $GLOBALS['post'] ) ) {
               if ( $GLOBALS['post']->ID == get_the_ID() ) {
                 $cdblog_content = 'congdongblog.com - Before content';
                 $cdblog_content .= $content;
                }
                return $cdblog_content;
              }
            }
            add_filter( 'the_content', 'hook_before_content' );

         4. ví dụ về thêm text sau nội dung

            function aftercontent( $content ) {
                if( is_single() && ! empty( $GLOBALS['post'] ) ) {
                    if ( $GLOBALS['post']->ID == get_the_ID() ) {
                        $content .= 'Nội dung bạn muốn thêm vào sau content';
                    }
                }
                return $content;
            }
            add_filter('the_content', 'aftercontent');

         5. ví dụ về thêm text ở giữa content theo từng đoạn/

            add_filter('the_content', 'contentafter2para');
            function contentafter2para($content){
                if(is_single()){
                   $congdongblog_content = 'text cộng đồng blog ở sau đoạn 2';
                    $after = 2; //số đoạn bạn muốn hiển thị
                    $end = '</p>';
                    $content_congdongblog = explode($end, $content);
                    foreach($content_congdongblog as $key => $cont){
                        if(trim($cont)) {
                            $content_congdongblog[$key] .= $end;
                        }
                        if(($key + 1) == $after){  
                            $content_congdongblog[$key] .= $congdongblog_content;
                        }
                    }
                    $content = implode('', $content_congdongblog);
                }
                return $content;    
            }

         6. Hình ảnh minh họa

            

            ví dụ về thêm text ở giữa content theo từng đoạn/

      4. Hook single product flatsome woocommerce (chi tiết sản phẩm)

         1. flatsome_after_header

            Hook trên nếu bạn thêm vào sẽ hiển thị tất cả các trang (trang chủ, sản phẩm, tin tức …vv)
            nên bạn muốn thị ở đâu thì thêm điều kiện này vào

            if( is_product() ){
                 /*Hiển thị trong trang product page*/
            }
            if( is_single() ){
                 /*Hiển thị trong post*/
            }
            if( is_product_category() ){
                 /*Hiển thị trong product category*/
            }
            if( is_category() ){
                 /*Hiển thị trong product category*/
            }
            if( is_front_page() && is_home() ){
                 /*Hiển thị trong trang chủ*/
            }

         2. flatsome_before_product_sidebar

            Nằm ngay trên cùng sidebar sản phẩm của các bạn

         3. woocommerce_product_description_heading

            Hook này nằm ngay đầu tiên của mô tả sản phẩm

         4. flatsome_product_image_tools_bottom

            Hook này nằm ngay dưới ảnh đại diện

         5. flatsome_before_product_page

            Hook này nằm trong main product nhé

   2. Kết Thúc :

      Xong rồi, nếu bạn thấy hay hãy click quảng cáo cho mình đc 1 gói mỳ tôm ăn qua ngày là dược, thank you mọi người.

      Các bạn có thắc mắc gì thì liên hệ mình nhé thông qua website: congdongshop.com hoặc congdongblog.com của mình nhé,

      Nhớ like và comment trang của mình nhé, cảm ơn các bạn nhìu !

Hướng dẫn cách tắt Xác Nhận Email Quản Trị WordPress

 Thỉnh thoảng khi sử dụng Website WordPress bạn bắt gặp thông báo Xác minh Email Quản Trị như hình bên dưới đây.

Điều này không ảnh hưởng gì đến việc đăng nhập vào quản trị Website, bạn có thể sử dụng tính năng “Nhắc tôi sau”, tuy nhiên một vài người vẫn thấy bất tiện về điều này.

Để ẩn thông báo đó bạn chỉ cần thêm dòng code sau vào functions.php trong theme, thông báo đó sẽ không xuất hiện nữa.

add_filter( 'admin_email_check_interval', '__return_false' );

Cấu hình Email admin này ở đâu?

Để cấu hình thay đổi địa chỉ email này bạn vào: Cài đặt > Tổng quan sau đó thay đổi email khác nếu bạn muốn thay đổi nó.

Email admin dùng để làm gì?

Khi cấu hình email này, trong quá trình Website bạn đang được bảo trì hoặc xảy ra bất kì lỗi nào. Một vài trường hợp khác như có một tài khoản mới vừa được tạo, một bình luận đang chờ xét duyệt….Tất cả hành động vừa kể trên xảy ra, email này sẽ nhận được thông báo để bạn kiểm tra tình trạng đó có đúng hay không.

Email này khác với email tài khoản đăng nhập vào quản trị website WordPress. Bạn đừng nhầm lẫn nhé.

Hướng dẫn cách tạo Website bán hàng bằng WordPress mới nhất

 Bạn đang cần một Website để bán hàng, trong khi đó kinh phí kinh doanh hạn hẹp, không cho phép bạn chi trả thêm cho mảng Website để kinh doanh Online. Trong khi đó bạn có khả năng học hỏi bên mảng công nghệ, vậy thì bài viết này sẽ hướng dẫn bạn tự tay tạo Website bán hàng WordPress đầy đủ chức năng: Quản lí sản phẩm, quản lí kho, đơn hàng, giỏ hàng, vận chuyển và các hình thức thanh toán.

1. Các bước chuẩn bị

• Cài đặt XAMPP
• Tạo tên miền ảo
• Cài đặt WordPress trên localhost

2. Xem video Tạo Website bán hàng bằng WordPress

Để làm theo được như trong video hướng dẫn, trước tiên bạn cần phải Học WordPress cơ bản tại đây https://wpshare247.com/chuyen-muc/hoc-wordpress-tu-a-den-z

Còn nếu bạn không phải là chuyên gia lập trình, bạn có thể thao khảo bộ sưu tập mẫu Thiết kế Website bán hàng cực đẹp đại đây => Link

Chia sẻ bộ Field Widget giúp bạn Thiết Kế Website WordPress nhanh hơn

 Chỉ với bộ Source các Widget này đảm bảo các bạn có thể làm mọi Website trong thời gian ngắn nhất và có thể giống Web Mẫu 99%. Bộ tiện ích này sẽ chia thành 2 loại: Các trường widget Cơ bản và Nâng cao. Link Download ở cuối bài viết này

Các bạn chỉ cần copy và sửa lại key của các trường là có thể sử dụng lại trong các Widget WordPress. Nếu chưa biết cách tạo Widget như thế nào, bạn có thể xem lại bài này nhé https://wpshare247.com/huong-dan-cach-tao-moi-widget-don-gian-trong-wordpress

Xem Video Hướng Dẫn

1. Bộ field Widget cơ bản WordPress (Basic Fields)

1.1 Trường text – Text Field

<!-- text field -->

<p>

<label for="<?php echo esc_attr($this->get_field_id('title')); ?>"><?php esc_html_e('Text', 'wpshare247'); ?></label>

<input class="widefat" type="text" value="<?php echo esc_attr($instance['title']); ?>" name="<?php echo esc_attr($this->get_field_name('title')); ?>" id="<?php echo esc_attr($this->get_field_id('title')); ?>" />

</p>

1.2 Trường textarea – Textarea Field

<!-- textarea field -->

<p>

<label for="<?php echo esc_attr($this->get_field_id('description')); ?>"><?php esc_html_e('Textarea', 'wpshare247'); ?></label>

<textarea name="<?php echo esc_attr($this->get_field_name('description')); ?>" id="<?php echo esc_attr($this->get_field_id('description')); ?>" class="widefat"><?php echo esc_attr($instance['description']); ?></textarea>

</p>

1.3 Trường select box – Dropdown Field

<!-- select field -->

<p>

<label for="<?php echo esc_attr($this->get_field_id('select_field')); ?>"><?php esc_html_e('Select box', 'wpshare247'); ?></label>

<select id="<?php echo esc_attr($this->get_field_id('select_field')); ?>" class="widefat" name="<?php echo esc_attr($this->get_field_name('select_field')); ?>">

<option value="" <?php selected("", $instance['select_field']); ?>><?php esc_html_e('--Chọn--', 'wpshare247'); ?></option>

<option value="asc" <?php selected("asc", $instance['select_field']); ?>><?php esc_html_e('Tăng', 'wpshare247'); ?></option>

<option value="desc" <?php selected("desc", $instance['select_field']); ?>><?php esc_html_e('Giảm', 'wpshare247'); ?></option>

</select>

</p>

1.4 Trường checkbox – Checkbox Field

<!-- Checkbox field -->

<p>

<input class="checkbox" type="checkbox" <?php checked( $instance[ 'ws247_checkbox_field' ], 'on' ); ?> id="<?php echo $this->get_field_id( 'ws247_checkbox_field' ); ?>" name="<?php echo $this->get_field_name( 'ws247_checkbox_field' ); ?>" />

<label for="<?php echo $this->get_field_id( 'ws247_checkbox_field' ); ?>"><?php esc_html_e('Checkbox'); ?></label>

</p>

1.5 Trường checkbox chọn nhiều – Multiple Checkbox Field

<!-- Checkbox field -->

<p>

<input class="checkbox" type="checkbox" <?php checked( $instance[ 'ws247_checkbox_field' ], 'on' ); ?> id="<?php echo $this->get_field_id( 'ws247_checkbox_field' ); ?>" name="<?php echo $this->get_field_name( 'ws247_checkbox_field' ); ?>" />

<label for="<?php echo $this->get_field_id( 'ws247_checkbox_field' ); ?>"><?php esc_html_e('Checkbox'); ?></label>

</p>

<!-- Checkbox list field -->

<?php $arr_checkbox_list = array('vn' => 'Checkbox 1', 'tl' => 'Checkbox 2', 'ml' => 'Checkbox 3', 'id' => 'Checkbox 4'); ?>

<p>

<label for="<?php echo esc_attr($this->get_field_id('checkbox_list')); ?>"><?php esc_html_e('Checkbox List', 'wpshare247'); ?></label>

<ul>

<?php

$arr_checkbox_list_data = ($instance["checkbox_list"]) ? $instance["checkbox_list"] : array();

if($arr_checkbox_list):

foreach($arr_checkbox_list as $key => $val):

?>

<li>

<input class="checkbox" id="<?php echo $this->get_field_id("checkbox_list") . $key; ?>" name="<?php echo $this->get_field_name("checkbox_list"); ?>[]" type="checkbox" value="<?php echo $key; ?>" <?php checked("1", in_array($key, $arr_checkbox_list_data)); ?> />

<label for="<?php echo $this->get_field_id("checkbox_list") . $key; ?>"><?php echo $val; ?></label>

</li>

<?php

endforeach;

endif;

?>

</ul>

</p>

1.6 Trường radio – Radio Field

<!-- Radio field -->

<p>

<label for="<?php echo esc_attr($this->get_field_id('ws247_radio_field')); ?>"><?php esc_html_e('Radio', 'wpshare247'); ?></label>

<ul>

<li>

<input class="checkbox" type="radio" id="<?php echo $this->get_field_id( 'ws247_radio_field' ); ?>" name="<?php echo $this->get_field_name( 'ws247_radio_field' ); ?>" value="nam" <?php checked( $instance[ 'ws247_radio_field' ], 'nam' ); ?> />

<label for="<?php echo $this->get_field_id( 'ws247_radio_field' ); ?>"><?php esc_html_e('Nam'); ?></label>

</li>

<li>

<input class="checkbox" type="radio" id="<?php echo $this->get_field_id( 'ws247_radio_field_2' ); ?>" name="<?php echo $this->get_field_name( 'ws247_radio_field' ); ?>" value="nu" <?php checked( $instance[ 'ws247_radio_field' ], 'nu' ); ?> />

<label for="<?php echo $this->get_field_id( 'ws247_radio_field_2' ); ?>"><?php esc_html_e('Nữ'); ?></label>

</li>

</ul>

</p>

Bạn có thể tải Widget mẫu chứa các field cơ bản tại đây

 wpshare247_basic_fields.php

2. Bộ field Widget nâng cao WordPress

Giới thiệu sơ lược các Field nâng cao của Widget giúp bạn Thiết Kế Web nhanh hơn.

2.1 Trường lặp lại, sắp xếp – Sortable Repeater Field

2.2 Trường hình – Image Field Upload

2.3 Trường chọn màu sắc – Color Picker Field

2.4 Trường chọn Form liên hệ – Contact Form 7 Field

2.5 Trường chọn Trang, Bài viết, Sản Phẩm – Page id, Post id, Product id Field

2.6 Trường chọn Menu – Navigation Menu Field

Update trường mới Version 2

2.7 Trường chọn Datepicker Field chọn ngày tháng năm

2.8 Trường Thư viện hình Photo Gallery Field

2.9 Trường Autocomplete Field

Để sử dụng được các field Widget nâng cao này, bạn vui lòng download tại đây nhé: