Thủ thuật WordPress https://wordpress.vnkings.com Chia sẻ thủ thuật Wordpress, hướng dẫn sử dụng Wordpress cơ bản đến nâng cao <![CDATA[Cách chặn Bot Ahrefs quét dữ liệu website thành công 100%]]> https://wordpress.vnkings.com/cach-chan-bot-ahrefs-quet-du-lieu-website-thanh-cong-100.html Chào các bạn, Gần đây mình nhận được câu hỏi làm thế nào để chặn Bot Ahrefs quét dữ liệu trên website. Vấn đề khá hay, chắc cũng có nhiều bạn quan tâm, nên mình xin phép viết bài hướng dẫn về phần này. Trước tiên ta cần hiểu Ahrefs là gì? – Ahrefs là […]

]]>

Cách chặn Bot Ahrefs quét dữ liệu website thành công 100%

Cách chặn Bot Ahrefs quét dữ liệu website thành công 100%
Cách chặn Bot Ahrefs quét dữ liệu website thành công 100%

Thủ thuật WordPress

Chào các bạn,
Gần đây mình nhận được câu hỏi làm thế nào để chặn Bot Ahrefs quét dữ liệu trên website. Vấn đề khá hay, chắc cũng có nhiều bạn quan tâm, nên mình xin phép viết bài hướng dẫn về phần này.

Trước tiên ta cần hiểu Ahrefs là gì?
– Ahrefs là một công cụ trả phí dùng để phân tích các thông số của website.
– Ahrefs tạo ra các Bot đi vào website và thu thập dữ liệu các website đó như Backlinks, Referring domains, Organic keywords, Top pages…

Chặn Ahrefs để làm gì?
– Nếu bạn có một website với các từ khóa hot đang nằm trên top Google và rất nhiều đối thủ đang muốn cạnh tranh từ khóa đó, họ có thể sẽ dùng tới Ahrefs để phân tích website của bạn. Vậy nên khi chặn Ahrefs Bot thì công cụ này sẽ không còn chính xác khi phân tích website của bạn nữa.

Qua tìm hiểu thì bên phía Ahrefs có cung cấp một đoạn mã chèn vào file Robots.txt để Bot của trang này không vào quét dữ liệu nữa, mình đã thử nhưng khi check file log (lịch sử truy cập) thì Ahrefs Bot vẫn vào quét dữ liệu đều (Ahrefs là một công cụ trả phí, nó mà cung cấp cách chặn chính xác thì không khác gì tự bẻ cần câu cơm của mình).

Ngoài ra có nhiều bạn cũng từ viết chia sẻ chặn Ahrefs qua file .htaccess
– Chặn Ahrefs Bot trên file .htaccess qua IP và UserAgent: Tuy nhiên Ahrefs cập nhật và thay đổi IP Bot liên tục, về phần UserAgent đã đặt theo nhiều hướng dẫn trên mạng mà Bot vẫn vào đều.

Cuối cùng mình đã nghĩ ra một cách khá đơn giản:
Cách Làm
– Bạn thêm đoạn này vào đầu của file header.php trong thư mục Theme đang sử dụng:

<?php $useragent = $_SERVER ['HTTP_USER_AGENT'];
if (preg_match('/AhrefsBot/',$useragent)){
 	wp_redirect('http://google.com');
    	exit();
}
?>

Giải thích:
$useragent = $_SERVER ['HTTP_USER_AGENT'];: giúp ta kiểm tra UserAgent truy cập là gì.
if (preg_match('/AhrefsBot/',$useragent)){}: Phát hiện đây có phải AhrefsBot hay không.
wp_redirect('http://google.com');: Nếu là AhrefsBot thì chuyển con bot này nhảy sang trang Google.
– Mình vẫn sử dụng cách nhận biết User Agent để chặn Bot, tuy nhiên mình đã sử lý trong file header.php
– Đã thử giả lập UserAgent thành AhrefsBot và đã Redirect thành công sang Google, trong thống kê truy cập cũng không còn AhrefsBot nữa.

Chúc các bạn thành công!

]]>
<![CDATA[Chặn comment spam đơn giản cho wordpress không cần dùng plugin]]> https://wordpress.vnkings.com/chan-comment-spam-don-gian-cho-wordpress-khong-can-dung-plugin.html Bài viết này mình sẽ giúp các bạn Chặn comment spam đơn giản cho wordpress không cần dùng plugin.

]]>

Chặn comment spam đơn giản cho wordpress không cần dùng plugin

Chặn comment spam đơn giản cho wordpress không cần dùng plugin
Chặn comment spam đơn giản cho wordpress không cần dùng plugin

Thủ thuật WordPress

Gần đây mình được một người bạn nhờ xử lý vấn đề spam comment trên các site vệ tinh wordpress của bạn ấy,
Tuy bạn này cài khá nhiều plugin chặn comment, xóa đoạn hiển thị ô comment nhưng tình trạng spam comment vẫn tiếp diễn.
Có lẽ khá nhiều bạn mới tìm hiểu WordPress cũng đang gặp tình trạng trên, vậy nên trong bài viết này mình sẽ giúp các bạn Chặn comment spam đơn giản cho wordpress không cần dùng plugin.

Nếu Website bạn đang dùng Tiếng Anh:
Vào trang quản trị chọn: Settings > Discussion
Sau đó bạn tích chọn và bỏ tích theo hình bên dưới

 

 

Nếu Website bạn đang dùng Tiếng Việt:
Vào trang quản trị chọn: Cài Đặt > Thảo Luận

Giải thích:
Gửi thông báo tới bất kỳ trang nhật ký trực tuyến nào được bài viết này liên kết tới: Khi có một trang khác copy bài của bạn, thì web bạn sẽ tự động tạo 1 comment bao gồm tiêu đề và link của trang web copy bài đó.
Cho phép liên kết các thông báo từ các blog khác (pingbacks và trackbacks) trên các bài viết mới: Nếu bạn đăng bài và thêm link nội(link cùng web để tối ưu onpage), thì nó cũng tạo 1 comment gồm 1 đoạn trích dẫn kèm link của bài kia.
Cho phép mọi người gửi phản hồi cho bài viết mới: cho phép mọi người comment bài viết.
Vậy nếu bạn không muốn có comment thông báo hay comment từ khách thì chỉ cần bỏ các tùy chọn trên.

Tuy nhiên, bạn nên tích vào cả ô Thành viên phải đăng ký và đăng nhập để phản hồi. để chắc chắn rằng không có phần mềm spam nào có thể vượt qua được bước này (mặc định wordpress không cho phép thành viên đăng ký nên sẽ không ai comment được vào web bạn).

Vậy là sau vài bước tùy chọn đơn giản bạn đã có thể chặn hoàn toàn comment spam trên web của mình rồi.
Cảm ơn các bạn đã luôn ủng hộ Vnkings.

]]>
<![CDATA[Kết nối comment fanpage facebook và bài viết trên website]]> https://wordpress.vnkings.com/ket-noi-comment-fanpage-facebook-va-bai-viet-tren-website.html Hôm nay tình cờ trên Group Wordpress Nâng Cao của mình có một câu hỏi là làm sao có thể Kết nối comment fanpage facebook và bài viết trên website…

]]>

Kết nối comment fanpage facebook và bài viết trên website

Kết nối comment fanpage facebook và bài viết trên website
Kết nối comment fanpage facebook và bài viết trên website

Thủ thuật WordPress

Chào các bạn, hôm nay tình cờ trên Group WordPress Nâng Cao của mình có một câu hỏi là làm sao có thể Kết nối comment fanpage facebook và bài viết trên website, câu hỏi khá hay nên mình làm một bài hướng dẫn nhỏ để giúp các bạn nào đang cần có thể tự làm được.

 

Bước 1: Lấy ID ứng dụng facebook và gán Meta App ID vào đầu trang web.
– Bạn vào link: https://developers.facebook.com
Di chuột vào: Ứng dụng của tôi và chọn Tạo ứng dụng mới

Tiếp đến nhập tên ứng dụng và danh mục của ứng dụng (theo ý của bạn).

– Chọn Tạo ứng dụng.

Xong bước này bạn sẽ được chuyển đến trang quản lý ứng dụng của bạn trên facebook:

Bạn điền các thông tin theo website của bạn và copy lại ID ứng dụng để bước sau còn dùng nhé.

Bây giờ bạn cần chèn thẻ meta Appid vào header.php (Bước này giúp phần comment của bạn sẽ có thêm nút: Công cụ kiểm duyệt. Cho phép bạn quản lý, xóa các comment không mong muốn bằng facebook trên bài viết của bạn).

Bạn mở file header.php và thêm đoạn code này:

<meta property="fb:app_id" content="ID_ỨNG_DỤNG" />

Trong đó ID_ỨNG_DỤNG chính là ID mà bạn đã lấy được ở bước bên trên.

Lưu ý: Nếu bạn sử dụng Yoast Seo thì có thể vào giống hình bên dưới để chèn ID ứng dụng:

 

 

Bước 2: Chèn Script SDK và mã hiển thị comment facebook vào single.php:


<div class="fb-comments" data-href="<?php the_permalink() ;?>" data-width="100%" data-numposts="10"></div>


<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/vi_VN/sdk.js#xfbml=1&version=v2.8&appId=481144482076898";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Lưu ý: Đoạn script có appId thì bạn thay bằng ID ứng dụng đã tạo ở bước 1, ví dụ: của Vnkings là 481144482076898.

Sau khi chèn xong bạn vào một bài viết ngẫu nhiên của Web mình và xem đã có phần comment facebook chưa nhé.

 

 

Bước 3: thiết lập Phảnh chiếu bình luận giữa Website và Fanpage Facebook.

Bạn vào link: https://developers.facebook.com/tools/comments

– Chọn cài đặt.

– Tìm tới Phản chiếu bình luận và tích vào ô: Có, hãy phản chiếu tới (Fanpage bạn đang dùng cho website).

Bây giờ bạn thử đăng link website của mình lên Fanpage và comment thử ở Fanpage hoặc Website, bạn sẽ thấy comment tự động xuất hiện ở cả Website và bài trên Fanpage của mình.

Các bạn có thể Comment bài và vào link này
Bài Trên Fanpage
để xem kết quả.

Chúc các bạn thành công!.
Nếu gặp khó khăn hãy comment để mình có thể giúp bạn nhé!.

]]>
<![CDATA[Khắc phục web Server Việt Nam nhưng vào rất chậm do đứt cáp quang]]> https://wordpress.vnkings.com/khac-phuc-tinh-trang-website-server-viet-nam-nhung-vao-rat-cham.html Khắc phục web Server Việt Nam nhưng vào rất chậm do đứt cáp quang, có nhiều bạn đặt Server ở Việt Nam những vẫn thấy Website của mình chậm…

]]>

Khắc phục web Server Việt Nam nhưng vào rất chậm do đứt cáp quang

Khắc phục web Server Việt Nam nhưng vào rất chậm do đứt cáp quang
Khắc phục web Server Việt Nam nhưng vào rất chậm do đứt cáp quang

Thủ thuật WordPress

Khắc phục web Server Việt Nam nhưng vào rất chậm do đứt cáp quang

Có nhiều bạn đặt Server ở Việt Nam những vẫn thấy Website của mình chậm thì có thể xem qua vài cách khắc phục sau đây:

– Kiểm tra các link JS – CSS trên trang:

Mình thấy có rất nhiều bạn sử dụng link Boostrap tại Bootstrapcdn.com, và dùng Jquery từ Google chứ không dùng file trên Server của website các bạn.

– Tạm thời bỏ các js liên quan đến Facebook và Google:


Các website chúng ta hay đặt fanpage hay script like share Facebook, Google thì tạm thời các bạn nên bỏ ra khỏi web

Lưu ý: Các bạn nhớ Backup hoặc lưu các đoạn đó, sau đợt đứt cáp thì có thể lấy dùng lại.

=> Với thực trạng đứt cáp quang AAG theo thông báo tới tận ngày 28/01/2017 mới sửa xong thì anh em nên tối ưu lại website để load web đỡ bị chậm. Nên lưu các tập tin CSS và JS về Server đang dùng rồi dùng link đó thì website các bạn sẽ load nhanh như thường.

 

Một Số File mà Vnkings đang dùng nếu các bạn chưa thể truy cập các host nước ngoài để down về:
Vnkings-Support-Files.Zip
File bao gồm:
– jquery.min.js (v1.12.4).
– bootstrap.min.css (v3.3.7).
– bootstrap.min.js (v3.3.7).

Chúc anh em đón tết vui vẻ!!!
Tiến Lực.

]]>
<![CDATA[Thêm reCAPTCHA vào form đăng nhập đăng ký WordPress]]> https://wordpress.vnkings.com/them-recaptcha-vao-form-dang-nhap-dang-ky-wordpress.html Thêm reCAPTCHA vào form đăng nhập đăng ký Wordpress không cần dùng Plugin bảo vệ website an toàn hơn, giúp bạn nâng cao kiến thức lập trình về Wordpress

]]>

Thêm reCAPTCHA vào form đăng nhập đăng ký WordPress

Thêm reCAPTCHA vào form đăng nhập đăng ký WordPress
Thêm reCAPTCHA vào form đăng nhập đăng ký WordPress

Thủ thuật WordPress

Sau khi mình làm 3 bài viết hướng dẫn tạo trang Đăng nhập, Đăng ký, Đăng bài cho wordpress không cần dùng plugin, có khá nhiều bình luận hỏi cách tích hợp thêm reCAPTCHA vào để chống Spam. Vậy nên bài này mình sẽ giúp các bạn giải quyết được vấn đề trên.

them-recaptcha-vao-form-dang-nhap-dang-ky-wordpress-khong-can-plugin

Thêm reCAPTCHA vào form đăng nhập đăng ký WordPress

– Đầu tiên các bạn truy cập trang web này:
https://www.google.com/recaptcha/admin

them-recaptcha-vao-form-dang-nhap-dang-ky-wordpress-khong-can-plugin1
– Nhập Label và Domain bạn cần thêm reCAPTCHA rồi chọn Register

– Sau khi chọn Register Google sẽ cho bạn các thông tin sau:
them-recaptcha-vao-form-dang-nhap-dang-ky-wordpress-khong-can-plugin2

Link Script

<script src='https://www.google.com/recaptcha/api.js'></script>

Đoạn script trên chèn vào giữa cặp thẻ

<head> </head>

nằm trong file header.php ở thư mục theme bạn đang dùng

Đoạn HTML

<div class="g-recaptcha" data-sitekey="6Le8DSETAAAAAK6JTk-zJyah8ZH-ujGzeYbbbyDL"></div>

Đoạn HTML này chèn vào trong form bạn cần thêm reCAPTCHA

Site key

6Le8DSETAAAAAK6JTk-zJyah8ZH-ujGzeYbbbyDL

Đoạn này chính là data-sitekey ở đoạn HTML bên trên

Secret key
6Le8DSETAAAAAPz2a2H9bewOu-UtaqZ1x5eePU73
Đoạn mã này rất quan trọng nó để check tham số Secret xem có trùng đoạn mã bên trên hay không

Bây giờ bạn mở file đăng ký đăng nhập hoặc đăng bài của bạn cần thêm reCAPTCHA
Phần xử lý form bạn cần thêm các đoạn code này :

if(isset($_POST['g-recaptcha-response'])){
  $vnkings_tut_captcha=$_POST['g-recaptcha-response'];
}
if(!$vnkings_tut_captcha){
  echo 'Bạn chưa xác thực reCAPTCHA!.</h2>';
  exit;
}
$kiemtra=file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=Ma_Secret_Cua_Ban&response=".$vnkings_tut_captcha."&remoteip=".$_SERVER['REMOTE_ADDR']);
if($kiemtra.success==false) {
  echo 'Bạn đang làm gì vậy ?';
  exit;
}else{
// code xử lý đăng ký
}

Hãy thay Ma_Secret_Cua_Ban thành mã Secret bên trên của bạn

Giải thích :

  • https://www.google.com/recaptcha/api/siteverify: đây chính là API Request của Google cho bạn
  • secret,response,remoteip: các tham số giúp google xác định được có đúng là người dùng hay không hay Boot
  • if($kiemtra.success==false){}: Nếu xác định là người dùng trả về là sai thì dừng xử lý form đăng ký
  • else{}: tiếp tục form xử lý đăng nhập, đăng ký, hoặc đăng bài…

Cuối cùng: đây là ví dụ tổng quan cho trang đăng ký thành viên của mình:

them-recaptcha-vao-form-dang-nhap-dang-ky-wordpress-khong-can-plugin

<?php
/*
 Template Name: Đăng Ký
 */
 ?>
<?php get_header();?>
<?php if(is_user_logged_in()) { $user_id = get_current_user_id();$current_user = wp_get_current_user();$profile_url = get_author_posts_url($user_id);$edit_profile_url  = get_edit_profile_url($user_id); ?>
	<span>Chào <a class="text-warning" href="<?php echo $profile_url ?>"><?php echo $current_user->display_name; ?></a>!, Bạn đã có tài khoản, bạn có muốn <a class="text-primary" href="<?php echo wp_logout_url( get_permalink() ); ?>">thoát</a> tài khoản này không ?</span>
	<?php } else { ?>
		<div class="dangkytaikhoan">	
			<?php
			$err = '';
			$success = '';
			global $wpdb, $PasswordHash, $current_user, $user_ID;
			if(isset($_POST['task']) && $_POST['task'] == 'register') {	
				$pwd1 = $wpdb->escape(trim($_POST['pwd1']));
				$pwd2 = $wpdb->escape(trim($_POST['pwd2']));
				$email = $wpdb->escape(trim($_POST['email']));
				$username = $wpdb->escape(trim($_POST['username']));
				
				// Xác Thực reCAPTCHA
				if(isset($_POST['g-recaptcha-response'])){
				$vnkings_tut_captcha=$_POST['g-recaptcha-response'];
				}
				if(!$vnkings_tut_captcha){
				  echo 'Bạn chưa xác thực reCAPTCHA!.';
				  exit;
				}
				$kiemtra=file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=Ma_Secret_Cua_Ban=".$vnkings_tut_captcha."&remoteip=".$_SERVER['REMOTE_ADDR']);
				if($kiemtra.success==false) {
				  echo 'Bạn đang làm gì vậy ?';
				  exit;
				}
				// Kết thúc reCAPTCHA
				
				if( $email == "" || $pwd1 == "" || $pwd2 == "" || $username == "") {
					$err = 'Vui lòng không bỏ trống những thông tin bắt buộc!';
				} else if(!filter_var($email, FILTER_VALIDATE_EMAIL)) {
					$err = 'Địa chỉ Email không hợp lệ!.';
				} else if(email_exists($email) ) {
					$err = 'Địa chỉ Email đã tồn tại!.';
				} else if($pwd1 <> $pwd2 ){
					$err = '2 Password không giống nhau!.';        
				} else if (!isset( $_POST['post_nonce_field'] ) && wp_verify_nonce( $_POST['post_nonce_field'], 'post_nonce' )){
					$err = 'Bạn đang làm gì vậy ?';
				} else {
					$user_id = wp_insert_user( array ('user_pass' => apply_filters('pre_user_user_pass', $pwd1), 'user_login' => apply_filters('pre_user_user_login', $username), 'user_email' => apply_filters('pre_user_user_email', $email), 'role' => 'subscriber' ) );
					if( is_wp_error($user_id) ) {
						$err = 'Error on user creation.';
					} else {
						do_action('user_register', $user_id);
						$success = 'Bạn đã đăng ký thành công!';
					}
				}
			}
			?>
			<div id="message">
				<?php
					if(! empty($err) ) :
						echo '<p class="bg-danger text-danger col-md-12">'.$err.'</p>';
					endif;
				?>
				<?php
					if(! empty($success) ) :
						echo '<p class="bg-success text-success col-md-12">'.$success.'</p>';
					endif;
				?>
			</div>
			<form class="form-horizontal" method="post" role="form">
				<div class="form-group">
					<label class="control-label  col-sm-3" for="username">Tên đăng nhập:</label>
					<div class="col-sm-6">
					<input type="text" class="form-control" name="username" id="username" placeholder="Tên Đăng nhập">
					</div>
				</div>
				<div class="form-group">
					<label class="control-label col-sm-3" for="email">Email:</label>
					<div class="col-sm-6">
						<input type="email" class="form-control" name="email" id="email" placeholder="Email">
					</div>
				</div>
				<div class="form-group">
					<label class="control-label col-sm-3" for="pwd1">Password:</label>
					<div class="col-sm-6">
						<input type="password" class="form-control" name="pwd1" id="pwd1" placeholder="Nhập password">
					</div>
				</div>
				<div class="form-group">
					<label class="control-label col-sm-3" for="pwd2">Nhập lại Pass:</label>
					<div class="col-sm-6">
						<input type="password" class="form-control" name="pwd2" id="pwd2" placeholder="Nhập lại password">
					</div>
				</div>
				<?php wp_nonce_field( 'post_nonce', 'post_nonce_field' ); ?>
				<div class="g-recaptcha" data-sitekey="Ma_Site_key_Cua_Ban"></div>
				<div class="form-group">
					<div class="col-sm-offset-3 col-sm-9">
					<button type="submit" class="btn btn-primary">Đăng ký</button>
					<input type="hidden" name="task" value="register" />
					</div>
				</div>
			</form>
			
		</div>
	<?php } ?>
<?php get_footer();?>

Nếu đã thử mà Bạn không tự làm được, hãy để lại comment cho Mình để chúng ta cùng giải quyết!
Chúc các bạn thành công!

]]>
<![CDATA[Quản lý thời gian hoạt động cho Vip Member trong WordPress]]> https://wordpress.vnkings.com/quan-ly-thoi-gian-hoat-dong-cho-vip-member-trong-wordpress.html Quản lý thời gian hoạt động cho Vip member trong Wordpress không cần dùng đến plugin! dễ dàng sử dụng và tùy biến

]]>

Quản lý thời gian hoạt động cho Vip Member trong WordPress

Quản lý thời gian hoạt động cho Vip Member trong WordPress
Quản lý thời gian hoạt động cho Vip Member trong WordPress

Thủ thuật WordPress

Vnkings Mới gặp 1 câu hỏi trong Page WordPress Nâng Cao hỏi cách chỉ cho phép thành viên thuộc nhóm Vip được xem nội dung trong bài viết, ngoài ra còn đặt thời gian hết hạn cho thành viên Vip đó. Thấy vấn đề khá hay nên mình nghĩ nên tạo 1 bài về vấn đề này : Quản lý thời gian hoạt động cho Vip member trong WordPress

quan-ly-vip-member-vnkings4

Có các vấn đề chính cần giải quyết:

  • Tạo nhóm thành viên Vip
  • Thêm thời gian hết hạn vào thành viên vip đó.

Cùng giải quyết các vấn đề trên:
Đầu tiên bạn tạo 1 nhóm Vip Member
quan-ly-vip-member-vnkings
Thêm đoạn code bên dưới vào file functions.php

$vnkings_new_user = add_role('vipuser', __( 'Vip User' ),
    array(
        'read'         => true,
        'edit_posts'   => true,
        'delete_posts' => false,
    )
);

Thêm trường thời gian cho thành viên đó
(đây là trường bạn nhập vào và sẽ có dạng ngày-tháng-năm như trong hình)
quan-ly-vip-member-vnkings2
Thêm đoạn code bên dưới vào file functions.php

function add_fields_user($profile_fields){
$profile_fields['vipend'] = 'Thời gian hết Vip';
return $profile_fields;
}
add_filter('user_contactmethods', 'add_fields_user');

Cuối cùng ở file Single.php chính là bài viết sẽ hiển thị cho thành viên VIP hay không bằng đoạn code dưới đây

<?php  $current_user = wp_get_current_user(); $vnkingsuserid= $current_user->ID;?>
<?php $ngaysosanh = get_the_author_meta( 'vipend', $vnkingsuserid ); $ngayhomnay = date("d-m-Y"); ?>
<?php if(current_user_can('vipuser')) { ?>
<?php if (strtotime($ngayhomnay) > strtotime($ngaysosanh)) { ?>
Bạn đã hết VIP ....
<?php } elseif (strtotime($ngayhomnay) == strtotime($ngaysosanh)) { ?>
Hết hôm nay bạn sẽ không xem được bài này vì hết Vip ...
<?php }else{ ?>
Nội dung cần hiển thị cho Vip Member ....
<?php } } ?> 

Giải Thích:

  • $current_user: lấy thông tin thành viên đang đăng nhập
  • $vnkingsuserid: lấy id của thành viên đang đăng nhập
  • $ngaysosanh: từ id bên trên lấy ra được trường ngày tháng năm của thành viên sẽ hết hạn
  • current_user_can('vipuser'): kiểm tra có phải Vip member hay không
  • Các if else: kiểm tra điều kiện ngày hiện tại và ngày hết hạn để hiển thị nội dung mong muốn

Cùng kiểm tra kết quả nhé:
quan-ly-vip-member-vnkings3

Chúc các bạn thành công!

]]>
<![CDATA[Hiển thị bài viết mới theo Category trong WordPress]]> https://wordpress.vnkings.com/tao-danh-sach-bai-viet-moi-theo-category-trong-wordpress.html Hiển thị bài viết mới theo Category trong WordPress một cách đơn giản cho người mới bắt đầu tự code chức năng Wordpress mà không cần dùng đến Plugin

]]>

Hiển thị bài viết mới theo Category trong WordPress

Hiển thị bài viết mới theo Category trong WordPress
Hiển thị bài viết mới theo Category trong WordPress

Thủ thuật WordPress

Chào các bạn,
Trong bài viết này mình sẽ nói về cách Hiển thị bài viết mới theo Category trong WordPress, chủ đề này có lẽ đã được khá nhiều Website viết rồi, nhưng hầu như là sử dụng plugin. Đối với những Developer làm việc nhiều với WordPress chắc hẳn đây là một vấn đề khá đơn giản, Nhưng với những bạn mới bước vào tìm hiểu và tự code chức năng thì nó khá quan trọng cho thời điểm khởi đầu.

Hiển thị bài viết mới theo Category trong WordPress

Cùng bắt đầu nhé!

– Trước tiên bạn cần tìm hiểu về Vòng lặp(Loop) lấy danh sách bài trong WordPress

<?php while (have_posts()) : the_post(); ?>
// các thông tin bài viết
<?php endwhile ; wp_reset_query() ;?>

WordPress hỗ trợ bạn có thể lấy các bài viết 1 cách dễ dàng với vòng lặp While như bên trên, Với vòng lặp này mặc định bạn sẽ xuất ra tất cả các bài viết ở Post_type là Post(các bài trong mục POST ở trang quản trị) trong Website của mình

Với phần Các thông tin hiển thị của bài viết, bạn có thể tham khảo thêm trong bài viết này:
Các hàm cơ bản của WordPress cho người mới bắt đầu

– Vậy ta cần thêm một số điều kiện cho vòng lặp này để có thể lấy được bài viết theo Category

 <?php
$vnkings = new WP_Query(array(
'post_type'=>'post',
'post_status'=>'publish',
'cat' => 1,
'orderby' => 'ID',
'order' => 'DESC',
'posts_per_page'=> 4));
?>
<?php while ($vnkings->have_posts()) : $vnkings->the_post(); ?>
// các thông tin bài viết
<?php endwhile ; wp_reset_query() ;?>

Giải thích :

  • new WP_Query(): Tạo Query mới có điều kiện bên trong
  • ‘post_type’=>’post’: Hiển thị các bài viết trong Post type là Post
  • ‘post_status’=>’publish’: Hiển thị các bài có trạng thái là đã đăng
  • ‘cat’ => 1: Hiển thị các bài viết ở Category có ID là 1 (đây chính là mấu chốt của bài này)
  • ‘orderby’ => ‘ID’,’order’ => ‘DESC’: Hiển thị bài viết từ mới đến cũ
  • ‘posts_per_page’=> 4: Hiển thị số bài viết là 4
  • $vnkings->have_posts(): Áp dụng Query trên vào vòng lặp của WordPress

Ví dụ chi tiết:
Chúng ta sẽ làm 1 box Hiển thị bài viết theo Danh mục WordPress Nâng Cao như Vnkings.com

hien-thi-bai-viet-moi-theo-category-vnkings

–Tạo phần hiển thị tên danh mục và Link:

<div class="title_category"><a href="<?php echo get_category_link( id_của_category ); ?>"><?php echo get_cat_name( id_của_category);?></a></div>

— Tạo Vòng lặp hiển thị các bài viết của Danh mục này:

 <?php
$vnkings = new WP_Query(array(
'post_type'=>'post',
'post_status'=>'publish',
'cat' => id_của_category,
//thay id_của_category bằng id danh mục bạn muốn hiển thị nhé
'orderby' => 'ID',
'order' => 'DESC',
'posts_per_page'=> 5));
?>
<?php $i=1; while ($vnkings->have_posts()) : $vnkings->the_post(); ?>
<?php if($i==1){ ?>
<div class="bai_dau_tien">
	<a href="<?php the_permalink() ;?>" class="anh_bai_viet"> 
		<?php the_post_thumbnail("thumbnail",array( "title" => get_the_title(),"alt" => get_the_title() ));?>
	</a>
	<a href="<?php the_permalink() ;?>" class="tieu_de_bai_viet"><?php the_title() ;?></a>
	<p class="trich_dan">
		<?php the_excerpt() ;?>
	</p>
</div>
<?php } else { ?>
<div class="cac_bai_con_lai"><a href="<?php the_permalink() ;?>"><?php the_title() ;?></a> </div>
<?php } ?>
<?php $i++; endwhile ; wp_reset_query() ;?>

Giải thích :
với mục đích hiển thị bài đầu tiên khác với các bài còn lại trong vòng lặp nên mình đã gán biến i=1, sau đó check nếu i == 1 thì sẽ hiển thị theo div bài đầu tiên, ngược lại các bài tiếp theo sẽ hiển thị như mặc định. Đây là kiến thức khá cơ bản trong PHP, nếu bạn chưa hiểu có thể để lại comment câu hỏi cho mình

– Nâng cao 1 chút
– nếu bạn muốn lấy bài trong danh mục ở 1 Post type khác không phải Post mặc định của WordPress Thì làm thế nào?

Bạn chỉ cần thay đoạn

'post_type'=>'post_type_của_bạn'

và thêm đoạn lấy ID của danh mục theo Post type này

'tax_query' => array(
	  array(
		  'taxonomy' => 'post_type_taxonomy_của bạn',
		  'field' => 'id',
		  'terms' => 'ID_Của_Danh_Mục_Sản_Phẩm'
	  )
),

Ví dụ cụ thể:

Hiển thị bài viết mới theo Category trong WordPress
Bạn có 1 Post type là Product, và Taxonomy chứa danh mục là product_cat
Thì bạn sẽ có đoạn code như sau

<?php
$vnkings = new WP_Query(array(
'post_type'=>'product',
'post_status'=>'publish',
'tax_query' => array(
	  array(
		  'taxonomy' => 'product_cat',
		  'field' => 'id',
		  'terms' => 'ID_Của_Danh_Mục_Sản_Phẩm'
	  )
  ),
'orderby' => 'ID',
'order' => 'DESC',
'posts_per_page'=> '4'));
?>
<?php while ($vnkings->have_posts()) : $vnkings->the_post(); ?>
// Nội dung từng sản phẩm
<?php $i++; endwhile ; wp_reset_query() ;?>

Sau khi đã hiển thị được các bài viết mới theo danh mục, hãy vận dụng kiến thức CSS để làm đẹp cho phần này nhé. Chúc các bạn thành công!

]]>
<![CDATA[Tự tùy biến trang Single theo Category trong WordPress]]> https://wordpress.vnkings.com/tu-tuy-bien-trang-single-theo-category-trong-wordpress.html Tự tùy biến trang Single theo Category trong WordPress không cần sử dụng Plugin một cách đơn giản cho bạn

]]>

Tự tùy biến trang Single theo Category trong WordPress

Tự tùy biến trang Single theo Category trong WordPress
Tự tùy biến trang Single theo Category trong WordPress

Thủ thuật WordPress

Chào các bạn, Mới đây Vnkings.com đã viết một bài về cách Tạo giao diện khác nhau cho từng Category trong WordPress, tiếp theo mình sẽ giúp các bạn Tự tùy biến trang Single theo Category trong WordPress

tuy-bien-trang-single-theo-category

Ở đây các bạn sẽ có 2 cách để làm được chức năng này:

Cách 1: Tạo file theo dạng single-slug_category.php
– ví dụ: Bạn có 1 danh mục là Tin tức, bạn muốn các bài viết của danh mục này sẽ hiển thị khác với các bài của chuyên mục còn lại, thì bạn cần tạo file có dạng là : single-tin-tuc.php
Để dùng được cách này bạn cần thêm đoạn code dưới đây vào file Functions.php

add_filter('single_template', 'check_for_category_single_template');
function check_for_category_single_template( $t )
{
foreach( (array) get_the_category() as $cat )
{
if ( file_exists(TEMPLATEPATH . "/single-cat-{$cat->slug}.php") ) return TEMPLATEPATH . "/single-cat-{$cat->slug}.php";
if($cat->parent)
{
$cat = get_the_category_by_ID( $cat->parent );
if ( file_exists(TEMPLATEPATH . "/single-cat-{$cat->slug}.php") ) return TEMPLATEPATH . "/single-cat-{$cat->slug}.php";
}
}
return $t;
}

Cách 2: Tạo file theo dạng single-id_category.php
– ví dụ: Bạn có danh mục là Thủ thuật wordpress, id của danh mục này là 1, vậy bạn sẽ tạo file single có dạng : single-1.php
để dùng được cách này bạn cũng cần thêm đoạn code bên dưới vào file Funtions.php

add_filter('single_template', create_function('$t', 'foreach( (array) get_the_category() as $cat ) { if ( file_exists(TEMPLATEPATH . "/single-{$cat->term_id}.php") ) return TEMPLATEPATH . "/single-{$cat->term_id}.php"; } return $t;' ));

Như vậy với 2 đoạn code đơn giản, bạn đã Tự tùy biến trang Single theo Category trong WordPress rồi.

Chúc các bạn thành công!

]]>
<![CDATA[Tạo giao diện khác nhau cho từng Category trong WordPress]]> https://wordpress.vnkings.com/tao-giao-dien-khac-nhau-cho-tung-category-trong-wordpress.html Tạo giao diện khác nhau cho từng Category trong WordPress thật đơn giản cho các bạn đang tìm hiểu tự custom template.

]]>

Tạo giao diện khác nhau cho từng Category trong WordPress

Tạo giao diện khác nhau cho từng Category trong WordPress
Tạo giao diện khác nhau cho từng Category trong WordPress

Thủ thuật WordPress

Chào các Bạn,

Mới đây mình nhận được một câu hỏi là làm thế nào để Tạo giao diện khác nhau cho từng Category trong WordPress. Phần này thực tế cũng khá dễ, vậy nên trong bài này mình sẽ giúp các bạn giải quyết 2 vấn đề :

  • Tạo giao diện khác nhau cho từng Category
  • Làm cho giao diện của Category Con tự giống với giao diện Category Cha

tao-giao-dien-khac-nhau-cho-tung-category-wordpress-vnkings

Tạo giao diện khác nhau cho từng Category:
Trong phần này WordPress đã hỗ trợ sẵn cho bạn. bạn có thể tạo File category.php theo ID hoặc Slug riêng cho Category đó.
Ví dụ :
– Theo ID: Bạn sẽ tạo 1 file là : category-id.php(category-1.php,category-2.php,category-3.php, …)
– Theo Slug: file category sẽ có dạng: category-slug.php(category-tin-tuc.php, category-du-an.php)
sau đó chúng ta tự thay code hiển thị riêng cho Category này.

Làm cho giao diện của Category Con tự giống với giao diện Category Cha:
Hãy xét nếu Website WordPress của bạn có cấu trúc danh mục như bên dưới
– Tin tức (category-tin-tuc.php)
— Tin mới
— Tin hot

– Dự án (category-du-an.php)
— Dự án trong Nước
— Dự án nước ngoài

Vậy làm sao để các Danh Mục Con Tự động lấy Template của Danh Mục Cha, bây giờ ta cần thêm đoạn code bên dưới vào file Functions.php là được.

function wp_category_template() {
$category = get_queried_object();
$parent_id = $category->category_parent;
$templates = array();
if ( $parent_id == 0 ) {
$templates[] = "category-{$category->slug}.php";
$templates[] = "category-{$category->term_id}.php";
$templates[] = 'category.php';
} else {
$parent = get_category( $parent_id );
$templates[] = "category-{$category->slug}.php";
$templates[] = "category-{$category->term_id}.php";
$templates[] = "category-{$parent->slug}.php";
$templates[] = "category-{$parent->term_id}.php";
$templates[] = 'category.php';
}
return locate_template( $templates );
}
add_filter( 'category_template', 'wp_category_template' );

Đoạn code được tham khảo từ trang http://werdswords.com
Như vậy khi làm xong 2 bước trên, bạn đã giải quyết được vấn đề của mình rồi.

Các bạn cũng có thể tham khảo thêm chức năng tự tùy biếng single theo category nhé:
– Tự tùy biến trang Single theo Category trong WordPress

Chúc các bạn thành công

]]>
<![CDATA[Thêm công cụ tìm kiếm của Website vào các trình duyệt]]> https://wordpress.vnkings.com/them-cong-cu-tim-kiem-cua-website-cho-trinh-duyet.html Trong bài viết này Vnkings.com sẽ giúp các bạn Thêm công cụ tìm kiếm của Website vào các trình duyệt một cách đơn giản

]]>

Thêm công cụ tìm kiếm của Website vào các trình duyệt

Thêm công cụ tìm kiếm của Website vào các trình duyệt
Thêm công cụ tìm kiếm của Website vào các trình duyệt

Thủ thuật WordPress

Chào các bạn,
Khi chúng ta nhập từ khóa vào khung tìm kiếm của Trình duyệt như Firefox, Chrome, Cốc Cốc mặc định các từ khóa đó sẽ được tìm kiếm trên Google hoặc 1 số công cụ tìm kiếm khác như Bing, WiKi … Vậy bạn có muốn từ khóa đó được tìm kiếm với Website của mình không. Trong bài viết này Vnkings.com sẽ giúp các bạn Thêm công cụ tìm kiếm của Website vào các trình duyệt một cách đơn giản

Thêm công cụ tìm kiếm của Website vào các trình duyệt

Cùng bắt đầu nào!!

Bước 1: Bạn cần tạo 1 file opensearch.xml với nội dung sau:

<?xml version="1.0" encoding="utf-8"?> 
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
<ShortName>Vnkings Search</ShortName>
<Description>Tìm kiếm bằng Vnkings Solutions</Description>
<InputEncoding>UTF-8</InputEncoding>
<LongName>Vnkings Search</LongName>
<Image height="16" width="16" type="image/x-icon">https://wordpress.vnkings.com/favicon.png</Image>
<Url type="text/html" method="get" template="https://wordpress.vnkings.com/?s={searchTerms}"/>
</OpenSearchDescription>

Hãy thay đổi các thông tin trong đoạn code trên bằng thông tin của các bạn nhé

Bước 2: Bạn Upload file này lên trên Hosting của các bạn, file này sẽ ngang cấp với các thư mục Wp-admin, Wp-include,…

Bước 3: Thêm đoạn code này vào header của Website bạn (tìm file header.php)

<link title="Vnkings.com Search" type="application/opensearchdescription+xml" rel="search" href="https://wordpress.vnkings.com/opensearch.xml">

Lưu ý bạn cần thay link của các bạn vào đoạn code trên nhé

– Sau khi đã làm xong các bước trên, chúng ta mở Trang web của mình ra, lúc này nó sẽ hiện thêm 1 biểu tượng thêm công cụ tìm kiếm màu xanh:

Thêm công cụ tìm kiếm của Website vào các trình duyệt
Tích vào nút + màu xanh và chọn cài đặt và chọn tìm kiếm bằng công cụ tìm kiếm của chúng ta làm mặc định.

Bây giờ bạn hãy thử viết từ khóa vào ô tìm kiếm của Trình duyệt để xem kết quả nhé 🙂

Chúc các bạn thành công!

]]>
<![CDATA[Thêm nút like, share, google + vào WordPress]]> https://wordpress.vnkings.com/them-nut-like-share-google-vao-website-khong-dung-plugin.html Bài viết thêm nút like, share, google + vào Wordpress một cách chi tiết, bạn sẽ không cần phải sử dụng đến plugin nữa

]]>

Thêm nút like, share, google + vào WordPress

Thêm nút like, share, google + vào WordPress
Thêm nút like, share, google + vào WordPress

Thủ thuật WordPress

Chào các bạn,
Mới đây mình có nhận được vài yêu cầu hỗ trợ thêm nút Like, Share Facebook hay google + vào website và bài viết ở Website WordPress. Trên mạng cũng có nhiều bài rồi nhưng hầu như là dùng Plugin và chưa được chi tiết cho lắm. Vậy nên quyết định viết 1 bài giúp các bạn có thể tự làm việc này mà không cần sử dụng đến các plugin nữa.

them-chia-se-mang-xa-hoi-wp-6
Thêm nút like, share, google + vào WordPress

– Thêm Nút Like, Share của Facebook vào Website WordPress:
Bước 1: Các bạn vào trang :
Like Button for Web – Facebook

Bước 2: Tìm đến phần Like Button Configurator
them-chia-se-mang-xa-hoi-wp

Ở box tạo code trên các bạn có các tùy chọn như :

  • URL to Like: Địa chỉ Link để Like
  • Width: chiều rộng của khung Like, Share
  • Layout: ở đây bạn sẽ có 4 tùy chọn để xem hiển thị nút like và share của mình
  • Action Type: Bạn có 2 tùy chọn hiển thị nút Like hoặc nút Giới thiệu
  • Show Friends’ Faces: Check vào nếu bạn muốn hiển thị bạn bè đã thích trang
  • Include Share Button: Check vào nếu bạn muốn hiển thị cả nút Share

Sau khi đã thiết lập xong kiểu hiển thị mà bạn muốn hãy ấn vào nút Get Code

them-chia-se-mang-xa-hoi-wp-2

Bước 3: Thêm code vào Website WordPress
Trong phần Get Code để hiển thị Nút Like, Share Facebook bạn có 2 phần :
— Phần Javascript : đây là thư viện cần có để sử dụng các chức năng Social của Facebook (Like Website ,Share Website ,Comment Box, Like Box, …). Bạn hãy copy phần này vào đầu hoặc cuối trang web đều được. Mình thì hay để ở cuối trang, phía trên của thẻ đóng </body>

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/vi_VN/sdk.js#xfbml=1&version=v2.5&appId=561973880635651";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

— Phần code hiển thị nút Like và Share

<div class="fb-like" data-href="https://wordpress.vnkings.com/" data-layout="button_count" data-action="recommend" data-show-faces="false" data-share="true"></div>

Đây chính là đoạn code hiển thị ra nút like và share Facebook. ở wordpress thì bạn có thể đặt ở trang chủ, trang chi tiết hay bất kỳ trang nào bạn muốn bằng cách thay địa chỉ của data-href
— Đặt Nút Like, Share vào trang chủ WordPress:(thêm vào file index.php)

<div class="fb-like" data-href="<?php bloginfo('url');?>" data-layout="button_count" data-action="recommend" data-show-faces="false" data-share="true"></div>

— Đặt Nút Like vào trang chi tiết bài viết:(thêm vào file single.php)

<div class="fb-like" data-href="<?php the_permalink() ;?>" data-layout="button_count" data-action="recommend" data-show-faces="false" data-share="true"></div>

– Thêm nút Google+ vào Website WordPress

Bước 1: Các bạn vào trang:
+1 Button – Google

Bước 2: Cấu hình nút +1 theo ý muốn của bạn

them-chia-se-mang-xa-hoi-wp-3

  • Kích thước: ở đây bạn có thể chọn kích thước nút G+ To nhỏ tùy ý
  • Chú thích: Hiển thị chú thích hoặc chỉ hiển thị nút G+
  • Ngôn ngữ: Hiển thị ngôn ngữ chú thích mà bạn muốn sử dụng
  • URL để +1: Địa chỉ để +1

Bước 3: Thêm code vào Website WordPress
Cũng giống như Facebook, ở Google cũng có 2 phần:
— Phần Javascript: thư viện để dùng các ứng dụng cho Google
Bạn hãy copy phần này vào đầu hoặc cuối trang web đều được. Mình thì hay để ở cuối trang, phía trên của thẻ đóng </body>

<!-- Đặt thẻ này vào phần đầu hoặc ngay trước thẻ đóng phần nội dung của bạn. -->
<script src="https://apis.google.com/js/platform.js" async defer>
  {lang: 'vi'}
</script>

— Phần code hiển thị nút Google+

<!-- Đặt thẻ này vào nơi bạn muốn Nút +1 kết xuất. -->
<div class="g-plusone" data-size="medium" data-annotation="none" data-href="https://wordpress.vnkings.com/"></div>

— Đặt Nút Google+ vào trang chủ:(thêm vào file index.php)

<div class="g-plusone" data-size="medium" data-annotation="none" data-href="<?php bloginfo('url');?>"></div>

— Đặt Nút Google+ vào trang chi tiết bài viết:(thêm vào file single.php)

<div class="g-plusone" data-size="medium" data-annotation="none" data-href="<?php the_permalink() ;?>"></div>

– Tổng kết lại: Để các bạn không bị rối thì các bạn có thể sử dụng nguyên đoạn code bên dưới để hiển thị nút Like, Share, Google trong Website của mình:

– Copy đoạn Script của google và Facebook vào footer.php phía trên của thẻ đóng

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/vi_VN/sdk.js#xfbml=1&version=v2.5&appId=561973880635651";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<script src="https://apis.google.com/js/platform.js" async defer>
  {lang: 'vi'}
</script>

– Hiển thị trên trang chủ:

<div class="fb-like" data-href="<?php bloginfo('url');?>" data-layout="button_count" data-action="recommend" data-show-faces="false" data-share="true"></div>
<div class="g-plusone" data-size="medium" data-annotation="none" data-href="<?php bloginfo('url');?>"></div>

– Hiển thị trên trang chi tiết bài viết:

<div class="fb-like" data-href="<?php the_permalink() ;?>" data-layout="button_count" data-action="recommend" data-show-faces="false" data-share="true"></div>
<div class="g-plusone" data-size="medium" data-annotation="none" data-href="<?php the_permalink() ;?>"></div>

Thử xem demo Bên Vnkings.com nhé:

them-chia-se-mang-xa-hoi-wp-5

Chúc các bạn thành công!

]]>
<![CDATA[Tự tạo hiển thị sản phẩm theo danh mục Woocommerce]]> https://wordpress.vnkings.com/tu-tao-hien-thi-san-pham-theo-danh-muc-woocommerce.html Trong bài viết này mình sẽ giúp các bạn Tự tạo hiển thị sản phẩm theo danh mục Woocommerce một cách đơn giản nhất

]]>

Tự tạo hiển thị sản phẩm theo danh mục Woocommerce

Tự tạo hiển thị sản phẩm theo danh mục Woocommerce
Tự tạo hiển thị sản phẩm theo danh mục Woocommerce

Thủ thuật WordPress

Chào các bạn,

Một chức năng mà mình thấy có khá nhiều bạn đang quan tâm là thay vì sử dụng shortcode hay Plugin để hiển thị sản phẩm theo danh mục trong Woocommerce, thì ta có thể tự làm nó với code của chính mình.
Trong bài viết này mình sẽ giúp các bạn Tự tạo hiển thị sản phẩm theo danh mục Woocommerce một cách đơn giản nhất

Tự tạo hiển thị sản phẩm theo danh mục Woocommerce
Cùng bắt đầu nào!

– Thông thường bạn sẽ cần có vòng lặp(Loop) lấy ra bài viết như sau :

<?php
$vnkings = new WP_Query(array(
'post_status'=>'publish',
'orderby' => 'ID',
'order' => 'DESC',
'posts_per_page'=> '4'));
?>
<?php while ($vnkings->have_posts()) : $vnkings->the_post(); ?>
// nội dung cần lặp
<?php endwhile ; wp_reset_query() ;?>

Nếu sử dụng Loop như trên thì nó sẽ mặc định lấy bài trong Post type = Post (chính là phần tin tức của các bạn)

– Vậy chúng ta cần 1 số điều kiện nâng cao để nó bắt được sản phẩm trong một danh mục cụ thể ở Woocommerce:

<?php
$vnkings = new WP_Query(array(
'post_type'=>'product',
'post_status'=>'publish',
'tax_query' => array(
	  array(
		  'taxonomy' => 'product_cat',
		  'field' => 'id',
		  'terms' => 'ID_Của_Danh_Mục_Sản_Phẩm'
	  )
  ),
'orderby' => 'ID',
'order' => 'DESC',
'posts_per_page'=> '4'));
?>
<?php while ($vnkings->have_posts()) : $vnkings->the_post(); ?>
// Nội dung từng sản phẩm
<?php endwhile ; wp_reset_query() ;?>

Giải thích :

  • WP_Query(): tạo 1 Query với các điều kiện bên trong
  • ‘post_type’=>’product: Lấy các bài viết trong post type Product
  • ‘post_status’=>’publish’: Hiển thị các bài viết đã đăng(không phải bài nháp)
  • ‘taxonomy’ => ‘product_cat’: Bên trên ta thấy đã lấy bài viết ở Product, vậy tiếp theo ta hướng nó tới Danh mục cụ thể là Taxonomy product_cat
  • ‘field’ => ‘id’: Cách để lấy ra taxonomy là sử dụng ID của taxonomy đó
  • ‘terms’ => ‘ID_Của_Danh_Mục_Sản_Phẩm’: Đây chính là phần khai báo ID của danh mục sản phẩm bạn cần nhập vào
  • ‘orderby’ => ‘ID’,’order’ => ‘DESC’: Hiển thị sản phẩm từ mới đến cũ
  • ‘posts_per_page’=> ‘4’: hiển thị ra số lượng sản phẩm bạn muốn, cụ thể ở đây mình show ra 4 sản phẩm

Lấy ID_Của_Danh_Mục_Sản_Phẩm bằng cách sửa danh mục sản phẩm và xem ID trên thanh Address trình duyệt
Tự tạo hiển thị sản phẩm theo danh mục Woocommerce

– Khi đã có vòng lặp ra các sản phẩm trong danh mục cụ thể rồi, chúng ta tìm hiểu đến cách hiển thị các sản phẩm trong vòng lặp đó nhé:
(Trước tiên bạn nên đọc bài viết này để xem ta có những hàm gì để lấy ra dữ liệu trong Woocommerce: Tổng hợp các hàm hiển thị dữ liệu cho Woocommerce)

– Bây giờ ta sẽ có đoạn code cụ thể như sau:

<div class="vnkings_category_product">
	<div class="head_vnkings">
		<h3 class="title_head"><a href="<?php echo get_term_link(ID_Của_Danh_Mục_Sản_Phẩm); ?>"><?php echo get_cat_name(ID_Của_Danh_Mục_Sản_Phẩm);?></a></h3>
	</div>
	<?php
	$vnkings = new WP_Query(array(
	'post_type'=>'product',
	'post_status'=>'publish',
	'tax_query' => array(
	  array(
		  'taxonomy' => 'product_cat',
		  'field' => 'id',
		  'terms' => 'ID_Của_Danh_Mục_Sản_Phẩm'
	  )
	),
	'orderby' => 'ID',
	'order' => 'DESC',
	'posts_per_page'=> '4'));
	?>
	<?php while ($vnkings->have_posts()) : $vnkings->the_post(); ?>
	<div class="list_sp col-md-3">
		<a class="image_sp" href="<?php the_permalink() ;?>"><?php the_post_thumbnail("medium",array( "title" => get_the_title(),"alt" => get_the_title() ));?></a>
		<h4 class="title_sp"><a href="<?php the_permalink() ;?>"><?php the_title() ;?></a></h4>
		<span class="price"><ins><span class="amount">Giá: <?php echo get_post_meta( get_the_ID(), '_regular_price', true ); ?></span></ins></span>
	</div>
	<?php endwhile ; wp_reset_query() ;?>
</div>

Lưu ý:

  • get_term_link() : lấy link danh mục sản phẩm
  • get_cat_name() : hiển thị tiêu đề danh mục sản phẩm
  • Hãy thay ID_Của_Danh_Mục_Sản_Phẩm bằng id danh mục sản phẩm của bạn nhé

Xem thử kết quả bên Vnkings.com:
Tự tạo hiển thị sản phẩm theo danh mục Woocommerce

Bằng sự sáng tạo của bạn hãy thử tạo style riêng cho phần này! nếu thành công hãy khoe phần bạn làm với mình qua fanpage hoặc comment nhé 😀

]]>
<![CDATA[Hiển thị danh mục sản phẩm theo hình ảnh WooCommerce]]> https://wordpress.vnkings.com/hien-thi-danh-muc-san-pham-theo-hinh-anh-woocommerce.html Trong bài viết này Vnkings sẽ giúp các bạn hiển thị danh mục sản phẩm theo hình ảnh WooCommerce một cách đơn giản nhất

]]>

Hiển thị danh mục sản phẩm theo hình ảnh WooCommerce

Hiển thị danh mục sản phẩm theo hình ảnh WooCommerce
Hiển thị danh mục sản phẩm theo hình ảnh WooCommerce

Thủ thuật WordPress

Thông thường khi cài đặt Plugin WooCommerce, Bạn sẽ có một Widget cho phép hiển thị Danh mục sản phẩm của nó, Widget này khá đơn giản(có kèm tên + số lượng sản phẩm), nhưng nếu bạn muốn biến nó trở thành chuyên nghiệp hơn, tự bố trí hiển thị theo phong cách của mình thì cũng rất dễ thôi. Trong bài viết này Vnkings sẽ giúp các Bạn hiển thị danh mục sản phẩm theo hình ảnh WooCommerce một cách đơn giản nhất

Hiển thị danh mục sản phẩm theo hình ảnh WooCommerce

Trước tiên bạn cần tìm đến vị trí mà bạn muốn hiển thị ra danh mục sản phẩm và thêm đoạn code này:

<div class="vnkings woocommerce">
	<?php
	$taxonomy = 'product_cat';
	$tax_terms = get_terms($taxonomy);
	?>
	<?php
	foreach ($tax_terms as $tax_term) { ?>
		<div class="col-md-3 col-sm-4">
			<div class="anh_sp_vnkings">
				<img src="<?php $thumbnail_id = get_woocommerce_term_meta( $tax_term->term_id, 'thumbnail_id', true ); echo $image = wp_get_attachment_url($thumbnail_id); ?>" alt="<?php echo $tax_term->name; ?>"/>
			</div>
			<div class="title_sp_vnkings">
				<a href="<?php echo get_term_link($tax_term, $taxonomy); ?>"><center><?php echo $tax_term->name; ?> (<?php echo $tax_term->count; ?> SP)</center></a>
			</div>
		</div>
	<?php } ?>
</div>

Giải thích

  • $taxonomy = ‘product_cat’: gán $taxonomy = product_cat, trong đó product_cat chính là taxonomy của Product Woocommerce
  • get_terms($taxonomy): lấy tất cả thông tin danh mục bên trong taxonomy product_cat
  • $thumbnail_id: lấy id của hình ảnh danh mục
  • $image : lấy link hình ảnh của danh mục sản phẩm trong Woocommerce
  • get_term_link: hiển thị link của danh mục sản phẩm
  • $tax_term->name;: Hiển thị tên của danh mục sản phẩm
  • $tax_term->count;: Lấy ra số lượng sản phẩm trong danh mục

Với sự sáng tạo của bạn, hãy thử tự tùy biến Danh mục sản phẩm trở nên chuyên nghiệp hơn nhé.
Chúc các bạn thành công!

]]>
<![CDATA[Tổng hợp các hàm hiển thị dữ liệu cho Woocommerce]]> https://wordpress.vnkings.com/tong-hop-cac-ham-hien-thi-du-lieu-cho-woocommerce.html Tổng hợp các hàm hiển thị dữ liệu cho Woocommerce cho các bạn mới tìm hiểu và muốn tự tùy biến cách hiển thị sản phẩm cho website của mình

]]>

Tổng hợp các hàm hiển thị dữ liệu cho Woocommerce

Tổng hợp các hàm hiển thị dữ liệu cho Woocommerce
Tổng hợp các hàm hiển thị dữ liệu cho Woocommerce

Thủ thuật WordPress

Chào các Bạn,
Khi sử dụng Plugin Woocommerce làm trang bán hàng trên website WordPress, ngoài việc dùng các widget có sẵn của plugin này thì chúng ta cũng cần tìm hiểu thêm các hàm hiển thị dữ liệu cho Woocommerce để có thể tự tùy biến được nó nữa.
Đây là bài viết mình muốn chia sẻ tới những bạn mới tìm hiểu và tự tùy biến hiển thị sản phẩm Woocommerce. Mong rằng nó sẽ giúp các bạn được phần nào đó!

Tổng hợp các hàm hiển thị dữ liệu cho Woocommerce
Tổng hợp các hàm hiển thị dữ liệu cho Woocommerce:

– Hiển thị tiêu đề sản phẩm

<?php the_title() ;?>

– Hiển thị Link Sản phẩm

<?php the_permalink() ;?>

– Hiển thị hình ảnh sản phẩm

<?php the_post_thumbnail("thumbnail",array( "title" => get_the_title(),"alt" => get_the_title() ));?>

Trong đó thumbnail chính là kích thước của ảnh, bạn có thể thay bằng medium, large, full

– Hiển thị mô tả sản phẩm

<?php the_excerpt() ;?>

– Hiển thị nội dung sản phẩm

<?php the_content() ;?>

– Hiển thị Danh sách hình ảnh sản phẩm

<?php
global $product;
$attachment_ids = $product->get_gallery_attachment_ids();
foreach( $attachment_ids as $attachment_id ) { ?>
<?php echo wp_get_attachment_image($attachment_id, 'thumbnail'); ?>
<?php } ?>

– Hiển thị nút mua hàng

<?php echo apply_filters( 'woocommerce_loop_add_to_cart_link',
sprintf( '<a href="%s" rel="nofollow" data-product_id="%s" data-product_sku="%s" class="add-cart button %s product_type_%s buynow">Mua hàng</a>',
esc_url( $product->add_to_cart_url() ),
esc_attr( $product->id ),
esc_attr( $product->get_sku() ),
$product->is_purchasable() ? 'add_to_cart_button' : '',
esc_attr( $product->product_type ),
esc_html( $product->add_to_cart_text() )
),
$product ); ?>

– Hiển thị Giá của Sản phẩm

<?php echo get_post_meta( get_the_ID(), '_regular_price', true ); ?>

– Hiển thị Giá khuyến mại của Sản phẩm

<?php echo get_post_meta( get_the_ID(), '_sale_price', true ); ?>

– Hiển thị Mã Sản phẩm

<?php echo get_post_meta( get_the_ID(), '_sku', true ); ?>

– Hiển thị Tình trạng sản phẩm

<?php echo get_post_meta( get_the_ID(), '_stock_status', true ); ?>

– Hiển thị Hình thức giao hàng

<?php echo $product->get_shipping_class(); ?>

– Hiển thị khối lượng sản phẩm

<?php echo get_post_meta( get_the_ID(), '_weight', true ); ?>

– Hiển thị số lượng(chỉ áp dụng với trang chi tiết sản phẩm)

<form enctype="multipart/form-data" method="post" class="cart">
	<div class="quantity"><label>Số lượng: </label><input type="number" size="4" class="input-text qty text" title="SL" value="1" name="quantity" min="1" step="1"></div>
	<input type="hidden" value="<?php echo $vnid = the_ID(); ?>" name="add-to-cart">
	<button class="add-cart single_add_to_cart_button alt buynow" type="submit">Đặt mua</button>
</form>

– Hiển thị Rating sản phẩm

<?php echo $product->get_rating_html(); ?>

– Hiển thị Từ khóa sản phẩm

<?php global $post, $product; $tag_count = sizeof( get_the_terms( $post->ID, 'product_tag' ) ); echo $product->get_tags( ', ', '<span class="tagged_as">' . _n( 'Tag:', 'Tags:', $tag_count, 'woocommerce' ) . ' ', '</span>' ); ?>

Hiển thị Danh mục của sản phẩm

<?php global $post, $product; $cat_count = sizeof( get_the_terms( $post->ID, 'product_cat' ) ); echo $product->get_categories( ', ', '<span class="posted_in">' . _n( 'Category:', 'Categories:', $cat_count, 'woocommerce' ) . ' ', '</span>' ); ?>

– Hiển thị Comment sản phẩm(áp dụng cho trang chi tiết sản phẩm)

<?php
if ( comments_open() || get_comments_number() ) :
	comments_template();
endif;
?>

– Hiển thị Tiêu Đề Danh mục sản phẩm

<?php echo get_cat_name(ID_Của_Danh_Mục_Sản_Phẩm);?>

– Hiển thị Link của Danh mục sản phẩm

<?php echo get_term_link(ID_Của_Danh_Mục_Sản_Phẩm);?>

– Hiển thị Mô tả của Danh mục sản phẩm

<?php echo category_description(ID_Của_Danh_Mục_Sản_Phẩm);?>

Khi sử dụng nếu có bất cứ khó khăn nào, bạn có thể để lại câu hỏi dưới phần comment của website để chúng ta cùng giải quyết.
Chúc các bạn thành công!

]]>
<![CDATA[Tự tạo tìm kiếm nâng cao cho sản phẩm Woocommerce]]> https://wordpress.vnkings.com/tu-tao-tim-kiem-nang-cao-cho-san-pham-woocommerce.html Tự tạo tìm kiếm nâng cao cho sản phẩm Woocommerce giúp khách hàng của bạn dễ dàng tìm kiếm sản phẩm mà không cần sử dụng plugin

]]>

Tự tạo tìm kiếm nâng cao cho sản phẩm Woocommerce

Tự tạo tìm kiếm nâng cao cho sản phẩm Woocommerce
Tự tạo tìm kiếm nâng cao cho sản phẩm Woocommerce

Thủ thuật WordPress

Như các bạn cũng biết việc tìm kiếm sản phẩm với 1 trang web bán hàng là điều vô cùng quan trọng, nó giúp cho khách hàng dễ dàng tìm thấy sản phẩm mà họ cần, vậy với bài viết này mình sẽ giúp các bạn tự tạo tìm kiếm nâng cao cho sản phẩm Woocommerce mà không phải dùng đến Plugin nào cả.

Demo trên Vnkings.com:
Tự tạo tìm kiếm nâng cao cho sản phẩm Woocommerce

Các thành phần trong khung tìm kiếm(mình sử dụng Bootstrap Form để các bạn dễ tùy biến):

  • Từ khóa
  • Chọn Danh mục sản phẩm
  • Chọn Sắp xếp theo
  • Input ẩn post_type
  • Input ẩn taxonomy

– Từ khóa: : Sau khi thêm đoạn này khi tìm kiếm sẽ có dạng Vnkings.com/?s=từ+khóa

<div class="form-group">
	<label for="">Từ khóa</label>
	<input type="text" class="form-control" name="s" placeholder="Nhập từ khóa...">
</div>

– Chọn Danh mục sản phẩm

<div class="form-group">
	<label for="">Danh Mục</label>
	<select name="term" class="form-control" id="vnkings_cat">
	<option value="0">--- Chọn danh mục sản phẩm ---</option>
	<?php
	$vnkings_terms = get_terms('product_cat', 'orderby=name');
	foreach ($vnkings_terms AS $term) :
		echo "<option value='".$term->slug."'".($_GET['publication_categories'] == $term->slug ? ' selected="selected"' : '').">".$term->name."</option>n";
	endforeach;
	?>
	</select>
</div>

Giải thích : Sau khi thêm đoạn này khi tìm kiếm sẽ có dạng Vnkings.com/?term=slug-danh-muc-san-pham

  • select name=”term”:Gán giá trị cho term sẽ bằng 1 trong các option bên dưới
  • get_terms: Lấy tất cả danh mục sản phẩm trong product_cat
  • option $term->slug: lấy slug của danh mục sản phẩm
  • $term->name : lấy tên danh mục sản phẩm

– Chọn Sắp xếp theo

<div class="form-group">
	<label for="">Sắp xếp</label>
	<select name="orderby" class="form-control" id="vnkings_cat">
	<option value="menu_order">--- Sắp xếp theo ---</option>
	<option value="popularity">Mức độ phổ biến</option>
	<option value="rating">Điểm đánh giá</option>
	<option value="date">Theo sản phẩm mới</option>
	<option value="price">Giá Thấp đến Cao</option>
	<option value="price-desc">Giá Cao đến Thấp</option>
	</select>
</div>

Giải thích: Sau khi thêm đoạn này khi tìm kiếm sẽ có dạng Vnkings.com/?orderby=sap-xep . Các tùy chọn bên trên như menu_order, popularity, rating, date, price được Woocommerce cung cấp để chúng ta sử dụng bộ lọc sắp xếp.

– Hai Input ẩn quan trọng : post_type và taxonomy:

<input type="hidden" name="post_type" value="product">
<input type="hidden" name="taxonomy" value="product_cat">

khi cài Woocommerce nó sẽ tạo ra 1 Post type là Product làm trang sản phẩm và taxonomy = product_cat để tạo danh mục sản phẩm, đây là 2 input giúp cho phần tìm kiếm biết được ta đang hướng tới post type và danh mục là gì cho phần tìm kiếm

Vậy Ta sẽ có 1 khung tìm kiếm hoàn tất như sau :

<form action="<?php bloginfo('url');?>" method="get">
	<div class="form-group">
		<label for="">Từ khóa</label>
		<input type="text" class="form-control" name="s" placeholder="Nhập từ khóa...">
	</div>
	<div class="form-group">
		<label for="">Danh Mục</label>
		<select name="term" class="form-control" id="vnkings_cat">
		<option value="0">--- Chọn danh mục sản phẩm ---</option>
		<?php
		$vnkings_terms = get_terms('product_cat', 'orderby=name');
		foreach ($vnkings_terms AS $term) :
			echo "<option value='".$term->slug."'".($_GET['publication_categories'] == $term->slug ? ' selected="selected"' : '').">".$term->name."</option>n";
		endforeach;
		?>
		</select>
	</div>
	<div class="form-group">
		<label for="">Sắp xếp</label>
		<select name="orderby" class="form-control" id="vnkings_cat">
		<option value="menu_order">--- Sắp xếp theo ---</option>
		<option value="popularity">Mức độ phổ biến</option>
		<option value="rating">Điểm đánh giá</option>
		<option value="date">Theo sản phẩm mới</option>
		<option value="price">Giá Thấp đến Cao</option>
		<option value="price-desc">Giá Cao đến Thấp</option>
		</select>
	</div>
	<input type="hidden" name="post_type" value="product">
	<input type="hidden" name="taxonomy" value="product_cat">
	<button type="submit" class="btn btn-default">Tìm kiếm</button>
</form>

Cùng xem kết quả khi tìm kiếm nhé:
Tự tạo tìm kiếm nâng cao cho sản phẩm Woocommerce
Mong rằng kiến thức nhỏ bé này sẽ giúp được các bạn tối ưu website của mình hơn!. Nếu có bất kỳ câu hỏi nào, đừng ngại hãy để lại comment cho mình, để chúng ta cùng giải quyết 🙂

Chúc các bạn thành công!

]]>
<![CDATA[Tạo khung tìm kiếm chỉ hiển thị ra sản phẩm Woocommerce]]> https://wordpress.vnkings.com/tao-khung-tim-kiem-chi-hien-thi-ra-san-pham-woocommerce.html Tạo khung tìm kiếm chỉ hiển thị ra sản phẩm Woocommerce một cách đơn giản, cho các bạn mới tập làm quen với Plugin bán hàng trên WordPress

]]>

Tạo khung tìm kiếm chỉ hiển thị ra sản phẩm Woocommerce

Tạo khung tìm kiếm chỉ hiển thị ra sản phẩm Woocommerce
Tạo khung tìm kiếm chỉ hiển thị ra sản phẩm Woocommerce

Thủ thuật WordPress

Chào các Bạn,
Khi tạo khung tìm kiếm cho trang sản phẩm sử dụng Woocommerce, mặc định nó sẽ lấy ra tất cả các bài bao gồm bài viết của Post và bài trong Post Type có từ khóa tìm kiếm đó. Nếu bạn muốn kết quả chỉ hiển thị ra sản phẩm thì phải làm như thế nào?. Vậy trong bài viết này mình sẽ giúp các bạn làm điều đó 1 cách đơn giản nhất.

– Khung tìm kiếm mặc định có dạng như thế này:

<form method="get" action="<?php bloginfo('url');?>">
	<input type="text" placeholder="Tìm kiếm..." value="" name="s">
	<button type="submit" class="search-button">Tìm kiếm</button>
</form>

Tạo khung tìm kiếm chỉ hiển thị ra sản phẩm Woocommerce

Ở WordPress, như các bạn cũng biết input name sẽ bằng S và link khi tìm kiếm sẽ có dạng:

https://wordpress.vnkings.com/?s=từ_khóa

Thử tìm kiếm ở Vnkings.com nhé
Tạo khung tìm kiếm chỉ hiển thị ra sản phẩm Woocommerce
Như vậy nó lấy ra cả sản phẩm và tin tức của mình.

– Tạo khung tìm kiếm chỉ hiển thị ra sản phẩm Woocommerce
Bây giờ ta chỉ cần 1 name là post_type bằng Post Type của Woocommerce là được :

https://wordpress.vnkings.com/?s=từ_khóa&post_type=product
<form method="get" action="<?php bloginfo('url');?>">
	<input type="text" placeholder="Tìm kiếm..." value="" name="s">
	<input type="hidden" name="post_type" value="product">
	<button type="submit" class="search-button">Tìm kiếm</button>
</form>

Post type của Woocommerce mặc định sẽ là Product
Các bạn có thể thấy mình đã thêm mình đã thêm 1 input name post_type có giá trị là product
Cùng xem kết quả nào
Tạo khung tìm kiếm chỉ hiển thị ra sản phẩm Woocommerce

Chúc các bạn thành công!

]]>
<![CDATA[Thêm văn bản mặc định vào khung soạn thảo wordpress]]> https://wordpress.vnkings.com/them-van-ban-mac-dinh-vao-khung-soan-thao-wordpress.html Thêm văn bản mặc định vào khung soạn thảo wordpress bằng function thật đơn giản không cần sử dụng Plugin

]]>

Thêm văn bản mặc định vào khung soạn thảo wordpress

Thêm văn bản mặc định vào khung soạn thảo wordpress
Thêm văn bản mặc định vào khung soạn thảo wordpress

Thủ thuật WordPress

Chào các Bạn,
Nếu bạn đang có 1 ý tưởng tự thêm 1 dòng chữ ký hoặc hình ảnh bản quyền cho bài viết mà không phải nhập đi nhập lại nhiều lần thì trong bài viết này sẽ giúp Bạn làm điều đó. Chắc hẳn các Bạn hay thấy đoạn text “Chúc các bạn thành công!” ở cuối các bài biết thủ thuật WordPress của mình, đó chính là đoạn text được tạo ra từ một đoạn Function khá đơn giản.

Cùng bắt đầu Thêm văn bản mặc định vào khung soạn thảo wordpress nào!

Chúng ta mở file Functions.php trong thư mục Theme đang dùng và thêm vào đoạn code này:

function vnkings_add_text_to_content( $content ) {
        $content = "Chúc các bạn thành công!";
        return $content;
}
add_filter('default_content', 'vnkings_add_text_to_content'); 

Bạn hãy để ý đến đoạn Chúc các bạn thành công! : hãy thay nó bằng đoạn văn bản bạn muốn nhé

Ví dụ :

 $content = "Chào mừng các bạn đến với <strong>Vnkings.com</strong>";

Hoặc dùng text kèm hình ảnh:

 $content = "<p style='color:green;'>Vnkings.com chúc các bạn thành công!</p><img src='https://wordpress.vnkings.com/wp-content/themes/wordpress-vnkings/images/vnkings.png'>";

Xem thử kết quả bên Vnkings nhé

Thêm văn bản mặc định vào khung soạn thảo wordpress

Chúc các bạn thành công!

]]>
<![CDATA[Shortcode wordpress hiện nội dung nếu thành viên đăng nhập]]> https://wordpress.vnkings.com/shortcode-wordpress-hien-noi-dung-neu-thanh-vien-dang-nhap.html Shortcode wordpress hiện nội dung nếu thành viên đăng nhập không cần sử dụng plugin giúp Webmaster đơn giản hơn trong việc quản trị phân quyền nội dung

]]>

Shortcode wordpress hiện nội dung nếu thành viên đăng nhập

Shortcode wordpress hiện nội dung nếu thành viên đăng nhập
Shortcode wordpress hiện nội dung nếu thành viên đăng nhập

Thủ thuật WordPress

Cách đây vài hôm có 1 Bạn trong Page WordPress Nâng Cao nhờ mình làm thêm chức năng chỉ cho thành viên đã đăng nhập xem link Download, phần này cũng khá dễ và làm nhanh cho bạn ấy nên mình code ngay ở file single.php, sử dụng hàm check is_user_logged_in(). Hôm nay xem lại phần này nên quyết định tạo luôn một shortcode giúp hiện nội dung nếu thành viên đã đăng nhập

Ưu điểm: Shortcode wordpress hiện nội dung nếu thành viên đăng nhập

  • Tự tay bạn làm, nâng cao kiến thức WordPress
  • Không cần sử dụng Plugin, tối ưu code hơn
  • Chỉ thành viên đã đăng nhập mới xem được nội dung bạn chỉ định

Cùng bắt đầu làm nào!!!

– Bạn mở file Functions.php ở thư mục Theme đang sử dụng và thêm đoạn code này:

add_shortcode( 'userview', 'vnkings_check_user_login' );
function vnkings_check_user_login($atts, $content = null) {
    if( is_user_logged_in() ) {return '<p>' . $content . '</p>';}
    else {return "Bạn cần đăng nhập để xem nội dung này!";}
}

Đoạn code trên mình đã tạo ra 1 Shortcode là userview, bạn hoàn toàn có thể thay đổi nó theo mục đích sử dụng của mình

Cách sử dụng :

Bạn chèn đoạn shortcode này vào bài viết hoặc page:

Shortcode wordpress hiện nội dung nếu thành viên đăng nhập

[userview]
Nội dung mà bạn muốn chỉ hiện ra với những thành viên đã đăng nhập
[/userview]

lưu ý: Nếu bạn muốn Thêm nút Quicktag cho khung soạn thảo WordPress thì có thể xem bài này:
Thêm nút Quicktag cho khung soạn thảo WordPress

Cùng xem kết quả khi mình chưa đăng nhập nhé

hien-noi-dung-neu-thanh-vien-dang-nhap-voi-shortcode-wordpress2

Và khi đã Đăng nhập vào website vnkings.com :
hien-noi-dung-neu-thanh-vien-dang-nhap-voi-shortcode-wordpress3

Chúc các bạn thành công

]]>
<![CDATA[Thêm thẻ Meta Description cho WordPress không cần Plugin]]> https://wordpress.vnkings.com/them-the-meta-description-cho-wordpress-khong-can-plugin.html Thêm thẻ Meta Description cho Wordpress không cần Plugin một cách đơn giản giúp tối ưu seo cho website

]]>

Thêm thẻ Meta Description cho WordPress không cần Plugin

Thêm thẻ Meta Description cho WordPress không cần Plugin
Thêm thẻ Meta Description cho WordPress không cần Plugin

Thủ thuật WordPress

Như các bạn cũng biết, Thẻ Meta Description rất quan trọng để SEO Website, nó giúp các công cụ tìm kiếm lấy được nội dung tóm tắt của trang đó. Nếu bạn đang sử dụng WordPress, có rất nhiều plugin hỗ trợ bạn tạo ra thẻ Meta Description như : Yoast SEO, All in One SEO Pack

Nhưng trong bài viết này, Mình sẽ giúp các Bạn Thêm thẻ Meta Description cho WordPress không cần Plugin một cách đơn giản:

– Bạn mở file Functions.php trong thư mục Theme đang sử dụng và thêm đoạn code bên dưới:

function vnkings_meta_description() {
    global $post;
    if ( is_single() ) {
        $des_post = strip_tags( $post->post_content );
        $des_post = strip_shortcodes( $post->post_content );
        $des_post = str_replace( array("n", "r", "t"), ' ', $des_post );
        $des_post = mb_substr( $des_post, 0, 155, 'utf8' );
        echo '<meta name="description" content="' . $des_post . '" />' . "n";
    }
	if ( is_home() ) {
		 echo '<meta name="description" content="'.get_bloginfo( "description" ).'" />'. "n";
	}
	if ( is_category() ) {
		 $des_cat = strip_tags(category_description());
		 echo '<meta name="description" content="'.$des_cat.'" />'. "n";
	}
}
add_action( 'wp_head', 'vnkings_meta_description' , 2 );

Giải thích:

  • function vnkings_meta_description() tạo functions thêm description
  • is_single(): Nếu ở trang chi tiết bài viết
  • strip_tags($post->post_content): lấy nội dung bài viết và xóa các thẻ html nếu có
  • strip_shortcodes( $post->post_content ): lấy nội dung bài viết và xóa nội dung sinh ra từ shortcode
  • str_replace(,,,): replace các đoạn xuống dòng thành dấu cách
  • mb_substr( $des_post, 0, 155, ‘utf8’ ): cắt chữ lấy 155 ký tự và định dạng là utf8
  • is_home(): Nếu ở trang chủ website
  • is_category(): Nếu ở trang Category
  • add_action(‘wp_head’,”,vị trí): chèn đoạn thực hiện functions vào header của trang

Kết quả ở Vnkings.com:

Thêm thẻ Meta Description cho WordPress không cần Pluginn

Như vậy chúng ta đã tự tạo được thẻ Meta Description cho website rồi

Chúc các bạn thành công!

]]>
<![CDATA[Xem bài viết nếu kết quả tìm kiếm chỉ có một bài đó]]> https://wordpress.vnkings.com/vao-bai-viet-neu-ket-qua-tim-kiem-chi-co-mot-bai-do.html Xem bài viết nếu kết quả tìm kiếm chỉ có một bài đó một cách đơn giản, không cần sử dụng plugin

]]>

Xem bài viết nếu kết quả tìm kiếm chỉ có một bài đó

Xem bài viết nếu kết quả tìm kiếm chỉ có một bài đó
Xem bài viết nếu kết quả tìm kiếm chỉ có một bài đó

Thủ thuật WordPress

Chào các bạn, Gần đây mình có nhận được 1 yêu cầu từ khách hàng, muốn người dùng khi tìm kiếm từ khóa mà kết quả trả về chỉ có 1 bài thì sẽ được chuyển hướng vào bài viết này luôn.

Xem bài viết nếu kết quả tìm kiếm chỉ có một bài đó

Thấy ý tưởng này cũng hay nên mình viết ra đây nếu bạn nào cũng muống làm chức năng tương tự, cách làm cho chức năng này cũng khá đơn giản:
Xem bài viết nếu kết quả tìm kiếm chỉ có một bài đó

– Bạn mở file Functions.php trong thư mục Theme đang sử dụng và thêm đoạn này :

function redirect_single_post() {
    if ( is_search() && is_main_query() ) {
        global $wp_query;
        if ( $wp_query->post_count == 1 && $wp_query->max_num_pages == 1 ) {
            wp_redirect( get_permalink( $wp_query->posts['0']->ID ) );
            exit;
        }
    }
}
add_action( 'template_redirect', 'redirect_single_post' );

Bây giờ bạn có thể ra tìm kiếm thử một từ khóa nào đó chỉ có 1 bài và xem kết quả mà mình vừa làm được

Chúc các Bạn thành công

]]>
<![CDATA[Tự động thêm link từ khóa vào nội dung và trích dẫn wordpress]]> https://wordpress.vnkings.com/tu-dong-them-link-tu-khoa-vao-noi-dung-va-trich-dan-wordpress.html Tự động thêm link từ khóa vào nội dung và trích dẫn wordpress một cách đơn giản mà không cần sử dụng đến plugin, giúp bạn giảm thời gian viết bài tối ưu seo

]]>

Tự động thêm link từ khóa vào nội dung và trích dẫn wordpress

Tự động thêm link từ khóa vào nội dung và trích dẫn wordpress
Tự động thêm link từ khóa vào nội dung và trích dẫn wordpress

Thủ thuật WordPress

Khi viết bài, việc thêm Link Nội hay còn gọi là Liên kết nội bộ giúp cho bài viết SEO tốt hơn, Các công cụ tìm kiếm dễ dàng đi sâu và index các liên kết đó. Nhưng nếu bài viết nào Bạn cũng phải nhập link cho các từ khóa này thì khá mất thời gian. Vậy trong bài viết này mình sẽ giúp các bạn Tự động thêm link từ khóa vào nội dung và trích dẫn wordpress một cách dễ dàng mà không cần sử dụng đến Plugin

Tự động thêm link từ khóa vào nội dung và trích dẫn wordpress
Tự động thêm link từ khóa vào nội dung và trích dẫn wordpress

Các bạn tìm đến File Functions.php và thêm đoạn code phía dưới:

function vnkings_auto_links( $text ) {
    $replace = array(
        'thủ thuật wordpress' => '<a title="thủ thuật wordpress" href="https://wordpress.vnkings.com">thủ thuật wordpress</a>',
		'wordpress nâng cao' => '<a title="wordpress nâng cao" href="https://wordpress.vnkings.com/wordpress">wordpress nâng cao</a>',
    );
    $text = str_replace( array_keys($replace), $replace, $text );
    return $text;
}
add_filter( 'the_content', 'vnkings_auto_links' );
add_filter( 'the_excerpt', 'vnkings_auto_links' );

Lưu ý: Các bạn thay đoạn này thành từ khóa và link của các bạn nhé
Cấu trúc:

'từ khóa khi viết bài' => '<a title="tiêu đề từ khóa mới" href="địa chỉ link từ khóa muốn đặt">từ khóa mới</a>',

Ví dụ: Mình có 1 từ khóa là wordpress trong bài viết, mình muốn tự động thêm link cho nó thì mình thêm đoạn này vào function bên trên

'wordpress' => '<a title="wordpress" href="https://wordpress.vnkings.com/">Wordpress Vnkings</a>',

Bây giờ mình sẽ thử trên web của mình luôn nhé

– Mình viết bài và có các từ khóa đã đặt trong Functions
Tự động thêm link từ khóa vào nội dung và trích dẫn wordpress

kết quả khi xem bài viết
tu-dong-them-link-tu-khoa-vnkings-2
Vậy là các từ khóa đã được tự động thêm link rồi, khá tiện và bạn không phải tự nhập bằng tay.

Chúc các bạn thành công!

]]>
<![CDATA[Tạo khung giới thiệu trong trang quản trị WordPress]]> https://wordpress.vnkings.com/tao-khung-gioi-thieu-trong-trang-quan-tri-wordpress.html Trong bài viết này mình sẽ giúp các Bạn Tạo khung giới thiệu trong trang quản trị WordPress một cách đơn giản nhất mà không cần sử dụng đến Plugin

]]>

Tạo khung giới thiệu trong trang quản trị WordPress

Tạo khung giới thiệu trong trang quản trị WordPress
Tạo khung giới thiệu trong trang quản trị WordPress

Thủ thuật WordPress

Trong bài viết này mình sẽ giúp các Bạn Tạo khung giới thiệu trong trang quản trị WordPress một cách đơn giản nhất mà không cần sử dụng đến Plugin

Tạo khung giới thiệu trong trang quản trị WordPress

Ưu Điểm

  • Tạo bản quyền cho giao diện bạn làm ra
  • Hiển thị bất kỳ vấn đề gì bạn muốn thông báo tới thành viên khi đăng nhập vào quản trị
  • Không cần sử dụng Plugin, dễ dàng tùy biến

Cùng bắt đầu nào!
Các Bạn tìm tới file functions.php trong thư mục theme đang sử dụng
Thêm đoạn code này vào file trên :

function vnkings_welcome() {
global $wp_meta_boxes;
wp_add_dashboard_widget('custom_help_widget', 'Giới thiệu về Vnkings', 'vnkings_echotext');
}
function vnkings_echotext() { ?>
<h3>Chào mừng bạn đến với trang Quản Trị Website <?php echo bloginfo( 'name' ); ?>.</h3>
<p><strong>THÔNG TIN WEBSITE:</strong></p>
<p><?php echo bloginfo( 'name' ); ?> | <?php echo bloginfo( 'description' ); ?></p>
<p>Website được phát triển bởi <strong><a href="http://facebook.com/viruslove.nd">Tiến Lực</a></strong> Sử dụng <strong> WordPress Phiên bản <?php echo bloginfo("version"); ?> </strong>.</p>
<p><strong>THÔNG TIN LIÊN HỆ:</strong></p>
<p><strong>Web Developer</strong>:  Đoàn Tiến Lực </p>
<p><strong>Email</strong>: doantienluc@gmail.com</p>
<p><strong>Website</strong>: <a href="https://wordpress.vnkings.com/">VnKings.Com</a></p> 
<?php }
add_action('wp_dashboard_setup', 'vnkings_welcome');

Bạn hãy thay đổi nội theo website và thông tin của bạn nhé, sau đó lưu lại và xem kết quả ở mục Bảng tin trong trang quản trị

1 số điều lưu ý:

  • echo bloginfo( ‘name’ ): Hiển thị ra Tên của website
  • echo bloginfo( ‘description’ ): Hiển thị Mô tả của Website
  • echo bloginfo(“version”): Hiển thị phiên bản mà website của Bạn đang dùng
]]>
<![CDATA[Thay đổi tên nhóm người dùng WordPress bằng Functions]]> https://wordpress.vnkings.com/thay-doi-ten-nhom-nguoi-dung-wordpress-bang-functions.html Thay đổi tên nhóm người dùng Wordpress bằng Functions một cách đơn giản mà không cần sử dụng đến plugin

]]>

Thay đổi tên nhóm người dùng WordPress bằng Functions

Thay đổi tên nhóm người dùng WordPress bằng Functions
Thay đổi tên nhóm người dùng WordPress bằng Functions

Thủ thuật WordPress

Khi quản trị nhóm thành viên trong WordPress Bạn sẽ thấy website của mình có 6 Nhóm chính là:

  • Super Admin: Nhóm thành viên cao nhất(người tạo ra Website)
  • Administrator: Quản trị viên
  • Editor: Biên tập viên
  • Author: Tác giả
  • Contributor: Cộng tác viên
  • Subscriber: Thành viên đăng ký

Nếu Bạn muốn đổi tên của 1 nhóm nào đó mà không cần sử dụng plugin thì có thể làm theo cách sau đây.

Thay đổi tên nhóm người dùng WordPress bằng Functions:
Chúng ta tìm đến file Functions.php và thêm đoạn code này

function vnkings_name_group() {
    global $wp_roles;
    if ( ! isset( $wp_roles ) )
        $wp_roles = new WP_Roles();
    $wp_roles->roles['administrator']['name'] = 'Vnkings Admin';
    $wp_roles->role_names['administrator'] = 'Vnkings Admin';           
}
add_action('init', 'vnkings_name_group');

Trong Function này bạn cần lưu ý đoạn:

  • $wp_roles->roles[‘administrator’][‘name’] = ‘Vnkings Admin’;
  • $wp_roles->role_names[‘administrator’] = ‘Vnkings Admin’;

Mình đã thay đổi nhóm Administrator thành nhóm có tên Vnkings.
Thay đổi tên nhóm người dùng WordPress bằng Functions

Tương tự như thế bạn cũng có thể thay thành tên khác nếu bạn muốn.
Ví dụ : thay đổi tên nhóm Adminstrator và nhóm Author

function vnkings_name_group() {
    global $wp_roles;
    if ( ! isset( $wp_roles ) )
    $wp_roles = new WP_Roles();
    $wp_roles->roles['administrator']['name'] = 'Vnkings Admin';
    $wp_roles->role_names['administrator'] = 'Vnkings Admin';
	
    $wp_roles->roles['author']['name'] = 'Vnkings Author';
    $wp_roles->role_names['author'] = 'Vnkings Author';   
}
add_action('init', 'vnkings_name_group');

Với 1 đoạn Function nhỏ trên bạn đã có thể thay đổi được tên nhóm người dùng wordpress mà không cần plugin rồi

Chúc các bạn thành công!

]]>
<![CDATA[Tùy chỉnh ẩn hiện các Menu trong trang quản trị WordPress]]> https://wordpress.vnkings.com/tuy-chinh-an-hien-cac-menu-trong-trang-quan-tri-wordpress.html Tùy chỉnh ẩn hiện các Menu trong trang quản trị Wordpress dễ dàng, giúp trang quản trị của bạn gọn nhẹ hơn!

]]>

Tùy chỉnh ẩn hiện các Menu trong trang quản trị WordPress

Tùy chỉnh ẩn hiện các Menu trong trang quản trị WordPress
Tùy chỉnh ẩn hiện các Menu trong trang quản trị WordPress

Thủ thuật WordPress

Khi Bạn cài nhiều Plugin lên Website WordPress của mình, Các plugin đó sẽ tạo thêm 1 vài menu trong phần quản trị, điều này có thể làm website của bạn không còn gọn gàng nữa. Vậy nếu bạn có ý định ẩn các menu đó đi thì có thể xem qua bài viết này của mình.

Tùy chỉnh ẩn hiện các Menu trong trang quản trị WordPress

Tùy chỉnh ẩn hiện các Menu trong trang quản trị WordPress

Đầu tiên bạn cần mở file Functions.php trong thư mục Theme mà bạn đang sử dụng
Thêm đoạn Functions này vào file vừa mở :

function vnkings_admin_menus() {
   remove_menu_page( 'index.php' ); // Menu Bảng tin
   remove_menu_page( 'edit.php' ); // Menu Bài viết
   remove_menu_page( 'upload.php' ); // Menu Media
   remove_menu_page( 'edit.php?post_type=page' ); // Menu Trang
   remove_menu_page( 'edit-comments.php' ); // Menu Bình luận
   remove_menu_page( 'themes.php' ); // Menu Giao diện
   remove_menu_page( 'plugins.php' ); // Menu Plugins
   remove_menu_page( 'users.php' ); // Menu Thành viên
   remove_menu_page( 'tools.php' ); // Menu Công cụ
   remove_menu_page( 'options-general.php' ); // Menu cài đặt
}
add_action( 'admin_menu', 'vnkings_admin_menus' );

Trên function kia mình đã ẩn đi hêt các menu mặc định của WordPress, nhưng nếu Bạn cần ẩn menu nào thì cho menu đó vào thôi nhé.

Ví dụ bạn chỉ muốn ẩn Menu Plugin đi thì đoạn code sẽ là :

function vnkings_admin_menus() {
   remove_menu_page( 'plugins.php' ); // Menu Plugins
}
add_action( 'admin_menu', 'vnkings_admin_menus' );

– Ẩn Menu của các Plugin tạo ra :
Bạn có thể để ý khi vào Menu Plugin đó thường sẽ có dạng như ảnh bên dưới
Tùy chỉnh ẩn hiện các Menu trong trang quản trị WordPress
Trên thanh Address trình duyệt Bạn lưu ý hình vuông màu đỏ mình vẽ, đây chính là name để bạn sử dụng ẩn Menu plugin đó đi.

function vnkings_admin_menus() {
   remove_menu_page( 'wpcf7' ); // Xóa Menu Contact form 7
   remove_menu_page( 'bhittani_plugin_kksr_settings' ); // Xóa Menu kk Star Ratings
   remove_menu_page( 'wpseo_dashboard' ); // Xóa Menu Seo By Yoast
}
add_action( 'admin_menu', 'vnkings_admin_menus' );

khá đơn giản phải không các bạn.

Chúc bạn thành công!

]]>
<![CDATA[Thay đổi vị trí các Menu trong trang quản trị WordPress]]> https://wordpress.vnkings.com/thay-doi-vi-tri-cac-menu-trong-trang-quan-tri-wordpress.html Trong bài viết này mình sẽ giúp các bạn có thể Thay đổi vị trí các Menu trong trang quản trị Wordpress một cách dễ dàng

]]>

Thay đổi vị trí các Menu trong trang quản trị WordPress

Thay đổi vị trí các  Menu trong trang quản trị WordPress
Thay đổi vị trí các Menu trong trang quản trị WordPress

Thủ thuật WordPress

Khi vào trang quản trị của 1 trang wordpress, các vị trí Menu trong đó đã được xắp xếp khá thuận tiện cho người dùng. Tuy nhiên bạn cũng hoàn toàn có thể thay đổi nó theo mục đích sử dụng của mình.
Trong bài viết này mình sẽ giúp các bạn có thể Thay đổi vị trí các Menu trong trang quản trị WordPress một cách dễ dàng

Mặc định Website mình sẽ có các menu ở vị trí như sau :
vi-tri-menu-vnkings-c

Bạn tìm tới file functions.php và thêm đoạn function này vào:

function vnkings_admin_menu( $__return_true ) {
    return array(
		'index.php', // Menu Bảng tin
		'edit.php?post_type=page', // Menu Trang
		'edit.php', // Menu Bài viết
		'upload.php', // Menu Media
		'tools.php', // Menu Công cụ
		'options-general.php', // Menu Cài đặt
		'themes.php', // Menu Giao diện
		'separator1', // Đoạn Cách
		'edit-comments.php', // Menu Bình luận 
		'users.php', // Menu Thành viên
		'plugins.php', // Menu Plugins
   );
}
add_filter( 'custom_menu_order', 'vnkings_admin_menu' );
add_filter( 'menu_order', 'vnkings_admin_menu' );

Cùng xem kết quả nhé

Thay đổi vị trí các  Menu trong trang quản trị WordPress

Với đoạn function kia Bạn hoàn toàn có thể thay đổi vị trí theo ý muốn
Ví dụ : đổi Menu Thành viên lên trên Menu Bình luận

'users.php', // Menu Thành viên
'edit-comments.php', // Menu Bình luận 

Chúc các bạn thành công!

]]>
<![CDATA[Serie tự tạo User Front-End không cần sử dụng Plugin]]> https://wordpress.vnkings.com/serie-tu-tao-user-front-end-khong-can-dung-plugin.html Serie tự tạo User Front-End không dùng plugin cho wordpress, Serie này gồm có các bài tạo trang đăng ký, đăng nhập, xem và sửa thông tin thành viên.

]]>

Serie tự tạo User Front-End không cần sử dụng Plugin

Serie tự tạo User Front-End không cần sử dụng Plugin
Serie tự tạo User Front-End không cần sử dụng Plugin

Thủ thuật WordPress

Chào các bạn, Đây là Serie chuyên về chức năng như Đăng ký, Đăng nhập, Quản lý và Xem thông tin Thành Viên. Tất cả các bài trong serie này đều do chúng ta tự Code và không cần sử dụng đến Plugin. Với Serie này bạn sẽ có thêm kinh nghiệm để làm việc với WordPress Nâng cao.

Danh sách bài viết : Serie tự tạo User Front-End không cần sử dụng Plugin

Bài 1: Tạo trang đăng nhập WordPress không cần Plugin
– Tự tạo trang đăng nhập cho wordpress vô cùng đơn giản, đây là 1 bài hướng dẫn khá dễ cho bạn.
Serie tự tạo User Front-End không dùng plugin

Bài 2: Tạo trang Đăng ký cho WordPress không cần Plugin
– Bài viết này giúp bạn tạo trang đăng ký thành viên cho wordpress 1 cách đơn giản, hãy cùng vnkings thiết kế nên phong cách của mình nhé!
Tạo trang Đăng ký cho WordPress không cần Plugin

Bài 3: Tạo trang Xem và Sửa thông tin thành viên WordPress
– Bài hướng dẫn cụ thể và chi tiết, giúp bạn tạo cho thành viên của mình 1 trang xem và sửa thông tin ngay bên ngoài trang chủ mà không cần sử dụng đến Plugin
Tạo trang Xem và Sửa thông tin thành viên WordPress

Mong rằng với Serie wordpress này bạn sẽ có thêm nhiều ý tưởng để phát triển website mình hơn!

]]>
<![CDATA[Tạo trang Xem và Sửa thông tin thành viên WordPress]]> https://wordpress.vnkings.com/tao-trang-sua-va-xem-thong-tin-thanh-vien-wordpress.html Giúp thành viên của mình xem và sửa thông tin cá nhân ngay ngoài trang chủ một cách đơn giản và tiện lợi.

]]>

Tạo trang Xem và Sửa thông tin thành viên WordPress

Tạo trang Xem và Sửa thông tin thành viên WordPress
Tạo trang Xem và Sửa thông tin thành viên WordPress

Thủ thuật WordPress

Thông thường khi sử dụng WordPress,Thành Viên cần phải vào trang quản trị mới có thể thay đổi thông tin. Nhưng Bạn hoàn toàn có thể giúp thành viên của mình sửa thông tin ấy ngay ngoài trang chủ một cách đơn giản và tiện lợi.

Tạo trang Xem và Sửa thông tin thành viên WordPress

Ưu điểm :

  • Giúp thành viên dễ dàng hơn trong việc quản trị thông tin của mình
  • Dễ dàng thay đổi cách hiển thị vì mỗi dòng code đều do bạn tạo ra
  • Không sử dụng plugin, Javascript nên trang sẽ load nhẹ hơn
  • Tạo cảm hứng cho các bạn thích trinh phục wordpress nâng cao, tự tạo chức năng

Bắt đầu Tạo trang Xem và Sửa thông tin thành viên WordPress nào!

Đầu tiên bạn tìm file : author.php trong thư mục Theme của mình, nếu chưa có thì bạn tạo nó nhé (File này mặc định sẽ là trang thông tin Thành Viên)

Cũng như các hướng dẫn khác, mình sẽ giải thích từng phần và có 1 file tổng hợp lại giúp bạn dễ hiểu hơn.

– Lấy thông tin thành viên

<?php
$user_id 	= get_current_user_id();
$author_vnkings = get_user_by( 'slug', get_query_var( 'author_name' ) );
$author_id = $author_vnkings->ID;
if($user_id == $author_id) {
// Hiển thị Form sửa thông tin thành viên
} else {
// Hiển thị thông tin thành viên
} ?>

Giải thích :

  • $user_id : Lấy ID của thành viên hiện tại
  • get_user_by() : Hàm này giúp bạn lấy thông tin của thành viên bạn đang xem
  • $author_id : Lấy ID của thành viên bạn đang xem
  • if($user_id == $author_id) : Nếu ID của bạn trùng với ID của thành viên đang xem (có nghĩa bạn đang xem thông tin của chính mình)
  • if:else : Nếu là bạn thì hiển thị ra khung chỉnh sửa thông tin, ngược lại sẽ hiển thị thông tin thành viên bạn đang xem

– Form Sửa thông tin thành viên

<form role="form" action="" id="user_profile" method="POST">
	<?php wp_nonce_field('user_profile_nonce', 'user_profile_nonce_field'); ?>
	<div class="form-group col-md-6">
		<label for="nickname">Họ Tên</label>
		<input type="text" class="form-control" id="nickname" name="nickname" placeholder="Họ Tên" value="<?php the_author_meta( 'nickname', $author_id ); ?>">
	</div>
	<div class="form-group col-md-6">
		<label for="email">Email</label>
		<input disabled type="email" class="form-control" id="email" name="email" placeholder="Enter email" value="<?php the_author_meta( 'user_email', $author_id ); ?>">
	</div>
	<div class="form-group col-md-6">
		<label for="user_url">Website</label>
		<input type="text" class="form-control" id="user_url" name="user_url" placeholder="Website của bạn" value="<?php the_author_meta( 'user_url', $author_id ); ?>">
	</div>
	<div class="form-group col-md-6">
		<label for="facebook">Facebook</label>
		<input type="text" class="form-control" id="facebook" name="facebook" placeholder="Facebook của bạn" value="<?php the_author_meta( 'facebook', $author_id ); ?>">
	</div>
	<div class="form-group col-md-6">
		<label for="googleplus">Google Plus</label>
		<input type="text" class="form-control" id="googleplus" name="googleplus" placeholder="Google Plus của bạn" value="<?php the_author_meta( 'googleplus', $author_id ); ?>">
	</div>
	<div class="form-group col-md-6">
		<label for="twitter">Twitter</label>
		<input type="text" class="form-control" id="twitter" name="twitter" placeholder="Twitter của bạn" value="<?php the_author_meta( 'twitter', $author_id ); ?>">
	</div>
	<div class="form-group col-md-12">
		<label for="description">Mô tả về bạn</label>
		<textarea class="form-control" name="description" id="description" rows="3" cols="50"><?php the_author_meta( 'description', $author_id ); ?></textarea>
	</div>
	<div class="form-group col-md-6">
		<label for="pass1">Password</label>
		<input type="password" class="form-control" id="pass1" name="pass1" placeholder="Password">
	</div>
	<div class="form-group col-md-6">
		<label for="pass2">Nhập lại Password</label>
		<input type="password" class="form-control" id="pass2" name="pass2" placeholder="Password">
	</div>
	<div class="form-group col-md-12"><button type="submit" class="btn btn-success">Cập nhật</button></div>
</form>

Bạn có thể thấy trong các input Value của mình đều có dạng:

<?php the_author_meta( 'tên_trường', $author_id ); ?>

Đây chính là hàm lấy ra thông tin của của thành viên.
Ví dụ bạn lấy ra email của thành viên :

<?php the_author_meta( 'user_email', $author_id ); ?>

Một số trường thành viên WordPress hỗ trợ:

  • nickname : Hiển thị họ tên
  • user_email : Hiển thị Email
  • user_url : Hiển thị Website
  • description : Mô tả ngắn thành viên

Ngoài ra bạn cũng có thể thêm Trường bằng cách thêm đoạn này vào file functions.php

function add_fields_user($profile_fields){
$profile_fields['googleplus'] = 'Google+';
$profile_fields['twitter'] = 'Twitter username';
$profile_fields['facebook'] = 'Facebook profile URL';
return $profile_fields;
}
add_filter('user_contactmethods', 'add_fields_user');

Tạo trang Xem và Sửa thông tin thành viên WordPress

– Xử lý thông tin khi sửa

if( isset( $_POST['user_profile_nonce_field'] ) && wp_verify_nonce( $_POST['user_profile_nonce_field'], 'user_profile_nonce' ) ) {
	if ( !empty($_POST['pass1'] ) && !empty( $_POST['pass2'] ) ) {
		if ( $_POST['pass1'] == $_POST['pass2'] )
			wp_update_user( array( 'ID' => $current_user->ID, 'user_pass' => esc_attr( $_POST['pass1'] ) ) );
		else
		 echo	$error[] = __('Mật khẩu của bạn không được cập nhật', 'profile');
	}
	/* Update thông tin user. */
	if ( !empty( $_POST['user_url'] ) ){
		wp_update_user( array( 'ID' => $current_user->ID, 'user_url' => esc_url( $_POST['user_url'] ) ) );
	}
	if ( !empty( $_POST['nickname'] ) ) {
	update_user_meta( $current_user->ID, 'nickname', esc_attr( $_POST['nickname'] ) ); }
	if ( !empty( $_POST['twitter'] ) ) {
	update_user_meta( $current_user->ID, 'twitter', esc_attr( $_POST['twitter'] ) ); }
	if ( !empty( $_POST['googleplus'] ) ) {
	update_user_meta( $current_user->ID, 'googleplus', esc_attr( $_POST['googleplus'] ) ); }
	if ( !empty( $_POST['facebook'] ) ) {
	update_user_meta( $current_user->ID, 'facebook', esc_attr( $_POST['facebook'] ) ); }
	if ( !empty( $_POST['description'] ) ){
	update_user_meta( $current_user->ID, 'description', esc_attr( $_POST['description'] ) ); }
	echo '<div class="alert alert-success"><strong>Bạn đã sửa thông tin cá nhân thành công!</strong></div>';
}

Giải thích

  • if( isset()) : Kiểm tra tồn tại và xác nhận nonce field
  • $_POST[‘tên trường’] : Lấy giá trị từ các trường trong form bên trên
  • wp_update_user() : Đưa thông tin vào cơ sở dữ liệu

– Hiển thị thông tin thành viên:

<div class="info_author col-md-8">
	<ul class="list-group vnk_label">
		<li class="list-group-item"><label for="nickname">Họ Tên:</label> <?php the_author_meta( 'nickname', $author_id ); ?></li>
		<li class="list-group-item"><label for="user_url">Website:</label> <a rel="nofollow" href="<?php the_author_meta( 'user_url', $author_id ); ?>"><?php the_author_meta( 'user_url', $author_id ); ?></a></li>
		<li class="list-group-item"><label for="user_url">Facebook:</label> <a rel="nofollow" href="<?php the_author_meta( 'facebook', $author_id ); ?>"><?php the_author_meta( 'facebook', $author_id ); ?></a></li>
		<li class="list-group-item"><label for="user_url">Google+:</label> <a rel="nofollow" href="<?php the_author_meta( 'googleplus', $author_id ); ?>"><?php the_author_meta( 'googleplus', $author_id ); ?></a></li>
		<li class="list-group-item"><label for="user_url">Twitter:</label> <a rel="nofollow" href="<?php the_author_meta( 'twitter', $author_id ); ?>"><?php the_author_meta( 'twitter', $author_id ); ?></a></li>
		<li class="list-group-item"><label for="description">Chia sẻ về tôi</label>: <?php the_author_meta( 'description', $author_id ); ?></li>
	</ul>
</div>

Cuối cùng ta có 1 file author.php hoàn chỉnh:

<?php get_header();?>
<div class="panel panel-default">
	<div class="panel-heading">
		<h1 style="font-size:21px;">Thông tin thành viên</h1>
	</div>
	<div class="panel-body">
		<?php
		$user_id 	= get_current_user_id();
		$author_vnkings = get_user_by( 'slug', get_query_var( 'author_name' ) );
		$author_id = $author_vnkings->ID;
		if($user_id == $author_id) { ?>
		<?php			
			if( isset( $_POST['user_profile_nonce_field'] ) && wp_verify_nonce( $_POST['user_profile_nonce_field'], 'user_profile_nonce' ) ) {
			if ( !empty($_POST['pass1'] ) && !empty( $_POST['pass2'] ) ) {
				if ( $_POST['pass1'] == $_POST['pass2'] )
					wp_update_user( array( 'ID' => $current_user->ID, 'user_pass' => esc_attr( $_POST['pass1'] ) ) );
				else
				 echo	$error[] = __('Mật khẩu của bạn không được cập nhật', 'profile');
			}
			/* Update thông tin user. */
			if ( !empty( $_POST['user_url'] ) ){
				wp_update_user( array( 'ID' => $current_user->ID, 'user_url' => esc_url( $_POST['user_url'] ) ) );
			}
			if ( !empty( $_POST['nickname'] ) ) {
			update_user_meta( $current_user->ID, 'nickname', esc_attr( $_POST['nickname'] ) ); }
			if ( !empty( $_POST['twitter'] ) ) {
			update_user_meta( $current_user->ID, 'twitter', esc_attr( $_POST['twitter'] ) ); }
			if ( !empty( $_POST['googleplus'] ) ) {
			update_user_meta( $current_user->ID, 'googleplus', esc_attr( $_POST['googleplus'] ) ); }
			if ( !empty( $_POST['facebook'] ) ) {
			update_user_meta( $current_user->ID, 'facebook', esc_attr( $_POST['facebook'] ) ); }
			if ( !empty( $_POST['description'] ) ){
			update_user_meta( $current_user->ID, 'description', esc_attr( $_POST['description'] ) ); }
			echo '<div class="alert alert-success"><strong>Bạn đã sửa thông tin cá nhân thành công!</strong></div>';
		}
		?>
		<form role="form" action="" id="user_profile" method="POST">
			<?php wp_nonce_field('user_profile_nonce', 'user_profile_nonce_field'); ?>
			<div class="form-group col-md-6">
				<label for="nickname">Họ Tên</label>
				<input type="text" class="form-control" id="nickname" name="nickname" placeholder="Họ Tên" value="<?php the_author_meta( 'nickname', $author_id ); ?>">
			</div>
			<div class="form-group col-md-6">
				<label for="email">Email</label>
				<input disabled type="email" class="form-control" id="email" name="email" placeholder="Enter email" value="<?php the_author_meta( 'user_email', $author_id ); ?>">
			</div>
			<div class="form-group col-md-6">
				<label for="user_url">Website</label>
				<input type="text" class="form-control" id="user_url" name="user_url" placeholder="Website của bạn" value="<?php the_author_meta( 'user_url', $author_id ); ?>">
			</div>
			<div class="form-group col-md-6">
				<label for="facebook">Facebook</label>
				<input type="text" class="form-control" id="facebook" name="facebook" placeholder="Facebook của bạn" value="<?php the_author_meta( 'facebook', $author_id ); ?>">
			</div>
			<div class="form-group col-md-6">
				<label for="googleplus">Google Plus</label>
				<input type="text" class="form-control" id="googleplus" name="googleplus" placeholder="Google Plus của bạn" value="<?php the_author_meta( 'googleplus', $author_id ); ?>">
			</div>
			<div class="form-group col-md-6">
				<label for="twitter">Twitter</label>
				<input type="text" class="form-control" id="twitter" name="twitter" placeholder="Twitter của bạn" value="<?php the_author_meta( 'twitter', $author_id ); ?>">
			</div>
			<div class="form-group col-md-12">
				<label for="description">Mô tả về bạn</label>
				<textarea class="form-control" name="description" id="description" rows="3" cols="50"><?php the_author_meta( 'description', $author_id ); ?></textarea>
			</div>
			<div class="form-group col-md-6">
				<label for="pass1">Password</label>
				<input type="password" class="form-control" id="pass1" name="pass1" placeholder="Password">
			</div>
			<div class="form-group col-md-6">
				<label for="pass2">Nhập lại Password</label>
				<input type="password" class="form-control" id="pass2" name="pass2" placeholder="Password">
			</div>
			<div class="form-group col-md-12"><button type="submit" class="btn btn-success">Cập nhật</button></div>
		</form>
		<?php } else { ?>
		<div class="col-md-4">
			<a href="<?php echo get_author_posts_url($author_id); ?>">
			<?php $avatar = get_user_meta( $author_id,  'lovendpic', true); 
			 $image	=	wp_get_attachment_image_src($avatar, 'medium');?>
				<?php if(!empty($image)){ ?>
				<img style="border:1px solid #ccc;padding:2px;border-radius:5px;" alt="<?php echo $useridname; ?>" id="avatar-img" src="<?php echo $image[0]; ?>">
				<?php } else { ?>
				<img style="border:1px solid #ccc;padding:2px;border-radius:5px;width:100%;height:auto;" alt="<?php echo $useridname; ?>" id="avatar-img" src="https://wordpress.vnkings.com/wp-content/uploads/2015/11/logo.png">
				<?php } ?>
			</a>
		</div>
		<div class="info_author col-md-8">
			<ul class="list-group vnk_label">
				<li class="list-group-item"><label for="nickname">Họ Tên:</label> <?php $vnkings_name = the_author_meta( 'nickname', $author_id ); if(isset($vnkings_name)){echo $vnkings_name;} ?></li>
				<li class="list-group-item"><label for="user_url">Website:</label> <a rel="nofollow" href="<?php the_author_meta( 'user_url', $author_id ); ?>"><?php the_author_meta( 'user_url', $author_id ); ?></a></li>
				<li class="list-group-item"><label for="user_url">Facebook:</label> <a rel="nofollow" href="<?php the_author_meta( 'facebook', $author_id ); ?>"><?php the_author_meta( 'facebook', $author_id ); ?></a></li>
				<li class="list-group-item"><label for="user_url">Google+:</label> <a rel="nofollow" href="<?php the_author_meta( 'googleplus', $author_id ); ?>"><?php the_author_meta( 'googleplus', $author_id ); ?></a></li>
				<li class="list-group-item"><label for="user_url">Twitter:</label> <a rel="nofollow" href="<?php the_author_meta( 'twitter', $author_id ); ?>"><?php the_author_meta( 'twitter', $author_id ); ?></a></li>
				<li class="list-group-item"><label for="description">Chia sẻ về tôi</label>: <?php the_author_meta( 'description', $author_id ); ?></li>
			</ul>
		</div>
		<?php } ?>
	</div>
</div>
<?php get_footer();?>

Tạo trang Xem và Sửa thông tin thành viên WordPress

Như vậy với những bước bên trên bạn đã tạo ra được trang Xem hoặc sửa thành viên theo phong cách của mình rồi. Nếu có bất kỳ câu hỏi nào hãy gửi vào khung bình luận cho mình nhé 🙂

Chúc các bạn thành công!

]]>
<![CDATA[Serie Post Front-End không cần sử dụng Plugin]]> https://wordpress.vnkings.com/series-post-front-end-khong-can-su-dung-plugin.html Trọn bộ Serie Post Front-End không cần sử dụng Plugin giúp thành viên có thế Viết bài, Quản lý bài, Sửa bài cho Website Wordpress

]]>

Serie Post Front-End không cần sử dụng Plugin

Serie Post Front-End không cần sử dụng Plugin
Serie Post Front-End không cần sử dụng Plugin

Thủ thuật WordPress

Chào các bạn, Mới đây mình đã làm trọn bộ Serie Post Front-End không cần sử dụng Plugin giúp thành viên có thế Viết bài, Quản lý bài, Sửa bài ngay tại bên ngoài Front-End. Mong rằng Serie này sẽ giúp có thêm kiến thức trong việc tìm hiểu WordPress Nâng Cao.

Serie Post Front-End không cần sử dụng Plugin

Danh sách bài:

Bài 1 : Tạo trang đăng bài cho thành viên
– Đây là bài đâu tiên mình đã viết từng đoạn nhỏ và giải thích chi tiết giúp bạn sẽ dễ dàng tạo 1 trang đăng bài theo phong cách của mình.

Bài 2 : Tạo trang Quản lý bài cho thành viên
Nếu bạn đã cho phép thành viên Đăng bài, vậy cũng nên tạo 1 trang cho phép họ xem các bài đăng của mình (Quản lý và xem trạng thái đã được duyệt hay chưa).

Bài 3 : Tạo trang Sửa bài cho thành viên
Đây là bài cuối cùng trong Serie, Sau khi đăng bài và xem bài đăng, vậy ta cũng nên tạo cho thành viên 1 trang để họ chỉnh sửa nó.

]]>
<![CDATA[Tạo trang chỉnh sửa bài viết WordPress không dùng Plugin]]> https://wordpress.vnkings.com/tao-trang-chinh-sua-bai-viet-wordpress-khong-dung-plugin.html Tạo trang chỉnh sửa bài viết Wordpress không dùng Plugin dễ dàng tùy biến theo ý của bạn

]]>

Tạo trang chỉnh sửa bài viết WordPress không dùng Plugin

Tạo trang chỉnh sửa bài viết WordPress không dùng Plugin
Tạo trang chỉnh sửa bài viết WordPress không dùng Plugin

Thủ thuật WordPress

Chào các bạn, ở 2 bài trước Mình đã giúp các Bạn tự tạo Trang Đăng bàiTrang quản lý bài cho thành viên, Tiếp theo mình sẽ giúp các bạn tạo trang sửa bài viết của thành viên đã đăng lên.

Tạo trang chỉnh sửa bài viết WordPress không dùng Plugin

Đầu tiên bạn cần tạo file sua-bai.php

Trong file này bạn cần có các nội dung sau:

– Kiểm tra thành viên đã được đăng nhập hay chưa, nếu chưa thì hiển thị khung đăng nhập

<?php
/*
 Template Name: Sửa bài
 */
 ?>
<?php if(is_user_logged_in()) {
$user_id = get_current_user_id();
$current_user = wp_get_current_user();
$vnkings =  $current_user->user_level;
if($vnkings <= 2) { $vnstatus = "pending"; } else { $vnstatus = "publish"; }
?>
// form Sửa bài
<?php } else { ?>
<div class="formdangnhap">
    <?php wp_login_form(); ?>            
</div>
<?php } ?>

– Thêm Form sửa bài viết (form mình đang sử dụng cấu trúc của Boostrap để các bạn tùy biến)

<?php $idvnkings = addslashes( $_GET['id'] ); ?>
<form id="new_post" class="form-horizontal" method="post" action="" enctype="multipart/form-data">
	<div class="form-group vnking_pd col-sm-12 col-md-6">
		<label for="post_title">Tiêu đề</label>
		<input type="text" name="post_title" value="<?php echo get_the_title($idvnkings) ;?>" class="form-control" placeholder="Tiêu đề">
	</div>
	
	<div class="form-group vnking_pd pd_0">
	  <label for="post_content">Nội Dung</label>
	  <?php
		$post = get_post( $idvnkings, OBJECT, 'edit' );
		$content = $post->post_content;
		wp_editor( $content, 'userpostcontent', array( 'textarea_name' => 'post_content' ));?>
	</div>
	<div class="form-group vnking_pd col-md-6">
		<?php
		$cats = get_the_category( $idvnkings);
		$selected = 0;
		if( $cats ) {
		$selected = $cats[0]->term_id;
		}
		?>
	  <label for="post_content">Danh mục</label>
		<?php
		wp_dropdown_categories( array(
		'orderby'    => 'title',
		'hide_empty' => false,
		'id'         => 'Posts_Picture_category',
		'class'      => 'form-control',
		'name' =>      'post_category',
		'selected'   => $selected
			) );
		?>
	</div>
	<div class="form-group vnking_pd col-md-6">
	  <label for="post_tags">Từ khóa</label>
	  <input type="text" name="post_tags" value="<?php echo $tagslist; ?>" class="form-control" placeholder="Từ khóa">
	</div>
	
	<div style="clear:both;"></div>
	<div class="form-group">
		<?php
			$feat_image = wp_get_attachment_url( get_post_thumbnail_id($idvnkings) );
		?>
		<p><img style="max-width:300px; display:block;" id="output_avatar" src="<?php echo $feat_image;?>"/></p>
		
		<script>
		  var loadFile = function(event) {
			var output = document.getElementById('output_avatar');
			output.src = URL.createObjectURL(event.target.files[0]);
			 $('#output_avatar').addClass('active-avatar');
		  };
		</script>
		<span class="btn btn-default btn-file">Hình ảnh bài viết <input class="input-file" accept="image/*" name="file" type="file" class="file" onchange="loadFile(event)">
		</span>
	</div>
	<input type="hidden" name="add_new_post" value="post" />
	<?php wp_nonce_field( 'post_nonce', 'post_nonce_field' ); ?>
	<div class="form-group">
		<div class="col-sm-12" style="padding-left:0;">
		  <button type="submit" class="btn btn-primary">Sửa Bài</button>
		</div>
	</div>
</form>

Giải thích đoạn code

  • $idvnkings = addslashes($_GET[‘id’]) : Bạn hãy để ý đường dẫn khi click vào sửa bài ở trang quản lý bài viết sẽ có dạng : domain/sua-bai.html?id=60 vậy với đoạn code trên bạn sẽ lấy được id bài viết cần sửa Tạo trang chỉnh sửa bài viết WordPress không dùng Plugin
  • $post = get_post() : Lấy thông tin bài viết
  • $content = $post->post_content : Lấy nội dung bài viết
  • wp_editor() : Khung viết bài của wordpress
  • $feat_image : Lấy ảnh đại diện của bài viết
  • $tagslist; : Lấy Tags bài viết
  • wp_nonce_field() : Bảo mật cho form bài viết, giúp chứng thực sự hoạt động của người dùng nếu form đăng bài gửi đi

– Xử lý dữ liệu khi ấn vào sửa bài viết

<?php 
if( $_SERVER['REQUEST_METHOD'] == 'POST' && !empty( $_POST['add_new_post'] ) && current_user_can('level_0') && isset( $_POST['post_nonce_field'] ) && wp_verify_nonce( $_POST['post_nonce_field'], 'post_nonce' )) {
if (isset($_POST['post_title'])) {
	$post_title = $_POST['post_title'];
}
if (isset($_POST['post_content'])) {
	$post_content = $_POST['post_content'];
}
else {
	echo 'Please enter the content';
}
if (isset ($_POST['post_category'])) {
	$post_category = $_POST['post_category'];
} else {
	$post_category = 1;
}
if (isset($_POST['post_tags'])) {
	$post_tags = $_POST['post_tags'];
}

$post = array(
'ID' => $idvnkings,
'post_title'    => wp_strip_all_tags($post_title),
'post_content'  => $post_content,
'post_category' => array($post_category),
'tags_input'    => $post_tags,
'post_type' => 'post',
'post_status'   => $vnstatus2,
);
$lovendpost_id_edit = wp_insert_post($post);

if ($_FILES['file']['name'] == "") {
} else {
	foreach ($_FILES as $file => $array) {
	$newupload = insert_attachment($file,$lovendpost_id_edit);
	}
}
echo '<div class="alert alert-success"><strong>Sửa bài Thành Công!</strong> <a href="'. get_permalink($idvnkings). '"> Xem Bài!</a></div>';
} ?>

Vậy tổng kết lại ta sẽ có 1 file sua-bai.php như sau:

<?php
/*
 Template Name: Sửa bài
 */
 ?>
 
 <div class="vnkings_form col-md-12">
<?php if(is_user_logged_in()) { ?>
<?php 	
$idvnkings = addslashes( $_GET['id'] );  
$post_tags = wp_get_post_tags($idvnkings); $tagsarray = array();
$vnstatus2 = get_post_status($idvnkings);
foreach ($post_tags as $tag) {
	$tagsarray[] = $tag->name;
}
$tagslist = implode( ', ', $tagsarray );
?>
<?php 
$current_user = wp_get_current_user(); $userid = $current_user->ID; $curpost = get_post( $idvnkings ); 
$userlevel = $current_user->user_level;
//has permission?
$lovenduser = $curpost->post_author;
if ($userid == $lovenduser || $userlevel > 2 ) { ?>
	<?php if( $_SERVER['REQUEST_METHOD'] == 'POST' && !empty( $_POST['add_new_post'] ) && current_user_can('level_0') && isset( $_POST['post_nonce_field'] ) && wp_verify_nonce( $_POST['post_nonce_field'], 'post_nonce' )) {
			if (isset($_POST['post_title'])) {
				$post_title = $_POST['post_title'];
			}
			if (isset($_POST['post_content'])) {
				$post_content = $_POST['post_content'];
			}
			else {
				echo 'Please enter the content';
			}
			if (isset ($_POST['post_category'])) {
				$post_category = $_POST['post_category'];
			} else {
				$post_category = 1;
			}
			if (isset($_POST['post_tags'])) {
				$post_tags = $_POST['post_tags'];
			}
			
			$post = array(
			'ID' => $idvnkings,
			'post_title'    => wp_strip_all_tags($post_title),
			'post_content'  => $post_content,
			'post_category' => array($post_category),
			'tags_input'    => $post_tags,
			'post_type' => 'post',
			'post_status'   => $vnstatus2,
			);
			$lovendpost_id_edit = wp_insert_post($post);
			
			if ($_FILES['file']['name'] == "") {
} else {
	foreach ($_FILES as $file => $array) {
	$newupload = insert_attachment($file,$lovendpost_id_edit);
	}
}
			echo '<div class="alert alert-success"><strong>Sửa bài Thành Công!</strong> <a href="'. get_permalink($idvnkings). '"> Xem Bài!</a></div>';
		} ?>
		<div id="postBox">
			<form id="new_post" class="form-horizontal" method="post" action="" enctype="multipart/form-data">
				<div class="form-group vnking_pd col-sm-12 col-md-6">
					<label for="post_title">Tiêu đề</label>
					<input type="text" name="post_title" value="<?php echo get_the_title($idvnkings) ;?>" class="form-control" placeholder="Tiêu đề">
				</div>
				
				<div class="form-group vnking_pd pd_0">
				  <label for="post_content">Nội Dung</label>
				  <?php
					$post = get_post( $idvnkings, OBJECT, 'edit' );
					$content = $post->post_content;
					wp_editor( $content, 'userpostcontent', array( 'textarea_name' => 'post_content' ));?>
				</div>
				<div class="form-group vnking_pd col-md-6">
					<?php
					$cats = get_the_category( $idvnkings);
					$selected = 0;
					if( $cats ) {
					$selected = $cats[0]->term_id;
					}
					?>
				  <label for="post_content">Danh mục</label>
					<?php
					wp_dropdown_categories( array(
					'orderby'    => 'title',
					'hide_empty' => false,
					'id'         => 'Posts_Picture_category',
					'class'      => 'form-control',
					'name' =>      'post_category',
					'selected'   => $selected
						) );
					?>
				</div>
				<div class="form-group vnking_pd col-md-6">
				  <label for="post_tags">Từ khóa</label>
				  <input type="text" name="post_tags" value="<?php echo $tagslist; ?>" class="form-control" placeholder="Từ khóa">
				</div>
				
				<div style="clear:both;"></div>
				<div class="form-group">
					<?php
						$feat_image = wp_get_attachment_url( get_post_thumbnail_id($idvnkings) );
					?>
					<p><img style="max-width:300px; display:block;" id="output_avatar" src="<?php echo $feat_image;?>"/></p>
					
					<script>
					  var loadFile = function(event) {
						var output = document.getElementById('output_avatar');
						output.src = URL.createObjectURL(event.target.files[0]);
						 $('#output_avatar').addClass('active-avatar');
					  };
					</script>
					<span class="btn btn-default btn-file">Hình ảnh bài viết <input class="input-file" accept="image/*" name="file" type="file" class="file" onchange="loadFile(event)">
					</span>
				</div>
				<input type="hidden" name="add_new_post" value="post" />
				<?php wp_nonce_field( 'post_nonce', 'post_nonce_field' ); ?>
				<div class="form-group">
					<div class="col-sm-12" style="padding-left:0;">
					  <button type="submit" class="btn btn-primary">Sửa Bài</button>
					</div>
				</div>
			</form>
		</div>
<?php } else { ?>
<div class="alert alert-warning"><strong>Bạn</strong> không có quyền Sửa bài viết này!</div>
<?php }?>
<?php } else { ?>
<div class="formdangnhap">
	<div class="alert alert-warning"><strong>Bạn</strong> cần đăng nhập để sửa bài!</div>
		<?php wp_login_form(); ?>			
</div>
<?php } ?>
</div>

Trong quá trình thực hiện nếu bạn chưa hiểu hoặc khó thực hiện bạn có thể gửi câu hỏi ở bên dưới khung bình luận, mình sẽ cùng bạn hiểu rõ về nó!

Chúc các bạn thành công!

]]>
<![CDATA[Thêm Upload Avatar cho thành viên WordPress bằng Functions]]> https://wordpress.vnkings.com/them-upload-avatar-cho-thanh-vien-khong-dung-plugin.html Trong bài viết này mình sẽ giúp Bạn Thêm Upload Avatar cho thành viên Wordpress bằng Functions một cách đơn giản nhất

]]>

Thêm Upload Avatar cho thành viên WordPress bằng Functions

Thêm Upload Avatar cho thành viên WordPress bằng Functions
Thêm Upload Avatar cho thành viên WordPress bằng Functions

Thủ thuật WordPress

Thông thường khi dùng WordPress, trong phần quản lý thành viên không có mục Upload Avatar thay vào đó là các avatar mặc định mà WordPress cho phép, nếu Website của Bạn có mục đích hoạt động cộng đồng thì nó hơi hạn chế. Vậy nên trong bài viết này mình sẽ giúp Bạn Thêm Upload Avatar cho thành viên WordPress bằng Functions rất đơn giản.

Thêm Upload Avatar cho thành viên WordPress bằng Functions

Ưu điểm

  • Giúp thành viên có thể tự upload avatar ưa thích của mình
  • Không cần sử dụng plugin, dễ dàng tùy biến code
  • Sử dụng ít javascript giúp tối ưu tốc load trang

Bắt đầu nào

– Tạo 1 file Js upload : uploadavatar.js với nội dung

jQuery( document ).ready( function() {
    /* vnkings.com Media Uploader */
    var _vnkings_media = true;
    var _vnkings_send_attachment = wp.media.editor.send.attachment;
    jQuery( '.vnkings-image' ).click( function() {
        var button = jQuery( this ),
                textbox_id = jQuery( this ).attr( 'data-id' ),
                image_id = jQuery( this ).attr( 'data-src' ),
                _shr_media = true;
        wp.media.editor.send.attachment = function( props, attachment ) {
            if ( _shr_media && ( attachment.type === 'image' ) ) {
                if ( image_id.indexOf( "," ) !== -1 ) {
                    image_id = image_id.split( "," );
                    $image_ids = '';
                    jQuery.each( image_id, function( key, value ) {
                        if ( $image_ids )
                            $image_ids = $image_ids + ',#' + value;
                        else
                            $image_ids = '#' + value;
                    } );
                    var current_element = jQuery( $image_ids );
                } else {
                    var current_element = jQuery( '#' + image_id );
                }
                jQuery( '#' + textbox_id ).val( attachment.id );
                    console.log(textbox_id)
                current_element.attr( 'src', attachment.url ).show();
            } else {
                alert( 'Vui lòng chọn một tập tin hình ảnh hợp lệ' );
                return false;
            }
        }
        wp.media.editor.open( button );
        return false;
    } );
} );

Bạn Upload file này lên thư mục Theme đang sử dụng(chút nữa sẽ cần dùng).

– Tiếp đến Bạn thêm đoạn code này vào file functions.php

function my_custom_scripts(){
    wp_enqueue_media();
    wp_enqueue_script('my-custom-jquery', get_stylesheet_directory_uri().'/uploadavatar.js', array('jquery'), false, true );
}
add_action('admin_enqueue_scripts', 'my_custom_scripts');

Giải thích

  • function my_custom_scripts() : Tạo Functions my_custom_scripts
  • wp_enqueue_media() : Cho phép sử dụng thư viện WP Media
  • wp_enqueue_script(…./uploadavatar.js) : Sử dụng javascript từ file mới tạo uploadavatar.js bên trên
  • add_action(…) : thực hiện Functions và thêm các Script trong function vào trang Admin của bạn

– Tiếp đến vẫn ở file Functions.php bạn thêm form upload và xử lý ảnh:

function vnkings_profile_fields( $user ) {
    $profile_pic = ($user!=='add-new-user') ? get_user_meta($user->ID, 'vnkingspic', true): false;
    if( !empty($profile_pic) ){
        $image = wp_get_attachment_image_src( $profile_pic, 'medium' );
    } ?>
 <fieldset>
<legend><?php _e('Ảnh đại diện', 'vnkings') ?></legend>
    <table class="form-table fh-profile-upload-options wpuf-table">
        <tr>
		<th><label for="uploadnd">Hình ảnh đại diện của bạn</label></th>
            <td class="wp-core-ui nd">
                <input type="button" data-id="vnkings_image_id" data-src="vnkings-img" class="button vnkings-image" name="vnkings_image" id="vnkings-image" value="Upload" />
                <input type="hidden" class="button" name="vnkings_image_id" id="vnkings_image_id" value="<?php echo !empty($profile_pic) ? $profile_pic : ''; ?>" />
                <img id="vnkings-img" src="<?php echo !empty($profile_pic) ? $image[0] : ''; ?>" style="<?php echo  empty($profile_pic) ? 'display:none;' :'' ?> width: 200px; height: auto; border:1px solid cadetblue;padding:2px;" />
            </td>
        </tr>
    </table>
	</fieldset>
	<?php
}
add_action( 'show_user_profile', 'vnkings_profile_fields' );
add_action( 'edit_user_profile', 'vnkings_profile_fields' );
add_action( 'user_new_form', 'vnkings_profile_fields' );
function vnkings_profile_update($user_id){
 
    if( current_user_can('administrator') || current_user_can('editor') || current_user_can('author') || current_user_can('subscriber') || current_user_can('contributor') ){
        $profile_pic = empty($_POST['vnkings_image_id']) ? '' : $_POST['vnkings_image_id'];
        update_user_meta($user_id, 'vnkingspic', $profile_pic);
    }
}
add_action('profile_update', 'vnkings_profile_update');
add_action('user_register', 'vnkings_profile_update');

add_filter( 'get_avatar' , 'my_custom_avatar' , 1 , 5 );
function my_custom_avatar( $avatar, $id_or_email, $size, $default, $alt ) {
	$user = false;

	if ( is_numeric( $id_or_email ) ) {
		$id = (int) $id_or_email;
		$user = get_user_by( 'id' , $id );
	} elseif ( is_object( $id_or_email ) ) {
		if ( ! empty( $id_or_email->user_id ) ) {
			$id = (int) $id_or_email->user_id;
			$user = get_user_by( 'id' , $id );
		}
	} else {
		$user = get_user_by( 'email', $id_or_email );
	}
	if($user){
		$custom_avatar	=	get_user_meta( $user->data->ID, 'vnkingspic', true );

		if( !empty($custom_avatar) ){
			
			$image	=	wp_get_attachment_image_src($custom_avatar, 'medium');
			if( $image ){
				$safe_alt = esc_attr($alt);
				$avatar = "<img alt='{$safe_alt}' src='{$image[0]}' class='avatar photo' height='60px' width='60px' />";
			}
		}
	}
	return $avatar;
}

Giải thích

  • Dòng 1 đến dòng 5 : kiểm tra đã thành viên đã có ảnh avatar chưa. Nếu có thì hiển thị ảnh Avatar ra
  • Dòng 6 đến dòng 20 : Nếu chưa có avatar thì hiện form upload
  • Dòng 21 đến dòng 23 : Thêm functions vào khu vực Thành viên
  • Dòng 24 đến dòng 32 : Kiểm tra thành viên và thực hiện Upload
  • Dòng 35 đến dòng 60 : Tạo funtions cho phép bạn sử dụng avatar bên trên, nếu bạn chưa upload avatar mặc định sẽ sử dụng avatar của Wordpess

Lưu ý: các kích thước mình đặt bạn hoàn toàn có thể thay đổi để hợp với trang của bạn.

Tổng kết lại bạn sẽ có Functions hoàn chỉnh :

function my_custom_scripts(){
    wp_enqueue_media();
    wp_enqueue_script('my-custom-jquery', get_stylesheet_directory_uri().'/uploadavatar.js', array('jquery'), false, true );
}
add_action('admin_enqueue_scripts', 'my_custom_scripts');
function vnkings_profile_fields( $user ) {
    $profile_pic = ($user!=='add-new-user') ? get_user_meta($user->ID, 'vnkingspic', true): false;
    if( !empty($profile_pic) ){
        $image = wp_get_attachment_image_src( $profile_pic, 'medium' );
    } ?>
 <fieldset>
<legend><?php _e('Ảnh đại diện', 'vnkings') ?></legend>
    <table class="form-table fh-profile-upload-options wpuf-table">
        <tr>
		<th><label for="uploadnd">Hình ảnh đại diện của bạn</label></th>
            <td class="wp-core-ui nd">
                <input type="button" data-id="vnkings_image_id" data-src="vnkings-img" class="button vnkings-image" name="vnkings_image" id="vnkings-image" value="Upload" />
                <input type="hidden" class="button" name="vnkings_image_id" id="vnkings_image_id" value="<?php echo !empty($profile_pic) ? $profile_pic : ''; ?>" />
                <img id="vnkings-img" src="<?php echo !empty($profile_pic) ? $image[0] : ''; ?>" style="<?php echo  empty($profile_pic) ? 'display:none;' :'' ?> width: 200px; height: auto; border:1px solid cadetblue;padding:2px;" />
            </td>
        </tr>
    </table>
	</fieldset>
	<?php
}
add_action( 'show_user_profile', 'vnkings_profile_fields' );
add_action( 'edit_user_profile', 'vnkings_profile_fields' );
add_action( 'user_new_form', 'vnkings_profile_fields' );
function vnkings_profile_update($user_id){
 
    if( current_user_can('administrator') || current_user_can('editor') || current_user_can('author') || current_user_can('subscriber') || current_user_can('contributor') ){
        $profile_pic = empty($_POST['vnkings_image_id']) ? '' : $_POST['vnkings_image_id'];
        update_user_meta($user_id, 'vnkingspic', $profile_pic);
    }
}
add_action('profile_update', 'vnkings_profile_update');
add_action('user_register', 'vnkings_profile_update');

add_filter( 'get_avatar' , 'my_custom_avatar' , 1 , 5 );
function my_custom_avatar( $avatar, $id_or_email, $size, $default, $alt ) {
	$user = false;

	if ( is_numeric( $id_or_email ) ) {
		$id = (int) $id_or_email;
		$user = get_user_by( 'id' , $id );
	} elseif ( is_object( $id_or_email ) ) {
		if ( ! empty( $id_or_email->user_id ) ) {
			$id = (int) $id_or_email->user_id;
			$user = get_user_by( 'id' , $id );
		}
	} else {
		$user = get_user_by( 'email', $id_or_email );
	}
	if($user){
		$custom_avatar	=	get_user_meta( $user->data->ID, 'vnkingspic', true );

		if( !empty($custom_avatar) ){
			
			$image	=	wp_get_attachment_image_src($custom_avatar, 'medium');
			if( $image ){
				$safe_alt = esc_attr($alt);
				$avatar = "<img alt='{$safe_alt}' src='{$image[0]}' class='avatar photo' height='60px' width='60px' />";
			}
		}
	}
	return $avatar;
}

Lấy Avatar cho thành viên ra ngoài:

<?php $user_ID = get_current_user_id(); $avatar = get_user_meta( $user_ID,  'vnkingspic', true); $avatar_image =wp_get_attachment_image_src($avatar, 'medium'); ?>
<img src="<?php echo $avatar_image[0]; ?>">

Nếu có bất kỳ điều gì chưa hiểu, bạn hãy đặt câu hỏi phía dưới khung bình luận nhé

Chúc các bạn thành công!

]]>
<![CDATA[Các hàm cơ bản của WordPress cho người mới bắt đầu]]> https://wordpress.vnkings.com/cac-ham-co-ban-cua-wordpress-cho-nguoi-moi-bat-dau.html Khi bạn mới bước vào tìm hiểu Wordpress, Ngoài kiến thức cơ bản về PHP/HTML/CSS, Bạn cũng nên tìm hiểu về các Hàm hỗ trợ của nó

]]>

Các hàm cơ bản của WordPress cho người mới bắt đầu

Các hàm cơ bản của WordPress cho người mới bắt đầu
Các hàm cơ bản của WordPress cho người mới bắt đầu

Thủ thuật WordPress

Khi bạn mới bước vào tìm hiểu WordPress, Ngoài kiến thức cơ bản về PHP/HTML/CSS, Bạn cũng nên tìm hiểu về các hàm hỗ trợ của WordPress. Trong bài này mình sẽ giúp các bạn sử dụng và hiểu các Hàm cơ bản ấy một cách đơn giản nhất.

Các hàm cơ bản của WordPress cho người mới bắt đầu

Các hàm cơ bản của WordPress cho người mới bắt đầu:
– Hàm áp dụng trên toàn trang web

<?php bloginfo( $keyname ); ?>

Đây là hàm lấy ra thông tin của trang web, trong đó $keyname chính là từ khóa chính giúp Bạn hiển thị ra thông tin mà bạn muốn

  • ‘name’ : Hiển thị tên của trang web
  • ‘siteurl’ : Hiển thị địa chỉ trang chủ URL Website
  • ‘description’ : Hiển thị mô tả của trang web
  • ‘wpurl’ : Hiển thị địa chỉ url của trang web được thiết lập url từ bảng wp_options của Database
  • ‘url’ : Hiển thị địa chỉ của trang Web
  • ‘admin_email’ : Hiển thị Email quản trị được thiết lập trong Cài đặt > Cài đặt chung
  • ‘charset’ : Hiển thị kiểu Charset Encoding của website ví dụ “UTF-8”
  • ‘version’ : Hiển thị phiên bản WordPress hiện tại đang sử dụng
  • ‘html_type’ : Hiển thị kiểu Content Type của WordPress mặc định là “text/html”
  • ‘language’ : Hiển thị ngôn ngữ site đang sử dụng
  • ‘stylesheet_url’ : Hiển thị địa chỉ đến file style.css
  • ‘stylesheet_directory’ : Hiển thị link đến thư mục Theme hiện tại
  • ‘rss_url’ : Hiển thị địa chỉ RSS 0.92 feed
  • ‘rss2_url’ : Hiển thị the RSS 2.0 feed

Ví Dụ:
bạn muốn hiển thị tên của Trang web của mình bạn có thể sử dụng hàm này :

<?php bloginfo('name'); ?>

Kết quả nhận được ở vnkings.com là : “Thủ thuật WordPress – Vnkings Solutions”
Tương tự như vậy bạn có thể thay tất cả các từ khóa ở danh sách bên trên để lấy ra thông tin cần thiết khi làm website WordPress.

– Hàm Áp dụng trong vòng lặp của Query Post WordPress hoặc trang chi tiết bài viết (Single Post – single.php)

Hiển thị ID của bài viết

<?php the_ID(); ?>

Hiển thị ra tên của bài viết

<?php the_title() ;?>

Hiển thị Link bài viết

<?php the_permalink() ;?>

Hiển thị trích dẫn của bài viết

<?php the_excerpt() ;?>

Hiển thị ngày tháng năm của bài viết, bạn cũng có thể thay đổi d/m/y thành d-m-y hoặc d-m-y h:m

<?php the_time("d/m/y") ;?>

Hiển thị tác giả của bài viết

<?php the_author_posts_link(); ?>

Ví Dụ:
Bạn có 1 vòng lặp lấy ra tên và link các bài viết:

<?php while (have_posts()) : the_post(); ?>
<a href="<?php the_permalink() ;?>"><?php the_title() ;?></a>
<?php endwhile ; wp_reset_query() ;?>

Trong đó : while have_posts() : the_post() là Query Post hỗ trợ lấy ra danh sách bài viết (Vòng lặp While mình sẽ nói kỹ hơn ở bài viết tiếp theo trong WordPress cơ bản), the_permalink() lấy link bài, the_title() lấy tên bài.

– Hàm Áp dụng trong trang danh mục WordPress (category.php)

Hiển thị ID của danh mục hiện tại.

<?php echo get_queried_object_id(); ?>

Hiển thị tên của danh mục hiện tại.

<?php single_cat_title('') ?>

Hiển thị Link của danh mục hiện tại.

<?php get_category_link( get_cat_ID( single_cat_title('',false) ) ); ?>

Các hàm hỗ trợ lấy danh sách:

Hiển thị danh sách tác giả của Website.

<?php wp_list_authors(); ?>

Hiển thị danh sách danh mục có trong Website.

<?php wp_list_categories(); ?>

Hiển thị danh sách các bình luận trong bài viết.

<?php wp_list_comments(); ?>

Hiển thị danh sách các Pages.

<?php wp_list_pages(); ?>

Trên đây là các Hàm WordPress cơ bản Mình tổng hợp lại vì nó thường được dùng khi bạn dựng 1 Theme WordPress.

Chúc các bạn thành công!

]]>
<![CDATA[Sử dụng trình soạn thảo chuyên nghiệp với Plugin Ckeditor]]> https://wordpress.vnkings.com/su-dung-trinh-soan-thao-chuyen-nghiep-voi-plugin-ckeditor.html Cài đặt và Sử dụng trình soạn thảo chuyên nghiệp với Plugin Ckeditor, giúp cho việc viết bài dễ dàng, đầy đủ hơn

]]>

Sử dụng trình soạn thảo chuyên nghiệp với Plugin Ckeditor

Sử dụng trình soạn thảo chuyên nghiệp với Plugin Ckeditor
Sử dụng trình soạn thảo chuyên nghiệp với Plugin Ckeditor

Thủ thuật WordPress

Khi viết bài, 1 Website WordPress thông thường sẽ cho phép Bạn soạn thảo văn bản bằng Tinymce khá gọn nhẹ, đáp ứng gần như đầy đủ các thẻ hỗ trợ cơ bản. Nhưng nếu bạn muốn sử dụng 1 trình soạn thảo chuyên nghiệp, đầy đủ và bắt mắt hơn, bạn có thể dùng Plugin CKEditor for WordPress

Sử dụng trình soạn thảo chuyên nghiệp với Plugin Ckeditor

 

Ưu điểm : Ckeditor

  • Phù hợp với các trình duyệt Web hiện nay
  • Hoàn toàn miễn phí
  • Trình soạn thảo văn bản đầy đủ, hỗ trợ chữ, số, ký tự đặc biệt, công thức toán học
  • Hỗ trợ đa ngôn ngữ sử dụng
  • Dễ dàng chèn Bảng, Ảnh, Flash, Video
  • Dễ dàng tùy biến quyền hạn người sử dụng

Cài đặt : Sử dụng trình soạn thảo chuyên nghiệp với Plugin Ckeditor

Các bạn vào Trang quản trị > Gói mởi rộng > Cài mới và tìm với từ khóa : CKEditor for WordPress

Sử dụng trình soạn thảo chuyên nghiệp với Plugin Ckeditor

Sau khi chọn và cài đặt bạn sẽ có 1 phần quản trị CKEditor bao gồm:
– Tổng Quan : Giúp bạn xem thông tin của CKEditor, Thông tin Hỗ trợ CKEditor của Server bạn
– Basic Settings : Cho phép bạn thay đổi kiểu hiển thị CKEditor
– Advanced Settings : Cài đặt cấu hình nân cao như css, ngôn ngữ …
– Upload Options : Cài đặt Upload, Thư mục được tải lên, tùy chỉnh hỗ trợ kiểu file, phân quyền thư mục mà người dùng có thể truy xuất.
– File Editor : Cho phép bạn chỉnh sửa hoặc thêm nội dung JS cho CKEditor

Như vậy Bạn đã cài đặt thành công cho mình bộ công cụ soạn thảo văn bản chuyên nghiệp rồi.

Chúc các bạn thành công!

]]>
<![CDATA[Tạo trang quản lý bài viết cho thành viên WordPress]]> https://wordpress.vnkings.com/tao-trang-quan-ly-bai-viet-cho-thanh-vien-wordpress.html Tạo trang quản lý bài viết cho thành viên Wordpress một cách đơn giản, giúp thành viên quản lý bài viết của mình ngay bên ngoài trang chủ dễ dàng tiện lợi

]]>

Tạo trang quản lý bài viết cho thành viên WordPress

Tạo trang quản lý bài viết cho thành viên WordPress
Tạo trang quản lý bài viết cho thành viên WordPress

Thủ thuật WordPress

Ở bài trước trong Serie Tạo và quản lý bài viết Front End không dùng Plugin, chúng ta đã giúp thành viên WordPress đăng bài ngay ngoài trang chủ, vậy tiếp theo chúng ta cần tạo 1 trang cho phép thành viên xem và quản lý các bài viết của mình.

tao-trang-quan-ly-bai-viet-wordpress
Tạo trang quản lý bài viết cho thành viên WordPress

– Đầu tiên bạn cần tạo 1 file quản lý bài viết : quan-ly-bai-viet.php
Mình sẽ tách nhỏ và giải thích từng đoạn trong file này, rồi gộp thành 1 file hoàn chỉnh ở cuối bài

– Tạo template : Quản lý bài viết

<?php
/*
 Template Name: Quản lý bài viết
 */
 ?>

– Kiểm tra thành viên đã đăng nhập hay chưa nếu đã đăng nhập thì lấy thông tin thành viên hiện tại, nếu chưa sẽ hiện form đăng nhập:

<?php if(is_user_logged_in()) {
$current_user = wp_get_current_user();
$current_user->user_login;
$userid = $current_user->ID;
?>
// form Quản lý bài viết
<?php } else { ?>
<div class="formdangnhap">
    <?php wp_login_form(); ?>            
</div>
<?php } ?>

– Tạo Form Quản Lý Bài Viết

<h4><i class="fa fa-tasks"></i> <?php echo $current_user->display_name; ?> Quản lý bài</h4>
<a style="color:#fff;margin:10px 0;" href="<?php bloginfo("url");?>/dang-bai.html" class="btn btn-primary" role="button"><i class="fa fa-pencil"></i> Viết bài</a>
<table class="table table-bordered">
	<thead>
		<tr class="vnkings_hd">
			<th>Tiêu đề</th>
			<th>Trạng thái</th>
			<th>Chỉnh sửa</th>
		</tr>
	</thead>
	<tbody>
	<?php
		$vnkings = new WP_Query(array(
		'post_status' => array('publish', 'pending'),
		'orderby' => 'ID',
		'order' => 'DESC',
		'author' => $userid,
		'paged' => get_query_var('paged'),
		'posts_per_page'=> 10));
		?>
		<?php while ($vnkings->have_posts()) : $vnkings->the_post(); ?>
		<?php $postid = get_the_ID(); ?>
		<tr class="vnkings_mn">
			<td><a target="_blank" class="vnk1" href="<?php the_permalink() ;?>"><?php the_title() ;?></a></td>
			<td><span class="vnk2"><?php $stt = get_post_status($postid); if($stt=="publish"){ echo "Đang mở"; } else {echo "Chờ duyệt";  } ?></span></td>
			<td><a target="_blank" class="vnk3" href="<?php bloginfo('url');?>/sua-bai.html?id=<?php echo $postid;?>"><i class="fa fa-pencil-square-o"></i> Sửa</a></td>
		</tr>
	<?php endwhile ; wp_reset_query() ;?>
	<?php if (function_exists('wp_pagenavi')) { wp_pagenavi( array( 'query' => $vnkings ) ); } ?>
	</tbody>
 </table>
 

– Giải thích đoạn code trên:

  • $userid = $current_user->ID; : lấy ID của thành viên đang đăng nhập
  • $vnkings = new WP_Query(array()) : Tạo Query Post
  • ‘post_status’ => array(‘publish’, ‘pending’) : Lấy tất cả các bài viết có trạng thái là Publish và Pending
  • orderby ID order DESC : Lấy bài viết theo danh sách mới tới cũ
  • ‘author’ => $userid : lấy bài viết có tác giả là $userid
  • ‘paged’ => get_query_var(‘paged’) : Tạo phân trang
  • ‘posts_per_page’=> 10 : lấy 10 bài viết trên 1 trang
  • wp_pagenavi : Tạo phân trang cho Query Post $vnkings bên trên

Lưu ý có 1 phần sua-bai.html mình sẽ hướng dẫn cụ thể tạo trang sửa bài viết trong bài tiếp theo

– Tổng kết lại đoạn code trong file quan-ly-bai-viet.php

<?php
/*
 Template Name: Quản lý bài viết
 */
 ?>

<div class="vnkings_form col-md-12">
<?php if(is_user_logged_in()) { 
$current_user = wp_get_current_user();
$current_user->user_login;
$userid = $current_user->ID; ?>
	<h4><i class="fa fa-tasks"></i> <?php echo $current_user->display_name; ?> Quản lý bài</h4>
	<a style="color:#fff;margin:10px 0;" href="<?php bloginfo("url");?>/dang-bai.html" class="btn btn-primary" role="button">
		<i class="fa fa-pencil"></i> Viết bài
	</a>
	<table class="table table-bordered">
		<thead>
			<tr class="vnkings_hd">
				<th>Tiêu đề</th>
				<th>Trạng thái</th>
				<th>Chỉnh sửa</th>
			</tr>
		</thead>
		<tbody>
		<?php
			$vnkings = new WP_Query(array(
			'post_status' => array('publish', 'pending'),
			'orderby' => 'ID',
			'order' => 'DESC',
			'author' => $userid,
			'paged' => get_query_var('paged'),
			'posts_per_page'=> 10));
			?>
			<?php while ($vnkings->have_posts()) : $vnkings->the_post(); ?>
			<?php $postid = get_the_ID(); ?>
			<tr class="vnkings_mn">
				<td><a target="_blank" class="vnk1" href="<?php the_permalink() ;?>"><?php the_title() ;?></a></td>
				<td><span class="vnk2"><?php $stt = get_post_status($postid); if($stt=="publish"){ echo "Đang mở"; } else {echo "Chờ duyệt";  } ?></span></td>
				<td><a target="_blank" class="vnk3" href="<?php bloginfo('url');?>/sua-bai.html?id=<?php echo $postid;?>"><i class="fa fa-pencil-square-o"></i> Sửa</a></td>
			</tr>
		<?php endwhile ; wp_reset_query() ;?>
		</tbody>
	 </table>
	<?php if (function_exists('wp_pagenavi')) { wp_pagenavi( array( 'query' => $vnkings ) ); } ?>
	<?php } else { ?>
	<div class="formdangnhap">
	<div class="alert alert-warning"><strong>Bạn</strong> cần đăng nhập để quản lý bài của mình!</div>
		<?php wp_login_form(); ?>			
	</div>
	<?php } ?>
</div>

– Cuối cùng là bạn vào Trang quản trị > Trang > Tạo trang > Quản lý bài viết (chọn template là Quản lý bài viết):

Tạo trang quản lý bài viết cho thành viên WordPress

Bây giờ bạn vào trang domain/quan-ly-bai-viet thể xem thành quả của mình rồi.
Nếu bạn có điều gì chưa hiểu, xin vui lòng đặt câu hỏi hoặc bình luận ở phía cuối bài.

Chúc các bạn thành công

]]>
<![CDATA[Hiện danh mục con khi vào danh mục cha trong WordPress]]> https://wordpress.vnkings.com/hien-danh-muc-con-khi-vao-danh-muc-cha-wordpress.html Khi làm việc với web Wordpress, chắc hẳn Bạn sẽ không ít lần gặp khách hàng có yêu cầu chỉ hiển thị danh mục con khi vào danh mục cha

]]>

Hiện danh mục con khi vào danh mục cha trong WordPress

Hiện danh mục con khi vào danh mục cha trong WordPress
Hiện danh mục con khi vào danh mục cha trong WordPress

Thủ thuật WordPress

Khi làm việc với web WordPress, chắc hẳn Bạn sẽ không ít lần gặp khách hàng có yêu cầu chỉ hiển thị danh mục con khi vào danh mục cha. Nếu Bạn chưa có hướng giải quyết cho vấn đề này thì có thể tham khảo bài viết này của Mình

Hiện danh mục con khi vào danh mục cha trong WordPress

Hiện danh mục con khi vào danh mục cha trong WordPress:
Tìm đến File category.php (file hiển thị danh mục của WordPress):
– Đầu tiên bạn cần lấy thông tin của danh mục hiện tại

<?php 
$vnkings_cat_id = get_cat_id( single_cat_title("",false) );
// Lấy id của Danh mục hiện tại
?>

– Tiếp theo bạn dùng vòng lặp lấy ra Danh mục con

<?php 
$categories = get_categories(
array('child_of' => $vnkings_cat_id,'hide_empty' => 0,'orderby' => 'id', 'order' => 'ASC',)); 
if(!empty($categories)){ ?>
	<ul>
		<?php foreach($categories as $cat){
		if('Uncategorized' != $cat->name){ ?>
			<li><a  href="<?php echo get_category_link($cat->term_id); ?>"  ><?php echo $cat->name; ?></a></li>
		<?php } } ?>  	
	</ul>
<?php } else { ?>
	<ul>
		<li class="cat"><a href="<?php echo get_category_link($vnkings_cat_id); ?>"><?php echo get_cat_name($vnkings_cat_id); ?></a></li>
	</ul>
<?php } ?>

Giải thích :

  • get_categories(array(…)) : Lấy toàn bộ Danh mục con có danh mục cha ID là $vnkings_cat_id
  • if(!empty($categories)){} : Nếu có danh mục con thì hiển thị toàn bộ danh mục con này
  • else{} : Nếu Danh mục hiện tại không có Danh mục con, thì hiện ra danh mục hiện tại

Vậy ta có 1 đoạn Code hoàn chỉnh :

<?php 
$vnkings_cat_id = get_cat_id( single_cat_title("",false) );
$categories = get_categories(
array('child_of' => $vnkings_cat_id,'hide_empty' => 0,'orderby' => 'id', 'order' => 'ASC',)); 
if(!empty($categories)){ ?>
	<ul>
		<?php foreach($categories as $cat){
		if('Uncategorized' != $cat->name){ ?>
			<li><a  href="<?php echo get_category_link($cat->term_id); ?>"  ><?php echo $cat->name; ?></a></li>
		<?php } } ?>  	
	</ul>
<?php } else { ?>
	<ul>
		<li class="cat"><a href="<?php echo get_category_link($vnkings_cat_id); ?>"><?php echo get_cat_name($vnkings_cat_id); ?></a></li>
	</ul>
<?php } ?>

Như vậy chỉ với vài dòng code đơn giản bạn đã giải quyết được vấn đề này.

Chúc các bạn thành công!

]]>
<![CDATA[Tạo lại ảnh Thumbnails WordPress với Regenerate Thumbnails]]> https://wordpress.vnkings.com/tao-lai-anh-thumbnails-wordpress-voi-regenerate-thumbnails.html Để giải quyết vấn đề này này bạn có thể Tạo lại ảnh Thumbnails Wordpress với Regenerate Thumbnails một cách đơn giản

]]>

Tạo lại ảnh Thumbnails WordPress với Regenerate Thumbnails

Tạo lại ảnh Thumbnails WordPress với Regenerate Thumbnails
Tạo lại ảnh Thumbnails WordPress với Regenerate Thumbnails

Thủ thuật WordPress

Thông thường khi thay đổi Theme cho Website WordPress của Bạn, Các hình ảnh đại diện cho bài viết thường bị méo hoặc kích thước không đẹp do Size Thumbnails các Theme được đặt khác nhau. Để giải quyết vấn đề này này bạn có thể Tạo lại ảnh Thumbnails WordPress với Regenerate Thumbnails một cách đơn giản

– Đầu tiên các bạn vào Quản trị > Gói mở rộng (plugin) > Cài Mới : Tìm với từ khóa “Regenerate Thumbnails” và Cài đặt.

Tạo lại ảnh Thumbnails WordPress với Regenerate Thumbnails

– Sau khi cài đặt, các bạn vào Công Cụ > Regen. Thumbnails
Tạo lại ảnh Thumbnails WordPress với Regenerate Thumbnails
Chọn vào Regenerate All Thumbnails
Sau khi tái tạo lại ảnh Thumbnails thành công bạn sẽ nhận được những thông báo này:

Tạo lại ảnh Thumbnails WordPress với Regenerate Thumbnails

Bây giờ bạn có thể ra trang chủ và xem kết quả.

Chúc các bạn thành công!

]]>
<![CDATA[Thêm nhóm thành viên WordPress không cần Plugin]]> https://wordpress.vnkings.com/them-nhom-thanh-vien-wordpress-khong-can-plugin.html Với bài viết này mình sẽ giúp bạn có thể Thêm nhóm thành viên Wordpress không cần Plugin một cách đơn giản nhất

]]>

Thêm nhóm thành viên WordPress không cần Plugin

Thêm nhóm thành viên WordPress không cần Plugin
Thêm nhóm thành viên WordPress không cần Plugin

Thủ thuật WordPress

Thông thường ở 1 Website WordPress bạn sẽ thấy có tất cả các nhóm thành viên như sau:

  • Super Admin : Quản trị viên cấp cao nhất.
  • Administrator: Quản trị viên
  • Editor: Biên tập viên
  • Author: Tác giả
  • Contributor: Cộng tác viên
  • Subscriber: Thành viên đăng ký

Vấn đề được đặt ra ở đây là làm thế nào để tạo thêm được một nhóm mới, hoặc copy 1 nhóm mới lấy quyền từ một nhóm đã có. Với bài viết này mình sẽ giúp bạn có thể Thêm nhóm thành viên WordPress không cần Plugin một cách đơn giản nhất:

Thêm nhóm thành viên WordPress không cần Plugin

– Thêm nhóm thành viên:

Ví dụ Bạn muốn tạo 1 nhóm thành viên nữa là Vip User:
Các bạn tìm đến file Functions.php và thêm vào đoạn code này:

$vnkings_new_user = add_role('vipuser', __( 'Vip User' ),
    array(
        'read'         => true,
        'edit_posts'   => true,
        'delete_posts' => false,
    )
);

Giải thích :

  • $vnkings_new_user = add_role(‘vipuser’, __( ‘Vip User’ ): Tạo thêm 1 nhóm thành viên có tên là Vip User
  • ‘read’ => true: Quyền hạn – cho phép đọc bài viết
  • ‘edit_posts’ => true: Quyền hạn – cho phép sửa bài viết
  • ‘delete_posts’ => false: Quyền hạn – không cho xóa bài viết

Ngoài ra còn rất nhiều quyền bạn có thể xem cụ thể ở trang này : https://codex.wordpress.org/Roles_and_Capabilities

Thêm nhóm thành viên WordPress không cần Plugin

– Thêm nhóm thành viên mới Copy quyền từ một nhóm đã có:
Thử tạo 1 nhóm mới có tên là Vnkings User, thành viên của nhóm này có quyền hạn sử dụng website như nhóm Administrator:
Các bạn tìm đến file Functions.php và thêm vào đoạn code này:

function vnkings_roles()
{
 global $wp_roles;
 if (!isset($wp_roles))
 $wp_roles = new WP_Roles();
 $adm = $wp_roles -> get_role('administrator');
 // Adding a new role with all admin caps.
 $wp_roles->add_role('vnkingsuser', 'Vnkings User', $adm -> capabilities);
}
add_action('init', 'vnkings_roles');

Giải thích :

  • function vnkings_roles();add_action(‘init’, ‘vnkings_roles’): Tạo function và thêm nhóm thành viên
  • global $wp_roles:Lấy tất cả nhóm thành viên trong website
  • if (!isset($wp_roles)); $wp_roles = new WP_Roles(): nếu không tồn tại nhóm tiến hành tạo nhóm
  • $adm = $wp_roles -> get_role(‘administrator’): lấy quyền hạn của nhóm đã có(ở đây ta lấy quyền của nhóm Administrator)
  • $wp_roles->add_role : thêm nhóm Vnkings User và lấy quyền giống như nhóm Administrator

Thêm nhóm thành viên WordPress không cần Plugin

Như vậy chỉ với 1 đoạn function bạn đã tạo cho website của mình một nhóm thành viên mới thật đơn giản.

Chúc các bạn thành công!

]]>
<![CDATA[Thêm nút Quicktag cho khung soạn thảo WordPress]]> https://wordpress.vnkings.com/them-nut-quicktag-cho-khung-soan-thao-wordpress.html Trong bài này Mình sẽ giúp các Bạn Thêm nút Quicktag cho khung soạn thảo Wordpress một cách dễ dàng mà không cần sử dụng đến Plugin.

]]>

Thêm nút Quicktag cho khung soạn thảo WordPress

Thêm nút Quicktag cho khung soạn thảo WordPress
Thêm nút Quicktag cho khung soạn thảo WordPress

Thủ thuật WordPress

Thông thường khi viết bài, mặc định trên khung soạn thảo của WordPress chỉ có 1 số nút Quicktag cơ bản. Nhưng nếu bạn có những thẻ nâng cao trong bài viết của mình ví như thẻ marquee, label … bạn đành phải viết tay chúng, rất mất thời gian nếu bài viết hay phải dùng đến các thẻ đó.

Trong bài này Mình sẽ giúp các Bạn Thêm nút Quicktag cho khung soạn thảo WordPress một cách dễ dàng mà không cần sử dụng đến Plugin.

Thêm nút Quicktag cho khung soạn thảo WordPress

Hướng giải quyết(mình sẽ đi từng phần và cuối sẽ có 1 function hoàn chỉnh) :

– Ta cần thêm 1 đoạn Script vào trình soạn thảo với cấu trúc:

QTags.addButton( id, display, arg1, arg2, access_key, title, priority)
  • id : ID của input sẽ được tạo
  • display : Tên button
  • arg1 : Code thẻ mở
  • arg2 : Code thẻ đóng
  • access_key : Phím tắt Quicktag
  • priority : vị trí của Quicktag

Ví dụ :

QTags.addButton( 'vnk_marquee', 'Thẻ marquee', '<marquee>', '</marquee>', 'm', 'code marquee tag', 1 );

Bạn sẽ hiểu hơn đoạn code trên với hình ảnh minh họa này :

thêm nút quicktags wordpress

Tiếp theo bạn cần 1 Functions để chèn script đó vào Hook admin_print_footer_scripts:

function vnkings_add_quicktags() {
    if (wp_script_is('quicktags')){
?>
   // mã javascript bên trên
<?php
    }
}
add_action( 'admin_print_footer_scripts', 'vnkings_add_quicktags' );

Vậy kết hợp lại bạn có 1 đoạn Function như sau:

function vnkings_add_quicktags() {
    if (wp_script_is('quicktags')){
?>
    <script type="text/javascript">
    QTags.addButton( 'vnk_marquee', 'Thẻ marquee', '<marquee>', '</marquee>', 'm', 'code marquee tag', 1 );
    </script>
<?php
    }
}
add_action( 'admin_print_footer_scripts', 'vnkings_add_quicktags' );

Bây giờ bạn chỉ việc copy nó vào file Functions.php của Theme và xem kết quả

Thêm nút Quicktag cho khung soạn thảo WordPress

Chúc các bạn thành công!

]]>
<![CDATA[Tạo trang đăng bài cho thành viên wordpress không cần plugin]]> https://wordpress.vnkings.com/tao-trang-dang-bai-cho-thanh-vien-khong-can-plugin-wordpress.html Tạo trang đăng bài cho thành viên wordpress không cần plugin một cách chuyên nghiêp dễ dàng tùy biến theo ý muốn.

]]>

Tạo trang đăng bài cho thành viên wordpress không cần plugin

Tạo trang đăng bài cho thành viên wordpress không cần plugin
Tạo trang đăng bài cho thành viên wordpress không cần plugin

Thủ thuật WordPress

Có khá nhiều bạn quan tâm đến vấn đề tạo trang đăng bài cho thành viên như ở Vnkings.Com vậy nên trong bài viết này Mình sẽ giúp các bạn tạo được 1 trang đăng bài như thế một cách đơn giản nhất.

Tạo trang đăng bài cho thành viên wordpress không cần plugin

Ưu điểm Tạo trang đăng bài cho thành viên wordpress không cần plugin :

  • Dễ dàng tùy biến theo ý muốn
  • không sử dụng quá nhiều trường không cần thiết khi đăng bài
  • Không cần sử dụng javascript như Plugin, giúp cho Website bạn load nhẹ hơn

 
Nhược điểm

  • Bạn cần có 1 chút kiến thức cơ bản về html,php nếu muốn hiểu hơn về cách làm trang này.

 

Bắt đầu nào :

Đầu tiên Bạn cần tạo 1 file đăng bài: dang-bai.php
Mình sẽ viết và giải thích từng phần. Sau đó sẽ có 1 file hoàn tất.

 

– kiểm tra xem thành viên đã đăng ký hay chưa, nếu đã đăng ký thì lấy thông tin thành viên, ngược lại nếu chưa đăng ký thì hiện khung đăng nhập:

<?php
/*
 Template Name: Đăng bài
 */
 ?>
<?php if(is_user_logged_in()) {
$user_id = get_current_user_id();
$current_user = wp_get_current_user();
$vnkings =  $current_user->user_level;
if($vnkings <= 2) { $vnstatus = "pending"; } else { $vnstatus = "publish"; }
?>
// form đăng bài
<?php } else { ?>
<div class="formdangnhap">
    <?php wp_login_form(); ?>            
</div>
<?php } ?>

Giải thích đoạn code :

  • Template Name: Đăng bài : Tạo template Đăng bài.
  • if(is_user_logged_in()) { : Nếu là thành viên đăng nhập.
  • $user_id = get_current_user_id(); : Lấy id của thành viên.
  • $current_user = wp_get_current_user(); : Lấy tất cả thông tin thành viên.
  • $vnkings = $current_user->user_level; : Lấy User level.
  • if($vnkings <= 2) { $vnstatus = “pending”; } else { $vnstatus = “publish”; } : Kiểm tra user đang là quyền gì, nếu là Thành viên đăng ký thì bài viết sẽ được cho vào dạng chờ xét duyệt, nếu là Tác giả trở lên thì cho phép Public bài viết luôn.
  • wp_login_form(); : form đăng nhập mặc định của wordpress

 

-Thêm form đăng bài : trong form này mình đã tạo theo cấu trúc của Bootstrap cho các bạn dễ tùy biến.

<div id="vnkings_postBox">
	<form id="new_post" class="form-horizontal" method="post" action="" enctype="multipart/form-data">
		<div class="form-group vnking_pd col-sm-12 col-md-6">
			<label for="post_title">Tiêu đề</label>
			<input type="text" name="post_title" class="form-control" placeholder="Tiêu đề">
		</div>
		<div class="form-group vnking_pd pd_0">
		  <label for="post_content">Nội Dung</label>
		  <?php $post_obj = $wp_query->get_queried_object(); wp_editor( $post_obj->post_content, 'userpostcontent', array( 'textarea_name' => 'post_content' ));?>
		</div>
		<div class="form-group vnking_pd col-md-6">
		  <label for="post_content">Danh mục</label>
			<?php $categories = wp_dropdown_categories("echo=0&hide_empty=0&selected=0");
				preg_match_all('/s*<option class="(S*)" value="(S*)">(.*)</option>s*/', $categories, $matches, PREG_SET_ORDER);
				echo "<select id='post_category' class='form-control' name='post_category'>";
				foreach ($matches as $match){
				echo "<option value='{$match[2]}'>{$match[3]}</option>";
				}
				echo "</select><br />n";
			?>
		</div>
		<div class="form-group vnking_pd col-md-6">
		  <label for="post_tags">Từ khóa</label>
		  <input type="text" name="post_tags" class="form-control" placeholder="Từ khóa">
		</div>
		<div class="form-group">
			<p><img id="output_avatar"/></p>
			<script>
			  var loadFile = function(event) {
				var output = document.getElementById('output_avatar');
				output.src = URL.createObjectURL(event.target.files[0]);
				 $('#output_avatar').addClass('active-avatar');
			  };
			</script>
			<span class="btn btn-default btn-file">Hình ảnh bài viết <input class="input-file" accept="image/*" name="file" type="file" class="file" onchange="loadFile(event)">
			</span>
		</div>
		<input type="hidden" name="add_new_post" value="post" />
		<?php wp_nonce_field( 'post_nonce', 'post_nonce_field' ); ?>
		<div class="form-group">
			<div class="col-sm-12" style="padding-left:0;">
			  <button type="submit" class="btn btn-primary">Đăng Bài</button>
			</div>
		</div>
	</form>
</div>

Giải thích đoạn code :

Trong form này các bạn cần tạo các trường cơ bản như :

  • input name=”post_title” :Nhập Tiêu đề
  • wp_editor() :Tạo Form nội dung mặc định của WordPress
  • wp_dropdown_categories() : Chọn danh mục cho bài viết của bạn
  • input name=”post_tags” : Nhập tags bài viết
  • input name=”file” : Tạo ảnh đại diện bài viết
  • wp_nonce_field() : Bảo mật cho form bài viết, giúp chứng thực sự hoạt động của người dùng nếu form đăng bài gửi đi

 
– Kiểm tra dữ liệu và đăng bài viết

<?php if( $_SERVER['REQUEST_METHOD'] == 'POST' && !empty( $_POST['add_new_post'] ) && current_user_can('level_0') && isset( $_POST['post_nonce_field'] ) && wp_verify_nonce( $_POST['post_nonce_field'], 'post_nonce' )) {
if (isset($_POST['post_title'])) {
	$post_title = $_POST['post_title'];
}
if (isset($_POST['post_content'])) {
	$post_content = $_POST['post_content'];
}
else {
	echo 'Please enter the content';
}
if (isset ($_POST['post_category'])) {
	$post_category = $_POST['post_category'];
}
if (isset($_POST['post_tags'])) {
	$post_tags = $_POST['post_tags'];
}
$post = array(
	'post_title'    => wp_strip_all_tags($post_title),
	'post_content'  => $post_content,
	'post_category' => array($post_category),
	'tags_input'    => $post_tags,
	'post_status'   => $vnstatus,
	'post_type' => 'post',
);
$vnkings_post_id = wp_insert_post($post);

if ($_FILES) {
	foreach ($_FILES as $file => $array) {
	$newupload = insert_attachment($file,$vnkings_post_id);
	}
}
echo '<div class="alert alert-success"><strong>Bạn đã đăng bài thành công!</strong></div>';
}?>

Giải thích đoạn code : :

  • if( $_SERVER[‘REQUEST_METHOD’] == ‘POST’ && !empty( $_POST[‘add_new_post’] ) : Khi có hành động gửi bài viết có yêu cầu là POST
  • current_user_can(‘level_0’) : thành viên cần là thành viên đăng ký
  • isset( $_POST[‘post_nonce_field’] ) && wp_verify_nonce( $_POST[‘post_nonce_field’], ‘post_nonce’ ) : Tồn tại và xác nhận trường post_nonce_field (Bảo mật)
  • if (isset($_POST[‘tên trường’])) : Kiểm tra đã nhập các trường bên trên hay chưa.
  • $post = array() Tổng hợp các trường vào 1 mảng với cấu trúc của WordPress
  • wp_insert_post($post) Tiến hành thêm bài viết với các trường đã được nhập
  • if ($_FILES) – insert_attachment() Nếu tồn tại file ảnh thì thực hiện thêm vào ảnh đại diện

 
Như vậy chúng ta có File dang-bai.php đầy đủ như sau :

<?php if(is_user_logged_in()) {
$user_id = get_current_user_id();
$current_user = wp_get_current_user();
$vnkings =  $current_user->user_level;
if($vnkings <= 2) { $vnstatus = "pending"; } else { $vnstatus = "publish"; }
?>

<div id="vnkings_postBox">
	<form id="new_post" class="form-horizontal" method="post" action="" enctype="multipart/form-data">
		<div class="form-group vnking_pd col-sm-12 col-md-6">
			<label for="post_title">Tiêu đề</label>
			<input type="text" name="post_title" class="form-control" placeholder="Tiêu đề">
		</div>
		<div class="form-group vnking_pd pd_0">
		  <label for="post_content">Nội Dung</label>
		  <?php $post_obj = $wp_query->get_queried_object(); wp_editor( $post_obj->post_content, 'userpostcontent', array( 'textarea_name' => 'post_content' ));?>
		</div>
		<div class="form-group vnking_pd col-md-6">
		  <label for="post_content">Danh mục</label>
			<?php $categories = wp_dropdown_categories("echo=0&hide_empty=0&selected=0");
				preg_match_all('/s*<option class="(S*)" value="(S*)">(.*)</option>s*/', $categories, $matches, PREG_SET_ORDER);
				echo "<select id='post_category' class='form-control' name='post_category'>";
				foreach ($matches as $match){
				echo "<option value='{$match[2]}'>{$match[3]}</option>";
				}
				echo "</select><br />n";
			?>
		</div>
		<div class="form-group vnking_pd col-md-6">
		  <label for="post_tags">Từ khóa</label>
		  <input type="text" name="post_tags" class="form-control" placeholder="Từ khóa">
		</div>
		<div class="form-group">
			<p><img id="output_avatar"/></p>
			<script>
			  var loadFile = function(event) {
				var output = document.getElementById('output_avatar');
				output.src = URL.createObjectURL(event.target.files[0]);
				 $('#output_avatar').addClass('active-avatar');
			  };
			</script>
			<span class="btn btn-default btn-file">Hình ảnh bài viết <input class="input-file" accept="image/*" name="file" type="file" class="file" onchange="loadFile(event)">
			</span>
		</div>
		<input type="hidden" name="add_new_post" value="post" />
		<?php wp_nonce_field( 'post_nonce', 'post_nonce_field' ); ?>
		<div class="form-group">
			<div class="col-sm-12" style="padding-left:0;">
			  <button type="submit" class="btn btn-primary">Đăng Bài</button>
			</div>
		</div>
	</form>
</div>
<?php if( $_SERVER['REQUEST_METHOD'] == 'POST' && !empty( $_POST['add_new_post'] ) && current_user_can('level_0') && isset( $_POST['post_nonce_field'] ) && wp_verify_nonce( $_POST['post_nonce_field'], 'post_nonce' )) {
if (isset($_POST['post_title'])) {
	$post_title = $_POST['post_title'];
}
if (isset($_POST['post_content'])) {
	$post_content = $_POST['post_content'];
}
else {
	echo 'Please enter the content';
}
if (isset ($_POST['post_category'])) {
	$post_category = $_POST['post_category'];
}
if (isset($_POST['post_tags'])) {
	$post_tags = $_POST['post_tags'];
}
$post = array(
	'post_title'    => wp_strip_all_tags($post_title),
	'post_content'  => $post_content,
	'post_category' => array($post_category),
	'tags_input'    => $post_tags,
	'post_status'   => $vnstatus,
	'post_type' => 'post',
);
$vnkings_post_id = wp_insert_post($post);

if ($_FILES) {
	foreach ($_FILES as $file => $array) {
	$newupload = insert_attachment($file,$vnkings_post_id);
	}
}
echo '<div class="alert alert-success"><strong>Bạn đã đăng bài thành công!</strong></div>';
}?>

<?php } else { ?>
<div class="formdangnhap">
	<?php wp_login_form(); ?>			
</div>
<?php } ?>

Chưa hết, bạn cần thêm 1 đoạn Function hỗ trợ đoạn thêm ảnh đại diện bài viết ở bên trên
– Thêm đoạn function này vào file Functions.php trong thư mục Theme WordPress bạn đang sử dụng:

function insert_attachment($file_handler,$post_id,$setthumb='false') {
    // check to make sure its a successful upload
    if ($_FILES[$file_handler]['error'] !== UPLOAD_ERR_OK) __return_false();
    require_once(ABSPATH . "wp-admin" . '/includes/image.php');
    require_once(ABSPATH . "wp-admin" . '/includes/file.php');
    require_once(ABSPATH . "wp-admin" . '/includes/media.php');
    $attach_id = media_handle_upload( $file_handler, $post_id );
 
    if ($setthumb) update_post_meta($post_id,'_thumbnail_id',$attach_id);
    return $attach_id;
}

– Cuối cùng là bạn vào Trang quản trị > Trang > Tạo trang > Đăng bài (chọn template là Đăng bài):

Tạo trang đăng bài cho thành viên wordpress không cần plugin

Sau đó bạn có thể xem kết quả với link page vừa tạo
Demo đăng bài vnkings : https://wordpress.vnkings.com/dang-bai.html

Với các bước bên trên bạn đã tạo được cho mình 1 trang đăng bài viết cho thành viên ở WordPress mà không cần sử dụng đến Plugin

Chúc các bạn thành công!

]]>
<![CDATA[Tạo Menu cố định khi cuộn trang với Javascript đơn giản]]> https://wordpress.vnkings.com/tao-menu-co-dinh-khi-cuon-trang-voi-javascript-don-gian.html Menu cố định khi cuộn trang hay còn gọi là Floating menu giúp website của bạn chuyên nghiệp và đẹp mắt hơn. Trong bài viết này Vnkings sẽ giúp các bạn tự tạo cho mình 1 menu cố định như thế.

]]>

Tạo Menu cố định khi cuộn trang với Javascript đơn giản

Tạo Menu cố định khi cuộn trang với Javascript đơn giản
Tạo Menu cố định khi cuộn trang với Javascript đơn giản

Thủ thuật WordPress

Menu cố định khi cuộn trang hay còn gọi là Floating menu giúp website của bạn chuyên nghiệp và đẹp mắt hơn. Trong bài viết này Vnkings sẽ giúp các bạn tự tạo cho mình 1 menu cố định như thế.

Tạo menu cố định khi cuộn trang

– Đầu tiên bạn cần xác định Class hay ID đang chứa menu:

Tạo menu cố định khi cuộn trang

Với Trang Vnkings của mình, class của Menu cần cố định chính là  : head_nav

– Tiếp đến bạn thêm đoạn Javascript này vào bất kỳ đâu trong cặp thẻ body :

<script type="text/javascript">
		jQuery(document).ready(function($) {
			var $filter = $('.head_nav');
			var $filterSpacer = $('<div />', {
				"class": "vnkings-spacer",
				"height": $filter.outerHeight()
			});
			if ($filter.size())
			{
				$(window).scroll(function ()
				{
					if (!$filter.hasClass('fix') && $(window).scrollTop() > $filter.offset().top)
					{
						$filter.before($filterSpacer);
						$filter.addClass("fix");
					}
					else if ($filter.hasClass('fix')  && $(window).scrollTop() < $filterSpacer.offset().top)
					{
						$filter.removeClass("fix");
						$filterSpacer.remove();
					}
				});
			}

		});
	</script>
  • Lưu ý đoạn này : var $filter = $(‘.head_nav‘);   Các bạn thay bằng Class tìm được ở bên trên nhé.
  • mục đích của đoạn Javascript là khi bạn Cuộn chuột đến thẻ có class .head_nav thì nó sẽ thêm 1 Class nữa có tên là Fix

Tạo menu cố định khi cuộn trang

Lúc này hãy thử kiểm tra code khi cuộn trang đã thêm Class Fix

– Tiếp theo bạn cần CSS cho class Fix này giúp Menu luôn ở vị trí đầu của trang :

.head_nav.fix {
  left: 0;
  max-width: 100%;
  overflow: visible;
  position: fixed !important;
  top: 0;
  width: 100%;
  z-index: 1000;
}

Bây giờ các bạn ra trang web của mình và F5 thử xem thành công chưa nhé

Demo https://wordpress.vnkings.com
Hoặc tải ví dụ đơn giản của Vnkings : Tải về

Chúc các bạn thành công!

]]>
<![CDATA[Lấy link đầu tiên trong bài viết WordPress]]> https://wordpress.vnkings.com/lay-link-dau-tien-trong-bai-viet-wordpress.html Lấy link đầu tiên trong bài viết Wordpress rất đơn giản các bạn chỉ cần thêm 1 đoạn Function và đoạn hiển thị sau đây

]]>

Lấy link đầu tiên trong bài viết WordPress

Lấy link đầu tiên trong bài viết WordPress
Lấy link đầu tiên trong bài viết WordPress

Thủ thuật WordPress

Đôi khi bạn muốn bài viết hiển thị Link tới 1 địa chỉ khác bằng cách lấy địa chỉ url đầu tiên, Vấn đề này rất đơn giản các bạn chỉ cần thêm 1 đoạn Function và đoạn hiển thị sau đây để Lấy link đầu tiên trong bài viết WordPress

lấy link đầu tiên trong bài viết wordpress

Đầu tiên các bạn cần thêm đoạn này vào file Functions.php trong theme đang sử dụng :

function vnkings_get_content_link( $content = false, $echo = false ){
    if ( $content === false )
        $content = get_the_content(); 
    $content = preg_match_all( '/<a href="(.*?)"/s', $content, $links );
    $content = $links[1][0];
    if ( empty($content) ) {
    	$content = false;
    }
    return $content;
}

Để hiển thị ra vị trí mong muốn, bạn dùng câu lệnh này :

 
<a href="<?php echo vnkings_get_content_link( get_the_content() ); ?>"><?php the_title(); ?></a>

Chúc các bạn thành công!

]]>
<![CDATA[Thiết kế Website đa ngôn ngữ chuyên nghiệp với qTranslate X]]> https://wordpress.vnkings.com/thiet-ke-website-da-ngon-ngu-chuyen-nghiep-voi-qtranslate-x.html Thiết kế Website đa ngôn ngữ chuyên nghiệp với qTranslate X đơn giản

]]>

Thiết kế Website đa ngôn ngữ chuyên nghiệp với qTranslate X

Thiết kế Website đa ngôn ngữ chuyên nghiệp với  qTranslate X
Thiết kế Website đa ngôn ngữ chuyên nghiệp với qTranslate X

Thủ thuật WordPress

Hiện nay có khá nhiều plugin WordPress cho phép các bạn tạo 1 Website đa ngôn ngữ có thể kể đến như :

Đây đều là các plugin hay, dễ dùng đã được rất nhiều người sử dụng cho các dự án Web đa ngôn ngữ trên WordPress. Trong bài nay Mình sẽ giúp các Bạn có thể thiết kế Website đa ngôn ngữ chuyên nghiệp với qTranslate X một cách đơn giản nhất.
Wordpress đa ngôn ngữ vnkings.com

Ưu điểm qTranslate X:

  • Chuyển đổi ngôn ngữ dễ dàng.
  • Tùy chỉnh ngôn ngữ mà không thay đổi các tập tin .po , .mo
  • Không giới hạn số lượng ngôn ngữ trên trang Web của Bạn.
  • Đường dẫn URL thân thiện cho SEO /vi , /en
  • Có thể dùng chung, tối ưu với SEO by Yoast trong phần XML Sitemaps

Cài đặt qTranslate X:

Đầu tiên vào qTranslate X  để tải Plugin, hoặc bạn cài đặt ngay trong phần Gói mở rộng(Plugin) trên trang quản trị.
wordpress-da-ngon-ngu

– Khi cài xong, nếu bạn đang sử dụng SEO By Yoast, nó sẽ có thêm 1 dòng thông báo hỏi bạn có có muốn tích hợp qTranslate X với SEO By Yoast không, mình khuyên các bạn nên cài thêm, Plugin này sẽ giúp các bạn tối ưu SEO trên cả các Ngôn ngữ mà bạn cài đặt thêm cho trang.

wordpress-da-ngon-ngu-2

– Khi cài đặt xong bạn tiến hành cấu hình qTranslate X : Dashboard > Cài đặt > Language

Thiết kế Website đa ngôn ngữ chuyên nghiệp với qTranslate X
General : Phần cấu hình chung các bạn chọn như sau

  • Default Language / Order : Chọn ngôn ngữ mặc định cho Website.
    • Tiếng Việt
  • URL Modification Mode : Chọn chế độ url khi chuyển ngôn ngữ.
    • Use Pre-Path Mode : Website của bạn sẽ có dạng domain/en, domain/vi
    • Hide URL language information for default language.
  • Untranslated Content : cách hiển thị khi chưa nhập nội dung cho ngôn ngữ đang được chọn.
    • Show displayed language prefix when content is not available for the selected language.
  • Detect Browser Language : Cho phép Phát hiện ngôn ngữ Trình duyệt
    • Tick vào Detect the language of the browser and redirect accordingly.

Advanced : Cấu hình nâng cao:

  • Post Types: Cho phép dùng đa ngôn ngữ ở Post type nào.
    • Nếu bạn tạo thêm Post type, thì bạn nên tíck hết các tùy chọn : PostPageAttachmentYour Postype
  • Giữ nguyên các cài đặt còn lại

 

Integration :Giữ nguyên cài đặt

Language:

wordpress đa ngôn ngữ

  • Trong phần này nếu bạn dùng thêm ngôn ngữ nào, bạn ấn vào Enable ngôn ngữ đó.

Khi đã cài đặt xong, bây giờ khi Viết bài, tạo chuyên mục bạn sẽ thấy có 2 phần nhập ngôn ngữ :

Bài viết :

wordpress-da-ngon-ngu-5

Danh mục:

wordpress-da-ngon-ngu-6

– Với các nội dung cứng trong code các bạn có thể dùng đoạn này để thay đổi ngôn ngữ :

<?php _e("[:vi]nội dung tiếng việt [:en]Nội dung tiếng anh "); ?>

Cài đặt nút chuyển ngôn ngữ ngoài giao diện :

  • Bạn vào Widget thêm widget qTranslate Language Chooser vào vị trí bạn muốn

wordpress-da-ngon-ngu-7

    • Display : chế độ hiển thị – Chữ / Ảnh / Ảnh và Chữ / Xổ Dọc

hoặc bạn cũng có thể thêm đoạn code này vào bất kỳ đâu trong thẻ Body của web để hiện 2 nút Tiếng anh / Tiếng việt

<a href="<?php bloginfo('url');?>/vi"></a>
<a href="<?php bloginfo('url');?>/en"></a>

wordpress-da-ngon-ngu-8

Chúc các bạn thành công!

]]>
<![CDATA[VnKings thêm chức năng gửi bài cho thành viên]]> https://wordpress.vnkings.com/vnkings-them-chuc-nang-gui-bai-cho-thanh-vien.html VnKings thêm chức năng gửi bài cho thành viên, với kiến thức của mình, các Bạn có thể giúp những người mới bắt đầu tìm hiểu Wordpress dễ dàng hơn.

]]>

VnKings thêm chức năng gửi bài cho thành viên

VnKings thêm chức năng gửi bài cho thành viên
VnKings thêm chức năng gửi bài cho thành viên

Thủ thuật WordPress

Chào các Bạn!

Sau hơn 1 tuần hoạt động Vnkings.com đã nhận được khá nhiều sự ủng hộ từ các anh em bạn bè đam mê thiết kế web nói chung và WordPress nói riêng. Mình xin chân thành cảm ơn các bạn đã cùng Vnkings Xây dựng nên 1 cộng đồng WordPress như ngày hôm nay.

Về cá nhân Mình sẽ tiếp tục cố gắng hơn nữa để giúp các bạn đam mê với WordPress có thể tự mình làm ra nhiều chức năng riêng mà không quá phụ thuộc vào Plugin.

VnKings thêm chức năng gửi bài cho thành viên

Mới đây VnKings thêm chức năng gửi bài cho thành viên:

https://wordpress.vnkings.com/dang-bai.html

Nick test: demo – Pass: demo123

Trang này mình tự custom code chứ không dùng Plugin. Nếu Bạn muốn làm 1 trang tương tự ở web các bạn có thể dùng Plugin : WP User Frontend

Mục đích :

  • Với kiến thức của mình, các Bạn có thể giúp những người mới bắt đầu tìm hiểu WordPress dễ dàng hơn.
  • Nhằm giao lưu tạo dựng cộng đồng lành mạnh, toàn diện về WordPress.
  • Tất cả những kiến thức Vnkings và các Bạn đóng góp đều phi lợi nhuận, dựa trên tinh thần giúp đỡ và chia sẻ.
  • Vnkings Sẵn sàng giúp đỡ tất cả vấn đề các Bạn gặp phải trong quá trình tìm hiểu WordPress.

 

Quy tắc đăng bài:

  • Không copy bài viết từ nơi khác để đăng vào Website (tôn trọng bản quyền Tác giả)
  • Bạn nên đăng những bài viết do chính mình tạo ra.
  • Nhập đủ các trường trong phần đăng bài.
  • Tiêu đề và nội dung bài viết rõ ràng, rành mạch, giúp người đọc dễ hiểu.
  • Không sử dụng Teencode trong bài viết.

Quyền Lợi :

  • Được đặt textlink về website nếu bạn muốn.
  • Được cung cấp ACF Pro (Advanced custom field pro full Update) nếu bạn cần.
  • Bạn là một người có trách nhiệm và khả năng làm việc với WordPress, Vnkings sẵn sàng chia sẻ và chuyển giao các dự án của mình cho bạn.

Thân!
Vnkings

]]>
<![CDATA[Tạo Slider WordPress chuyên nghiệp với Owl Carousel]]> https://wordpress.vnkings.com/tao-slider-wordpress-chuyen-nghiep-voi-owl-carousel.html Tạo Slider Wordpress chuyên nghiệp với Owl Carousel một cách đơn giản nhất

]]>

Tạo Slider WordPress chuyên nghiệp với Owl Carousel

Tạo Slider WordPress chuyên nghiệp với Owl Carousel
Tạo Slider WordPress chuyên nghiệp với Owl Carousel

Thủ thuật WordPress

Như các Bạn cũng thấy ở phần đầu trang chủ vnkings.com có Slider các bài mới nhất, một số bạn đã inbox hỏi dùng plugin gì hay làm như thế nào, thực tế đây là 1 chức năng mình tự làm và được hỗ trợ bởi Owl Carousel chứ không dùng Plugin nào cả.
Tạo Slider WordPress chuyên nghiệp với Owl Carousel

Bài viết này sẽ giúp bạn tạo Slider WordPress chuyên nghiệp với Owl Carousel :

– Bạn vào trang OWL Carousel

Tạo Slider WordPress chuyên nghiệp với Owl Carousel

– Sau khi tải về bạn sẽ có 1 cấu trúc thư mục như thế này :

Tạo Slider WordPress chuyên nghiệp với Owl CarouselĐây là tất cả các file mà Owl Carousel hỗ trợ bạn tạo ra Slider, nhưng bạn không cần dùng hết chúng, bởi Owl Carousel để cả 2 dạng file đã tối ưu và dạng chưa tối ưu giúp bạn chỉnh sửa dễ hơn.

Các file cần có để làm 1 Slider :

  • owl.carousel.min.js
  • owl.carousel.css

Nếu bạn nào không muốn lọc file có thể dùng bộ Owl Carousel đã được mình tối ưu : Tải về
Sau đó upload các file này lên thư mục Theme bạn đang dùng.

  • Đầu tiên bạn thêm đoạn lấy CSS này vào file header.php
<link href="đường dẫn tới file css/owl.carousel.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="đường dẫn tới file js/owl.carousel.min.js"></script>
//đường dẫn tới file css : ví dụ file css nằm ở thư mục theme-vnkings/css/owl.carousel.css bạn có thể dùng đoạn này <link href="<?php bloginfo("stylesheet_directory");?>/css/owl.carousel.css" rel="stylesheet" type="text/css" />

– Bây giờ ở file index.php (trang chủ) các bạn tìm đến vị trí cần đặt Slider và thêm đoạn code này:

// Lấy 10 bài viết mới nhất
<div id="owl-lovend" class="owl-carousel">
<?php $owl = new WP_Query(array( 'post_type'=>'post',
'post_status'=>'publish',
'orderby' => 'ID',
'order' => 'DESC',
'posts_per_page'=> 10));
?>
<?php $i = 0; while ($owl->have_posts()) : $owl->the_post(); ?>
// lấy hình ảnh của bài viết mới nhất
<div class="item"><a href=""><?php the_post_thumbnail("thumbnail",array( "title" => get_the_title(),"alt" => get_the_title() ));?></a></div>
<?php $i++; endwhile ; wp_reset_query() ;?>
</div>
// cấu hình 5 ảnh bài viết mới nhất trên 1 hàng dạng slider ngang.
<script>
    $(document).ready(function() {
      $("#owl-lovend").owlCarousel({
		items : 5,
      });
    });
</script>

Các bạn có thể thêm tùy chọn cho slider của mình bằng cách xem các cấu hình nâng cao ở trang này : http://owlgraphic.com/owlcarousel/

 

Sau đó bạn ra trang chủ F5 và xem thành quả của mình nhé

Tạo Slider WordPress chuyên nghiệp với Owl CarouselTrên đây là Slider mình đã làm bằng Owl Carousel, nếu có vấn đề gì thắc mắc hoặc cần hỗ trợ, bạn có thể liên hệ qua box comment bên dưới.

Chúc các bạn thành công!

]]>
<![CDATA[Tạo form liên hệ WordPress đơn giản với Contact Form 7]]> https://wordpress.vnkings.com/tao-form-lien-he-wordpress-don-gian-voi-contact-form-7.html Tạo form liên hệ Wordpress đơn giản với Plugin Contact Form 7 giúp tăng độ tương tác giữa Website và các Thành viên

]]>

Tạo form liên hệ WordPress đơn giản với Contact Form 7

Tạo form liên hệ WordPress đơn giản với Contact Form 7
Tạo form liên hệ WordPress đơn giản với Contact Form 7

Thủ thuật WordPress

Tạo Form liên hệ WordPress cho phép người dùng gửi thông tin nội dung đến Web Master là vấn đề khá quan trọng giúp tăng độ tương tác giữa Website và các Thành viên. để giải quyết vấn đề này, Bạn có thể sử dụng khá nhiều Plugin như : Contact Form 7, Jetpack’s, Ninja Forms, Fast Secure, ContactBuddy. Riêng về cá nhân, sau khi sử dụng nhiều loại Plugin khác nhau, mình đã chọn Contact Form 7 bởi độ chuyên nghiệp, phổ biến và linh hoạt của nó.
Demo :
Tạo form liên hệ WordPress đơn giản với Contact Form 7

Để tạo form liên hệ WordPress đơn giản với Contact Form 7 các bạn có thể tải ở link này : Contact Form 7 hoặc vào phần Plugin trong DashBoard tìm với từ khóa Contact Form 7cài đặt nó.

Tạo form liên hệ WordPress đơn giản với Contact Form 7

  • Sau khi cài đặt bạn sẽ có phần quản trị Contact như trên
  • chọn Tùy Chỉnh

Tạo form liên hệ WordPress đơn giản với Contact Form 7

Trong phần cài đặt các bạn sẽ thấy có 4 Tab chính :
– Biểu mẫu :

Đây là phần cho phép bạn tạo form theo ý của mình, các trường mà Contact Form 7 hỗ trợ hoàn toàn đầy đủ cho bạn sử dụng:

  • Text : Trường nhập nội dung text thường như họ tên, địa chỉ…
  • Email : Trường nhập địa chỉ Email
  • URL : Trường nhập địa chỉ url Website
  • Tel: Trường nhập số điện thoại
  • Number : trường chỉ nhập số
  • Date: trường ngày tháng
  • Text area: Trường ô soạn thảo nâng cao (cho phép bạn sử dụng code đơn giản của html)
  • Drop-down menu: Trường chọn giá trị theo kiểu sổ dọc.
  • Checkboxes: Trường chọn giá trị dạng check ô (có thể chọn nhiều giá trị)
  • Radio buttons: Trường chọn giá trị (Chỉ được chọn 1)
  • Acceptance : Trường tạo ô tích chấp thuận (điều khoản, nội quy)
  • reCAPTCHA : Trường nhập Captcha (tránh tình trạng spam)
  • File : Trường upload File
  • Submit : Nút bấm Submit (Đăng lên, Gửi đi)

Ví dụ : Bạn muốn tạo 1 trường Họ tên : bạn hãy  ấn vào nút Text bên trên

lien-he-wordpress-contact-form-7-s3

  • Field type :  Required field : Tick vào ô này nếu bạn muốn người dùng phải nhập giá trị vào ô này.
  • Tên: Chính là tên của trường (Lưu ý đặt không dấu và không khoảng trắng nhé)
  • Giá trị mặc định : Giá trị mặc định của trường nhập vào.
  • Akismet : Chọn kiểm tra tên người gửi
  • Id attribute : Id html của trường (nếu bạn không biết về code html có thể bỏ qua phần này)
  • Class attribute : Class html của trường nhập (nếu bạn không biết về code html có thể bỏ qua phần này)

Sau khi nhập các phần trong bảng trên các bạn chọn vào Insert Tag , nó sẽ tự chèn đoạn code cần hiển thị Trường vào form của bạn:

<label>Tên trường của bạn</label>
[Đoạn Shortcode vừa tạo]

Với cách tạo trường như bên trên: mình đã tự tạo Form như thế này (các bạn có thể copy về và sửa như ý của các bạn):


<div class="form-group">
	<label class="your_name" for="your_name">Họ tên</label>
    [/text* Your_Name class:form-control]
</div>
<div class="form-group">
	<label class="your_address" for="your_address">Địa chỉ</label>
    [/text Your_Address class:form-control]
</div>
<div class="form-group">
	<label class="email" for="email">Email</label>
	[/email* Your_Email class:form-control]
</div>
 <div class="form-group">
	<label for="comment">Comment:</label>
	[/textarea* Your_Content class:form-control]
</div>
[/submit class:btn class:btn-primary "Gửi"]

Lưu ý : bỏ dấu / trong [/ shortcode] đi các bạn nhé, vì khi copy vào bài viết Shortcode sẽ trở thành giá trị.

Sau khi đã tạo thành công Biểu mẫu Bạn Lưu lại, sau đó copy Đoạn Shortcode bên trên và Paste vào bài Liên hệ:

Tạo form liên hệ WordPress đơn giản với Contact Form 7

Mở trang Liên hệ và Xem thử Kết quả :

Tạo form liên hệ WordPress đơn giản với Contact Form 7

– Thiết lập mail:  thiết lập Email người nhận

Tạo form liên hệ WordPress đơn giản với Contact Form 7

Bạn có thể thay Email người nhận, các trường còn lại bạn có thể giữ nguyên

  • To: Email người nhận
  • From: [your-name] Tên Người gửi
  • Tiêu đề: [your-subject] Tiêu đề của form
  • Additional Headers: Trả lời tới : [your-email]
  • Message Body: Nội dung
  • Thiết lập mail (2): thiết lập thêm 1 Email nhận nội dung

– Các thông báo cho người gửi biểu mẫu: Nội dung thông báo Sau Khi khách Gửi liên hệ :

Tạo form liên hệ WordPress đơn giản với Contact Form 7

Phần này chính là thiết lập thông báo khi khách hàng gửi liên hệ. Các Bạn có thể việt hóa lại nó nếu muốn vì mặc định nó đang là tiếng anh.

– Cấu hình khác:
Tạo form liên hệ WordPress đơn giản với Contact Form 7

Trong phần này các bạn có thể nhập thêm các cấu hình hỗ trợ thêm cho Contact Form 7.
Ví dụ :
– Cấu hình khi gửi thầnh công sẽ có 1 thông báo : on_sent_ok: "alert('sent ok');"
– Cấu hình khi bấm nút gửi sẽ hiện lên dòng thông báo Gửi đi on_submit: "alert('Gửi đi');"

Chúc các bạn thành công!

]]>
<![CDATA[Lấy nội dung một page ra ngoài trang chủ WordPress]]> https://wordpress.vnkings.com/lay-noi-dung-1-page-ra-ngoai-trang-chu-wordpress.html bài viết này hướng dẫn cho người mới sử dụng có thể lấy nội dung một page ra ngoài trang chủ Wordpress một cách đơn giản

]]>

Lấy nội dung một page ra ngoài trang chủ WordPress

Lấy nội dung một page ra ngoài trang chủ WordPress
Lấy nội dung một page ra ngoài trang chủ WordPress

Thủ thuật WordPress

Khi bạn làm 1 trang giới thiệu công ty hay giới thiệu sản phẩm, thường khách hay yêu cầu có 1 bài giới thiệu công ty ngắn ở trang chủ, nếu là một người mới tìm hiểu về wordpress có thể nó sẽ gây khó khăn đôi chút cho bạn.
Vậy nên bài viết này hướng dẫn cho người mới sử dụng có thể lấy nội dung một page ra ngoài trang chủ WordPress

Lấy nội dung một page ra ngoài trang chủ WordPress

Bạn cần dùng 1 đoạn WP Query như bên dưới:

<?php
$nd_page = new WP_Query(array(
'post_type'=>'page',
'page_id'=> 1));
?>
<?php while ($nd_page->have_posts()) : $nd_page->the_post(); ?>
// nội dung bạn cần lấy : tiêu đề, nội dung, thông tin mô tả
<?php endwhile ; wp_reset_query() ;?>

Trong đó bạn cần quan tâm :
$nd_page chính là tạo 1 WP Query.
'post_type'=>'page' chính là chọn kiểu trang là Page
'page_id'=> 1 : chọn page có id = 1.
have_posts()) : $nd_page->the_post(); ?> vòng lặp lấy điều kiện trên $nd_page
kết thúc vòng lặp và dừng WP Query.

Chúc các bạn thành công!

]]>
<![CDATA[Căn giữa hình ảnh sản phẩm Woocommerce bằng CSS]]> https://wordpress.vnkings.com/can-giua-hinh-anh-san-pham-woocommerce-bang-css.html Căn giữa hình ảnh sản phẩm Woocommerce bằng CSS đơn giản giúp website của bạn trở nên chuyên nghiệp hơn

]]>

Căn giữa hình ảnh sản phẩm Woocommerce bằng CSS

Căn giữa hình ảnh sản phẩm Woocommerce bằng CSS
Căn giữa hình ảnh sản phẩm Woocommerce bằng CSS

Thủ thuật WordPress

Khi làm Website về Sản phẩm chúng ta thường gặp trường hợp hình ảnh sản phẩm chỉ căn giữa chiều ngang chứ không căn giữa của cả khung chứa nó. điều này làm cho website thiếu tính thẩm mỹ và chuyên nghiệp hơn
Căn giữa hình ảnh sản phẩm Woocommerce bằng CSS

Bài viết này sẽ giúp bạn căn giữa hình ảnh sản phẩm Woocommerce bằng CSS một cách đơn giản.

Giả sử ta có 1 đoạn html như thế này

 

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>Vnkings Căn giữa hình ảnh sản phẩm Woocommerce bằng CSS</title>
	<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>

<div class="vnking-image">
		<img src="vnkings.png" alt=""/>
	</div>

</body>
</html>

và CSS

.vnking-image {
    border: 2px solid #ccc;
    box-shadow: 0 0 4px 0 #ccc;
    height: 300px;
    width: 500px;
}
.vnking-image img {
    margin:0 auto;
	max-width:100%;
	display:block;
}

Kết quả :
Căn giữa hình ảnh sản phẩm Woocommerce bằng CSS

Như bạn thấy nó chỉ căn giữa ở chiều ngang, còn chiều dọc thì mặc định luôn ở trên đầu.

Bây giờ trong CSS bạn chỉ cần thay bằng đoạn này :

.vnking-image {
    border: 2px solid #ccc;
    box-shadow: 0 0 4px 0 #ccc;
    height: 300px;
    position: relative;
    width: 500px;
}
.vnking-image img {
    bottom: 0;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
}

Kết quả :

midle-image-vnkings

Như vậy với 1 đoạn CSS nhỏ các bạn đã giúp sản phẩm của mình luôn căn giữa khung.

Chúc các bạn thành công

]]>
<![CDATA[Chống copy bài viết và hình ảnh đơn giản cho website]]> https://wordpress.vnkings.com/chong-copy-bai-viet-va-hinh-anh-don-gian-cho-website.html Chống copy bài và hình ảnh đơn giản cho website giúp các author giảm nỗi lo về bản quyền bài viết của mình

]]>

Chống copy bài viết và hình ảnh đơn giản cho website

Chống copy bài viết và hình ảnh đơn giản cho website
Chống copy bài viết và hình ảnh đơn giản cho website

Thủ thuật WordPress

Một ngày đẹp trời mình đang lướt Web và không quên tìm 1 số từ khóa bài của mình trên mạng, kết quả ra có khá nhiều bài tương tự ở web khác, thử vào xem các Website đó viết như thế nào, hơi khó tin là họ copy bài của mình, nhưng lại dùng photoshop để xóa logo và chèn logo của họ vào.  Điều này không gây khó chịu nhiều cho mình, nhưng mình hoàn toàn không ủng hộ cách làm của họ.

Chống copy bài viết và hình ảnh đơn giản cho website

Vậy nên mình quyết định chống copy bài viết và hình ảnh đơn giản cho website để giảm bớt tình trạng này. giải pháp của mình là chèn 1 đoạn javascript chống copy nội dung và click chuột phải vào website. phương pháp này không giúp bạn chống được hoàn toàn 100% đâu nhé, vì gặp Chuyên gia họ vẫn có thủ thuật để copy được.
Bạn copy đoạn Javascript này vào cuối trang hoặc bất kì đâu bạn muốn trong thẻ <body>

<script type="text/javascript">
$(document).ready(function(){
$('*').bind('cut copy paste contextmenu', function (e) {
    e.preventDefault();
})});
</script>

Ưu điểm :

  • Chống copy nội dung bài viết
  • Chống click chuột phải lên website
  • Chống copy ảnh bài viết

Nhược điểm:

  • Có thể gây khó chịu cho người dùng nếu họ muốn copy 1 đoạn họ thích gửi cho bạn bè.

Chúc các bạn thành công!

]]>
<![CDATA[Thêm giỏ hàng Woocommerce ở vị trí bạn muốn trên wordpress]]> https://wordpress.vnkings.com/them-gio-hang-woocommerce-o-vi-tri-ban-muon-tren-wordpress.html Khi mới làm việc với Woocmmerce, có thể bạn gặp khó khăn trong việc đưa giỏ hàng và số lượng hàng đã mua ra vị trí mình mong muốn…

]]>

Thêm giỏ hàng Woocommerce ở vị trí bạn muốn trên wordpress

Thêm giỏ hàng Woocommerce ở vị trí bạn muốn trên wordpress
Thêm giỏ hàng Woocommerce ở vị trí bạn muốn trên wordpress

Thủ thuật WordPress

Thông thường khi sử dụng WordPress để làm chức năng bán Hàng chuyên nghiệp, Plugin Woocommerce hẳn là 1 trong những lựa chọn tốt nhất cho bạn.

Khi mới làm việc với Woocmmerce, có thể bạn gặp khó khăn trong việc đưa giỏ hàng và số lượng hàng đã mua ra vị trí mình mong muốn, Bài viết này sẽ giúp các bạn Thêm nút giỏ hàng Woocommerce ở vị trí bạn muốn trên trang WordPress của mình

Dùng đoạn code này đặt vào vị trí bạn muốn trong giao diện:

<div class="shopcart">
	<a class="cart-contents" href="<?php echo WC()->cart->get_cart_url(); ?>" title="<?php _e( 'Giỏ hàng ' ); ?>">
		<?php echo sprintf (_n( 'Giỏ hàng (%d)', 'Giỏ hàng (%d)', WC()->cart->cart_contents_count ), WC()->cart->cart_contents_count ); ?>
	</a>
</div>

Kết quả nhận được:

Thêm giỏ hàng Woocommerce ở vị trí bạn muốn trên wordpress

Bạn có thể css lại cho đẹp hơn theo phong cách của mình.

Chúc các bạn thành công

]]>
<![CDATA[10 Themes WordPress miễn phí và tốt nhất tháng 10 – 2015]]> https://wordpress.vnkings.com/10-themes-wordpress-mien-phi-va-tot-nhat-thang-10-2015.html 10 Themes Wordpress miễn phí và tốt nhất tháng 11 năm 2015. Dễ dàng sử dụng, dễ tùy biến chức năng. Tối ưu Code cho SEO. Sử dụng Responsive CSS cho các thiết bị di động.

]]>

10 Themes WordPress miễn phí và tốt nhất tháng 10 – 2015

10 Themes WordPress miễn phí và tốt nhất tháng 10 – 2015
10 Themes WordPress miễn phí và tốt nhất tháng 10 – 2015

Thủ thuật WordPress

Trong bài viết này chúng ta cùng điểm qua 10 giao diện WordPress miễn phí đẹp nhất trong tháng 10 năm 2015. Những giao diện này được WordPress đánh giá qua các thông số như:
– dễ dàng sử dụng, dễ tùy biến chức năng
– Tối ưu Code cho SEO
– Sử dụng Responsive CSS cho các thiết bị di động.
– phù hợp với các Plugin WordPress hiện nay.

 

Bây giờ chúng ta cùng điểm qua 10 Theme WordPress miễn phí và tốt nhất tháng 10 – 2015 nhé:

1. Unlimited Theme

10 Themes WordPress miễn phí và tốt nhất tháng 10 - 2015

Fast, responsive, beautiful, and accessible. With Unlimited, your content will reach more people, on more devices, around the world. Unlimited’s simple design puts the focus on your content, and supports it with clean, reliable code.

Tải về | Demo

 

2. Simone Theme

10 Themes WordPress miễn phí và tốt nhất tháng 10 - 2015

Simone is a responsive, accessible, high-resolution theme featuring custom header and custom link colors, large images, and easy to read typography that scales to fit all screens. Other features include keyboard accessible navigation, optional social menu, sidebar- and footer widgets, no-sidebar page template, Aside post format, and collapsible author profile box. Simone is translation ready and ships in English with translations in Catalan, Chinese (simplified), Dutch, Finnish, French, German, Hungarian, Italian, Norwegian Bokmål, Persian, Russian, Spanish, Swedish, and Turkish.

Tải về | Demo

 

3. Accessible Zen Theme

10 Themes WordPress miễn phí và tốt nhất tháng 10 - 2015

The Accessible Zen theme is an accessible, minimalistic, readable, and fully responsive HTML5 theme that puts the focus on your content and nothing else. Inspired by the writing and design work of Leo Babauta at Zen Habits.

Tải về | Demo

 

4. Stock Theme

10 Themes WordPress miễn phí và tốt nhất tháng 10 - 2015

A simple theme, inspired by minimalism & precision.

Tải về | Demo

5. Apex Theme

10 Themes WordPress miễn phí và tốt nhất tháng 10 - 2015

Apex is a sophisticated, minimalist theme. It looks great and performs wonderfully on phones, tablets, laptops, and everything in between. As a fast, responsive, accessibility-ready, and translation-ready theme, Apex is a theme you can trust to present your content to the world.

Tải về | Demo

 

6. Tiny Framework Themetheme-wordpress-free-6

 

Tiny Framework theme was created with the future in mind and encompasses all the best features of the default WordPress themes in one place, adds full accessibility and Schema.org microdata format support.

Tải về | Demo

 

7. Kuorinka Theme

10 Themes WordPress miễn phí và tốt nhất tháng 10 - 2015

Kuorinka is an accessible, translation-ready theme. It supports right-to-left languages, Schema.org microdata, and all of WordPress’ built-in theme features. It’s also child theme friendly.

Tải về | Demo

 

8. Aaron Theme

theme-wordpress-free-8

Aaron is a responsive, accessibility-ready multi-purpose theme. Features include Call to action and frontpage Highlights that will grab your visitors attention and help you feature different parts of your website.

Tải về | Demo

 

9. Storefront Theme

10 Themes WordPress miễn phí và tốt nhất tháng 10 - 2015

Storefront is the perfect theme for your next WooCommerce project. Designed and developed by WooThemes, it features a deep integration with our market leading WooCommerce plugin, several layout & color options to personalise your shop, multiple widget regions, a responsive design and much more. Developers will love it’s lean and extensible codebase making it a joy to customise and extend. Looking for a WooCommerce theme? Look no further!

Tải về | Demo

 

10. Author Theme

10 Themes WordPress miễn phí và tốt nhất tháng 10 - 2015

Author is designed for publishers who want readers. That’s why Author is fast, responsive, accessibility-ready, and optimally designed for reading. All scripts and stylesheets are minified, concatenated, and conditionally loaded to maximize performance. The layout adapts fluidly to all screen sizes to enhance usability. As one of few accessibility-ready themes, it performs well for users with wide ranges of disabilities. Lastly, based on the ancient Van de Graaf canon, Author is optimally designed for reading.

Tải về | Demo

 

Chúc các bạn thành công!

]]>
<![CDATA[Sử dụng WP Query cho file không thuộc thư mục WordPress]]> https://wordpress.vnkings.com/su-dung-wp-query-cho-file-khong-thuoc-thu-muc-wordpress.html Sử dụng WP Query cho file không thuộc thư mục Wordpress giúp bạn lấy dữ liệu sang một File outside một cách dễ dàng.

]]>

Sử dụng WP Query cho file không thuộc thư mục WordPress

Sử dụng WP Query cho file không thuộc thư mục WordPress
Sử dụng WP Query cho file không thuộc thư mục WordPress

Thủ thuật WordPress

Chắc hẳn nếu làm việc với WordPress Nâng cao không ít Bạn đã gặp trường hợp cần tạo ra 1 file mới không thuộc thư mục WordPress mà vẫn lấy được dữ liệu từ trang WordPress đó.

Nhớ có 1 lần mình muốn sử dụng chung User của WordPressVbulletin, giải pháp mình đưa ra ở đây là sẽ sử dụng WP Query ở trang đăng ký của Vbulletin, Và mình đã thành công khi liên kết được 2 Web này dùng chung USER cho nhau.
Với bài này, Mình sẽ giúp các Bạn có thể Sử dụng WP Query cho file không thuộc thư mục WordPress (lưu ý là trên cùng Host nhé.):

  • bạn cần thêm đoạn code này vào file đó là được:

<?php
define('WP_USE_THEMES', false);
require_once( $_SERVER['DOCUMENT_ROOT'] . '/wp-config.php' );
global $wp_query;
?>

  • Ví Dụ : Bạn có file vnkings.php nằm trên cùng thư mục root của wordpress và bạn muốn lấy thông tin cũng như 10 bài viết mới nhất của Websie Vnkings.com ra bạn chỉ cần đoạn code sau đây

<?php
define('WP_USE_THEMES', false);
require_once( $_SERVER['DOCUMENT_ROOT'] . '/wp-config.php' );
// $_SERVER['DOCUMENT_ROOT'] chính là đường dẫn tới thư mục WordPress của bạn
global $wp_query;
?>
Link Web: <?php bloginfo('url');?> <br/>
Tên Web: <?php bloginfo('name');?> <br/>
Bài mới nhất: 
<?php
$vnkings = get_posts('numberposts=10&order=ASC&orderby=post_title');
foreach ($vnkings as $post) : setup_postdata( $post ); ?>
<p><?php the_title(); ?> <p>  
<?php
endforeach;
?>


Test thử kết quả nhé

Sử dụng WP Query cho file không thuộc thư mục WordPress

Như vậy là mình đã lấy ra được thông tin trang Vnkings.com và các bài mới của trang này rồi.

Mong rằng với bài viết này, các bạn sẽ có thêm nhiều ý tưởng để làm phong phú website WordPress của mình.

Chúc các bạn thành công

]]>
<![CDATA[Thêm thông tin Tác giả Facebook trong WordPress]]> https://wordpress.vnkings.com/them-thong-tin-tac-gia-facebook-trong-wordpress.html Khi bạn chia sẻ bài viết wordpress của mình lên trang cá nhân Facebook,thông tin của người viết sẽ được hiện lên dưới dạng profile Facebook.

]]>

Thêm thông tin Tác giả Facebook trong WordPress

Thêm thông tin Tác giả Facebook trong WordPress
Thêm thông tin Tác giả Facebook trong WordPress

Thủ thuật WordPress

Facebook cung cấp rất nhiều dịch vụ giúp website của bạn quảng bá một cách dễ dàng trên mạng xã hội, chẳng hạn như sử dụng các Bình luận, Likebox và gần đây Facebook đã thêm tính năng gắn thẻ Author vào bài viết .

Thêm thông tin Tác giả Facebook trong WordPress
Với tính năng mới này, khi bạn chia sẻ bài viết của mình lên trang cá nhân hay bất kỳ fanpage nào, thông tin của người viết sẽ được hiện lên dưới dạng profile facebook.

Các bước cài đặt : Thêm thông tin Tác giả Facebook trong WordPress
– đầu tiên bạn cần tìm tới file functions.php thêm đoạn code này vào đầu hoặc cuối của file:

function facebook_profile_url($profile_fields) {
    $profile_fields['facebook_url'] = 'Facebook URL';
    return $profile_fields;
}
add_filter('user_contactmethods', 'facebook_profile_url');

Lúc này trong trang Profile WordPress đã được thêm 1 ô nhập (Facebook URL) link cá nhân Facebook của bạn:

Thêm thông tin Tác giả Facebook trong WordPress

Tiếp đến vẫn ở File functions.php bạn thêm đoạn code này :

function facebook_author_tag() {
    if ( is_single() ) {
        global $post;
        $author = (int) $post->post_author;
        $facebook_url = get_the_author_meta( 'facebook_url', $author );
        if ( ! empty( $facebook_url ) ) {
            echo '<meta property="article:author" content="'. $facebook_url .'" />';
        }
    }
}
add_action( 'wp_head', 'facebook_author_tag', 8 );

Mục đích là tự chèn thêm 1 thẻ Meta article:author vào header trong bài viết.

Sau khi nhập link, bạn ấn Lưu lại, và lấy thử 1 bài viết của mình đăng lên mạng xã hội Facebook.

kết quả thật tuyệt phải không!

Chúc các bạn thành công.

]]>
<![CDATA[Sử dụng Youtube Thumbnails cho website của bạn]]> https://wordpress.vnkings.com/su-dung-youtube-thumbnails-cho-website-cua-ban.html Website của bạn có hay chia sẻ các video của youtube không? nếu có thì tham khảo bài này để Sử dụng ảnh cho bài viết wordpress đó bằng thumbnails của Youtube nhé. Khi upload 1 video lên Youtube, nó sẽ tạo ra khá nhiều ảnh đại diện cho video đó. Với 1 link Youtube […]

]]>

Sử dụng Youtube Thumbnails cho website của bạn

Sử dụng Youtube Thumbnails cho website của bạn
Sử dụng Youtube Thumbnails cho website của bạn

Thủ thuật WordPress

Website của bạn có hay chia sẻ các video của youtube không? nếu có thì tham khảo bài này để Sử dụng ảnh cho bài viết wordpress đó bằng thumbnails của Youtube nhé.

Khi upload 1 video lên Youtube, nó sẽ tạo ra khá nhiều ảnh đại diện cho video đó.

  • Với 1 link Youtube : https://www.youtube.com/watch?v=_pXwab4SaPs
  • hãy để ý đến đoạn bôi đậm màu đỏ, mình tạm gọi đây là ID của Video Youtube

– 4 ảnh chính trong toàn Video : hãy thay id video vào phần ID bên dưới :

      http://img.youtube.com/vi/ID/0.jpg
      http://img.youtube.com/vi/ID/1.jpg
      http://img.youtube.com/vi/ID/2.jpg
      http://img.youtube.com/vi/ID/3.jpg

– Ảnh mặc định:


      http://img.youtube.com/vi/ID/default.jpg

– Ảnh mặc định Chất lượng cao(High Quality):

      http://img.youtube.com/vi/ID/hqdefault.jpg

– Ảnh mặc định Chất lượng trung bình(Medium Quality):

      http://img.youtube.com/vi/ID/mqdefault.jpg

– Ảnh mặc định Chất lượng tiêu chuẩn(Standard definition):

      http://img.youtube.com/vi/ID/sddefault.jpg

– Ảnh mặc định Lớn nhất(Standard definition):

      http://img.youtube.com/vi/ID/maxresdefault.jpg

Ví dụ :
– Ảnh mặc định Chất lượng cao(High Quality):
Sử dụng Youtube Thumbnails cho website của bạn

Như vậy bạn có thể lấy được khá nhiều ảnh Thumbnails cho bài viết của mình từ youtube mà không cần thiết kế ảnh cho bài viết đó

Chúc các bạn thành công!

]]>
<![CDATA[Thêm Fanpage Facebook chat cho Website]]> https://wordpress.vnkings.com/them-fanpage-facebook-chat-cho-website.html Mới đây Facebook đã thêm chức năng Live Chat Fanpage cho phép tích hợp vào Website điều này tạo nên giải pháp kinh doanh tuyệt vời giữa Website và Fanpage Bán hàng

]]>

Thêm Fanpage Facebook chat cho Website

Thêm Fanpage Facebook chat cho Website
Thêm Fanpage Facebook chat cho Website

Thủ thuật WordPress

Chào các bạn,
Mới đây Facebook đã thêm chức năng Live Chat Fanpage cho phép tích hợp vào Website điều này tạo nên giải pháp kinh doanh tuyệt vời giữa Website và Fanpage Bán hàng, làm tăng độ tương tác giữa người dùng Facebook và Website của bạn.

Update :

Mới đây Vnkings đã tạo công cụ Tạo live chat facebook cho website 2017 – Tự động tạo Code

Các bạn vào : https://wordpress.vnkings.com/tao-live-chat-facebook-cho-website-2017-tu-dong-tao-code.html Để tự tạo và copy mã nhé

Ngoài ra bạn cũng có thể dùng cách bên dưới.

– Một Số Ưu Điểm : Thêm Fanpage Facebook chat cho website

  • Khi xem sản phẩm hay trang web và khách muốn liên hệ với bạn qua Fanpage Facebook. họ sẽ không cần phải vào Facebook mà có thể gửi tin nhắn nhanh vào hộp tin nhắn tại Website
  • Tăng khả năng tương tác giữa Website và Fanpage của Website trên Facebook
  • Nhúng code nhanh gọn không quá phức tạp

 

Thêm Fanpage Facebook chat cho Website
Các bước cài đặt :

– Nếu Bạn là một Web Development (Nhà phát triển Web):

Thêm Fanpage Facebook chat cho Website

  • Sau đó bạn thay ID vừa tạo được vào đoạn code này và chèn vào trong thẻ của <body>
<div id="fb-root"></div>
<script type="text/javascript">// <![CDATA[
(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/vi_VN/sdk.js#xfbml=1&appId=Thay_ID_Cua_Ban&version=v2.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
// ]]></script>

<div style="position:fixed; z-index:9999999; right:10px; bottom:10px;" class="fb-page" data-tabs="messages" 
data-href="https://www.facebook.com/vnkingscom" data-width="250" data-height="300" data-small-header="false" 
data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true" data-show-posts="false"></div>
  • Các bạn cần thay ID App Facebook vào phần Thay_ID_Cua_Ban của đoạn code trên, ngoài ra các bạn cần thay cả Fanpage https://www.facebook.com/vnkingscom thành link Fanpage của mình
  • Trong đó data-width=”250″ data-height=”300″ chính là chiều rộng và chiều cao của khung chat bạn hoàn toàn có thể thay cho phù hợp với Website của mình

 

– Nếu Bạn là quản trị viên (không chuyên về code):

  • bạn có thể copy nguyên đoạn này vào cặp thẻ body của mình và chỉ cần thay link Fanpage sang Fanpage của bạn
<div id="fb-root"></div>
<script type="text/javascript">// <![CDATA[
(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/vi_VN/sdk.js#xfbml=1&appId=1375331902774196&version=v2.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
// ]]></script>

<div style="position:fixed; z-index:9999999; right:10px; bottom:10px;" class="fb-page" data-tabs="messages" 
data-href="https://www.facebook.com/vnkingscom" data-width="250" data-height="300" data-small-header="false" 
data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true" data-show-posts="false"></div>

 

Trong quá trình làm nếu bạn không làm được, bạn có thể yêu cầu trợ giúp từ khung bình luận bên dưới
Chúc các bạn thành công!

]]>
<![CDATA[Bảo vệ WordPress khỏi các truy vấn nguy hiểm]]> https://wordpress.vnkings.com/bao-ve-wordpress-khoi-cac-truy-van-nguy-hiem.html Bảo vệ Wordpress khỏi các truy vấn nguy hiểm, bài viết này mình sẽ đề cập đến việc bảo vệ Wordpress khỏi SQL Injection giúp website của bạn an toàn hơn.

]]>

Bảo vệ WordPress khỏi các truy vấn nguy hiểm

Bảo vệ WordPress khỏi các truy vấn nguy hiểm
Bảo vệ WordPress khỏi các truy vấn nguy hiểm

Thủ thuật WordPress

Bảo mật cho website luôn là vấn đề được đặt lên hàng đầu của các Web Development. Một trong những tác nhân gây hại nguy hiểm nhất thường được các Hacker khai thác là lỗi SQL Injection trực tiếp nhập lệnh truy vấn SQL từ URL Website từ đó tìm ra lỗ hổng bảo mật.

Bảo vệ WordPress khỏi các truy vấn nguy hiểm

Bài viết này mình sẽ đề cập đến việc bảo mật WordPress khỏi SQL Injection bằng file Functions.php
– Trước tiên bạn tìm tới file Functions.php của Theme đang sử dụng
– Thêm đoạn code này vào đầu hoặc cuối file:

global $user_ID; if($user_ID) {
        if(!current_user_can('administrator')) {
                if (strlen($_SERVER['REQUEST_URI']) > 255 ||
                        stripos($_SERVER['REQUEST_URI'], "eval(") ||
                        stripos($_SERVER['REQUEST_URI'], "CONCAT") ||
                        stripos($_SERVER['REQUEST_URI'], "UNION+SELECT") ||
                        stripos($_SERVER['REQUEST_URI'], "base64")) {
                                @header("HTTP/1.1 414 Request-URI Too Long");
                                @header("Status: 414 Request-URI Too Long");
                                @header("Connection: Close");
                                @exit;
                }
        }
}

Với đoạn code này các câu lệnh sql từ bên ngoài vào các url đều được mã hóa hoặc đóng kết nối giúp website của bạn an toàn hơn!

Chúc các bạn một ngày tốt lành!

]]>
<![CDATA[Tắt Emotions cho WordPress]]> https://wordpress.vnkings.com/tat-emotions-cho-wordpress.html Tắt Emotions cho Wordpress giảm bớt javascript giúp web site chạy nhanh hơn

]]>

Tắt Emotions cho WordPress

Tắt Emotions cho WordPress
Tắt Emotions cho WordPress

Thủ thuật WordPress

WordPress đang liên tục update các phiên bản mới để hoàn thiện hơn về chức năng cũng như độ bảo mật của mình, với bản WordPress 4.2 trở đi, WordPress đã tích hợp thêm bộ Emojis (Emotions) giúp cho các bài viết thêm sinh động hơn. Nhưng không hẳn ai cũng cần dùng đến nó, vậy bài này giúp các bạn tắt Emotion giảm js cần load cho trang.

Ở bài viết này mình sẽ đề cập tới 2 cách chính đó là sử dụng WordPress Hook hoặc Plugin

  • WordPress Hook :

    • Mở File Functions.php ở theme WP các bạn đang dùng
    • Thêm đoạn code này vào file (đặt vào đầu hay cuối file function đều được)
        remove_action('wp_head', 'print_emoji_detection_script', 7);
        remove_action('wp_print_styles', 'print_emoji_styles');
        
    • Lưu lại, bạn có thể ra trang chủ và view source đã không còn các file của Emojis

 

  • Sử dụng Plugin
    • Các bạn tìm với từ khóa “Disable Emojis” ở phần thêm Plugin
    • Tắt Emotions cho WordPress
    • Cài đặt nó và như thế là đã tắt xong Emojis

 

Chúc các bạn thành công!

]]>
<![CDATA[Thêm đuôi .html cho Post và Page WordPress không dùng plugin]]> https://wordpress.vnkings.com/them-duoi-html-cho-post-va-page-wordpress-khong-dung-plugin.html Thêm đuôi .html cho Post và Page giúp link website của bạn đẹp và tối ưu seo hơn

]]>

Thêm đuôi .html cho Post và Page WordPress không dùng plugin

Thêm đuôi .html cho Post và Page WordPress không dùng plugin
Thêm đuôi .html cho Post và Page WordPress không dùng plugin

Thủ thuật WordPress

Việc lựa chọn kiểu đường dẫn đẹp và tối ưu cho web là điều rất quan trọng, nó góp phần tạo nên thành công không nhỏ cho người làm SEO.

Với bài viết này mình sẽ giúp các bạn thay đường dẫn của WordPress trở nên đẹp hơn và thêm đuôi .html vào cả Post và Page.

– Thay đổi đường dẫn cho Post và thêm đuôi .html

  • Đầu tiên bạn vào Trang Quản trị > Setting > Permalinks


Thêm đuôi .html cho Post và Page WordPress không dùng plugin

 

  • Tick vào ô Custom Structure : thêm đoạn này /%postname%.html
  • Chọn Save Changes.

– Thay đổi đường dẫn cho Page và thêm đuôi .html

  • Các bạn mở file Functions.php trong thư mục theme và thêm đoạn function này vào :
add_action('init', 'VnKings_change_page_permalink', -1);
function VnKings_change_page_permalink() {
	global $wp_rewrite;
	if ( strstr($wp_rewrite->get_page_permastruct(), '.html') != '.html' )
	$wp_rewrite->page_structure = $wp_rewrite->page_structure . '.html';
}

Thêm đuôi .html cho Single Post Type

  • Ví dụ : Domain/chi-tiet-san-pham.html
add_action( 'rewrite_rules_array', 'rewrite_rules' );
function rewrite_rules( $rules ) {
    $new_rules = array();
    foreach ( get_post_types() as $t )
        $new_rules[ $t . '/([^/]+).html$' ] = 'index.php?post_type=' . $t . '&name=$matches[1]';
    return $new_rules + $rules;
}
add_filter( 'post_type_link', 'custom_post_permalink' ); // for cpt post_type_link (rather than post_link)
function custom_post_permalink ( $post_link ) {
    global $post;
    $type = get_post_type( $post->ID );
    return home_url( $type . '/' . $post->post_name . '.html' );
}
  • Sau khi lưu lại các bạn nhớ vào Trang Quản trị > Setting > Permalinks và Chọn Save Changes 1 lần nữa.

Chúc các bạn thành công !

]]>
<![CDATA[Fix chia sẻ bài viết lên facebook bị lỗi không hiện thông tin]]> https://wordpress.vnkings.com/fix-chia-se-bai-viet-len-facebook-bi-loi-khong-hien-anh-thong-tin.html Đôi khi bạn đăng link bài viết của mình lên Facebook mà không thấy ảnh hoặc thông tin hiển thị, bài này sẽ giúp bạn sửa được tình trạng này một cách dễ dàng

]]>

Fix chia sẻ bài viết lên facebook bị lỗi không hiện thông tin

Fix chia sẻ bài viết lên facebook bị lỗi không hiện thông tin
Fix chia sẻ bài viết lên facebook bị lỗi không hiện thông tin

Thủ thuật WordPress

Có khá nhiều lần mình chia sẻ bài viết từ Web lên Fanpage hay trang cá nhân Facebook bị lỗi trong khi web đã hỗ trợ các thẻ Meta og:description, og:images và có giá trị. dù tải lại trang hay paste đi paste lại vẫn thế.

 

Fix chia sẻ bài viết lên facebook bị lỗi không hiện thông tin

Nhưng thật may là Facebook đã tạo ra 1 trang Debug giúp bạn sửa được lỗi này.

Đầu tiên chúng ta vào link : https://developers.facebook.com/tools/debug/

Fix chia sẻ bài viết lên facebook bị lỗi không hiện thông tin

Paste link bạn vào ô nhập rồi nhấn Debug

Fix chia sẻ bài viết lên facebook bị lỗi không hiện thông tin

Tiếp đó bạn sẽ thấy thông báo lỗi của Link, Nhấp tiếp vào Fetch new Scrape Infomation
Fix chia sẻ bài viết lên facebook bị lỗi không hiện thông tin

Bây giờ quay lại facebook và đăng lại bài xem đã ok chưa nhé.

Fix chia sẻ bài viết lên facebook bị lỗi không hiện thông tin

Như vậy là đã fix được lỗi này rồi

Chúc các bạn thành công!

]]>
<![CDATA[Chuyển bài viết trong wordpress bằng nút trên bàn phím]]> https://wordpress.vnkings.com/chuyen-bai-viet-trong-wordpress-bang-nut-tren-ban-phim.html Chuyển bài viết bằng nút sang trên bàn phím dễ dàng

]]>

Chuyển bài viết trong wordpress bằng nút trên bàn phím

Chuyển bài viết trong wordpress bằng nút trên bàn phím
Chuyển bài viết trong wordpress bằng nút trên bàn phím

Thủ thuật WordPress

Khi vào 1 bài viết thông thường các bạn cần tìm link của bài mới hơn hoặc link bài cũ hơn để click chuyển bài. Để đơn giản cho việc chuyển bài ta có thể sử dụng nút sang của bàn phím để chuyển bài mới hay cũ

Chuyển bài viết trong wordpress bằng nút trên bàn phím
Thông thường trang chi tiết bài viết là file single.php trong theme của bạn, bạn mở nó ra bằng notepad ++ hay bất cứ trình Edit nào mà bạn có.

Thêm đoạn này vào file single.php

<?php $next_post = get_next_post(); if($next_post) { $next=get_permalink($next_post->ID);
}
$prev_post = get_previous_post();
if($prev_post) {
$prev=get_permalink($prev_post->ID);
}
?>
<script type="text/javascript">
document.onkeydown = checkKey;
function checkKey(e) {
e = e || window.event;
if (e.keyCode == '37') {
// left arrow
<?php echo 'window.location.assign("'.$prev.'");'; ?>
}
else if (e.keyCode == '39') {
<?php echo 'window.location.assign("'.$next.'");'; ?>
}
}
</script>

Ở đoạn trên bạn sẽ thấy :

  • e.keyCode == ’37’ Đây chính là phím Left arrow (nút mũi tên sang Trái)
  • e.keyCode == ’39’ Đây chính là phím Right arrow (nút mũi tên sang Phải)

Với 2 phím tắt này. việc chuyển bài vô cùng đơn giản. bạn có thể test ngay ở bài này. hãy thử ấn nút sang trái hoặc sang phải nhé!!

Chúc các bạn thành công!

]]>
<![CDATA[Functions chỉ hiển thị cho Author các Post của của mình]]> https://wordpress.vnkings.com/functions-chi-hien-thi-cho-author-cac-post-cua-cua-minh.html Functions wordpress giúp Author chỉ hiển thị các Post của của mình trong bảng quản trị giúp việc quản lý bài viết dễ dàng hơn

]]>

Functions chỉ hiển thị cho Author các Post của của mình

Functions chỉ hiển thị cho Author các Post của của mình
Functions chỉ hiển thị cho Author các Post của của mình

Thủ thuật WordPress

Nếu Website của bạn có nhiều chuyên mục và có nhiều tác giả đăng bài, như bình thường họ vào trang quản trị sẽ thấy toàn bộ bài viết của tất cả mọi người. Với bài này, các bạn có thể giúp cho các Author của mình quản lý bài dễ hơn bằng cách chỉ hiển thị bài của họ trong trang quản trị.

Functions chỉ hiển thị cho Author các Post của của mình

  • Các bạn chỉ cần thêm đoạn code này vào file functions.php trong thư mục theme đang sử dụng
function vnkings_posts_useronly( $wp_query ) {
    if ( strpos( $_SERVER[ 'REQUEST_URI' ], '/wp-admin/edit.php' ) !== false ) {
        if ( !current_user_can( 'level_10' ) ) {
            global $current_user;
            $wp_query->set( 'author', $current_user->id );
        }
    }
}
add_filter('parse_query', 'vnkings_posts_useronly' );
  • Bây giờ bạn vào nick Author của mình để kiểm tra kết quả nhé. lúc này Author Love nd của mình chỉ hiển thị bài của mình thôi, rất dễ quản lý.

Functions chỉ hiển thị cho Author các Post của của mình

Chúc các bạn thành công!

]]>
<![CDATA[Tạo trang Đăng ký cho WordPress không cần Plugin]]> https://wordpress.vnkings.com/huong-dan-tao-trang-dang-ky-cho-wordpress-khong-can-plugin.html Tạo trang đăng ký cho WordPress theo phong cách riêng của bạn, không sử dụng plugin tối ưu code cho Webmaster

]]>

Tạo trang Đăng ký cho WordPress không cần Plugin

Tạo trang Đăng ký cho WordPress không cần Plugin
Tạo trang Đăng ký cho WordPress không cần Plugin

Thủ thuật WordPress

Khi bạn dùng WordPress, phần đăng ký thành viên hơi rắc rối, tại sao chúng ta lại không làm nó đơn giản hơn bằng cách tự tạo 1 trang dăng ký theo ý mình.

Demo : https://wordpress.vnkings.com/dang-ky.html

Tạo trang Đăng ký cho WordPress không cần Plugin

  • Bước 1 : Bạn tạo 1 file template dang-ky.php vào thư mục Themes WordPress của bạn đang dùng
<?php /* Template Name: Đăng Ký */ ?>
  • Nội dung của file này bạn có thể lấy ở trang Page.php bạn đang dùng. chỉ khác là bạn sẽ thay đoạn vòng lặp thành đoạn dưới đây :
<?php if(is_user_logged_in()) { $user_id = get_current_user_id();$current_user = wp_get_current_user();$profile_url = get_author_posts_url($user_id);$edit_profile_url = get_edit_profile_url($user_id); ?>
<div class="regted">
	Bạn đã đăng nhập với tên nick <a href="<?php echo $profile_url ?>"><?php echo $current_user->display_name; ?></a> Bạn có muốn <a href="<?php echo esc_url(wp_logout_url($current_url)); ?>">Thoát</a> không ?
</div>
<?php } else { ?>
<div class="dangkytaikhoan">
	<?php $err = ''; $success = ''; global $wpdb, $PasswordHash, $current_user, $user_ID; if(isset($_POST['task']) && $_POST['task'] == 'register' ) { $pwd1 = $wpdb->escape(trim($_POST['pwd1']));
		$pwd2 = $wpdb->escape(trim($_POST['pwd2']));
		$email = $wpdb->escape(trim($_POST['email']));
		$username = $wpdb->escape(trim($_POST['username']));

		if( $email == "" || $pwd1 == "" || $pwd2 == "" || $username == "") {
			$err = 'Vui lòng không bỏ trống những thông tin bắt buộc!';
		} else if(!filter_var($email, FILTER_VALIDATE_EMAIL)) {
			$err = 'Địa chỉ Email không hợp lệ!.';
		} else if(email_exists($email) ) {
			$err = 'Địa chỉ Email đã tồn tại!.';
		} else if($pwd1 <> $pwd2 ){
			$err = '2 Password không giống nhau!.';
		} else {
			$user_id = wp_insert_user( array ('user_pass' => apply_filters('pre_user_user_pass', $pwd1), 'user_login' => apply_filters('pre_user_user_login', $username), 'user_email' => apply_filters('pre_user_user_email', $email), 'role' => 'subscriber' ) );
			if( is_wp_error($user_id) ) {
				$err = 'Error on user creation.';
			} else {
				do_action('user_register', $user_id);
				$success = 'Bạn đã đăng ký thành công!';
			}
		}
	}
	?>
<!--display error/success message-->
<div id="message">
		<?php
			if(! empty($err) ) :
				echo ''.$err.'';
			endif;
		?>
		<?php
			if(! empty($success) ) :
				$login_page  = home_url( '/dang-nhap.html' );
				echo ''.$success. '<a href='.$login_page.'> Đăng nhập</a>'.'';
			endif;
		?>
	</div>
	<form class="form-horizontal" method="post" role="form">
<div class="form-group">
	<label class="control-label  col-sm-3" for="username">Tên đăng nhập:</label>
	<div class="col-sm-9">
	<input type="text" class="form-control" name="username" id="username" placeholder="Tên Đăng nhập">
	</div>
</div>
<div class="form-group">
	<label class="control-label col-sm-3" for="email">Email:</label>
	<div class="col-sm-9">
		<input type="email" class="form-control" name="email" id="email" placeholder="Email">
	</div>
</div>
<div class="form-group">
	<label class="control-label col-sm-3" for="pwd1">Password:</label>
	<div class="col-sm-9">
		<input type="password" class="form-control" name="pwd1" id="pwd1" placeholder="Nhập password">
	</div>
</div>
<div class="form-group">
	<label class="control-label col-sm-3" for="pwd2">Nhập lại Pass:</label>
	<div class="col-sm-9">
		<input type="password" class="form-control" name="pwd2" id="pwd2" placeholder="Nhập lại password">
	</div>
</div>
<?php wp_nonce_field( 'post_nonce', 'post_nonce_field' ); ?>
<div class="form-group">
	<div class="col-sm-offset-3 col-sm-9">
	<button type="submit" class="btn btn-primary">Đăng ký</button>
	<input type="hidden" name="task" value="register" />
	</div>
</div>
</form>
</div>
<div class="thongbaologin">
	<?php
		$login  = (isset($_GET['login']) ) ? $_GET['login'] : 0;
		if ( $login === "failed" ) {
				echo '<strong>ERROR:</strong> Sai username hoặc mật khẩu.!';
		} elseif ( $login === "empty" ) {
				echo '<strong>ERROR:</strong> Username và mật khẩu không thể bỏ trống.';
		} elseif ( $login === "false" ) {
				echo '<strong>ERROR:</strong> Bạn đã thoát ra.';
		}
	?>
</div>

<?php } ?>
  • Bước 2 : Bạn vào Trang Quản Trị > Page > Add New Page
  • Phần tên Page bạn đặt là Đăng Ký và chọn Template là Đăng Ký bên trên vừa tạo

Tạo trang Đăng ký cho WordPress không cần Plugin

  • bây giờ bạn có thể xem thành quả của mình bằng đường dẫn : domain/dang-ky

 

Chúc các bạn thành công!

]]>
2017-11-24T6:51:58Z