Thêm tính năng bài yêu thích vào WordPress

Trong lúc đọc bài, nếu thấy bài đó hay thì độc giả có thể chọn nhiều cách để lưu bài đó lại nhằm sau này đọc tiếp. Cụ thể ở blog mình có kèm theo một nút Pocket để họ lưu bài viết vào tài khoản Pocket của họ.

Nhưng vấn đề là không phải ai cũng có thói quen sử dụng dịch vụ Pocket cả mà đôi khi họ cần một phương thức đơn giản hơn để lưu lại các bài hay.

Nếu bạn cần tìm cách làm tính năng lưu bài yêu thích trực tiếp ngay trên blog thì ở bài này mình sẽ hướng dẫn các bạn cách dùng plugin mang tên WP Favorite Posts. Cơ chế làm việc của plugin này đó là lưu lại các bài mà họ thích thông qua session của trình duyệt.

Tải plugin Hỗ trợ

Cài đặt WP Favorite Posts

Sau khi cài đặt plugin, hãy tạo một page mới với nội dung là {{wp-favorite-posts}}. Thẻ này sẽ có tác dụng hiển thị các bài mà họ thích.

Bạn có thể đưa page này lên menu hoặc ở đâu đó tùy bạn.

Tiếp tục vào Appearance >> Widget và thêm widget tên Most Favorite Posts vào sidebar nếu bạn muốn nó hiển thị danh sách bài mà họ yêu thích vào sidebar.

Cuối cùng là vào Settings >> WP Favorite Posts để thiết lập lại các thông số cần thiết. Trong đó bao gồm tùy chọn tự động hiển thị hoặc hiển thị thủ công dành cho bạn nào biết một chút về code.

Vậy là bây giờ bạn đã có thể thấy nút thêm bài yêu thích ngay dưới cuối bài rồi nhé. Nếu thấy nó xấu thì có thể dùng CSS làm cho nó đẹp hơn. Nếu không biết CSS bạn có thể thử chèn đoạn này vào file style.css của theme.

CSSCopy

.wpfp-link {

-moz-box-shadow: inset 0px 1px 0px 0px #d9fbbe;

-webkit-box-shadow: inset 0px 1px 0px 0px #D9FBBE;

box-shadow: inset 0px 1px 0px 0px #D9FBBE;

background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #B8E356), color-stop(1, #A5CC52) );

background: -moz-linear-gradient( center top, #b8e356 5%, #a5cc52 100% );

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b8e356′, endColorstr='#a5cc52′);

background-color: #B8E356;

-webkit-border-top-left-radius: 20px;

-moz-border-radius-topleft: 20px;

border-top-left-radius: 20px;

-webkit-border-top-right-radius: 20px;

-moz-border-radius-topright: 20px;

border-top-right-radius: 20px;

-webkit-border-bottom-right-radius: 20px;

-moz-border-radius-bottomright: 20px;

border-bottom-right-radius: 20px;

-webkit-border-bottom-left-radius: 20px;

-moz-border-radius-bottomleft: 20px;

border-bottom-left-radius: 20px;

text-indent: 0px;

border: 1px solid #83C41A;

display: inline-block;

color: #FFF;

font-family: Arial;

font-size: 15px;

font-weight: bold;

font-style: normal;

/* height: 37px; */

line-height: 37px;

width: auto;

text-decoration: none;

text-align: center;

text-shadow: 1px 1px 0px #86AE47;

padding: 0 1em;

}

.wpfp-link:hover {

	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #a5cc52), color-stop(1, #b8e356) );

	background:-moz-linear-gradient( center top, #a5cc52 5%, #b8e356 100% );

	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#a5cc52′, endColorstr='#b8e356′);

	background-color:#a5cc52;

}.wpfp-link:active {

	position:relative;

	top:1px;

}

Xong rồi đấy. 😀