WP Favorite Posts - Plugin thêm tính năng bài viết yêu thích vào WordPress

[PVS]

WP Favorite Posts - Plugin thêm tính năng bài viết 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. Nếu 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 viết này sẽ hướng dẫn cách dùng plugin WP Favorite Posts. Cơ chế làm việc của plugin này đó là lưu lại các bài mà độc giả thích thông qua session của trình duyệt.

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à đọc giả đã thích.

​

Có thể đưa page này lên menu hoặc ở đâu đó tùy thích.

Tiếp tục vào Appearance >> Widget và thêm widget tên Most Favorite Posts vào sidebar nếu muốn nó hiển thị danh sách bài mà độc giả 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.

​

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. 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 có thể thử chèn đoạn này vào file style.css của theme.

.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;
}

Vậy là xong.

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

Nguồn: Thachpham​