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.

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.

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