Nội dung
- shares
- Facebook Messenger
- Gmail
- Viber
- Skype
WordPress tuy được ví như mini-blog, nhưng vô cùng sức mạnh. Bạn không chỉ 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.
Trong bài hôm nay mình sẽ hướng dẫn các bạn nhóm các ảnh với 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:
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 về 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 về 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 bao gồm: 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 thướ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 thước ở trang settings->media, xem thêm tại đây http://codex.wordpress.org/Function_Reference/add_image_size.
Đó cách nhanh chóng và đơn giản để chữa cháy cần một đoạn 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
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.
Cách Chèn ảnh vào gallery images metabox
Nhấn vào nút “upload images”, bạn sẽ thấy tất cả 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 tiếp ở tab From Computer. Sau khi chèn hình xong, tắt cửa sổ popup quay trở lại khung gallery images nhấn 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à nhấn vào Update Gallery là tự động cập nhật vào box Gallery Images.
Sử dụng Filters dành cho developer
Plugin cung cấp rất nhiều filter hook tha hồ chỉnh sửa theo ý tưởng 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 = '<p><a href="media-upload.php?post_id=' . $post->ID .'&type=image&TB_iframe=1&width=640&height=715" id="add_image" class="thickbox" title="Add Image">Upload Images</a> | <a href="media-upload.php?post_id=' . $post->ID .'&type=image&tab=gallery&TB_iframe=1&width=640&height=715" id="manage_gallery" class="thickbox" title="Manage Gallery">Manage Gallery</a></p>'; echo $intro; }
Hỗ trợ Custom Post Type
Khai báo sử dụng Gallery images cho các custom post type, ví 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 thỏa mãn điều kiện. Tham khảo ví 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 = "<div class='rotator-include-option'><input type='radio' name='attachments[$post-/>ID][be-rotator-include]' id='{$css_id}' value='{$value}'$checked />"; $html .= "<label for='{$css_id}'>$label</label>"; $html .= '</div>'; $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:
Xóa hình dấu X ở mỗi ảnh, dùng để 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 bố trí 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 bắt buộc phải chèn mới từ máy tính.
Multi Image Metabox shortcut trên edit screen.
Khai báo sử dụng Multi Image Metabox cho các 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 đa số 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ào 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 bao gồm cả 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
cho 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ố:
- size (string) kích thước ảnh trả về.
- include the thumbnail ? (boolean) nếu là true thì kết quả trả về có thêm thumbnail
- 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 thước trả về.</li> <li><strong>size2</strong> (string) một kích thướ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 hơn 10 triệu lượt tải về, nó sử dụng để tạo gallery một cách chuyên nghiệp. NextGEN gallery Gồm 2 phiên bản, miễn phí và có phí.
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 các mem vọc. Các bạn tự Tìm hiểu 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 ủng hộ chúng tôi bằng cách đă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õi blog này trên Twitter và Facebook
- shares
- Facebook Messenger
- Gmail
- Viber
- Skype