Hướng dẫn tạo gallery trong wordpress bằng tay

Hướng dẫn tạo gallery trong wordpress bằng tay

Sau đây dịch vụ thiết kế website wordpress của Sơn Web sẽ hướng dẫn bạn tạo gallery Carousel trong wordpress kết hợp js bootstrap bằng vài dòng code đơn giản và demo.sau 3 bước đơn giản :

Bước 1 chèn js bootrap vào website wordpress

Đề chèn js boottrap vào wordpress bạn mở file function.php trong thư mục theme wordpress và chèn vài dòng code sau : [crayon] wp_enqueue_style( ‘bootstrap’, get_template_directory_uri() . ‘/library/css/bootstrap.min.css’, array(), ‘1.0’, ‘all’ ); wp_enqueue_script( ‘bootstrap’, get_template_directory_uri() . ‘/library/js/bootstrap.min.js’, array(‘jquery’), ‘1.2’ ); [/crayon] library là thư mục chứ css,js của bootstrap.Bootstrap là một framework js hỗ trợ việc responsive website .

Bước 2: Tạo meta image advanced của plugin metabox

Để upload nhiều ảnh cho 1 posttype nào đó bạn có thể dùng plugin custom filed và metabox, tuy nhiên mình thích dùng plugin metabox hơn, bạn có thể cài đặt plugin metabox hoặc chèn trực tiếp plugin metabox vào theme . Bạn có thể tìm hiều thêm về plugin metabox ở link sau https://metabox.io/ . Để chèn trực tiếp plugin metabox vào theme bạn chèn code sau vào file functions.php [crayon] define( ‘RWMB_URL’, trailingslashit( get_stylesheet_directory_uri() . ‘/meta-box’ ) ); define( ‘RWMB_DIR’, trailingslashit( STYLESHEETPATH . ‘/meta-box’ ) ); // Include the meta box script require_once RWMB_DIR . ‘meta-box.php’; // Include the meta box definition (the file where you define meta boxes, see `demo/demo.php`) require_once TEMPLATEPATH .’/meta-box/demo/demo.php’; [/crayon] Để thêm metabox images vào post type hoặc post nào đó bạn mở file demo trong thư mục demo và thêm dòng code. [crayon] // 2nd meta box $meta_boxes[] = array( ‘title’ => ‘Img gallery’, // Meta box id, UNIQUE per meta box. Optional since 4.1.5 ‘id’ => ‘img_gallery’, // Post types, accept custom post types as well – DEFAULT is array(‘post’). Optional. ‘pages’ => array( ‘products’), // Where the meta box appear: normal (default), advanced, side. Optional. ‘context’ => ‘normal’, // Order of meta box: high (default), low. Optional. ‘priority’ => ‘high’, // List of meta fields ‘fields’ => array( // IMAGE Gallery products array( ‘name’ => __( ‘Image Gallery Products’, ‘your-prefix’ ), ‘id’ => “{$prefix}imgadv”, ‘type’ => ‘image_advanced’, ‘max_file_uploads’ => 10, ), ) ); [/crayon] Ở đây page là tên post type bạn dùng cho metabox.hiện tại mình dùng cho page products.
Hướng dẫn code gallery img trong wordpress bằng tay

Hướng dẫn code gallery img trong wordpress bằng tay

Bước 3: Get url img kết hợp js bootstrap

Hiện tai js boostrap hỗ trợ sẵn tạo slideshow dạng trượt ngang, nên bạn chỉ cần dùng hàm lấy ra đường dẫn của img metabox trên. Để lấy value img meta box dùng code . [crayon] $img_gallery = rwmb_meta(‘sw_imgadv’,’type=image_advanced&size=full’); [/crayon] ở đây sw_imgadv là tên mình đặt metabox img,type là kiểu metabox. Dùng code sau để kết hợp js bootrap và img metabox . [crayon] [/crayon]    

Share this post

Trả lời

Email của bạn sẽ không được hiển thị công khai.

For security, use of Google's reCAPTCHA service is required which is subject to the Google Privacy Policy and Terms of Use.

If you agree to these terms, please click here.


Chat Zalo

0932644183