Nhận thiết kế giao diện và plugin WordPress

Dạo gần đây Sáu ít cập nhật bài viết mới trên Blog Học WordPress là vì mình bận code nhiều dự án cho khách, cho tới mãi những ngày cuối tháng này mình mới có thêm chút thời gian để đăng bài hướng dẫn mới. Nhân tiện đây mình cũng xin đăng bài giới thiệu đến các bạn dịch vụ mới trên blog HocWP đó là dịch vụ thiết kế giao diện và plugin cho WordPress.

Trang đăng dự án WordPress

Các bạn có thể truy cập trang web mới WordPress Project để cập nhật những thông tin mới nhất về những dự án đã được thực hiện bởi nhóm coder đến từ blog HocWP. Nếu bạn là một trong những khách hàng có nhu cầu thiết kế website dựa trên WordPress và bạn muốn làm việc với SB Team thì có thể liên hệ thông qua địa chỉ email: laidinhcuongvn@gmail.com.

Tùy thuộc vào độ khó dễ của từng dự án mà giá có thể khác nhau, có một điều đặc biệt ở đây là SB Team chỉ thực hiện những dự án với quy mô giá dưới 10.000.000đ

Nếu những trang web có nhiều chức năng với quy mô hơn 1 triệu đồng thì có thể các bạn sẽ phải liên hệ với những công ty hoặc nhóm thiết kế web khác. Sau khi đã thỏa thuận xong giá cả thì bên mình sẽ thông báo số ngày hoàn thành dự án, và dự án chỉ có thể bắt đầu khi khách hàng đã ứng trước 50% tổng số tiền dự án.

SB Team rất mong nhận được sự đóng góp và ủng hộ từ phía các bạn.

Xóa revision bằng tập tin functions.php

Revision là những bài viết tự động sao lưu nhằm giúp bạn rất nhiều trong việc soạn thảo bài mới trên blog. Tuy nhiên thì theo thời gian số lượng revision tăng lên rất nhiều, điều này sẽ làm cho cơ sở dữ liệu nặng thêm và truy xuất có phần chậm hơn. Bạn có thể sử dụng đoạn code sau để đặt vào tập tin functions.php nhằm mục đích xóa tất cả các revision hiện có trong dữ liệu của bạn.

[php]
global $wpdb;
$wpdb->query( "DELETE FROM $wpdb->posts WHERE post_type = ‘revision’ " );
[/php]

Bạn bỏ vào tập tin functions.php của giao diện, lưu lại và chạy trang web. Đương nhiên sau khi chạy xong thì tất cả các revision trong dữ liệu đã được xóa đi, bạn có thể xóa đi 2 dòng code này và lần sau nếu muốn dùng thì bỏ vào lại.

Chuyển jQuery và tất cả javascript xuống footer

Xin chào tất cả các bạn, trong bài viết Hướng dẫn tích hợp Bootstrap vào giao diện WordPress thì mình đã có thảo luận tới việc dùng hàm để đưa style và javascript vào giao diện. Tuy nhiên thì bạn nên chú ý ở đây là đối với tập tin css thì bạn nên cho ở phần head còn những tập tin javascript thì bạn nên đặt nó phía trước kết thúc thẻ body.

Đưa jQuery xuống dưới cùng của trang WordPress

Để có thể thực hiện được bài viết này thì bạn phải nắm vững các hàm đăng ký và cho script vào hàng đợi.

Đối với hàm wp_register_script thì bạn chỉ dùng để đăng ký script với WordPress, nó không thể thêm script vào hàng đợi của bạn được, bắt buộc bạn phải dùng hàm wp_enqueue_script sau khi bạn đã đăng ký thành công script. Tuy nhiên, riêng hàm wp_enqueue_script thì bạn có thể làm được cả 2 công việc, nếu bạn sử dụng tất cả các tham số đầu vào thì WordPress sẽ kiểm tra nếu như chưa có handle thì nó sẽ đăng ký và sau đó sẽ cho script đó vào hàng đợi.

Và bài viết này mình muốn nói đến công việc đưa jQuery xuống bên dưới footer thay vì nằm ở trong thẻ head như mặc định. Công việc đầu tiên bạn phải làm là dequeue để xóa nó ra khỏi hàng đợi và sau đó là deregister nó. Sau đó bạn sẽ đăng ký lại giá trị mới và công đoạn thì phải làm ngược lại so với lúc bạn xóa. Chú ý là jQuery có liên quan tới jQuery Migrate, bạn phải cho thông số phụ thuộc của jQuery thì nó mới có thể hoạt động tốt được.

[php]
private function move_jquery_to_footer() {
$jquery = ABSPATH . WPINC . "/js/jquery/jquery.js";
$jquery_migrate = ABSPATH . WPINC . "/js/jquery/jquery-migrate.min.js";
if(file_exists($jquery) && file_exists($jquery_migrate)) {
wp_dequeue_script(‘jquery’);
wp_deregister_script(‘jquery’);
wp_dequeue_script(‘jquery-migrate’);
wp_deregister_script(‘jquery-migrate’);
wp_register_script(‘jquery-migrate’, includes_url("js/jquery/jquery-migrate.min.js"), array(), false, true);
wp_register_script(‘jquery’, includes_url("js/jquery/jquery.js"), array(‘jquery-migrate’), false, true);
}
}
[/php]

Hàm bên trên mình mới chỉ có đăng ký lại thôi chứ chưa dùng enqueue để cho nó vào hàng đợi, bạn có thể thêm hoặc làm việc này thông qua tham số dependencies. Sau này đối với các tập tin javascript bạn muốn thêm vào giao diện, nên để thông số $in_footer để cho nó nằm trước kết thúc thẻ body.

Việc đưa tất cả javascript xuống dưới footer sẽ giúp cho trang của bạn chạy nhanh hơn vì javascript sẽ được load sau thay vì load trước nội dung như bình thường. Chúc bạn thành công.

Meta Slider plugin tạo slideshow cho WordPress

Bạn đang muốn tạo slide trên blog WordPress của mình nhưng chưa biết làm như thế nào. Bài viết này Sáu sẽ hướng dẫn cho bạn cách tạo slideshow trong blog WordPress với plugin Meta Slider, đây là plugin tạo slide miễn phí lẫn có phí, nếu bạn bỏ tiền ra mua thì plugin sẽ có nhiều tính năng hay hơn, tuy nhiên đối với bản miễn phí thì bạn đã có thể thỏa mãn được nhu cầu.

Plugin Meta Slider tạo slide cực dễ cho WordPress

Có rất nhiều plugin giúp bạn tạo slide trên blog WordPress, tuy nhiên Sáu giới thiệu cho các bạn plugin này là vì nó dễ dùng và có tích hợp 4 công cụ tạo slide hình ảnh phổ biến hiện nay: Flex Slider, Nivo Slider, Responsive Slides, Coin Slider.

Tải plugin Meta Slider

Bây giờ bạn có thể tải và cài đặt plugin trên blog WordPress của bạn. Sau khi cài đặt xong thì bạn sẽ thấy một menu bên phía tay trái bảng điều khiển với tên là: Meta Slider.

Bạn vào bên trong và tạo một menu với tên bất kỳ, sau khi tạo xong slider thì bạn đã có thể sử dụng nó. Trong trang quản lý widget của giao diện cũng hỗ trợ widget cho bạn kéo thả vào sidebar để sử dụng, hoặc bạn có thể sử dụng shortcode của nó:

[php]<?php echo do_shortcode(‘[metaslider id=22]’); ?>[/php]

Bài viết này Sáu sẽ giới thiệu mẫu cho các bạn cách tạo 1 module sidebar để chứa slider và tùy chỉnh 1 số thông tin css để slide trở nên đẹp hơn. Bây giờ bạn mở tập tin functions.php lên và thêm vào đoạn code sau:

[php]
function add_slider_custom_widget() {
register_sidebar( array(
‘name’ => __( ‘Home Slider’, ‘stheme’ ),
‘id’ => ‘main-slider-module’,
‘description’ => __( ‘Main slider below primary menu.’, ‘stheme’ ),
‘before_widget’ => ‘<section id="%1$s" class="widget %2$s">’,
‘after_widget’ => ‘</section>’,
‘before_title’ => ‘<h4 class="widget-title">’,
‘after_title’ => ‘</h4>’
));
}
add_action(‘widgets_init’, ‘add_slider_custom_widget’);
[/php]

Nếu như trong tập tin functions của bạn đã có action widgets_init rồi thì bạn sao chép nội dung bên trong hàm add_slider_custom_widget và bỏ vào hàm đã có sẵn nhé.

Bây giờ bạn vào tập tin header.php của giao diện và thêm vào dòng code bên dưới để hiển thị slider ra bên ngoài, tùy thuộc vào bạn thích đặt ở vị trí nào mà chọn tập tin cho phù hợp nhé.

[php]
<?php if(is_active_sidebar(‘main-slider-module’)) : ?>
<div class="main-slide module-slider">
<div class="slide-container">
<?php dynamic_sidebar(‘main-slider-module’); ?>
</div>
</div>
<?php endif; ?>
[/php]

Bây giờ thì slide của bạn sẽ được hiển thị nếu như bạn kéo widget Meta Slider bỏ vào sidebar Home Slider. Để cho slide hiển thị đẹp hơn thì bạn tùy chọn thêm kích thước của hình ảnh, chọn chế độ rộng full khung và thêm vào thuộc tính css như bên dưới:

[css]
.module-slider {
margin: 15px 0 10px 0;
height: 440px;
}

.module-slider .metaslider img {
height: 440px;
width: 100%;
}

.module-slider .metaslider .flex-direction-nav a.flex-prev, .module-slider .metaslider .flex-direction-nav a.flex-next {
background-clip: padding-box !important;
background-color: rgba(35, 39, 41, 0.72) !important;
border-color: rgba(0, 0, 0, 0.11);
border-radius: 50%;
border-style: solid;
border-width: 10px;
cursor: pointer;
display: block;
height: 70px !important;
margin: -35px 0 0;
text-indent: -9999px;
top: 50%;
transition: all 0.4s ease 0s;
width: 70px !important;
}

.module-slider .metaslider .flex-direction-nav a.flex-prev {
background-image: url("url");
}
.module-slider .metaslider .flex-direction-nav a.flex-next {
background-image: url("url");
}
.module-slider .metaslider .flex-direction-nav a.flex-prev:hover, .module-slider .metaslider .flex-direction-nav a.flex-next:hover {
background-color: rgba(26, 153, 204, 0.8) !important;
}

.module-slider .flex-control-nav.flex-control-paging {
bottom: 20px;
position: absolute;
z-index: 999;
}

.module-slider .flex-control-nav.flex-control-paging li a {
border-radius: 0;
height: 15px;
width: 15px;
}

.module-slider .flex-control-nav.flex-control-paging li a.flex-active {
background-color: rgba(26, 153, 204, 0.8);
opacity: 0.8;
}

.module-slider .flex-control-nav.flex-control-paging li a {
border: 1px solid #FFF;
}
[/css]

Cuối cùng bạn sẽ nhận được kết quả như hình bên dưới Sáu đã làm, và bạn cũng nên chọn hình ảnh có độ phân giải sao cho phù hợp chứ nếu hình ảnh có kích thước quá nhỏ thì khi hiển thị lớn lên sẽ làm nhòe hình.

Blog Học WordPress hướng dẫn tạo slider

Slide hiển thị cũng đẹp phải không bạn. Qua bài viết này thì bạn đã biết được cách tạo 1 slide đơn giản trên blog WordPress, vẫn còn nhiều điều hay nữa đang chờ bạn khám phá phía trươc

Theo dõi người dùng nhấn nút like Facebook

Bài viết này Sáu sẽ hướng dẫn cho bạn cách theo dõi người dùng khi họ nhấn nút like Facebook. Yêu cầu của bài toán được đặt ra là bạn có chức năng chỉ hiển thị cho người dùng nội dung của bài viết một khi họ đã nhấn like trên fanpage của bạn. Nếu như chỉ like bình thường thôi thì nội dung sẽ không được cập nhật, theo cách thông thường, khi người dùng vừa nhấn like thì hiển thị thông báo và tải lại trang hiển thị nội dung cho người đó.

Theo dõi người dùng nhấn nút like Facebook

Đây là bài viết đầu tiên Sáu viết bài hướng dẫn có liên quan đến Facebook API, do vậy bạn phải tạo một tài khoản Facebook trước tiên và đăng ký một APP mới trên Facebook Developers. Bạn hãy tạo một app mới, điền tên cho phù hợp và thiết lập đầy đủ cho nó nhé.

Tạo một Facebook app

Sau khi đã có một app thì bạn nên quan tâm tới 2 thành phần chính đó là app idapp secret. Các ứng dụng được viết với Facebook PHP SDK đều dùng cái này, nên bạn có thể lưu lại vào mail hoặc trên ổ cứng của bạn để sử dụng, khỏi phải mất công đăng nhập vào đây để lấy.

Và trước khi bạn thực hành thì hãy ghé xem demo để biết được mục đích của bài viết, và hiểu được bạn chuẩn bị làm theo hướng dẫn để được kết quả như thế nào.

Thông báo khi người dùng nhấn like Facebook

Bên dưới là toàn bộ code mà bạn có thể tham khảo để tạo một nút like như trong bài viết Sáu đã giới thiệu, bạn phải tải thư viện Facebook PHP SDK về nữa nhé.

[php]
<?php
require_once(‘src/facebook.php’);
$config[‘App_ID’] = ‘FACEBOOK_APP_ID’;
$config[‘App_Secret’] = ‘FACEBOOK_APP_SECRET’;
$config[‘callback_url’] = ‘http://hocwp.net/example/theo-doi-like-facebook/’;

$facebook = new Facebook(array(
‘appId’ => $config[‘App_ID’],
‘secret’ => $config[‘App_Secret’],
‘cookie’ => true
));

$user = $facebook->getUser();
if(isset($_GET[‘logout’])) {
$facebook->destroySession();
session_destroy();
if (isset($_SERVER[‘HTTP_COOKIE’])) {
$cookies = explode(‘;’, $_SERVER[‘HTTP_COOKIE’]);
foreach($cookies as $cookie) {
$parts = explode(‘=’, $cookie);
$name = trim($parts[0]);
setcookie($name, ”, time()-1000);
setcookie($name, ”, time()-1000, ‘/’);
}
}
header("Location: ".$config[‘callback_url’]);
exit();
}
elseif(isset($_GET[‘code’])) {
header("Location: ".$config[‘callback_url’]);
exit();
}
if($user) {
$user_profile = $facebook->api(‘/me’);
}
?>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<meta charset="UTF-8" />
<title>Thông báo khi người dùng nhấn like Facebook</title>
<style type="text/css">
.logout a {
background-color: #3B5998;
border-radius: 3px;
color: #FBFBFB;
padding: 5px 10px;
text-decoration: none;
}
.logout a:hover {
background-color: #4e69a2;
}
</style
</head>
<body>
<p>Nếu bạn thích bài hướng dẫn này thì hãy nhấn like để ủng hộ</p>

<?php if($user) : ?>
<p class="logout">
Facebook ID: <?php print_r($user); ?>
&nbsp;&nbsp;&nbsp;
<a href="<?php echo $facebook->getLogoutUrl(array(‘next’ => $config[‘callback_url’].’?logout=1′, ‘access_token’ => $facebook->getAccessToken())); ?>">Đăng xuất</a>
</p>
<fb:like href="LIKED_URL" layout="standard" action="like" show_faces="false" share="true"></fb:like>
<?php else : ?>
<p><a href="<?php echo $facebook->getLoginUrl(array(‘scope’ => ‘friends_likes,email,publish_stream,status_update,offline_access’)); ?>"><img src="images/facebook-login-button.png" /></a></p>
<?php endif; ?>

<?php
$fb_name = ‘bạn’;
if(!empty($user_profile)) {
$fb_name = $user_profile[‘name’];
}
?>

<div id="fb-root"></div>
<script type="text/javascript">
<!–
window.fbAsyncInit = function() {
FB.init({appId: ‘<?php echo $config[‘App_ID’]; ?>’, status: true, cookie: true, xfbml: true});
FB.Event.subscribe(‘edge.create’, function(href, widget) {
alert(‘Cảm ơn <?php echo $fb_name; ?> đã thích Sáu Hỉ Blog’);
});
};
(function() {
var e = document.createElement(‘script’);
e.type = ‘text/javascript’;
e.src = document.location.protocol + ‘//connect.facebook.net/en_US/all.js’;
e.async = true;
document.getElementById(‘fb-root’).appendChild(e);
}());
//–>
</script>
<script type="text/javascript">
if (window.location.hash && window.location.hash == ‘#_=_’) {
if (window.history && history.pushState) {
window.history.pushState("", document.title, window.location.pathname);
} else {
var scroll = {
top: document.body.scrollTop,
left: document.body.scrollLeft
};
window.location.hash = ”;
document.body.scrollTop = scroll.top;
document.body.scrollLeft = scroll.left;
}
}
</script>
</body>
</html>
[/php]

Bạn phải thay đổi một vài thông tin theo như tài khoản của bạn, cụ thể bạn nhìn những dòng config ở phía đầu và sửa lại chỗ này:

[php]
$config[‘App_ID’] = ‘FACEBOOK_APP_ID’;
$config[‘App_Secret’] = ‘FACEBOOK_APP_SECRET’;
$config[‘callback_url’] = ‘http://hocwp.net/example/theo-doi-like-facebook/’;
[/php]

Tiếp đến, nút like thì bạn tự tạo nút like Facebook theo sở thích riêng hoặc là chỉ cần sửa lại đường link trong đoạn code sau:

[php]<fb:like href="LIKED_URL" layout="standard" action="like" show_faces="false" share="true"></fb:like>[/php]

Như vậy là bạn đã làm được như hướng dẫn rồi đấy, nhưng vẫn còn một điều quan trọng nữa đó là trong thẻ <html> bạn phải để như sau:

[html]<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">[/html]

Như vậy là bạn đã hoàn thành được bài viết tạo chức năng theo dõi khi người dùng click vào nút like Facebook, công việc của bạn tiếp theo là kiểm tra nếu người dùng đã like trang của bạn rồi thì hiển thị ra nội dung, hoặc nếu người dùng chưa like thì hiện ra nút like. Trường hợp người dùng chưa đăng nhập Facebook thì hiển thị nút đăng nhập cho họ trước. Chúc bạn thành công.

Nếu các bạn thích nội dung bài viết này thì hãy like trang Sáu Hỉ Blog để ủng hộ nhé, lần sau Sáu sẽ cập nhật bài viết tích hợp đăng nhập Facebook vào WordPress.

Tạo phân trang cho WordPress hỗ trợ custom query

Sáu đã từng giới thiệu cách tạo phân trang cho WordPress không cần dùng plugin, tuy nhiên thì code đó vẫn còn một số hạn chế, phân trang chưa hiển thị cho các câu truy vấn tùy chọn. Trong bài viết này Sáu đã nâng cấp code lên và chỉnh sửa lại một vài lỗi, bây giờ bạn có thể dùng trong một vòng lặp của một câu truy vấn bất kỳ.

Tạo phân trang cho WordPress với custom query

Nếu bạn có kiến thức về PHP và WordPress thì càng tốt, tuy nhiên nếu ngược lại thì bạn chỉ cần sao chép code và sử dụng, không cần biết nó được viết như thế nào, chúng ta chỉ chú trọng đến kết quả mà mình đạt được là gì.

[php]
if( ! function_exists( ‘the_paginate’ ) ) :
function the_paginate($args = null) {
$defaults = array(
‘title’ => ‘Pages’,
‘query’ => null
);
$args = wp_parse_args($args, $defaults);
extract($args, EXTR_SKIP);
if(is_404()) {
return;
}
$currentPage = null;
$totalPage = null;
if(empty($query)) {
global $wp_query;
$query = $wp_query;
}

$currentPage = stheme_get_paged();
$title .= ‘:’;
$ppp = intval($query->query[‘posts_per_page’]);
if($ppp < 1) {
return;
}
$totalPage = intval(ceil($query->found_posts / $ppp));
if($totalPage <= 1) {
return;
}
$paginateResult = ‘<div id="sPaginate" class="spaginate paginate"><div class="spaginate-inner paginate-inner"><span class="spaginate-title paginate-title">’.$title.'</span>’;

if ($currentPage > 1) {
$paginateResult .= ‘<a class="spaginate-prev prev page-item" href="’.get_pagenum_link($currentPage – 1).’">&laquo;</a>’;
}
$paginateResult .= the_paginate_list(1, $totalPage, $currentPage);
if ($currentPage < $totalPage) {
$paginateResult .= "<a href=’" . get_pagenum_link($currentPage + 1) . "’ class=’spaginate-next next page-item’>&raquo;</a>";
}
$paginateResult .= "</div></div>";
echo $paginateResult;
}
endif;

if( ! function_exists( ‘stheme_paginate’ ) ) :
function stheme_paginate($args = null) {
the_paginate($args);
}
endif;

if( ! function_exists( ‘the_paginate_list’ ) ) :
function the_paginate_list($intStart, $totalPage, $currentPage) {
$pageHidden = ‘<span class="spaginate-hidden hidden">…</span>’;
$linkResult = "";
$hiddenBefore = false;
$hiddenAfter = false;
for ($i = $intStart; $i <= $totalPage; $i++) {
if($currentPage === intval($i)) {
$linkResult .= ‘<span class="spaginate-current page-item current">’.$i.'</span>’;
}
else if(($i <= 6 && $currentPage < 10) || $i == $totalPage || $i == 1 || $i < 4 || ($i <= 6 && $totalPage <= 6) || ($i > $currentPage && ($i <= ($currentPage + 2))) || ($i < $currentPage && ($i >= ($currentPage – 2))) || ($i >= ($totalPage – 2) && $i < $totalPage)) {
$linkResult .= ‘<a class="spaginate-link page-item" href="’.get_pagenum_link($i).’">’.$i.'</a>’;
if($i <= 6 && $currentPage < 10) {
$hiddenBefore = true;
}
}
else {
if(!$hiddenBefore) {
$linkResult .= $pageHidden;
$hiddenBefore = true;
}
else if(!$hiddenAfter && $i > $currentPage) {
$linkResult .= $pageHidden;
$hiddenAfter = true;
}
}
}
return $linkResult;
}
endif;

function stheme_get_paged() {
$paged = intval(get_query_var(‘paged’)) ? intval(get_query_var(‘paged’)) : 1;
return $paged;
}
[/php]

Bên trên là code PHP mà Sáu đã tạo ra, gom thành các hàm nhỏ cho bạn dễ hiểu và dễ sử dụng lại. Để cho phân trang hiển thị được đẹp hơn thì bạn cần phải bổ sung thêm css:

[css]
.spaginate .spaginate-title {
display: none;
}

.spaginate .spaginate-link, .spaginate .spaginate-current, .spaginate .spaginate-next, .spaginate .spaginate-prev {
background-color: #E9E9E9;
border: 1px solid #D2D2D2;
border-radius: 2px;
color: #555555;
display: inline-block;
font-size: 1em;
font-weight: 700;
margin: 0 2px;
padding: 0.6em 0.8em;
position: relative;
text-decoration: none;
}

.spaginate .spaginate-current, .spaginate .spaginate-link:hover, .spaginate .spaginate-next:hover, .spaginate .spaginate-prev:hover {
background-color: #01B1D3;
border: 1px solid #01B1D3;
color: #FFFFFF;
}

.site-paginate {
display: block;
margin-top: 20px;
position: relative;
text-align: center;
z-index: 9999;
}
[/css]

Cách sử dụng rất dễ, bạn chỉ cần gọi hàm stheme_paginate là có thể hiển thị được phân trang, tuy nhiên nếu không có tham số đầu vào thì code này sẽ có tác dụng đối với query chính trên blog của bạn.

[php]
<?php $blog = new WP_Query(array(‘posts_per_page’ => 5, ‘paged’ => stheme_get_paged())); ?>
<div class="list-post">
<?php if($blog->have_posts()) : ?>
<?php while($blog->have_posts()) : $blog->the_post(); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class(‘blog-posts’); ?> <?php spost_schema(); ?>>
<header class="article-header entry-header">
<?php stheme_template(‘post’, ‘title’); ?>
<span class="postinfo entry-meta">Đăng bởi <?php spost_author_link(); ?> trong chuyên mục: <?php spost_category(); ?> vào ngày: <?php echo get_the_date(); ?></span>
</header>
<div class="article-content">
<?php stheme_template(‘post’, ‘thumbnail’); ?>
<span class="artice-preview">
<?php the_excerpt(); ?>
</span>
<div class="clearfix"></div>
<div class="read-more">
<?php stheme_template(‘post’, ‘comment’); ?>
<span class="more">
<a class="darkbtn" href="<?php the_permalink(); ?>"><span>Xem thêm</span></a>
</span>
</div>
</div>
</article>
<?php endwhile; wp_reset_postdata(); ?>
<?php endif; ?>
</div>
<?php stheme_paginate(array(‘query’ => $blog)); ?>
[/php]

Như ví dụ bên trên, Sáu có truy vấn tùy chọn là $blog, bây giờ mình muốn tạo phân trang cho các bài viết của truy vấn này, hiển thị mỗi trang là 5 bài viết thì mình sẽ dùng lại hàm phân trang như sau:

[php]<?php stheme_paginate(array(‘query’ => $blog)); ?>[/php]

Tuy lần cập nhật này có chỉnh sửa lại đôi chút, nhưng có thể vẫn còn nhiều lỗi trong đó. Các bạn nếu ủng hộ thì hãy sử dụng code này và report lỗi lại giúp mình nhé. Chân thành cảm ơn và chúc bạn thành công.

Lấy category và custom category trong WordPress

Trong bài viết này Sáu sẽ hướng dẫn cho bạn cách lấy chuyên mục và custom taxonomy trên blog WordPress. Yêu cầu của bài này đòi hỏi bạn phải biết về code PHP căn bản cũng như là kiến thức cơ bản về lập trình WordPress.

Lấy tất cả category và custom taxonomy

Yêu cầu của bài viết được đặt ra là, bạn muốn tạo một custom post type mới và trong đó có custom taxonomy đóng vài trò như một category. Bây giờ bạn muốn lấy tất cả các category của bài viết cũng như tất cả các category của custom post type bạn vừa tạo.

Đối với các chuyên mục của bài viết trên blog WordPress thì bạn có thể truy vấn bằng hàm get_categories đã có sẵn trong bộ core.

[php]
<?php
$args = array(
‘orderby’ => ‘name’,
‘parent’ => 0
);
$categories = get_categories( $args );
foreach ( $categories as $category ) {
echo ‘<a href="’ . get_category_link( $category->term_id ) . ‘">’ . $category->name . ‘</a><br/>’;
}
?>
[/php]

Với trường hợp bên trên thì không có gì phải nói nhiều rồi, vì nó đã có sẵn và chúng ta cứ thế mà sử dụng, có điều bạn cũng phải tham khảo thêm bài viết hướng dẫn của WordPress.

Bây giờ, bạn sẽ thực hành viết code lấy tất cả các chuyên mục bao gồm category và custom taxonomy trên trang blog hiện tại. Bạn áp dụng code như Sáu đã làm bên dưới:

[php]
<?php
function stheme_get_taxonomy($term_id = 0) {
$taxonomies = get_taxonomies(”, ‘object’);
if($term_id < 1) {
return $taxonomies;
}
foreach($taxonomies as $tax) {
$terms = get_terms($tax->name);
foreach($terms as $term) {
if($term->term_id == $term_id) {
return $tax;
}
}
}
}
?>
<?php $taxonomies = stheme_get_taxonomy(); ?>
<?php foreach($taxonomies as $tax) : ?>
<?php if(empty($tax->hierarchical) || !$tax->hierarchical) continue; ?>
<?php $terms = get_terms($tax->name); ?>
<?php foreach($terms as $term) : ?>
<?php echo $term->name."<br />"; ?>
<?php endforeach; ?>
<?php endforeach; ?>
[/php]

Code bên trên Sáu sử dụng hàm get_taxonomies để lấy tất cả các taxonomy hiện có trên blog của bạn và trả về với kiểu giá trị là object.

[php]$taxonomies = get_taxonomies(”, ‘object’);[/php]

Sau khi có được danh sách các taxonomy thì bạn duyệt từng taxonomy một và lấy term của nó. Bạn chú ý câu lệnh điều kiện để chúng ta kiểm duyệt xem taxonomy đó có phải là một category hay không:

[php]<?php if(empty($tax->hierarchical) || !$tax->hierarchical) continue; ?>[/php]

Nếu nó không phải là chuyên mục thì chúng ta sẽ bỏ qua, ngược lại nếu taxonomy là chuyên mục thì chúng ta sẽ lấy tất cả các term của nó.

[php]<?php $terms = get_terms($tax->name); ?>[/php]

Như vậy là chúng ta đã có danh sách các chuyên mục, chỉ cần lưu nó lại hoặc là xuất nó ra bên ngoài để sử dụng. Chúc bạn thành công.

Thiết kế giao diện với Font Awesome

Nếu bạn muốn thiết kế giao diện WordPress mà không cần đến hình ảnh thì bài viết này Sáu sẽ hướng dẫn cho bạn cách làm như vậy. Font Awesome là một công cụ tuyệt vời để bạn tạo giao diện website, có hơn 400 icon cho bạn lựa chọn, chỉ cần tích hợp css và font vào là sử dụng, không cần đến javascript hoặc những cái gì cao siêu.

Tạo giao diện WordPress với Font Awesome

Trong bài viết hôm trước Sáu đã hướng dẫn cho bạn cách tích hợp Bootstrap vào WordPress, tuy nhiên với Bootstrap thì bộ icon hỗ trợ kèm theo chưa đầy đủ lắm. Công việc tích hợp Font Awesome cũng tương tự như vậy, bạn chỉ cần tải bộ font và css về, sau đó giải nén và đính kèm vào giao diện của WordPress để sử dụng.

font-awesome.zip

Sau khi tải tập tin về máy tính, bạn giải nén và đổi tên thư mục thành font-awesome, tiếp đến copy nguyên thư mục này bỏ vào giao diện của bạn, sử dụng hàm sau để tích hợp Font Awesome.

[php]
function add_font_awesome() {
wp_register_style(‘font-awesome-style’, get_template_directory_uri() . ‘/lib/font-awesome/css/font-awesome.min.css’);
wp_enqueue_style(‘font-awesome-style’);
}
add_action(‘wp_enqueue_scripts’, ‘add_font_awesome’);
[/php]

Nhớ là thay đổi đường dẫn cho phù hợp với tập tin trong giao diện. Sau khi hoàn thành xong thì bạn đã có thể sử dụng font một cách thoải mái. Cách sử dụng cũng cực kỳ dễ, bạn chỉ cần tìm icon ưng ý và sử dụng lại theo cú pháp sau:

[html]<i class="fa fa-wordpress"></i>[/html]

Xem thêm danh sách tất cả các icon hiện có của Font Awesome trên trang Font Awesome Icons.

Thiết kế giao diện WordPress không cần hình ảnh

Ngoài cách sử dụng trên, bạn có thể chỉnh sửa thuộc tính của css, nếu như các chức năng bạn không thêm được HTML code giống như ví dụ bên trên thì bạn áp dụng phương pháp này:

[css]
a.button-send:before {
font-family: ‘FontAwesome’;
content: "f1d9";
}
[/css]

Rất đơn giản và dễ sử dụng phải không nào. Thiết kế website theo phong cách hiện đại là phải gọn nhẹ và chạy nhanh, nếu giao diện bạn không có dùng hình ảnh thì dĩ nhiên sẽ chạy nhanh hơn so với giao diện có nhiều hình ảnh, đặc biệt là những hình nền có kích thước lớn. Chúc bạn thành công.

Tích hợp Bootstrap vào giao diện WordPress

Bootstrap là một trong những framework phổ biến nhất hiện nay dành cho việc thiết kế website theo phong cách hiện đại. Ngoài khả năng hỗ trợ code giao diện theo chuẩn HTML5 và CSS3 thì Bootstrap còn hướng tới người dùng hay sử dụng thiết bị di động, ở đây chúng ta nói đến thiết kế giao diện theo tiêu chí mobile first.

Tích hợp Bootstrap vào giao diện WordPress

Để tích hợp Bootstrap vào giao diện của WordPress thì bạn cần tải nguyên bộ framework này về từ trên trang chủ của họ. Cụ thể hơn, bạn có thể vào trang thông tin Download Bootstrap để lấy bộ mã nguồn này về.

Đối với giao diện bình thường thì bạn có thể sử dụng Bootstrap CDN, nghĩa là bạn dùng lại link được lấy từ server khác chứ không phải tải và lưu Bootstrap trên hosting của bạn.

[html]
<!– Latest compiled and minified CSS –>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

<!– Optional theme –>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">

<!– Latest compiled and minified JavaScript –>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
[/html]

Để bạn dễ hình dung, một giao diện HTML đơn thuần nếu muốn sử dụng được Bootstrap thì bạn có thể tham khảo đoạn code bên dưới, điều quan trọng ở đây là bạn phải có tập tin css và tập tin javascript chính.

[html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>

<!– Bootstrap –>
<link href="css/bootstrap.min.css" rel="stylesheet">

<!– HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries –>
<!– WARNING: Respond.js doesn’t work if you view the page via file:// –>
<!–[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]–>
</head>
<body>
<h1>Hello, world!</h1>

<!– jQuery (necessary for Bootstrap’s JavaScript plugins) –>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!– Include all compiled plugins (below), or include individual files as needed –>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
[/html]

Và bài viết này Sáu đang hướng dẫn bạn cách tích hợp Bootstrap vào giao diện của WordPress, do vậy nếu bạn muốn thiết kế giao diện WordPress theo hướng chuyên nghiệp thì bạn nên sử dụng hàm theo quy định của WordPress. Cụ thể hơn, bạn sẽ sử dụng những hàm kiểm tra xung đột trước khi đính kèm nó vào giao diện. Hãy sử dụng đoạn code bên dưới vào bên trong tập tin functions.php của giao diện.

[php]
function stheme_add_boostrap() {
wp_register_style(‘bootstrap-style’, get_template_directory_uri() . ‘/lib/bootstrap/bootstrap.min.css’);
wp_enqueue_style(‘bootstrap-style’);

wp_register_script(‘bootstrap’, get_template_directory_uri() . ‘/lib/bootstrap/bootstrap.min.js’, array(), false, true);
wp_enqueue_script(‘bootstrap’);
}
add_action(‘wp_enqueue_scripts’, ‘stheme_add_boostrap’);
[/php]

Trong đoạn code bên trên Sáu đã sử dụng 2 hàm để đăng ký css và javacript với WordPress, nếu có một plugin nào đó cũng tích hợp Bootstrap theo kiểu này thì css và javascript chỉ load có 1 lần duy nhất.

[php] <?php wp_register_style( $handle, $src, $deps, $ver, $media ); ?> [/php]

Hàm bên trên có 1 vài thông số đầu vào bạn cần chú ý:

$handle

Đây là tên bạn đặt cho tập tin css, kiểu dữ liệu là string.

$src

Đây là đường dẫn đến tập tin css, nếu tập tin này được nằm trong thư mục của giao diện thì có thể sử dụng hàm như bên trên Sáu đã nêu.

$deps

Biến này là một mảng các tập tin css liên quan, nếu như tập tin hiện tại cần phụ thuộc vào một tập tin css nào khác thì bạn nêu ra ở đây.

$ver

Biến này là một chuỗi hoặc một giá trị đúng hay sai (bool) để chỉ phiên bản của tập tin hiện tại.

$media

Media của tập tin css là gì, nếu bạn không điền thì mặc định media sẽ là all.

[php] <?php wp_register_script( $handle, $src, $deps, $ver, $in_footer ); ?> [/php]

Hàm này dùng để đăng ký tập tin javascript, các biến đầu vào tương đối giống với hàm đăng ký tập tin css, chỉ khác có một biến duy nhất đó là $in_footer. Đây là một biến với kiểu dữ liệu là bool, nếu bạn muốn load javascript ở dưới cùng của trang web thì dùng là true.

Kết luận

Như vậy là bạn đã biết được cách tích hợp Bootstrap vào bên trong giao diện của WordPress. Tuy đây là những đoạn code đơn giản nhưng bạn phải để ý tới nó vì tất cả nội dung của bài viết này sẽ giúp ích cho bạn rất nhiều trong khâu lập trình giao diện và plugin cho WordPress.

Tuy nhiên, bạn cần phải tìm hiểu thêm về cách thức hoạt động cũng như là sử dụng các lớp css như thế nào cho phù hợp, những nội dung hướng dẫn đều có trên trang CSS của Bootstrap. Bạn cũng có thể tham khảo những trang web mẫu được đính kèm trên này để biết thêm thông tin. Chúc bạn thành công.

Tạo tài khoản PayPal Sandbox để thử code

Sáu đã viết bài hướng dẫn tạo nút thanh toán đơn giản bằng PayPal nhưng chưa giới thiệu cho bạn làm cách nào để test thử chức năng cái nút này hoạt động như thế nào. Bài viết này Sáu sẽ hướng dẫn cho bạn cách tạo tài khoản PayPal Sandbox để chạy thử code trước khi đưa nó vào hoạt động thật trên trang chính.

Tạo tài khoản PayPal Sandbox để thử code

Có 2 cách bạn có thể tạo được tài khoản Sandbox, bạn có thể vào trang PayPal Developer để đăng nhập và tạo cho mình một tài khoản. Mà tốt nhất thì nên tạo 2 tài khoản, một cái để test nhận tiền và một cái để test chuyển tiền.

Đối với trang PayPal Developer bạn có thể đăng nhập bằng tài khoản PayPal chính của mình hoặc có thể đăng ký một tài khoản mới tại trang Sign up for a business account.

Sau khi bạn đã có tài khoản PayPal và đăng nhập vào hệ thống dành riêng cho các developer, bạn nhìn vào thanh menu chính và vào trang Applications.

Tiếp tục nhìn sang menu bên trái và bạn sẽ thấy menu Sandbox accounts, hãy vào đó và nhấn vào nút Create Account để tạo thêm tài khoản mới. Bạn có thể tạo 2 hoặc 5 tài khoản gì tùy thích, mà nói chung chỉ cần 2 tài khoản là có thể sử dụng được rồi.

Trang chủ PayPal Sandbox

Cách thứ 2 là bạn có thể vào trang chủ PayPal sandbox để tạo tài khoản, giao diện và chức năng của trang Sandbox cũng giống như trang chủ của PayPal, tuy nhiêu giao dịch và tiền bạc trên sandbox chỉ để test, không sử dụng để mua bán thật được, và bạn có thể chuyển khoản hoặc nhận tiền thoải mái. Chúc bạn thành công.