KÍCH HOẠT WORDPRESS MULTISITE

Bước 1: Tắt hết Plugin
Bước 2: mở tập tin wp-config.php của website mẹ cần kích hoạt tính năng này và chèn đoạn sau vào bên dưới

 ?php 
 define( 'WP_ALLOW_MULTISITE', true );

Bước 3: Tại trang quản trị WordPress tìm mục Tools -> Network Setup để bắt đầu cài đặt.
Bước 4: Làm theo hướng dẫn => hoàn thành
Tham khảo: https://dieuhau.com/huong-dan-cai-dat-multisite-network/

WordPress: Cách tạo Mục lục cho bài viết

Đây là cách tự động tạo Mục lục cho mỗi bài viết của bạn, nếu bạn đang sử dụng WordPress.

Bây giờ bạn có thể nhận thấy rằng chủ đề của trang web bao gồm một bảng nội dung cho mỗi bài đăng. Bạn có thể tự hỏi nếu tôi thực sự dành thời gian tự tạo ra mục lục đó. Vâng, xin lỗi để thất vọng, nhưng câu trả lời là: Không. Thực tế nó được tạo tự động dựa trên các tiêu đề bên trong bài viết. Tôi nghĩ nó khá hấp dẫn, vì vậy tôi quyết định chia sẻ với bạn cách thực hiện.

Giới thiệu

Trên thực tế, đây là một cách tiếp cận rất phổ biến để tạo ra một mục lục. Vì vậy, thông thường, mà nó là những gì MS Word sử dụng để tạo ra nó quá. Thực tế, có 2 cách để tạo ra một bảng nội dung trong WordPress:

  1. Thông qua JavaScript, ở mặt trước.
  2. Thông qua PHP, khi hiển thị nội dung.

Bây giờ, không có sự khác biệt trực quan giữa hai phương pháp. Nhưng, từ góc độ SEO, tôi đã chọn cái thứ hai, vì TOC cũng được nhúng vào chính nội dung trang.

Phương thức này bao gồm việc loại bỏ tất cả các thành phần tiêu đề và tạo một danh sách của chúng, trong đó mọi mục đều trỏ đến chính tiêu đề bên trong bài viết.

Vì vậy, hãy xem cách nó được thực hiện trong mã.

Tạo Mục lục HTML

Bước đầu tiên là tạo HTML. Điều này có nghĩa là loại bỏ nội dung HTML của bài đăng để lấy từng phần tử tiêu đề và nối nó vào TOC mới được tạo.

Để làm điều này, chúng tôi sẽ thêm một bộ lọc mới cho  the_content, từ functions.phptệp chủ đề của chúng tôi .

Trước tiên, hãy xem toàn bộ mã trông như thế nào, và sau đó chúng tôi sẽ phân tích từng chút một.

// Inject the TOC on each post.
add_filter('the_content', function ($content) {
    global $tableOfContents;
    $tableOfContents = "
        <div class='h5'>
            Table of Contents <span class='toggle'>+ show</span>
        </div>
        <div class='items'>
            <div class='item-h2'>
                <a href='#preface'>Preface</a>
            </div>
    ";
    $index = 1;
    // Insert the IDs and create the TOC.
    $content = preg_replace_callback('#<(h[1-6])(.*?)>(.*?)</\1>#si', function ($matches) use (&$index, &$tableOfContents) {
        $tag = $matches[1];
        $title = strip_tags($matches[3]);
        $hasId = preg_match('/id=(["\'])(.*?)\1[\s>]/si', $matches[2], $matchedIds);
        $id = $hasId ? $matchedIds[2] : $index++ . '-' . sanitize_title($title);
        $tableOfContents .= "<div class='item-$tag'><a href='#$id'>$title</a></div>";
        if ($hasId) {
            return $matches[0];
        }
        return sprintf('<%s%s id="%s">%s</%s>', $tag, $matches[2], $id, $matches[3], $tag);
    }, $content);
    $tableOfContents .= '</div>';
    return $content;
});

Sử dụng Mục lục
Tôi đã tạo một hàm đơn giản để trả về $tableOfContentsbiến toàn cục. Điều đó không thực sự cần thiết, nhưng nó giữ cho nó phù hợp với các thành phần WordPress khác và bạn không phải kiểm tra sự tồn tại trong mẫu của mình.


function get_the_table_of_contents()
{
    global $tableOfContents;
    return $tableOfContents;
}

Bên trong vòng lặp.

Đây là cách nó trông bên trong mẫu:


<div id="preface" class="post-content row">
    
<div class="content col">
        <?php the_content() ?>
    </div>

    <?php if (is_single()): ?>
        
<div class="post-toc col-auto">
            
<div class="wrapper">
                <?= get_the_table_of_contents() ?>
            </div>

            
<div class="placeholder"></div>

        </div>

    <?php endif ?>

WordPress: How to Generate a Table of Contents for Posts

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