Các bài đăng bởi lythaison.vn@gmail.com

WordPress breadcrumb

Nếu bạn có sử dụng Woocommerce bạn chỉ cần gọi đến breadcrumb của woocommerce

<?php woocommerce_breadcrumb(); ?>

Nếu bạn không dùng Woocommerce bạn có thể tự tạo Breadrumb theo cách khác như sau:

Tạo Breadcrumbs:

1. Code Function.php

/**
 * Generate breadcrumbs
 */
function get_breadcrumb() {
    echo '<a href="'.home_url().'" rel="nofollow">Home</a>';
    if (is_category() || is_single()) {
        echo "&nbsp;&nbsp;&#187;&nbsp;&nbsp;";
        the_category(' &bull; ');
            if (is_single()) {
                echo " &nbsp;&nbsp;&#187;&nbsp;&nbsp; ";
                the_title();
            }
    } elseif (is_page()) {
        echo "&nbsp;&nbsp;&#187;&nbsp;&nbsp;";
        echo the_title();
    } elseif (is_search()) {
        echo "&nbsp;&nbsp;&#187;&nbsp;&nbsp;Search Results for... ";
        echo '"<em>';
        echo the_search_query();
        echo '</em>"';
    }
}

Hiển thị:
Gọi get_breadcrumb() trong single.php hoặc header.php nếu bạn muốn

<div class="breadcrumb"><?php get_breadcrumb(); ?></div>

Cuối cùng là thêm CSS

.breadcrumb {
    padding: 8px 15px;
    margin-bottom: 20px;
    list-style: none;
    background-color: #f5f5f5;
    border-radius: 4px;
}
.breadcrumb a {
    color: #428bca;
    text-decoration: none;
}

Ngoài ra. nếu bạn dùng Yoast seo có thể sử dụng mặc định của Yoast Seo

<?php if ( function_exists('yoast_breadcrumb') ) {
  yoast_breadcrumb('<p id="breadcrumbs">','</p>');
} ?>

Hoặc:

<?php if ( function_exists('yoast_breadcrumb') ) {
  $breadcrumbs = yoast_breadcrumb("","",false);
} ?>

Liên kết: https://yoast.com/wordpress/plugins/breadcrumbs/

Tạo Icon Menu với Thư viện FONT AWESOME

Tất cả những gì bạn cần làm là thêm các lớp CSS sau khi kích hoạt thư viện Font Awesome này và các biểu tượng thích hợp sẽ được đặt bên cạnh các tùy chọn menu.
Bước 1. Chuyển đến Bảng điều khiển> Giao diện> Trình chỉnh sửa. Function.php của theme đang sử dụng và thêm vào như sau.

<? php 
function wmpudev_enqueue_icon_stylesheet () { 
    wp_register_style ( 'fontawesome', 'http:////maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'); 
    wp_enqueue_style ('fontawgie'); 
} 
add_action ('wp_enqueue_scripts', 'wmpudev_enqueue_icon_stylesheet'); 
?>

Bạn cũng có thể tải lên thư mục lưu trữ mã nguồn CSS của theme đang sử dụng với file: font-awesome.min.css và sử dụng Function để load sử dụng cho toàn bộ trang web. Thậm chí bạn có thể chèn nó trong theme như bất kỳ 1 file css nào khác giống như gọi các file Css, js tại phần của website. Tuy nhiên đây không phải là 1 cách tốt.

Bước 2. Bước này tương tự như những gì bạn đã làm trước đó sẽ vào Bảng điều khiển> Giao diện> Menu. Sau đó nhấp vào Tùy chọn màn hình ở góc trên cùng bên phải và chọn hộp kiểm bên cạnh Lớp CSS.
– Ngay tại Menu, bạn chèn các thẻ class phù hợp để có Icon như mình muốn.
+ Một gợi ý nhỏ: Bạn hãy xem trên góc phải, Click => mở rộng => ticket => Class
Bước 3.
Điều quan trọng là sử dụng tên lớp chính xác để các biểu tượng thích hợp được đặt bên cạnh các tùy chọn menu. Sau đây là danh sách các tên lớp đi kèm với Font Awesome và bạn nên sử dụng chúng cho phù hợp.

– Dành cho Gia đình: fa-lg fa-home
– Dành cho Tin tức: fa-lg fa-báo-o
– Dành cho Thư viện: fa-lg fa-camera-retro
– Dành cho Giới thiệu: fa-lg fa-information-circle
– Dành cho Liên hệ: fa fa-lg fa-phong-o

Trong đó fa là viết tắt của lớp chính, fa-lg là viết tắt của các biểu tượng lớn và phần còn lại theo yêu cầu. Ví dụ: bạn vào Bảng điều khiển> Giao diện> Menu và chọn menu Chính.

Tùy chọn nhà sẽ là tùy chọn đầu tiên và vì thế, bạn nên sử dụng fa fa-lg fa-home làm tên lớp để khi bạn lưu nó và làm mới trang chủ của mình, bạn có thể thấy sự thay đổi.

Nếu bạn có kiến ​​thức về CSS, bạn có thể dễ dàng thay đổi Phông chữ CSS tuyệt vời và thực hiện các thay đổi cần thiết theo yêu cầu của bạn.

Tìm Kiếm Gợi ý Kết Quả – WordPress Search Autocomplete using admin-ajax.php

Bước 1: Chèn Code vào Function.php vào theme  đang dùng. hoặc viêt Funciton cho plugin riêng

// Hiển thị Search Sugguet

/**
 * Enqueue scripts and styles.
 *
 * @since 1.0.0
 */
function ja_global_enqueues() {
	wp_enqueue_style(
		'jquery-auto-complete',
		'https://cdnjs.cloudflare.com/ajax/libs/jquery-autocomplete/1.0.7/jquery.auto-complete.css',
		array(),
		'1.0.7'
	);
	wp_enqueue_script(
		'jquery-auto-complete',
		'https://cdnjs.cloudflare.com/ajax/libs/jquery-autocomplete/1.0.7/jquery.auto-complete.min.js',
		array( 'jquery' ),
		'1.0.7',
		true
	);
	wp_enqueue_script(
		'global',
		get_template_directory_uri() . '/js/global.min.js',
		array( 'jquery' ),
		'1.0.0',
		true
	);
	wp_localize_script(
		'global',
		'global',
		array(
			'ajax' => admin_url( 'admin-ajax.php' ),
		)
	);
}
add_action( 'wp_enqueue_scripts', 'ja_global_enqueues' );
/**
 * Live autocomplete search feature.
 *
 * @since 1.0.0
 */
function ja_ajax_search() {
	$results = new WP_Query( array(
		'post_type'     => array( 'post', 'page','product' ),
		'post_status'   => 'publish',
		'nopaging'      => true,
		'posts_per_page'=> 100,
		's'             => stripslashes( $_POST['search'] ),
	) );
	$items = array();
	if ( !empty( $results->posts ) ) {
		foreach ( $results->posts as $result ) {
			$items[] = $result->post_title;
			
		}
	}
	wp_send_json_success( $items );
}
add_action( 'wp_ajax_search_site',        'ja_ajax_search' );
add_action( 'wp_ajax_nopriv_search_site', 'ja_ajax_search' );

Bước 2: Chèn Global Js vào File Js của theme đang dùng

/* globals global */
jQuery(function($){
	var searchRequest;
	$('.search-autocomplete').autoComplete({
		minChars: 2,
		source: function(term, suggest){
			try { searchRequest.abort(); } catch(e){}
			searchRequest = $.post(global.ajax, { search: term, action: 'search_site' }, function(res) {
				suggest(res.data);
			});
		}
	});
});

Bước 3: tạo template hiển thị hoặc chèn vào vị trí muốn hiển thị trong theme đang dùng

<form class="navbar-form" role="search" method="get" action="<?php echo esc_url( home_url( '/' ) ); ?>">
	<div class="form-group">
		<input type="text" name="s" class="form-control search-autocomplete" placeholder="Search">
	</div>
	<button type="submit" class="fa fa-search"></button>
</form>

Liên kết Github: https://gist.github.com/jaredatch/79e57c68438841b6c09b3ad4c12600f6

WOOCOMMERCE – Short Code lấy ra trang cửa hàng hoặc gọi sản phẩm

Trước tiên hãy tạo một trang mới, mình đặt tên cho nó là Trang chủ chẳng hạn để dễ nhận biết.

Ở phần nội dung, bạn có thể viết bất cứ cái gì vào, hoặc sử dụng các shortcode sau:

 [products orderby="date" order="desc"] 

– Hiển thị các sản phẩm mới nhất.

 [product_category category="slug-danh-muc-san-pham"] 

– Hiển thị sản phẩm mới dựa theo tên danh mục sản phẩm.

 [sale_products per_page="12"] 

– Hiển thị 12 sản phẩm đang được giảm giá.

 [best_selling_products per_page="12"] 

– Hiển thị 12 sản phẩm bán chạy.

 [product_attribute attribute='color' filter='black'] 

– Hiển thị sản phẩm có chứa thuộc tính là color và giá trị thuộc tính là black.

Hiển thị logo, tiêu đề trang, slogan với ảnh và tiêu đề danh mục sản phẩm, thương hiệu

– Chỉ hiển thị trong trang sản phẩm duy nhất:
Thay thế logo, tiêu đề trang, slogan (title, description – blog info) bằng tiêu tên Danh mục sản phẩm, và ảnh đại diện danh mục sản phẩm.

Tạo trang giới thiệu sản phẩm theo thương hiệu.

if ( is_product()) {
    global $post;    
    $terms = get_the_terms( $post->ID, 'product_cat' );
        foreach ($terms as $term) {
    $product_cat_id = $term->term_id;
        break;
    }
    // get the thumbnail id user the term_id
    $thumbnail_id = get_woocommerce_term_meta( $product_cat_id, 'thumbnail_id', true ); 
    // get the image URL
    $image = wp_get_attachment_url( $thumbnail_id ); 
        echo '<img src="'.$image.'" alt="" class="custom-logo" />';
                            
    global $post, $product;
    $categ = $product->get_categories();
        ?>
    <h1 class="site-title"><?php echo $categ; ?></h1>
    <?php
    global $post, $product;
        $categ = $product->get_categories();
        $term = get_term_by ( 'name' , strip_tags($categ), 'product_cat' ); ?>
    <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
}

Hiển thị ảnh thay thế cho Logo trong Danh Mục Sản Phẩm Woocommerce

Đôi khi chúng ta cần sử dụng ảnh đại diện chuyên mục sản phẩm để thay thế cho Logo. Đặc biệt đối với các danh mục sản phẩm theo thương hiệu…

<?php
// verify that this is a product category page
    if ( is_product_category() ){
    global $wp_query;
                            
    // get the query object
    $cat = $wp_query->get_queried_object();
                            
    // get the thumbnail id using the queried category term_id
    $thumbnail_id = get_woocommerce_term_meta( $cat->term_id, 'thumbnail_id', true ); 
                            
    // get the image URL
    $image = wp_get_attachment_url( $thumbnail_id ); 
                            
    // print the IMG HTML
    ?> <span class="custom-logo"> <?php echo "<img src='{$image}' alt='' width='auto' height='80' />"; ?> </span> <?php
    }
?>