Tạo gallery ảnh cho wordpress

Quảng cáo
Ads_ngang
Website dinhthuanit.com có bài Tạo gallery ảnh cho wordpress

WordPress tuy được ví như mini-blog, nhưng vô cùng sức mạnh. Bạn chẳng những tạo blog đơn thuần, sử dụng wordpress để tạo trang webtin tức, web bán hàng, …nếu bạn ham thích khám phá thì mình tin wordpress sẽ không làm bạn thất vọng.
gallery

Trong bài bữa nay mình sẽ chỉ dẫn các bạn nhóm các ảnh cùng nhau thành gallery và liên kết với bài viết (post).

Mặc định wordpress hỗ tợ gallery shortcode, mà không hỗ trợ hàm trích xuất ảnh có trong bài viết. gallery shortcode hiển thị chuỗi html chứa trong thẻ div, dl, dt. Để chèn gallery shortcode rất đơn giản. click vào Add Media như hình dưới:

create-gallery-wp
Ngay sau đó mã gallery shortcode được chèn vào editor. Ví dụ:

   [  gallery ids  =    "1099,1098,1097"    ]   

Thuộc tính ids chứa id của các ảnh, cách nhau bởi dấu phẩy.

Nếu bạn muốn mảng danh sách các image attachments thuộc sở hữu post/page hoặc in ra tag img. Mẫu code sau đây là một ví dụ:

    <   ?php   $images     =&   get_children  (     array     (     'post_parent'     =>      $post    ->     ID    ,     'post_type'     =>      'attachment'    ,     'post_mime_type'     =>      'image'     )    )    ;       if     (     empty    (    $images    )     )     {     // no attachments here     }     else     {     foreach     (     $images     as     $attachment_id     =>      $attachment     )     {     echo   wp_get_attachment_image  (     $attachment_id    ,     'thumbnail'     )    ;     }     }     ?>    

– Nhìn qua get_children được hiểu là lấy dữ liệu thuộc sở hữu của post/page. Đối tượng là ảnh nên xác định kiểu dữ liệu là attachment khai báo ở tham số post_type , post_mime_type là image và thiết lập post_parent là post id muốn lấy ảnh. Sử dụng $post-> ID trả về post id.

– Tại sao phải sử dụng thêm post_mime_type , vì attachment gồm những: image, zip, pdf,.audio file. Ở đây chúng ta chỉ lấy image. Nếu bạn lấy video sẽ là ‘post_mime_type’=> ’video’. Tham khảo thêm hàm get_children.

– Hàm wp_get_attachment_image trả về tag img của ảnh có id $attachment_id với ảnh có kích cỡ ‘thumbnail’.

   echo   wp_get_attachment_image  (     $attachment_id    ,     'thumbnail'     )    ;   

Một số hàm trả về URL của ảnh như wp_get_attachment_link , cái này bạn tự tìm hiểu nha.
Có sẵn 3 kích thước có thể trả về: ‘thumbnail’,’medium’,’large’. Ngoài ra nếu muốn điều chỉnh kích thước ảnh (custom image size), sửa kích cỡ ở trang settings-> media, xem thêm ở đây http://codex.wordpress.org/Function_Reference/add_image_size.

Đó cách mau chóng và đơn giản để chữa cháy cần một quãng code ngắn để lấy ảnh của post. Ngoài cách trên những wordpress gallery plugins mình giới thiệu dưới đây cũng đáng để xài đấy nhé.

Một số WordPress Gallery Image Metabox plugin

Gallery Metabox

gallery-metabox-wp

Plugin Gallery Metabox hiển thị tất cả các ảnh được liên kết với post/page trong phần edit screen. Sau khi kích hoạt plugin, Gallery metabox sẽ xuất hiện trong giao diện chỉnh sửa mỗi post/page.

gallery-metabox-wp

Cách Chèn ảnh vào gallery images metabox

Nhấn vào nút “upload images”, bạn sẽ thấy mọi thứ những ảnh được sử dụng bởi Gallery images sẽ hiển thị ở tab Gallery. Không được chèn ảnh sử dụng tab Media Library, mà insert trực diện ở tab From Computer. Sau khi chèn hình xong, tắt cửa sổ popup trở về khung gallery images bấm vào Update Gallery để nạp lại ảnh.
Cập nhật : Phiên bản mới đồng bộ với gallery của post, chúng ta có thể insert media vào post và bấm vào Update Gallery là tự động cập nhật vào box Gallery Images.
gallery images wordpress plugin

Sử dụng Filters dành cho developer

Plugin cung cấp biết bao filter hook tha hồ chỉnh sửa theo ý tưởng phù phù hợp với mục đích của bạn.

Thay thế nút upload ảnh của plugin

Sửa đổi/thay thế các nút quản lý ảnh: Upload Images, Manage Gallery, Update Gallery sử dụng filter be_gallery_metabox_intro.

 add_filter  (     'be_gallery_metabox_intro'    ,     'sample_change_gallery_metabox_intro'     )    ;     /** * Change Gallery Metabox Intro * @author Bill Erickson * @link http://www.billerickson.net/code/gallery-metabox-change-intro-text * * @param string $intro * @return string */     function   sample_change_gallery_metabox_intro  (     $intro     )     {     $intro     =     ' 

.

$post -> ID . '&type=image&TB_iframe=1&width=640&height=715" > Upload Images | . $post -> ID . '&type=image&tab=gallery&TB_iframe=1&width=640&height=715" > Manage Gallery' ; echo $intro ; }

Mặc định:
gallery-images-buttons
Kết quả là:
gallery-images-buttons-modified

Hỗ trợ Custom Post Type

Khai báo sử dụng Gallery images cho những custom post type, thí dụ mình sử dụng gallery images cho kiểu ‘page’,’post’, và custom post type ‘rotator’

    <   ?php     /** * Gallery Metabox - Only show on 'page' and 'rotator' post types * @author Bill Erickson * @link http://www.wordpress.org/extend/plugins/gallery-metabox * @link http://www.billerickson.net/code/gallery-metabox-custom-post-types * @since 1.0 * * @param array $post_types * @return array */     function   be_gallery_metabox_page_and_rotator  (     $post_types     )     {     return     array    (     'page'    ,     'rotator'    ,    'post'     )    ;     }   add_action  (     'be_gallery_metabox_post_types'    ,     'be_gallery_metabox_page_and_rotator'     )    ;   

Chỉ định hiển thị gallery images metabox ở một số page/post

    <   ?php     /** * Limit Gallery Metabox to Specific Page * @author Bill Erickson * @link http://www.wordpress.org/extend/plugins/gallery-metabox * @since 1.0 * * @param bool display metabox * @param string post ID * @return bool display metabox */     function   be_gallery_metabox_on_specific_page  (     $true    ,     $post_id     )     {     return     '10'     ==     $post_id    ;     }     add_filter  (     'be_gallery_metabox_limit'    ,     'be_gallery_metabox_on_specific_page'    ,     10    ,     2     )    ;   

Chặn/cho hiển thị các page/post có id là $post_id .

Lọc image bởi custom field.

Bạn có thể chỉ định những image được sử dụng nếu có custom field mãn nguyện điều kiện. Tham khảo tỉ dụ dưới đây:

    <   ?php   add_filter  (     'be_gallery_metabox_args'    ,     'be_gallery_custom_args'     )    ;     /** * Only show images marked as Include in Rotator * @author Bill Erickson * @link http://www.wordpress.org/extend/plugins/gallery-metabox * @since 1.0 * * @param array query $args * @return array query $args */     function   be_gallery_custom_args  (     $args     )     {     $args    [    'meta_query'    ]     =     array    (     array    (     'key'     =>      'be_rotator_include'    ,     'value'     =>      '1'     )     )    ;     return     $args    ;     }   

– Nếu muốn ảnh đươc được xắp xếp theo tiêu đề AlphaB.

    <   ?php     /** * Gallery Metabox - sort by title * @author Bill Erickson * @link http://www.wordpress.org/extend/plugins/gallery-metabox * @since 1.0 * * @param array query $args * @return array query $args */     function   be_gallery_custom_args  (     $args     )     {     $args    [    'orderby'    ]     =     'title'    ;     $args    [    'order'    ]     =     'ASC'    ;     return     $args    ;     }   add_filter  (     'be_gallery_metabox_args'    ,     'be_gallery_custom_args'     )    ;   

Tạo Quản lý nâng cao cho gallery

Copy đoạn code sau vào theme functions.php và trải nghiệm.

       /** * Add "Include in Rotator" option to media uploader * Limited to Home page * * @param $form_fields array, fields to include in attachment form * @param $post object, attachment record in database * @return $form_fields, modified form fields */       function   be_attachment_field_rotator  (     $form_fields    ,     $post     )     {       // // Only show on front page     if    (     !     (     $post    ->     post_parent     ==   get_option  (     'page_on_front'     )     )     )     return     $form_fields    ;       // Set up options     $options     =     array    (     '1'     =>      'Yes'    ,     '0'     =>      'No'     )    ;       // Get currently selected value     $selected     =   get_post_meta  (     $post    ->     ID    ,     'be_rotator_include'    ,     true     )    ;       // If no selected value, default to 'No'     if    (     !    isset    (     $selected     )     )     $selected     =     '0'    ;       // Display each option      foreach     (     $options     as     $value     =>      $label     )     {     $checked     =     ''    ;     $css_id     =     'rotator-include-option-'     .     $value    ;       if     (     $selected     ==     $value     )     {     $checked     =     " checked='checked'"    ;     }       $html     =     " 
<input type='radio' name='attachments[ $post
-/> ID][be-rotator-include]' > {$css_id}' value=' {$value} ' $checked /> " ;   $html .= " <label for=' {$css_id} '> $label " ;   $html .= '

' ;   $out [ ] = $html ; }   // Construct the form field $form_fields [ 'be-include-rotator' ] = array ( 'label' => 'Include in Rotator' , 'input' => 'html' , 'html' => join ( n , $out ) , ) ;   // Return all form fields return $form_fields ; }   add_filter ( 'attachment_fields_to_edit' , 'be_attachment_field_rotator' , 10 , 2 ) ;     /** * Save value of “Include in Rotator” selection in media uploader * * @param $post array, the post data for database * @param $attachment array, attachment fields from $_POST form * @return $post array, modified post data */   function be_attachment_field_rotator_save ( $post , $attachment ) { if ( isset ( $attachment [ 'be-rotator-include' ] ) ) update_post_meta ( $post [ 'ID' ] , 'be_rotator_include' , $attachment [ 'be-rotator-include' ] ) ;   return $post ; }   add_filter ( 'attachment_fields_to_save' , 'be_attachment_field_rotator_save' , 10 , 2 ) ;

Kết quả, khi nhấn vào nút Manage Gallery -> Gallery tab:
advanced-gallery-image-manager

Xóa hình dấu X ở mỗi ảnh, dùng làm xóa gallery image.

Để xóa nó, thêm đoạn mã sau trong theme functions.php

 add_filter  (     'be_gallery_metabox_remove'    ,     '__return_false'     )    ;   

Uage

– Lấy gallery ảnh của page/post, chúng ta sử dụng instance của class BE_Gallery_Metabox bởi biến $BE_Gallery_Metabox . Biến này tìm thấy ở file trong plugin: gallery-metabox/gallery-metabox.php dòng 279.

Hàm gallery_images trả về giá trị của get_posts chứa các ảnh (gallery image) được liên kết với post/page.

    <   ?php   $images    =    $BE_Gallery_Metabox    ->     gallery_images    (    1    )    ;     print_r    (    $images    )    ;     ?>    

Multi Image Metabox

Hoạt động hoàn toàn giống plugin Gallery Images, Multi Image Metabox được thiết kế cho phép bạn thêm nhiều ảnh sắp xếp rộng rãi dưới dạng table rất dễ quản lý. Vì có thể sử dụng ảnh đã tồn tại, mà không sẽ phải chèn mới từ máy tính.

multi-image-metabox

Multi Image Metabox shortcut trên edit screen.
multi-image-metabox-1

Khai báo sử dụng Multi Image Metabox cho những post type. Thêm vào theme functions.php

    <   ?php add_filter  (    'images_cpt'    ,    'my_image_cpt'    )    ;     function   my_image_cpt  (    )    {     $cpts     =     array    (    'page'    ,    'my_custom_post_type'    )    ;     return     $cpts    ;     }     ?>    

Sử dụng Multi Image Metabox filters

Giới hạn số lượng ảnh trong metabox.

Cố định tối hầu hết lượng ảnh nhập, thêm dòng sau vào functions.php

    <   ?php add_filter  (    'list_images'    ,    'my_list_images'    )    ;     function   my_list_images  (    )    {     //I only need two pictures     $picts     =     array    (     'image1'     =>      '_image1'    ,     'image2'     =>      '_image2'    ,     )    ;     return     $picts    ;     }     ?>    

– Một ví dụ khác, điều chỉnh số lượng ảnh trong multi image metabox căn cứ vào post type.

 add_filter  (    'list_images'    ,    'my_list_images'    ,    10    ,    2    )    ;     function   my_list_images  (    $list_images    ,     $cpt    )    {     global     $typenow    ;     if    (    $typenow     ==     "my_custom_post_type"     ||     $cpt     ==     "my_custom_post_type"    )     $picts     =     array    (     'image1'     =>      '_image1'    ,     'image2'     =>      '_image2'    ,     'image3'     =>      '_image3'    ,     )    ;     else     $picts     =     array    (     'image1'     =>      '_image1'    ,     'image2'     =>      '_image2'    ,     'image3'     =>      '_image3'    ,     'image4'     =>      '_image4'    ,     'image5'     =>      '_image5'    ,     'image6'     =>      '_image6'    ,     'image7'     =>      '_image7'    ,     'image8'     =>      '_image8'    ,     )    ;     return     $picts    ;     }   

Uages

get_images_ids()

Hàm trả về ID của các ảnh đã thêm vô Multi image metabox được liên kết với post/page/custom post type hiện tại.

   while    (  have_posts  (    )    )    ":   $imgs  =get_images_ids(); print_r(  $imgs  );   //true: ảnh lẫn cả về thumbnail trong kết quả trả về get_images_ids(true);   endwhile;   

Nếu thumbnail=true, thêm id của post thumbnail ở đầu kết quả mảng trả về. Ví dụ giá trị trả về:

   //An exemple of output     array    (     [    0    ]     =>      45    ,     'image1'     =>      5    ,     'image2'     =>      6    ,     'image3'     =>      12    ,     'image6'     =>      20    ,     'image7'     =>      15     )    ;   

Ngoài ra get_images_ids cấp phép lấy dữ liệu ảnh của bất kỳ post/page/other post type mà nó liên kết.

   $id    =    '10'    ;   get_images_ids  (    false    ,    $id    )    ;   

get_images_src()

Hàm trả về URL của ảnh. Hàm chấp nhận 3 tham số:

  1. size (string) kích cỡ ảnh trả về.
  2. include the thumbnail ? (boolean) nếu là true thì kết quả trả về có thêm thumbnail
  3. ID (integer) lấy images liên kết với post xác định bởi ID.
    <   ?php get_images_src  (    'medium'    ,    false    ,  id  )    ;     //3 accepted parameter : the size (STRING) & thumbnail (BOOLEAN) & id (integer)       //An exemple of output     array    (     'image1'     =>      array    (     [    0    ]     =>      'http://url_of_the_medium_pict.jpg'    ,     [    1    ]     =>      340    ,     [    2    ]     =>      200    ,     [    3    ]     =>      false     //I've no idea what is it...     )    ,     'image2'     =>      array    (     [    0    ]     =>      'http://url_of_the_medium_second_pict.jpg'    ,     [    1    ]     =>      340    ,     [    2    ]     =>      200    ,     [    3    ]     =>      false     //I've no idea what is it...     )     )    ;       ?>    

get_multi_images_src()

Giống hàm get_image_src() , nhưng trả về tất cả các kích thước của các ảnh. Hàm có các tham số:

    <  ol  >       <  li  >  <  strong  >   size   </ strong  >      (  string  )   kích cỡ trả về  . </ li  >       <  li  >  <  strong  >   size2   </ strong  >      (  string  )   một kích cỡ trả về thêm   </ li  >       <  li  >  <  strong  >     include   the thumbnail ?   </ strong  >      (  boolean  )   nếu   true   trong kết quả trả về có thêm thumbnail   </ li  >       <  li  >  <  strong  >   ID   </ strong  >      (  integer  )   lấy images liên kết với post xác định bởi ID  . </ li  >       </ ol  >    

NextGEN gallery

Đây là plugin nổi tiếng nhất với trên 10 triệu lượt tải về, nó sử dụng để tạo gallery 1 cách chuyên nghiệp. NextGEN gallery Gồm 2 phiên bản, miễn phí và có phí.
nextgen-gallery

Plugin này được nhiều plugin khác tích hợp đến, kể như WP Supersized,..
Chi tiết sử dụng plugin NextGEN gallery tại đây:
https://wordpress.org/plugins/nextgen-gallery
http://www.nextgen-gallery.com/help/

WP Gallery Custom Links

Thêm một plugin nữa, cho những mem vọc. Các bạn tự Tìm biết thêm về plugin này

Mình xin dừng tại đây.

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

Bài viết Tạo gallery ảnh cho wordpress đượ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