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

Leave a Reply

22 Comments on "Meta Slider plugin tạo slideshow cho WordPress"

Notify of
avatar
Sort by:   newest | oldest | most voted
Xây Dựng Gia Phong
Guest

Plugin Meta Slider này rất hay và dễ xài, mình đang sử dụng nó cho website của mình .

tieu chuan chat luong
Guest

Để 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

hatrung
Guest

sao mình làm như cách của bạn đến phần tạo slider -> add slide thì ko vào đc library để lấy hình

hatrung
Guest

bài post, thì mình nhấn add media thì hiện ra media library, còn meta slider thì bấm vào cũng ko thấy thay đổi gì

tung
Guest

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 !

hatrung
Guest

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

ibig.vn
Guest

có cách nào thêm slide từ link ảnh bên ngoài không admin

thep
Guest

làm sao để chỉnh slideshow width: 100%; trong code thấy giới hạn max-width:70%; không biết chỉnh lại ở đâu, mong giúp đỡ

Hoai Bao
Guest

Anh ơi, cái widget định sẳn cái width rùi, làm sao cho cái slider rộng ra?

vannam
Guest

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á 🙂

Vuong hung
Guest

Ad oi sao minh copy code nay vao the text hien thi tren widget ko dc nhi?

Brian
Guest

http://www.banobagi.co.kr/main/

Mình đang tìm 1 plugin wordpress có thể tạo được slide hình giống trang trên! chỗ nhiều hình ak! có chữ ở đó nữa!

Các bạn có thể giúp mình được không ?

cảm ơn nhìu nhìu 🙂

hoi
Guest

Sao mình làm giống mà cái slide nó lại nằm trên menu nhỉ? không chỉnh xuống dc.

hoi
Guest

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.

wpDiscuz