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

Thảo luận trong 'Wordpress Plugins' bắt đầu bởi PVS, 14/06/2018.

  • Google checker:
  1. PVS

    PVS Cộng Sự Đặc Biệt Thành viên BQT

    Tham gia:
    28/02/2015
    Bài viết:
    9,352
    Đã được thích:
    6,232
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nghề nghiệp:
    SV
    Nơi ở:
    Huế
    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

    wpfavoritepost-button.jpg
    Sau khi Hãy đăng nhập hoặc đăng ký để xem được links, 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.

    wpfavoritepost-page.jpg
    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.

    wpfavoritepost-setting.jpg
    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.
    Mã:
    .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​
     

    Các file đính kèm:

Chia sẻ trang này

Đang tải...