Hướng dẫn sử dụng shortcode chèn link aff và ảnh định dạng đẹp

Thảo luận trong 'Hỏi Đáp Thủ Thuật WordPress, Code, CSS'

  1. dotritiep

    dotritiep Active Member VIP

    Bài này mình sẽ hướng dẫn các bạn cách chèn link aff một cách nhanh nhất.
    Phương pháp này có nhiều ưu điểm như sau:
    + Bạn không phải chèn tag_aff cho tất cả các link. Như vậy nếu bạn muốn đổi tag_aff thì chỉ đổi một lần và tất cả sẽ đổi theo
    + Giúp chèn button aff và ảnh một cách nhanh nhất, tiết kiệm thời gian
    Bắt đầu nhé
    Bước 1. Chỉnh sửa css. Đăng nhập vào quản trị/Appearance/Edit
    Tìm và chỉnh sửa như sau:
    Mã:
    button, input[type="button"], input[type="reset"], input[type="submit"], .button, .entry-content .button {
        background: none repeat scroll 0 0 #eb4923;
        border: medium none;
        border-radius: 0.5rem;
        box-shadow: none;
        color: #fff;
        cursor: pointer;
        font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
        padding: 1rem;
        width: auto;
    }
    Tiếp theo kéo xuống cuối file css đó và thêm như sau:
    Mã:
    .imgbox {
        border: 1px solid #e3e3e3;
        float: right;
        margin: 10px;
    padding-bottom: 10px;
    text-align: center;   
    }
    .star {
        background-image: url("http://i.imgur.com/lZBSo86.png");
        background-repeat: no-repeat;
        display: inline-block;
        height: 22px;
        width: 95px;
    }
    .star-4 {
        background-position: -24px -2px;
    }
    .star-4-5 {
        background-position: -205px -2px;
    }
    .star-5 {
        background-position: -5px -2px;
    }
    Xong phần CSS

    Bước 2. Thêm shortcode
    Cũng trong phần Editor đó bạn chọn vào ThemFuntions

    [​IMG]

    Kéo xuống cuối và chèn thêm đoạn mã sau
    Mã:
    function add_link_af( $args, $content ) {
        $content = '<p><input type="button" onclick="window.open(\'http://www.amazon.com/dp/'.$args['code'].'/?tag=tag_id_amazoncuaban-20\');" value="Check on Amazon.com" /></p>';
    return $content;
    }
    add_shortcode('link_af', 'add_link_af');
    
    function add_image_products( $args, $content ) {
       $content = '<div class="imgbox"><img src="http://ecx.images-amazon.com/images/I/'.$args['img_code'].'._AA199_.jpg" alt="'.$args['alt'].'"/><div><i class="star '.$args['star_class'].'"></i></div><input type="button" value="'.$args['reviews'].' customer reviews" onclick=" window.open(\'http://www.amazon.com/dp/'.$args['code'].'/?tag=tag_id_amazoncuaban-20\');"></div>';
     return $content;
    }
    add_shortcode('img_products', 'add_image_products');
    add_filter('widget_text', 'do_shortcode');
    Giải thích:
    - tag_id_amazoncuaban-20: Bạn sửa thành tag_id trên amazon của bạn
    - AA199: Kích thước hình ảnh tùy chỉnh theo site của bạn. Ở đây mình đặt là 199px

    Bước 3. Thêm vào bài viết hoặc Wiget
    1. Thêm button aff

    [link_af code="ASIN"]
    -ASIN: Thay bằng mã sản phẩm tương ứng
    Kết quả: [​IMG]
    2. Thêm hình ảnh sản phẩm
    [img_products img_code="IMGCODE" alt="ALTCODE" star_class="star-4" code="ASIN" reviews="1372+"]

    Giải thích:
    - ASIN: Thay bằng mã sản phẩm tương ứng
    - IMGCODE: thay bằng mã hình ảnh sản phẩm
    - ALTCODE: thay tên sản phẩm hoặc cái gì tương tự
    - star-4: Thay tương ứng như sau:
    • star-4 : 4 sao
    • star-4-5 : 4,5 sao
    • star-5 : 5 sao
    - reviews: Nhập số lượng review của sản phẩm

    Kết quả tương tự như sau:
    [​IMG]
    Quang Vũ, tuankhoa244, luomvechai17 others thích bài này.
  2. dotritiep

    dotritiep Active Member VIP

    Lưu ý: Khi chèn shortcode thì đừng để tô đậm nhé, mình tô đậm để cho các bạn dễ nhìn thấy để thay tương ứng
  3. admin

    admin Administrator Staff Member

    Thank anh, em mấy lần định viết hướng dẫn anh em mà ko có thời gian viết nổi, em làm cũng giống anh nhưng e dùng plugin my shortcode thì nó ko lo bị sai sót nếu bạn nào sửa trong functions nên backup cẩn thận nhé. Bật mí là đặt button và rating dưới ảnh ctr tăng khá cao nhé!
  4. dotritiep

    dotritiep Active Member VIP

    Đúng rồi nhé! Anh em chèn trong funsions thì sử dùng FTP để chèn hoặc sử dụng plugin my shortcode như khuê nói cho an toàn. Những người biết về wordpress thì không sao sợ những người không biết kỹ thì chèn sai là web lỗi ngay.
    P/S Khuê: Anh chèn trực tiếp để đỡ phải cài thêm 1 plugin. Nay có mấy anh em trong nhóm hỏi nên tiện anh viết luôn
  5. hay quá đúng cái mình đang cần, thank bạn.
  6. Tuan Pham

    Tuan Pham New Member

    Hay quá. Cảm ơn anh @dotritiep nhé !!

    Giá mà có plugin chèn và sửa (quản lý) 1 loạt thì anh em làm mà sướng như tiên :v
  7. KunNuK

    KunNuK Active Member VIP

    cho em hỏi sao của em cái star rating nó k cân giữa mà cứ lệch qua trái nhỉ?
  8. truongcongthuong

    truongcongthuong Active Member

    Cái IMGCODE là gì nhỉ ? Mình k hiểu chổ này
  9. dotritiep

    dotritiep Active Member VIP

    View cái ảnh sản phẩm lên
    Ví dụ: http://ecx.images-amazon.com/images/I/7143qVHvIJL._SL1500_.jpg
    Phần màu đỏ là IMGCODE
  10. dotritiep

    dotritiep Active Member VIP

    Cập nhật đúng css chưa? Cập nhật rồi thì ra trang chủ bấm Ctrl+F5 để nó cập nhật lại
  11. truongcongthuong

    truongcongthuong Active Member

    Ok. Đã hiểu. Thank bạn :)
  12. duc

    duc Well-Known Member

    Good.
    Ý kiến cá nhân: Bạn nên thêm #customerReviews vào sau link customer reviews.
  13. hunglep

    hunglep Active Member VIP

    Mình làm theo hướng dẫn ok hết, có mỗi chỗ đoạn Star 4, -4-5 j nó ko đúng, nó đều ra 1 hình như thế này hết, bạn xem code có lỗi gì ko?

    Các file đính kèm:

  14. dotritiep

    dotritiep Active Member VIP

    Bạn inbox web cho mình thì mới xem giùm được, chứ như thế này thì cũng k ai giúp được
  15. Giúp với bạn ơi,
    Mình dùng My Shortcodes để tạo các nút, nhưng
    Khi chèn vào các bài mới tạo chưa Publish thì đã ok, làm được như này:[​IMG]

    Khi chèn vào các bài cũ đã Publish thì làm bị xấu như này: [​IMG]

    Không hiểu sao nữa, làm mãi ko được bực mình quá đi, sao mà nhiều vấn đề thế ko biết.
  16. kinhcan4do

    kinhcan4do Member

    nếu dùng code mẫu thì làm sao để định dạng ảnh sản phẩm ở bên trái bài viết còn text xung quanh nó ạ?
    cái nút em làm ra nó màu xanh, sửa thế nào để ra màu đỏ
    làm ra thì không thấy chấm điểm sao đâu ạ :(
  17. thanhtubui86

    thanhtubui86 Active Member VIP

    Mình không biết về code lắm nhưng theo mình suy luận thì bạn có thể chuyển chỗ bôi đỏ thành left để ảnh nằm bên trái
    .imgbox {
    border: 1px solid #e3e3e3;
    float: right; ----> left
    margin: 10px;
    padding-bottom: 10px;
    text-align: center;
    }
  18. kinhcan4do

    kinhcan4do Member

    thanks, mình làm được rồi ạ :)
  19. Thanks bác Hiệp
  20. admin

    admin Administrator Staff Member

    Mọi người không muốn sửa code sợ hỏng thì có thể làm theo cách này.
    Bạn làm như sau:
    1. Cài plugin my shortcodes
    2. Tạo mới 1 element mang tên imgbox
    3. Tạo 5 attributes có slug lần lượt là:
    • imgalt - alt của ảnh - tên sản phẩm - phục vụ SEO
    • imgurl - url của ảnh (nhớ xóa phần ._SS1500_ hay gì đó tương tự khi copy link ảnh
    • asin - không nói ai cũng biết :)
    • anchor - để viết số lượng reviews, ví dụ: 494 customer reviews
    • rating: nếu 4 sao thì lúc sau nhập là 4, 5 sao thì nhập là 5, 4,5 sao thì nhập 4-5
    4. Click sang tab html nhập cái này:
    Mã:
    <div class="imgbox">
        <div style="text-align: center;">
        <img class="aligncenter" src="{{imgurl}}" alt="{{imgalt}}" width="300" height="300" />
        <div><i class="star star-{{rating}}"></i></div>
    <input onclick=" window.open('http://www.amazon.com/dp/{{asin}}/?tag=online0ef0-20#customerReviews');" type="button" value="{{anchor}}">
        </div>
    </div>
    Nhớ thay ID
    5. Click sang tab css nhập cái này:
    Mã:
    .imgbox {
        float:right;
        border: 1px solid #e3e3e3;
        margin:10px;
    }
    @media only screen and (max-width: 360px) {
        .imgbox {
            margin:0px;
            }
      
    }
    .star {
    background-image: url("http://i.imgur.com/lZBSo86.png");
    background-repeat: no-repeat;
    display: inline-block;
    height: 22px;
    width: 95px;
    }
    .star-4 {
    background-position: -24px -2px;
    }
    
    .star-4-5 {
    background-position: -205px -2px;
    }
    
    .star-5 {
    background-position: -5px -2px;
    }
    Xong rồi lưu lại và ra ngoài activate shortcode lên, khi vào soạn thảo bài viết sẽ thấy nút Myshortcode click vào đó rồi chọn shortcode vừa tạo là xong.
    Ngô Văn Long, Lính Mới, huuawesome7 others thích bài này.

Chia sẻ trang này