WordPress Meta slider API

Quảng cáo
Ads_ngang
Website dinhthuanit.com có bài WordPress Meta slider API

Bài trước mình có bài tổng hợp các plugins làm slideshow đẹp cho wordpress trong đấy plugin meta slider được đánh giá cao bởi tính đa chủng loại và cài đặt dễ dàng. Plugin này được biết bao các website cài đặt và sử dụng. Trong bài hôm nay mình sẽ chỉ dẫn các bạn sử dụng meta slider api (Filters – Actions) mà plugins cung cấp để giúp bạn tùy biến nhiều hơn.

MetaSlider Shortcode

Cách đơn giản nhất là sử dụng shortcode để chèn slideshow vào trong website. Bạn cũng có thể chèn trực tiếp mã shortcode vào nội dung post/page hoặc widget text.

   [  metaslider id  =  xxxx  ]   

Với xxxx là ID của slider, bạn sẽ tìm thấy mã shortcode khi đang tạo slider tại box Uage.

Nếu như bạn chèn cố định trong template thì sử dụng hàm hiển thị do_shortcode .

    <?php     echo   do_shortcode  (    "[metaslider >   )    ;     ?>      

Trong trường hợp, bạn không thích sử dụng mặc định giao diện slideshow của meta slider. Giả sử bạn có theme nào đó, có sẵn đoạn js tạo slideshow và muốn lấy dữ liệu ảnh của slider được tạo bởi plugin meta slider. Vậy thì làm thế nào?

Lấy dữ liệu ảnh của meta slider ( get images array from meta slider )

Để thực hiện được điều này, chúng ta sẽ sửa lại 1 chút đoạn mã trong file ml-slider/ml-slider.php . Tiến hành mở file plugins/ml-slider/ml-slider.php với notepadd++:

Tìm tới dòng chứa hàm init()

   public   static   function   init  (    )     {   

Thêm dòng này vào cuối nội dung hàm.

   return     $metaslider    ;   

Viết thêm class myslider vào với file ml-slider.php này. Tạm thời mình lấy tên “mysilder”, bạn cũng có thể có thể đổi lại nếu như bị trùng với class trước đấy và chép nội dung của lớp này vào file.

   class   myslider  {   static   $object    ;   static   function   init  (    )    {     self    ::    $object    =  MetaSliderPlugin  ::    init    (    )    ;     }     }   

Sửa lại dòng cuối cùng thành:

 add_action  (     'plugins_loaded'    ,     array    (     'myslider'    ,     'init'     )    ,     10     )    ;   

Mục đích của việc can thiệp code của plugin này, để chúng ta cũng có thể có thể quản lý instance của meta slider. Như vậy là đã xong.

Bước kế đến là sử dụng slider. Trong admin tạo meta slider như bình thường, giả sử mình có slider với ID=87. Để lấy dữ liệu ảnh slider này, bạn dùng 2 hàm sau:

 myslider  ::    $object    ->     set_slider    (    87    )    ;     $query    =  myslider  ::    $object    ->     slider    ->     get_slides    (    )    ;     while     (     $query    ->     have_posts    (    )     )     {     $query    ->     next_post    (    )    ;     print_r     (  wp_get_attachment_image  (    $query    ->     post    ->     ID    ,    'full'    )    )    ;     print_r    (  wp_get_attachment_image_src  (    $query    ->     post    ->     ID    ,    'full'    )    )    ;     }   

Hàm trước mắt sẽ lấy nội dung của slider có ID=87 về biến myslider::$object-> slider . Như vậy bạn có thể bắt đầu truy xuất mảng chứa các ảnh đã được bạn thêm vào slider, sử dụng wordpress query data. Đọc thêm bài hướng dẫn lấy dữ liệu bài viết trong wordpress và các wordpress template tags hay dùng.

Nếu bạn mong muốn lấy mã html của slide thì sử dụng biến myslider::$object-> slider-> slides . Biến trả về mảng chứa slides dạng HTML:

   Array     (     [    0    ]     =>       <  li style  =    "display: none; float: left; width: 100%;"    >  <  img src  =    "http://localhost/wp2/genesis/wp-content/uploads/sites/4/2014/08/advanced-custom-field-700x300.jpg"   height  =    "300"   width  =    "700"   alt  =    ""     class    =    "slider-87 slide-88"     />  </ li  >      [    1    ]     =>       <  li style  =    "display: none; float: left; width: 100%;"    >  <  img src  =    "http://localhost/wp2/genesis/wp-content/uploads/sites/4/2014/08/author-box-genesis-301x129.jpg"   height  =    "300"   width  =    "700"   alt  =    ""     class    =    "slider-87 slide-89"     />  </ li  >      )   

Nếu muốn tiếp tục lấy slider data khác, bạn làm tương tự quay trở lại gọi hàm khởi tạo cho slider cần lấy set_slider và sau đó lấy dữ liệu của slider là xong. Kết quả trả về mảng

metaslider_{type}_slider_parameters

Sử dụng filter này để cài đặt tham số cho hàm khởi tạo slider. {type} là tên thư viện sử dụng cho slider, như chúng ta đã biết meta slider bổ trợ 3 thư viện: flex, coin, responsive và nivo.

   function   metaslider_flex_params  (    $options    ,     $slider_id    ,     $settings    )     {     if     (    $slider_id     ==     123    )     {     // check for slider ID (optional)     $options    [    'startAt'    ]     =     2    ;     // startAt: 2     $options    [    'animationLoop'    ]     =     "false"    ;     // animationLoop: false     $options    [    'namespace'    ]     =     "'flex-'"    ;     // namespace: 'flex'     $options    [    'start'    ]    [    ]     =     "alert('hello');"    ;     // start: function() { alert('hello'); }     }     return     $options    ;     }   add_filter  (    'metaslider_flex_slider_parameters'    ,     'metaslider_flex_params'    ,     10    ,     3    )    ;   

Đoạn code trên sử lý cho những slider đã tạo trong meta slider. Trong đó 3 tham số được truyền vào filter cho thấy cấu hình ID của từng slider.

  • $options: tùy biến nâng lên cho slider.
  • $slider_id: chỉ số định vị slider.
  • $settings: phần cài đặt cơ bản của slider. Chính là cài đặt trong mục Advanced Settings khi tạo slider.

Giải thích chi tiết cài đặt:

  • startAt: slider bắt đầu với chỉ số ảnh này. Chỉ số tính từ 0
  • animationLoop: Nếu true slider sẽ luôn chuyển các ảnh và lặp vô hạn.
  • namespace: đặt prefix cho thuộc tính class cho mọi thành phần trong slider.
  • start: bạn có thể chạy các lệnh javascript trước khi slider được sử lý. Có thể tạo nhiều nhóm lệnh chứa trong mảng $options['start']

metaslider_{type}_slider_javascript_before

Bạn có thể chèn thêm một quãng js chạy trước với mục tiêu sẽ chạy trước khi slider được hiển thị. {type} định vị kiểu slider mặc định với những giá trị “flex”, “coin”, “responsive ” và “nivo”. Về sau khi nhìn thấy {type} các bạn sẽ hiểu là như vậy mình sẽ không nhắc đến lại nữa.

   function   metaslider_nivo_js  (    $javascript    ,     $slider_id    )     {     $javascript     .=     "alert('Nivo slider is about to be initiated.');"    ;       return     $javascript    ;     }   add_filter  (    'metaslider_nivo_slider_javascript'    ,     'metaslider_nivo_js'    ,     10    ,     2    )    ;   

Chèn thêm nội dung chuỗi js vào phần nội dung js của meta slider $javascript cấu hình cho slider có id là $slider_id .

metaslider_{type}_slider_javascript

Ngược lại với metaslider_{type}_slider_javascript_before , filter này sử lý thêm js sau khi đã gọi phần js của slider.

   function   metaslider_nivo_js  (    $javascript    ,     $slider_id    )     {     $javascript     .=     "alert('Nivo slider has loaded');"    ;       return     $javascript    ;     }   add_filter  (    'metaslider_nivo_slider_javascript'    ,     'metaslider_nivo_js'    ,     10    ,     2    )    ;   

metaslider_{type}_slider_anchor_attributes

Sử dụng filter này nếu bạn mong muốn sửa lại tính chất của thẻ liên kết cho ảnh slideshow (anchor tag A) của slider. Ví dụ sau sẽ tự động tạo liên kết cho mỗi slide cho địa điểm ảnh Full của nó.

   function   metaslider_add_full_url_to_slides  (    $attributes    ,     $slide    ,     $slider_id    )     {     if     (    !    strlen    (    $attributes    [    'href'    ]    )    )     {     $attributes    [    'href'    ]     =   wp_get_attachment_url  (    $slide    [    'metaslider_flex_slider_anchor_attributes'    ,     'metaslider_add_full_url_to_slides'    ,     10    ,     3    )    ;   

metaslider_{type}_slider_image_attributes

Nếu bạn mong muốn sửa tính chất của thẻ img cho mỗi slide, thì sử dụng filter này. Ví dụ sau đây thêm/sửa thuộc tính rel cho tính năng lightbox .

   function   metaslider_add_rel_attribute_to_images  (    $attributes    ,     $slide    ,     $slider_id    )     {     $attributes    [    'rel'    ]     =     'lightbox'    ;     return     $attributes    ;     }   add_filter  (    'metaslider_flex_slider_image_attributes'    ,     'metaslider_add_rel_attribute_to_images'    ,     10    ,     3    )    ;   

metaslider_image_{$type}_slider_markup

Filter này cho phép bạn sửa toàn bộ cấu trúc HTML của mỗi slide trong tất cả những slider được tạo bởi Meta Slider. Ví dụ sau sẽ thêm HTML vào sau mỗi slide.

   function   metaslider_append_pinit_button  (    $html    ,     $slide    ,     $settings    )     {     return     $html     .=     " 
Pin It
"
; } add_filter ( 'metaslider_image_coin_slider_markup' , 'metaslider_append_pinit_button' , 10 , 3 ) ;

$html chứa nội dung thẻ li và mỗi slide là một thẻ li. Cấu trúc HTML của slide sẽ có dạng:

  
  • metaslider_resized_image_url

    Sử dụng filter này cho bạn thay đổi đường ảnh của slide. Ví dụ bạn cũng có thể có thể đổi đường dẫn absolute URL thành relative URL. Đoạn code sau đây các slide sẽ sử dụng kích cỡ của ảnh gốc.

       function   metaslider_disable_crop  (    $cropped_url    ,     $orig_url    )     {     return     $orig_url    ;     }   add_filter  (    'metaslider_resized_image_url'    ,     'metaslider_disable_crop'    ,     10    ,     2    )    ;   

    metaslider_default_parameters

    Bạn có thể thay đổi lại cấu hình mặc định của slideshow.
    cài đặt meta slider setting
    Lưu ý: sử dụng filter này chỉ có công hiệu với slideshow đầu tiên trong những slideshow được tạo trong meta slider.

       function   metaslider_default_slideshow_properties  (    $params    )     {     $params    [    'width'    ]     =     960    ;     $params    [    'height'    ]     =     300    ;     return     $params    ;     }   add_filter  (    'metaslider_default_parameters'    ,     'metaslider_default_parameters'    ,     10    ,     1    )    ;   

    metaslider_hoplink

    Mình nói bạn cũng có thể kiếm tiền với filter này, bạn có tin không? quả thật vậy. Meta slider có 2 phiên bản bản pro và miễn phí. Với bản pro người sử dụng có các gói để nâng cấp. Bạn có thể bán plugin meta slider dưới referer của bạn. Mở lại trang cấu hình meta slider, bạn nhìn thấy ở trên có nút cải tiến không? Mặc định địa chỉ nâng cấp plugin này sẽ không có referer, để sửa lại thành referer của bạn, hãy chèn đoạn code dưới đây vào functions.php

       function   metaslider_hoplink  (    $link    )     {     return     "https://getdpd.com/cart/hoplink/15318?referrer=pjh3bvwmies8s0"    ;     }   add_filter  (    'metaslider_hoplink'    ,     'metaslider_hoplink'    ,     10    ,     1    )    ;   

    Bạn thắc mắc vậy thế nào bán được, nếu không có một banner nào đó chứa liên kết với meta slider referer của mình? Các bạn lưu ý cách kiếm tiền này chỉ dành cho người viết thuê web thôi đấy nhé. Khi bạn tạo theme wordpress có sử dụng meta slider làm slideshow cho website của khách hàng thì nhớ thêm dòng trên vào functions.php hay plugins của bạn.

    Cách lấy liên kết giới thiệu referer của meta slider.

    Truy cập vào trương trình kiếm tiền với meta slider tại đây. Kéo xuống dưới, bạn nhấn vào nút I need an account để tạo một tài khoản affiliate. Điền các tin tức vào form và nhấn Create Account. Sau khi hình thành công tài khoản, bạn được chuyển sang trang quản lý. Tại đây bạn có thể xem được số chi phí mình tìm được khi có người cải tiến meta slider plugin.

    Nhấn vào Get Link Codes như trong hình:
    kiếm tiền với wordpress plugin meta-slider . Tại trang tiếp theo, bạn ấn vào liên kết generate hoplink , để lấy địa chỉ referer.

    kiếm tiền với wordpress plugin meta slider

    Chúc các bạn ngủ đủ giấc nha! 11h rùi, mình đi ngủ đây.

    Nếu bạn thích bài viết này, hãy cỗ vũ chúng tôi bằng phương pháp đăng ký nhận bài viết mới ở bên dưới và đừng quên chia sẻ kiến thức này với bạn bè của bạn nhé. Bạn cũng có thể theo dấu blog này trên Twitter và Facebook

    Bài viết WordPress Meta slider API được tổng hợp và biên tập bởi: dinhthuanit.com. Mọi ý kiến đóng góp và phản hồi vui lòng gửi Liên Hệ cho dinhthuanit.com để điều chỉnh. dinhthuanit.com xin cảm ơn.

    Bài Viết Liên Quan


    Bài Viết Khác


    Quảng cáo
    Ads_ngang