Thêm Menu Descriptions vào WordPress Themes đang dùng

Hệ thống menu WordPress có tính năng tích hợp trong đó bạn có thể thêm mô tả với các mục menu. Tuy nhiên, tính năng này được ẩn theo mặc định. Ngay cả khi được bật, hiển thị chúng không được hỗ trợ mà không cần thêm một số mã. Hầu hết các chủ đề không được thiết kế với các mô tả mục menu. Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách bật mô tả menu trong WordPress và cách thêm mô tả menu trong các chủ đề WordPress của bạn.
Lưu ý: Hướng dẫn này yêu cầu bạn phải có sự hiểu biết cơ bản về phát triển chủ đề HTML, CSS và WordPress.

Khi nào và tại sao bạn muốn thêm mô tả menu?
Một số người dùng nghĩ rằng thêm mô tả menu sẽ giúp ích cho SEO. Tuy nhiên, chúng tôi nghĩ rằng lý do chính tại sao bạn muốn sử dụng chúng là để cung cấp trải nghiệm người dùng tốt hơn trên trang web của bạn.

Mô tả có thể được sử dụng để cho khách truy cập biết họ sẽ tìm thấy gì nếu họ nhấp vào một mục menu. Một mô tả hấp dẫn sẽ thu hút nhiều người dùng nhấp vào menu.

menu description

Bước 1: Bật Mô tả Menu

Đi đến Ngoại hình »Menu . Nhấp vào nút Tùy chọn màn hình ở góc trên bên phải của trang. Đánh dấu vào ô Mô tả .

menudescription

Điều này sẽ cho phép trường mô tả trong các mục menu của bạn. Như thế này:

addingmenudescription

Bây giờ bạn có thể thêm mô tả trình đơn vào các mục trong menu WordPress của mình. Tuy nhiên, những mô tả này sẽ không xuất hiện trong chủ đề của bạn. Để hiển thị các mô tả menu chúng ta sẽ phải thêm một số mã.

Bước 2: Thêm Class walker:

Lớp Walker mở rộng lớp hiện có trong WordPress. Về cơ bản, nó chỉ cần thêm một dòng mã để hiển thị các mô tả mục menu. Thêm mã này trong functions.phptập tin chủ đề của bạn .

class Menu_With_Description extends Walker_Nav_Menu {
    function start_el(&$output, $item, $depth, $args) {
        global $wp_query;
        $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
         
        $class_names = $value = '';
 
        $classes = empty( $item->classes ) ? array() : (array) $item->classes;
 
        $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
        $class_names = ' class="' . esc_attr( $class_names ) . '"';
 
        $output .= $indent . '

<li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>';
 
        $attributes = ! empty( $item->attr_title ) ? ' title="' . esc_attr( $item->attr_title ) .'"' : '';
        $attributes .= ! empty( $item->target ) ? ' target="' . esc_attr( $item->target ) .'"' : '';
        $attributes .= ! empty( $item->xfn ) ? ' rel="' . esc_attr( $item->xfn ) .'"' : '';
        $attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : '';
 
        $item_output = $args->before;
        $item_output .= '<a'. $attributes .'>';
        $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
        $item_output .= '
<span class="sub">' . $item->description . '</span>';
        $item_output .= '</a>';
        $item_output .= $args->after;
 
        $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
    }
}

Bước 3. Kích hoạt Walker trong wp_nav_menu
Các chủ đề WordPress sử dụng hàm wp_nav_menu () để hiển thị các menu. Chúng tôi cũng đã xuất bản một hướng dẫn cho người mới bắt đầu về cách thêm các menu điều hướng tùy chỉnh trong WordPress Themes . Hầu hết các chủ đề WordPress thêm menu trong header.php mẫu. Tuy nhiên, có thể chủ đề của bạn có thể đã sử dụng một số tệp mẫu khác để hiển thị các menu.

Những gì chúng ta cần làm bây giờ là tìm wp_nav_menu() chức năng trong chủ đề của bạn (rất có thể trong header.php) và thay đổi nó như thế này.

<?php $walker = new Menu_With_Description; ?>
 
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu', 'walker' => $walker ) ); ?>

Bước 4. Tạo css cho các mô tả menu

.menu-item {
border-left: 1px solid #ccc;
}
 
span.sub { 
font-style:italic;
font-size:small;
}

Bài viết liên quan

Nếu bạn biết bất cứ điều gì về tỷ lệ thoát, có lẽ bạn đã hiển thị các bài đăng liên quan trong WordPress. Tỷ lệ thoát về cơ bản thể hiện tỷ lệ phần trăm khách truy cập ban đầu vào một trang web mà người này đã đưa ra khỏi một trang web khác, thay vì tiếp tục đến các trang khác trong cùng một trang. Điều này có thể có một tác động đáng kể đến thu nhập adsense của bạn. Bằng cách thêm các bài viết liên quan trong WordPress, bạn đang giết chết ba con chim bằng một viên đá. Bạn đang giảm tỷ lệ thoát, bạn đang tăng thu nhập quảng cáo và cuối cùng bạn đang tăng số lần xem trang của mình. Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách bạn có thể hiển thị các bài đăng liên quan trong WordPress có và không có plugin.

Có hai phương pháp để làm như vậy và bạn có thể chọn bất kỳ phương pháp nào bạn thích. Một cách là làm điều đó mà không cần plugin và sau đó có một phương pháp khác là thực hiện với plugin.

Hiển thị bài viết liên quan trong WordPress mà không cần Plugin
Dán đoạn mã sau vào single.php nơi bạn muốn hiển thị các bài viết liên quan

<?php
//for use in the loop, list 5 post titles related to first tag on current post
$tags = wp_get_post_tags($post->ID);
if ($tags) {
echo 'Related Posts';
$first_tag = $tags[0]->term_id;
$args=array(
'tag__in' => array($first_tag),
'post__not_in' => array($post->ID),
'posts_per_page'=>5,
'caller_get_posts'=>1
);
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
while ($my_query->have_posts()) : $my_query->the_post(); ?>
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a>
 
<?php
endwhile;
}
wp_reset_query();
}
?>

https://www.wpbeginner.com/wp-tutorials/how-to-display-related-posts-in-wordpress/

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>
}