Ở bài “Các Plugin wordpress thêm nofollow cho các liên kết ngoài” mình cũng đã giới thiệu chi tiết về tác dụng cũng như mặc hại của liên kết nofollow bạn có thể theo dõi để biết thêm thông tin. Tiếp tục trong bài viết này mình sẽ hướng dẫn các bạn thêm các liên kết nofollow một cách tự động cho các liên kết ngoài ở trong nội dung bài viết (the_content) và các đoạn trích (the_excerpt) mà không cần phải sử dụng một plugin nào cả. Hãy cùng blog thủ thuật thêm thuộc tính nofollow tự động cho link ngoài trong WordPress tự động!

Thuộc tính nofollow tự động cho link ngoài không Plugin

Nếu bạn cảm thấy việc sử dụng Code gây ảnh hưởng đến quá trình seo thì bạn có thể dùng một số Plugin để tùy biến theo mục đích. Tuy nhiên đoạn code mình cung cấp dưới đây chỉ có tác dụng tự động thêm thuộc tính nofollow tự động cho tất cả các link ngoài trong WordPress tự động ở nội dung bài viết (the_content) và các đoạn trích (the_excerpt), còn các nơi khác không có tác dụng vì thế theo mình bạn hãy an tâm sử dụng đoạn code hữu ích này!

Đầu tiên hãy truy cập vào trang quản trị WordPress sau đó vào Menu Appearance (Giao diện) > Kích chọn Editor (sửa).

Giao diện chỉnh sửa xuất hiện > Nhìn sang cột phía bên phải tìm tập tin Functions.php (Chức năng của giao diện) và Kích chọn.

Sau đó hãy copy toàn bộ đoạn code sau đây và dán vào trước thẻ đóng ?> của file Functions.php (lưu ý nếu bạn không thấy thẻ đóng ?> trong tập tin Functions.php thì có thể dán nó ở vị trí cuối cùng là được).

/* Auto nofollow link */
add_filter('the_content', 'my_nofollow');
add_filter('the_excerpt', 'my_nofollow');
function my_nofollow($content) {
    return preg_replace_callback('/<a[^>]+/', 'my_nofollow_callback', $content);
}
function my_nofollow_callback($matches) {
    $link = $matches[0];
    $site_link = get_bloginfo('url');
    if (strpos($link, 'rel') === false) {
        $link = preg_replace("%(href=\S(?!$site_link))%i", 'rel="nofollow" $1', $link);
    } elseif (preg_match("%href=\S(?!$site_link)%i", $link)) {
        $link = preg_replace('/rel=\S(?!nofollow)\S*/i', 'rel="nofollow"', $link);
    }
    return $link;
}

Chú ý: Đầu tiên có 2 câu lệnh “add_filter” nếu bạn không muốn thêm thuộc tính nofollow ở phần nào thì hãy xóa bớt câu lệnh đó đi là được.

Sau khi chèn code xong hãy Nhấn Update File (Cập nhật tập tin).

#Kiểm tra

Cuối cùng hãy ra ngoài trang chủ chọn một bài viết nào đó có liên kết ngoài sau đó chuột phải > Kích chọn Inspect (Kiểm tra phần tử) hoặc View page source. Và lúc này bạn sẽ thấy các liên kết ngoài đều được gắn thuộc tính rel=”nofollow”. Thật đơn giản và dễ dàng phải không.

Lưu ý: Các liên kết nội bộ sẽ không bị ảnh hưởng, vì thế bạn có thể SEO liên kết nội bộ thỏa mái!

Cuối cùng không có gì hơn nếu bạn cảm thấy bài viết có ích hãy subscribe blog của mình thường xuyên để cập nhật những bài viết mới nhất qua Email – Chân thành cảm ơn!

Trong bài viết trước đây liên quan đến giao diện Genesis mình có hướng dẫn các bạn cách thay đổi chữ Read more trong theme Genesis bằng lệnh, giúp bạn có thể thay đổi chữ Read More… thành chữ khác mà bạn muốn, tiếp tục trong bài viết này mình sẽ hướng dẫn các bạn cách đếm lượt xem bài viết trong theme Genesis chuẩn nhất.

Đếm lượt xem bài viết trong theme Genesis

Như mình đề cập bên trên lượt xem bài viết khá là quan trọng nó cho biết sự quan trọng của bài viết đối với độc giả, nếu bạn là một người quản trị trang Web thì cũng cần đến tính năng này để biết được nội dung đó có hữu ích hay không? hãy cùng blog thủ thuật tìm hiểu cách đếm lượt xem bài viết trong theme Genesis chuẩn nhất.

Hãy thực hiện các bước sau đây để tích hợp tính năng đếm lượt xem bài viết trong giao diện Genesis.

#1 Tạo lượt xem bài đăng trên theme Genesis

Đầu tiên hãy sao chép toàn bộ đoạn mã bên dưới và dán trực tiếp vào File Functions.php của giao diện con đang sử dụng.

// Set Post Views :It counts everytime single posts is viewed
if ( !function_exists( 'ja_setPostViews' ) ){
	function ja_setPostViews( $postID ){
		$count_key = 'ja_post_views';
		$count = get_post_meta($postID, $count_key, true);
		
		if( $count == '' ){
			$count = 0;
			delete_post_meta( $postID, $count_key );
			add_post_meta( $postID, $count_key, '0' );
		} else {
			$count++;
			update_post_meta( $postID, $count_key, $count );
		}
	}
}
// Get the number of views
if ( !function_exists( 'ja_getPostViews' ) ){
	function ja_getPostViews( $postID ){
		$count_key = 'ja_post_views';
		$count = get_post_meta( $postID, $count_key, true );
		if( $count == '0' || $count == '' ){
			delete_post_meta( $postID, $count_key );
			add_post_meta( $postID, $count_key, '0' );
			$label = '';
			return;
	 	}else{
	 		$label = ( $count == '1' ) ? __( '', 'text-domain' ) : __( '', 'text-domain' );
	 	}
	 	return $count.$label;
	}
}
// Set the post view code in single page
add_action( 'genesis_before_loop', 'ja_SinglePostView' );
function ja_SinglePostView(){
	if( is_single() ){
		ja_setPostViews( get_the_ID() );
	}
}
// Post View Shortcode
if ( !function_exists( 'ja_PostView_shortcode' ) ){
	function ja_PostView_shortcode( $atts, $content = null ){
		extract( shortcode_atts( array(), $atts, 'postview' ));
		return ''.ja_getPostViews( get_the_ID() ).'';
	}
	add_shortcode( 'postview', 'ja_PostView_shortcode' );
}

Sau đó hãy lưu lại!

#2 Hiển thị lượt xem bài viết

Tương tự bạn hãy hãy sao chép toàn bộ đoạn mã bên dưới và dán trực tiếp vào File Functions.php của giao diện con đang sử dụng.

// Apply Relative Date Lengths in Genesis
add_filter( 'genesis_post_info', 'sp_post_info_filter' );
function sp_post_info_filter($post_info) {
if ( !is_page() ) {
$post_info = ' [post_date format="relative" relative_depth="1"]  [postview] [post_comments zero="0 Comments" one="1 Comment" more="% Comments"]';
return $post_info;
}}

Lưu ý: Thông thường đoạn mã này đã có sẵn trong giao diện con Genesis, vì thế bạn chỉ cần tìm đoạn mã này và thêm vào Shortcode sau: [postview] thực hiện xong bạn hãy lưu lại ra ngoài trang chủ và tận hưởng kết quả. Demo bạn có thể xem trực tiếp trên trang Web của tôi!

Cuối cùng không có gì hơn nếu bạn cảm thấy bài viết có ích hãy subscribe blog của mình thường xuyên để cập nhật những bài viết mới nhất qua Email – Chân thành cảm ơn!

Trong bài viết trước đây về thủ thuật WordPress mình có hướng dẫn các bạn cách cách ẩn toàn bộ liên kết ngoài trong bài viết đơn giản giúp bạn có thể dễ dàng ẩn tất cả các liên kết ngoài từ trang Web một cách nhanh chóng để dễ dàng hơn trong việc tùy biến trang Web tiếp tục trong bài viết này mình sẽ hướng dẫn các bạn cách vô hiệu trường Website trong Form bình luận WordPress.

Vô hiệu trường Website trong Form bình luận WordPress

Như mình đã đề cập bên trên nếu bạn quản lý được hết tất cả các liên kết từ các bình luận thì bạn nên để lại trường Website này tuy nhiên đến một thời điểm nào đó bình luận trên trang Web của bạn trở nên quá nhiều bình luận, và bạn không thể quản lý được hết các liên kết từ bình luận thì bạn nên vô hiệu hóa trường Website này đi! điều này không những giúp hạn chế bình luận rác mà còn giúp các bình luận có chất lượng hơn.

#1 Sử dụng mã lệnh

Đối với phương pháp này bạn chỉ cần sử dụng một đoạn mã lệnh nhỏ và dán trực tiếp vào tập tin Functions.php của giao diện con đang sử dụng là được.

Giao diện Genesis

Hãy sử dụng đoạn mã bên dưới và dán vào phía dưới cùng của tập tin Functions.php của giao diện con đang sử dụng là được!

add_filter( 'genesis_comment_form_args', 'url_filtered' );
add_filter( 'comment_form_default_fields', 'url_filtered' );
function url_filtered( $fields ) {
if ( isset( $fields['url'] ) )
unset( $fields['url'] );
if ( isset( $fields['fields']['url'] ) )
unset( $fields['fields']['url'] );
return $fields;
}

Đối với giao diện WordPress chung

Sử dụng đoạn mã bên dưới và dán vào sau thẻ <?php của tập tin Functions.php đang sử dụng

function remove_comment_fields($fields) {
    unset($fields['url']);
    return $fields;
}
add_filter('comment_form_default_fields','remove_comment_fields');

hoặc sử dụng đoạn mã sau

add_filter('comment_form_default_fields', 'website_remove');
function website_remove($fields)
{
if(isset($fields['url']))
unset($fields['url']);
return $fields;
}

Đối với giao diện thesis

Đối với những ai đang sử dụng giao diện Thesis thì việc vô hiệu trường Website hơi khác một tí, hãy sao chép đoạn mã bên dưới và dán vào tập tin custom.css của giao diện là được.

.custom #commentform input[name="url"],  .custom #commentform label[for="url"] { display:none; }

#2 Sử dụng Plugin

Có rất nhiều Plugin có thể giúp bạn tùy biến các trường trong Form bình luận WordPress một cách dễ dàng và nhanh chóng, hãy sử dụng một số plugin được cung cấp bên dưới để bạn có thể tùy biến các trường trong Form bình luận.

Tải Plugin Remove Fields: https://goo.gl/DPUYTD

Tải Plugin Remove Comment Website/URL Box: https://goo.gl/23hM5K

Đầu tiên như thường lệ bạn hãy tải một trong hai Plugin trên và tiến hành cài đặt Plugin (nếu bạn chưa biết cách cài đặt Plugin cho WordPress bạn có thể tham khảo bài viết hướng dẫn cài đặt Plugin cho WordPress). Sau khi cài đặt xong bạn tiến hành kích hoạt Plugin và cấu hình Plugin, việc cấu hình Plugin tương đối đơn giản chỉ cần thực hiện vô hiệu hóa hoặc kích hoạt các trường trong Form bình luận là được.

Cuối cùng không có gì hơn nếu bạn cảm thấy bài viết có ích hãy subscribe blog của mình thường xuyên để cập nhật những bài viết mới nhất qua Email – Chân thành cảm ơn!

Trong bài viết trước đây về thủ thuật wordpress mình có hướng dẫn các bạn cách tạo icon cho các chuyên mục hiển thị trên Widget giúp bạn có thể dễ dàng tích hợp các Icon cho Widget mà không cần phải sử dụng Plugin, tiếp tục trong bài viết này mình sẽ hướng dẫn các bạn cách thay đổi chữ Read more trong theme Genesis đơn giản giúp bạn có thể dễ dàng tùy biến chữ “Read more” trong theme Genesis.

Cách thay đổi chữ Read more trong theme Genesis

Như bạn đã biết đối với theme Genesis thì bạn cần phải có một giao diện con và mọi thay đổi đều được thực hiện trên giao diện này vì thế mỗi lần theme Genesis được phát hành phiên bản mới thì bạn thỏa mái update lên phiên bản mới mà không sợ phải cấu hình lại. Trong bài viết này blog thủ thuật sẽ hướng dẫn các bạn cách thay đổi chữ Read more trong theme Genesis đơn giản.

#1 Thay đổi chữ Read more

Đầu tiên hãy sao chép đoạn mã bên dưới và dán vào tập tin Function.php của giao diện con đang sử dụng (hãy dán vào trong thẻ <?php).

/** Customize Read More Text */
add_filter( 'excerpt_more', 'child_read_more_link' );
/** Read more link */
add_filter( 'get_the_content_more_link', 'child_read_more_link' );
add_filter( 'the_content_more_link', 'child_read_more_link' );
function child_read_more_link() { 
return '<a class="buttonred" href="' . get_permalink() . '" rel="nofollow">Đọc thêm...</a>';
}

Lưu ý: Thay chữ “Đọc thêm…” thành chữ khác mà bạn muốn!

#2 Sử dụng CSS làm nổi bật

Sau khi thực hiện xong bạn hãy sử đoạn CSS bên dưới để là nổi bật chữ “Đọc thêm”.

.buttonred{
background-color:#222;
border:none;
color:#fff;
cursor:pointer;
font-family:'Arial',sans-serif;
padding:2px 24px;
text-transform:uppercase;
width:auto;
-moz-border-radius:28px;
-webkit-border-radius:28px
}
.buttonred:hover {
    background: none repeat scroll 0 0 #ff9b2f;
}

Bạn có thể tùy biến code theo sở thích của mình bằng cách vô một số trang Web hỗ trợ tạo button online, sau khi tạo xong bạn chỉ cần lấy CSS tương ứng và thực hiện các thay đổi là xong.

Sau khi thực hiện xong nếu trang Web của bạn có sử dụng chức năng tạo Cache thì hãy xóa nó và xóa luôn cache của trình duyệt, khi thực hiện xong bạn sẽ thấy kết quả như bên dưới!

Quá đơn giản để bạn có thể dễ dàng thay đổi chữ Read more trong theme Genesis phải không?

Cuối cùng không có gì hơn nếu bạn cảm thấy bài viết có ích hãy subscribe blog của mình thường xuyên để cập nhật những bài viết mới nhất qua Email – Chân thành cảm ơn!

Trong bài viết trước đây về thủ thuật WordPress mình có hướng dẫn các bạn cách tích hợp tính năng bình luận theo đoạn văn bản WordPress giúp bạn có thể dễ dàng tích hợp form bình luận ngay trên các đoạn văn bản giúp người dùng có thể dễ dàng để lại ý kiến ở mọi nơi mà không cần phải di chuyển xuống dưới cùng, tiếp tục trong bài viết này mình sẽ hướng dẫn các bạn cách di chuyển Form bình luận lên trên các bình luận đã đăng.

Di chuyển Form bình luận lên trên các bình luận đã đăng

Theo nhận xét của nhiều người thì việc thiết kế Form bình luận phía trên hoặc dưới cái nào là tốt hơn? chưa có câu trả lời chuẩn xác, một số hệ thống bình luận nổi tiếng như Disqus và Livefyre họ đặt hộp “submit” phía trên danh sách các câu trả lời. Một số người cảm thấy Form bình luận ở trên làm giảm nhu cầu tương tác với trang Web trước khi đặt câu hỏi, và họ nghĩ rằng khi Form bình luận ở phía dưới sẽ khuyến khích được độc giả tham gia vào các cuộc thảo luận. Vậy nếu là bạn? bạn sẽ tùy chỉnh Form ở vị trí nào? nếu bạn đang cần di chuyển Form bình luận lên trên các bình luận đã đăng thì hãy theo dõi bài viết sau.

#1 Đối với giao diện Genesis

Việc di chuyển Form bình luận lên trên các bình luận đã đăng đối với những ai đang sử dụng giao diện Genesis tương đối đơn giản và dễ dàng chỉ cần sử dụng câu lệnh được cung cấp bên dưới và dán vào trực tiếp File Function.php của giao diện con đang sử dụng là xong!

function move_commentbox_to_top () {
if ( is_single() ) {
if ( have_comments() ) {
remove_action( 'genesis_comment_form', 'genesis_do_comment_form' );
add_action( 'genesis_list_comments', 'genesis_do_comment_form' , 5 );
}}}
add_action( 'genesis_before_comments' , 'move_commentbox_to_top' );

Câu lệnh trên nó sẽ xóa form giao diện mặc định và đặt nó vào một vị trí mới đó là “genesis_before_comments”. Lưu lại tập tin và tận hưởng thành quả là xong.

Có thể trong thời gian đến một số giao diện sẽ tích hợp tính năng này ngay trong theme giúp bạn có thể chọn lựa sự hiển thị của Form (hiện tại mình đang biết giao diện Paradise được xây dựng bởi WPcanban.com đã tích hợp tính năng này trong Customizer).

#2 Đối với các giao diện khác

Đầu tiên hãy vào Appearance > Editor, sau đó hãy xác định tập tin liên quan đến chức năng bình luận (thông thường nó sẽ là comments.php). Sau đó hãy xác định Form đoạn mã của Form bình luận bằng cách sử dụng tính năng tìm kiếm của trình duyệt với từ khóa là “comment_form” và nó sẽ có dạng như sau.

<?php
comment_form( array(
'title_reply_before' => '<h2 id="reply-title" class="comment-reply-title">',
'title_reply_after'  => '</h2>',
) );
?>

Sau đó hãy cắt và di chuyển nó đến vị trí bạn muốn là được.

Lưu ý: Hãy sao lưu tập tin trước khi chỉnh sửa mã, nếu bạn không biết chắc mình đang thực hiện có chính xác hay không!

Sau khi thực hiện xong hãy lưu lại và kiểm tra kết quả mà bạn đã thực hiện, nếu có lưu cache bạn nhớ hãy xóa cache trước khi xem kết quả, quá đơn giản để bạn có thể di chuyển Form bình luận lên trên các bình luận đã đăng phải không?

Cuối cùng không có gì hơn nếu bạn cảm thấy bài viết có ích hãy subscribe blog của mình thường xuyên để cập nhật những bài viết mới nhất qua Email – Chân thành cảm ơn!

Trong bài viết trước đây về thủ thuật WordPress mình có giới thiệu với các bạn cách tạo nút Back to Top trong giao diện Genesis đơn giản giúp bạn có thể dễ dàng tích hợp nút back to top cho giao diện Genesis mà không cần sử dụng Plugin tiếp tục trong bài viết này mình sẽ hướng dẫn các bạn cách thêm Gravatar vào Post Info trong giao diện Genesis đơn giản.

Thêm GRavatar vào Post Info trong giao diện Genesis

Việc tích hợp Gravatar vào Post Info giúp cho thông tin bài viết được chi tiết hơn đồng thời còn tạo cho trang Web của bạn có một phong cách riêng vậy để tích hợp Gravatar vào Post Info trong giao diện Genesis phải làm sao? hãy cùng blog thủ thuật tìm hiểu cách thêm Gravatar vào Post Info trong giao diện Genesis đơn giản nhất.

Đầu tiên bạn hãy truy cập vào tập tin functions.php của giao diện đang sử dụng (nếu bạn dùng giao diện Genesis thì chắc chắn bạn sẽ có một giao diện con (child theme) hãy truy cập vào tập tin functions.php của giao diện con) bằng cách truy cập vào trang quản lý WordPress > Vào Giao diện > Kích chọn Sửa (bạn có thể tham khảo bài viết sửa giao diện, plugin WordPress không cần FTP để nắm rõ hơn cách chỉnh sửa các tập tin của giao diện). Sau đó hãy sao chép đoạn mã tương ứng bên dưới và dán vào cuối cùng của tập tin functions.php.

//* Add gravatar before entry title
add_action( 'genesis_entry_header', 'bg_entry_gravatar', 7 );
function bg_entry_gravatar() {
	if ( is_singular( 'post' ) ) {
		echo '<div class="entry-avatar">';
		echo get_avatar( get_the_author_meta( 'user_email' ), 240 );
		echo '</div>';
	}
}

Tùy biến Gravatar

Lúc này bạn sẽ thấy “gravatar ” xuất hiện cùng với thông tin Post Info tuy nhiên không được đẹp cho lắm vì thế bạn cần sử dụng tiếp đoạn mã bên dưới và dán vào tập tin cuối cùng tập tin Style.css của giao diện đang sử dụng.

/* Entry Avatar
--------------------------------------------- */
.entry-header .avatar {
	border: 5px solid #f5f5f5;
	border-radius: 50%;
	float: none;
	height: 120px;
	margin-bottom: 20px;
	text-align: center;
	width: 120px;
}

Xem video thêm Gravatar vào Post Info

Trong đoạn CSS này bạn hãy tùy chỉnh sao cho phù hợp với trang Web mình nhất, sau khi thực hiện xong hãy lưu lại và nhớ xóa Cache, quá đơn giản để bạn có thể thêm Gravatar vào Post Info trong giao diện Genesis phải không?

Cuối cùng không có gì hơn nếu bạn cảm thấy bài viết có ích hãy subscribe blog của mình thường xuyên để cập nhật những bài viết mới nhất qua Email – Chân thành cảm ơn!

Trong bài viết trước đây về thủ thuật WordPress mình có hướng dẫn các bạn cách tùy chỉnh Post Info cho giao diện Genesis chuyên nghiệp giúp bạn có thể dễ dàng tùy biến Post Info cho giao diện Genesis mà không cần phải sử dụng Plugin mà vẫn đảm bảo tính thẩm mĩ và chuyên nghiệp tiếp tục trong bài viết này mình sẽ hướng dẫn các bạn cách tạo nút Back to Top trong giao diện Genesis không sử dụng Plugin đơn giản nhất.

Cách tạo nút Back to Top trong giao diện Genesis

Trong WordPress có rất nhiều Plugin có thể giúp bạn thực hiện việc tích hợp tính năng Back to Top một cách nhanh chóng và đơn giản tuy nhiên nếu bạn cảm thấy Plugin là không cần thiết thì có thể sử dụng phương pháp sau đây để tích hợp tính năng Back to Top cho giao diện Genesis một cách đơn giản và nhanh chóng, hãy cùng blog thủ thuật tìm hiểu cách tạo nút Back to Top trong giao diện Genesis không dùng Plugin.

Thực hiện 3 bước sau đây để tích hợp Back to Top vào giao diện Genesis

Đầu tiên bạn hãy truy cập vào tài khoản hosting và tạo một tập tin với tên là “scroll.js”, hãy tạo tập tin này trong thư mục JS của giao diện con đang sử dụng (…/public_html/wp-content/themes/<your_child_theme>/ js/scroll.js), sau đó hãy sao chép toàn bộ đoạn mã bên dưới và dán vào tập tin “scroll.js”.

// ===== Back to Top Button ==== 
jQuery(document).ready(function($){
   	 //grab the "back to top" link
	$back_to_top = $('.topButton');

	$(window).scroll(function(){
	    if ($(this).scrollTop() >= 100) {        // If page is scrolled to bottom less than 50px
	        $('.topButton').fadeIn(200);    // Fade in the arrow
	    } else {
	        $('.topButton').fadeOut(200);   // Else fade out the arrow
	    }
    });

    $back_to_top.on('click', function(event){     // When arrow is clicked
	    event.preventDefault();
	    $('body,html').animate({
	        scrollTop : 0                       // Scroll to top of body
	    }, 500);
	});
});

Sau khi tạo được tập tin “scroll.js”, tiếp tục hãy sao chép đoạn mã bên dưới và dán vào trong tập tin Functions.php của giao diện con đang sử dụng (dán ở cuối tập tin Functions.php).

//* Enqueue Back to Top Button script
add_action( 'wp_enqueue_scripts', 'back_to_top_script' );
function back_to_top_script() {
	wp_enqueue_script( 'scroll', get_stylesheet_directory_uri() . '/js/scroll.js', array( 'jquery' ), '', true );
}
// Add To Top button
add_action( 'genesis_before', 'genesis_to_top');
	function genesis_to_top() {
	 echo '<a href="#" class="topButton">&uarr;</a>';
}

Tùy biến nút Back to Top

Như vậy là bạn đã tạo được nút Back to Top rồi đấy, tuy nhiên còn rất xấu vì thế bạn hãy sao chép đoạn mã bên dưới và dán vào cuối tập tin “style.css” của giao diện con đang sử dụng là xong.

/* # Back to Top Button -------------- */
.topButton{
	display:inline-block;
	height:60px;
	width:60px;
	position:fixed;
	bottom:40px;
	right:10px;
	padding-top: 20px;
	background-color: #8dc746;
	color: #fff;
	opacity:0.6;
	text-decoration: none;
	text-align: center;
}
.topButton:hover{
	opacity:1;
	color: #fff;
	transition:1s;
}

Sau đó hãy lưu lại và xóa Cache, ra ngoài trang chủ và tận hưởng thành quả.

Xem video hướng dẫn tạo Back to top cho Genesis

Quá đơn giản để bạn có thể tạo nút Back to Top trong giao diện Genesis phải không?

Cuối cùng không có gì hơn nếu bạn cảm thấy bài viết có ích hãy subscribe blog của mình thường xuyên để cập nhật những bài viết mới nhất qua Email – Chân thành cảm ơn!

Trong bài viết trước đây mình có hướng dẫn các bạn cách tùy chỉnh Post meta cho giao diện Genesis chuyên nghiệp giúp bạn có thể thay thế giao diện Post meta theo phong cách mới và độc đáo, tiếp tục trong bài viết này mình sẽ hướng dẫn các bạn cách tùy chỉnh Post Info cho giao diện Genesis chuyên nghiệp.

Cách tùy chỉnh Post Info cho giao diện Genesis

Thông thường các thông tin Post Info thường hay xuất hiện sau mỗi tiêu đề bài viết tùy theo mỗi giao diện mà có sự bố trí khác nhau, đối với giao diện Genesis thì nó thường hay xuất hiện sau mỗi tiêu đề bài viết. Trong bài viết này mình sẽ hướng dẫn các bạn cách tùy chỉnh Post Info cho giao diện Genesis chuyên nghiệp nhất.

Đầu tiên bạn hãy truy cập vào tập tin functions.php của giao diện đang sử dụng (nếu bạn dùng giao diện Genesis thì chắc chắn bạn sẽ có một giao diện con (child theme) hãy truy cập vào tập tin functions.php của giao diện con) bằng cách truy cập vào trang quản lý WordPress > Vào Giao diện > Kích chọn Sửa (bạn có thể tham khảo bài viết sửa giao diện, plugin WordPress không cần FTP để nắm rõ hơn cách chỉnh sửa các tập tin của giao diện). Sau đó hãy sao chép đoạn các đoạn mã tương ứng bên dưới và dán vào functions.php.

Đầu tiên đoạn mã sử dụng Font Awesome

//Font awesome
add_action( 'wp_enqueue_scripts', 'load_font_awesome' );
function load_font_awesome() {
	wp_enqueue_style( 'font-awesome', '//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css', array(), '4.7.0' );	
}

Hiện tại Font Awesome mới nhất là 4.7 hãy sao chép đoạn mã trên dán vào sau thẻ <?php là được. Sau khi dán xong tiếp tục sử dụng đoạn mã sau đây và cũng dán trực tiếp vào  functions.php.

/** Date */
function crunchify_get_updated_date_for_post() {
    $date = get_the_modified_date(); 
    return $date;
}
add_shortcode( 'crunchify_modified_date', 'crunchify_get_updated_date_for_post' );
 
add_filter( 'genesis_post_info', 'crunchify_add_updated_date_info' );
function crunchify_add_updated_date_info($post_info) {
	$post_info = '<i class="fa fa-clock-o"></i> [post_date] <i class="fa fa-refresh"></i> [crunchify_modified_date] <i class="fa fa-user"></i> [post_author_posts_link] <i class="fa fa-commenting-o"></i> [post_comments] [post_edit]';
	return $post_info;
}

Với đoạn mã trên sẽ giúp bạn hiển thị các thông tin như ngày viết bài, ngày sửa bài, tác giả… Sau khi thực hiện xong ra ngoài trang chủ và tận hưởng thành quả. Và bạn sẽ thấy kết quả như bên dưới.

Xem video hướng dẫn tùy chỉnh Post Info cho giao diện Genesis

Với các thao tác đơn giản ở trên bạn có thể thiết kế cho mình một Post Info chuyên nghiệp rồi đấy, quá đơn giản để bạn có thể tùy chỉnh Post Info cho giao diện Genesis phải không?

Cuối cùng không có gì hơn nếu bạn cảm thấy bài viết có ích hãy subscribe blog của mình thường xuyên để cập nhật những bài viết mới nhất qua Email – Chân thành cảm ơn!

Trong bài viết về thủ thuật WordPress trước đây mình có hướng dẫn các bạn cách tạo bài viết liên quan có hình ảnh cho giao diện Genesis không Plugin giúp bạn có thể tạo bài viết liên quan một cách chuyên nghiệp mà không cần phải sử dụng Plugin tiếp tục trong bài viết này mình sẽ hướng dẫn các bạn cách tùy chỉnh Post meta cho giao diện Genesis.

Tùy chỉnh Post meta cho giao diện Genesis

Như mình đã nói ở trên Post meta sẽ hiển thị các chuyên mục, thẻ tag… thông thường trong giao diện Genesis nó nằm ở cuối bài viết. Trong bài viết này mình sẽ hướng dẫn các bạn cách tùy chỉnh Post meta cho giao diện Genesis theo phong cách chuyên nghiệp nhất, hãy cùng blog thủ thuật tìm hiểu cách tùy chỉnh Post meta cho giao diện Genesis.

Hình bên dưới là giao diện mặc định của Post meta (như bạn thấy nó rất đơn điệu và xấu xí).

Đầu tiên bạn hãy truy cập vào tập tin style.css của giao diện đang sử dụng (nếu bạn dùng giao diện Genesis thì chắc chắn bạn sẽ có một giao diện con (child theme) hãy truy cập vào tập tin style.css của giao diện con) bằng cách truy cập vào trang quản lý WordPress > Vào Giao diện > Kích chọn Sửa (bạn có thể tham khảo bài viết sửa giao diện, plugin WordPress không cần FTP để nắm rõ hơn cách chỉnh sửa các tập tin của giao diện). Sau đó hãy tìm đoạn mã sau trong tập tin style.css.

p.entry-meta {
 font-size: 16px;
 margin-bottom: 0;
}
.entry-header .entry-meta {
 margin-bottom: 24px;
}
.entry-footer .entry-meta {
 border-top: 2px solid #f5f5f5;
 padding-top: 24px;
}
.entry-categories,
.entry-tags {
 display: block;
}

Và tiến hành thay đổi các đoạn mã ở trên tương ứng như sau.

Thay đổi màu nền Post meta

.entry-footer .entry-meta {
 border-top: 2px solid #f5f5f5;
 padding: 24px;
 background: #DCDADA;
}

Chú ý: Thay mã màu tại thuộc tính background thành màu sắc mà bạn muốn là được.

Hiển thị Post meta trên một dòng

Hãy chỉnh sửa đoạn lệnh

.entry-categories,
.entry-tags {
 display: block;
}

thành

.entry-categories,
.entry-tags {
}

Ở đoạn lệnh này bạn chỉ cần loại bỏ thuộc tính display: block; là được.

Tùy chỉnh màu nền khi di chuyển chuột đến thuộc tính

Đầu tiên bạn hãy xóa đoạn mã sau

.entry-categories,
.entry-tags {
 display: block;
}

Sau đó thay thế toàn bộ đoạn lệnh bên dưới

.entry-categories a,
.entry-tags a {
padding: 6px 5px;
margin-right: 0;
margin-bottom: 4px;
line-height: 100%;
display: inline-block;
background-color: #ffffff;
border-radius: 3px;
-webkit-border-radius: 3px;
}

.entry-categories a:hover,
.entry-tags a:hover {
background-color: #DA4453;
border-color: #DA4453;
color: #ffffff;
text-decoration: none;
}

Sau khi thực hiện xong hãy lưu lại và kiểm nghiệm kết quả.

Tùy chỉnh hiển thị

Ngoài ra nếu bạn muốn thay đổi chữ Filed Under và Tagged With thành chữ khác thì có thể sử dụng đoạn lệnh sau đây dán vào file Functions.php của giao diện con Genesis.

//* Customize the post meta function
add_filter( 'genesis_post_meta', 'sp_post_meta_filter' );
function sp_post_meta_filter($post_meta) {
if ( !is_page() ) {
	$post_meta = '[post_categories sep="/" before="Chuyên mục: "] [post_tags sep="/" before="Thẻ tag: "]';
	return $post_meta;
}}

Sau đó hãy cập nhật tập tin. Sau khi thực hiện xong bạn sẽ có được kết quả như hình dưới.

Quá đơn giản để bạn có thể tùy chỉnh Post meta cho giao diện Genesis theo cách chuyên nghiệp phải không?

Cuối cùng không có gì hơn nếu bạn cảm thấy bài viết có ích hãy subscribe blog của mình thường xuyên để cập nhật những bài viết mới nhất qua Email – Chân thành cảm ơn!