워드프레스 #31
이번 영상에서는 외부 라이브러리를 워드프레스에 연결해서 사용하는 방법을 알아볼게요. 전에 js, css 파일을 워드프레스에서 올바르게 연결하는 방법을 배워봤죠. swiper.js 라고 슬라이드 배너를 쉽게 만들어주는 라이브러리가 있습니다. 이걸 사용해서 워드프레스에 적용하는 방법을 배워볼게요.
(챕터 4에서는 특정 콘텐츠와 결합하는 방식을 배워볼 예정입니다.)
1. Swiper.js 파일 다운로드
Swiper.js 파일을 직접 다운로드하여 테마 경로에 넣어줍니다.
- Swiper.js 다운로드: Swiper.js
- CDN 링크: JSDelivr Swiper
2. CSS, JS 파일을 functions.php에 연결
functions.php 파일을 열어 Swiper.js와 관련된 CSS와 JS 파일을 등록하고 로드합니다.
function supernormal_style_sheet() {
// Swiper CSS
wp_enqueue_style('swiper-style', get_template_directory_uri() . '/assets/css/swiper-bundle.min.css');
wp_enqueue_style('supernormal-style', get_stylesheet_directory_uri() . '/assets/css/style.min.css');
}
add_action('wp_enqueue_scripts', 'supernormal_style_sheet');
function supernormal_script_enqueue() {
// jQuery
wp_enqueue_script('jquery-js', get_template_directory_uri() . '/assets/js/jquery-3.6.0.min.js', array('jquery'), '3.6.0', true);
// Swiper JS
wp_enqueue_script('swiper-script', get_template_directory_uri() . '/assets/js/swiper-bundle.min.js', array('jquery'), '1.0.0', true);
// Custom JS
wp_enqueue_script('custom-script', get_template_directory_uri() . '/assets/js/custom.min.js', array('jquery'), '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'supernormal_script_enqueue');3. HTML 삽입
슬라이드 배너를 추가할 HTML 코드를 템플릿 파일에 삽입합니다.
<!-- Swiper -->
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>4. Swiper 관련 CSS 추가
style.min.css 파일에 Swiper.js와 관련된 스타일을 추가합니다.
.swiper {
width: 100%;
height: 400px;
}
.swiper-slide {
text-align: center;
font-size: 18px;
color: red;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}5. JS 추가
custom.min.js 파일에 Swiper.js 초기화 코드를 추가합니다.
var swiper = new Swiper(".mySwiper", {
pagination: {
el: ".swiper-pagination",
type: "fraction",
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
완성
이제 Swiper.js를 사용하여 슬라이드 배너를 워드프레스 테마에 성공적으로 추가했습니다. CSS와 JS 파일을 사용하여 자유롭게 스타일을 꾸밀 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>Swiper.js with WordPress</title>
<?php wp_head(); ?>
</head>
<body>
<!-- Swiper -->
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<?php wp_footer(); ?>
</body>
</html>위의 코드를 사용하여 Swiper.js를 워드프레스 테마에 적용하고, 원하는 대로 스타일을 꾸밀 수 있습니다. Swiper.js를 통해 다양한 슬라이드 배너를 쉽게 만들 수 있습니다.
