Meta Slider plugin tạo slideshow cho WordPress

Cập nhật lần cuối vào

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

Theo dõi
Thông báo của
guest

30 Comments
Cũ nhất
Mới nhất Được bỏ phiếu nhiều nhất
Phản hồi nội tuyến
Xem tất cả bình luận
Xây Dựng Gia Phong
9 năm trước

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
9 năm trước

Để 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
hatrung
9 năm trước

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
hatrung
9 năm trước

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
tung
9 năm trước

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 !

tung
tung
9 năm trước

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ả.

hatrung
hatrung
9 năm trước

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
9 năm trước

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

thep
thep
9 năm trước

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
Hoai Bao
9 năm trước

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

Hoai Bao
Hoai Bao
9 năm trước

Em mún làm như hình anh up mà nó chỉ bằng width của widget :v . Giờ hok bít làm sao

vannam
vannam
8 năm trước

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
Vuong hung
8 năm trước

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

Brian
Brian
7 năm trước

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
hoi
7 năm trước

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
hoi
7 năm trước

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.

Tùng
6 năm trước
Trả lời  hoi

Mình cài được nhưng slider hiển thị cho tất cả các trang con, mà mình chỉ muốn nó hiển thị trên trang chủ thì làm ntn nhỉ?

Tùng
6 năm trước

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/?

Tùng
6 năm trước

Em cảm ơn anh nhiều nhé!

webtopviet
5 năm trước

Plugin này rất nhẹ và dễ dùng cho slide ảnh !

Trường
Trường
5 năm trước

Mình bỏ shortcode vào Trang chủ sao không thấy hiển thị ad nhỉ?
Mình bỏ vào header lại hiển thị.