Danh mục lưu trữ: Chưa được phân loại

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.