Meta Slider plugin tạo slideshow cho WordPress

Bạn đang muốn tạo slide trên blog WordPress của mình nhưng chưa biết làm như thế nào. Bài viết này Sáu sẽ hướng dẫn cho bạn cách tạo slideshow trong blog WordPress với plugin Meta Slider, đây là plugin tạo slide miễn phí lẫn có phí, nếu bạn bỏ tiền ra mua thì plugin sẽ có nhiều tính năng hay hơn, tuy nhiên đối với bản miễn phí thì bạn đã có thể thỏa mãn được nhu cầu.

Plugin Meta Slider tạo slide cực dễ cho WordPress

Có rất nhiều plugin giúp bạn tạo slide trên blog WordPress, tuy nhiên Sáu giới thiệu cho các bạn plugin này là vì nó dễ dùng và có tích hợp 4 công cụ tạo slide hình ảnh phổ biến hiện nay: Flex Slider, Nivo Slider, Responsive Slides, Coin Slider.

Tải plugin Meta Slider

Bây giờ bạn có thể tải và cài đặt plugin trên blog WordPress của bạn. Sau khi cài đặt xong thì bạn sẽ thấy một menu bên phía tay trái bảng điều khiển với tên là: Meta Slider.

Bạn vào bên trong và tạo một menu với tên bất kỳ, sau khi tạo xong slider thì bạn đã có thể sử dụng nó. Trong trang quản lý widget của giao diện cũng hỗ trợ widget cho bạn kéo thả vào sidebar để sử dụng, hoặc bạn có thể sử dụng shortcode của nó:

<?php echo do_shortcode('[metaslider id=22]'); ?>

Bài viết này Sáu sẽ giới thiệu mẫu cho các bạn cách tạo 1 module sidebar để chứa slider và tùy chỉnh 1 số thông tin css để slide trở nên đẹp hơn. Bây giờ bạn mở tập tin functions.php lên và thêm vào đoạn code sau:

function add_slider_custom_widget() {
	register_sidebar( array(
		'name'          => __( 'Home Slider', 'stheme' ),
		'id'            => 'main-slider-module',
		'description'   => __( 'Main slider below primary menu.', 'stheme' ),
		'before_widget' => '<section id="%1$s" class="widget %2$s">',
		'after_widget'  => '</section>',
		'before_title'  => '<h4 class="widget-title">',
		'after_title'   => '</h4>'
	));
}
add_action('widgets_init', 'add_slider_custom_widget');

Nếu như trong tập tin functions của bạn đã có action widgets_init rồi thì bạn sao chép nội dung bên trong hàm add_slider_custom_widget và bỏ vào hàm đã có sẵn nhé.

Bây giờ bạn vào tập tin header.php của giao diện và thêm vào dòng code bên dưới để hiển thị slider ra bên ngoài, tùy thuộc vào bạn thích đặt ở vị trí nào mà chọn tập tin cho phù hợp nhé.

<?php if(is_active_sidebar('main-slider-module')) : ?>
<div class="main-slide module-slider">
	<div class="slide-container">
		<?php dynamic_sidebar('main-slider-module'); ?>
	</div>
</div>
<?php endif; ?>

Bây giờ thì slide của bạn sẽ được hiển thị nếu như bạn kéo widget Meta Slider bỏ vào sidebar Home Slider. Để cho slide hiển thị đẹp hơn thì bạn tùy chọn thêm kích thước của hình ảnh, chọn chế độ rộng full khung và thêm vào thuộc tính css như bên dưới:

.module-slider {
	margin: 15px 0 10px 0;
	height: 440px;
}

.module-slider .metaslider img {
	height: 440px;
	width: 100%;
}

.module-slider .metaslider .flex-direction-nav a.flex-prev, .module-slider .metaslider .flex-direction-nav a.flex-next {
    background-clip: padding-box !important;
    background-color: rgba(35, 39, 41, 0.72) !important;
    border-color: rgba(0, 0, 0, 0.11);
    border-radius: 50%;
    border-style: solid;
    border-width: 10px;
    cursor: pointer;
    display: block;
    height: 70px !important;
    margin: -35px 0 0;
    text-indent: -9999px;
    top: 50%;
    transition: all 0.4s ease 0s;
    width: 70px !important;
}

.module-slider .metaslider .flex-direction-nav a.flex-prev {
	background-image: url("url");
}
.module-slider .metaslider .flex-direction-nav a.flex-next {
	background-image: url("url");
}
.module-slider .metaslider .flex-direction-nav a.flex-prev:hover, .module-slider .metaslider .flex-direction-nav a.flex-next:hover {
	background-color: rgba(26, 153, 204, 0.8) !important;
}

.module-slider .flex-control-nav.flex-control-paging {
    bottom: 20px;
    position: absolute;
	z-index: 999;
}

.module-slider .flex-control-nav.flex-control-paging li a {
    border-radius: 0;
    height: 15px;
    width: 15px;
}

.module-slider .flex-control-nav.flex-control-paging li a.flex-active {
	background-color: rgba(26, 153, 204, 0.8);
	opacity: 0.8;
}

.module-slider .flex-control-nav.flex-control-paging li a {
	border: 1px solid #FFF;
}

Cuối cùng bạn sẽ nhận được kết quả như hình bên dưới Sáu đã làm, và bạn cũng nên chọn hình ảnh có độ phân giải sao cho phù hợp chứ nếu hình ảnh có kích thước quá nhỏ thì khi hiển thị lớn lên sẽ làm nhòe hình.

Blog Học WordPress hướng dẫn tạo slider

Slide hiển thị cũng đẹp phải không bạn. Qua bài viết này thì bạn đã biết được cách tạo 1 slide đơn giản trên blog WordPress, vẫn còn nhiều điều hay nữa đang chờ bạn khám phá phía trươc

27 bình luận cho “Meta Slider plugin tạo slideshow cho WordPress

  1. Để tối ưu tốc độ tải trang hiện nay mình cũng hạn chế dùng flugin slide ảnh. Slide show load các đoạn java script và image khá lâu làm giảm tốc độ tải trang và không thân thiện với công cụ tìm kiếm

  2. ad ơi cho mình hỏi chút mình dùng bản meta slider bản mới nhất rồi mà khi mình add image cho slide là 6 ảnh sao ra ngoài mình xem thì chỉ được 5 ảnh mình đã thử nhiều cách mà k được. Khi save & preview thì thấy cả 6 ảnh nhưng in vào post thì chỉ được 5 ảnh hay phiên bản free lên bị hạn chế hoặc có cách nào cho hiển thị nhiều ảnh lên hơn không.
    Giúp mình với thanks !

      1. OK mình thử test trên localhost site khác thì ok nhưng không hiểu sao trên site http://aaudesign.com/dich-vu-chup-anh này của mình thì nó cứ bị hạn chế có 5 ảnh là sao nhỉ không biết debug kiểu gì đây bạn có thể chỉ cho mình không trong cài đặt mình để là hiển thị 20 bài rồi mà vẫn không thay đổi gì cả.

  3. cho mình hỏi là media của mình bị lỗi rồi, giờ có cách nào sửa ko bạn, upload hình không được, báo là ko thể tạo directory đến /wp-content/uploads/2014/07

    1. Chào em, em có thể thay đổi độ rộng của widget bằng css, nếu width 100% của slide thì cũng chỉ khớp với độ rộng của widget mà thôi.

  4. A cho e hỏi để đưa phần comment lên trước bài viết liên quan thì làm như thế nào ?
    Kết phần comment trên hocwp.net quá 🙂

    1. Khung bình luận này cũng là của WordPress thôi mà bạn, để đưa khung bình luận đi chỗ khác thì bạn mở tập tin single.php lên, tìm dòng comments_template(); và di chuyển tới nơi bạn muốn hiển thị.

      Chú ý là trong chỗ này có thể có hàm điều kiện if, nhớ di chuyển nguyên khối code luôn nhé.

    1. Bạn phải cài đặt plugin Meta Slider, sau đó tạo 1 slider mới và lấy mã của nó bỏ vào nếu bạn tự dùng shortcode, còn nếu bạn dùng wiget do họ cung cấp thì chỉ việc chọn tên của slider là được.

  5. Mình làm giống bạn nhưng khi cho slide vào widget thì lại nằm trên menu. Nếu mình dùng thủ công để thì lại độ rộng không full được, nó chỉ bằng cái lề hai bên thôi. Đang cần sửa gấp mod giúp mình với.

        1. Hiện tại em đang làm như các bước anh hướng dẫn ở trên copy code vào header.php nên nó hiển trị cho tất cả các trang. EM có tạo static page cho trang chủ rồi, em có cần xóa đoạn coder trên header.php không, và cop vào static page là copy code side vào đầu bài viết static đó hả anh. Anh có thể cho em xin số đt để em hỏi cụ thể chút ko anh/?

          1. Nếu bạn sửa trong header.php thì thêm đoạn code kiểm tra nếu là trang chủ nữa: if(is_home()) code here;

Trả lời tung Hủy

Thư điện tử của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *