Home / 테마 만들기 – Part 1 / Slick Slider

Slick Slider

by zeein |

상단에 사용되는 slick slider를 테마에 적용하는 방법입니다.
우선 slick slider 사이트를 방문해서 다운로드 받습니다.(현재 v 1.8.0)
해당 사이트에 사용하는 방법들이 다양한 예제글과 함께 자세히 설명이 되어 있으니 참고 하시기 바랍니다.

압축 해제 후 해당 폴더 그대로 전부 테마의 assets 폴더에 저장합니다.
functions.php 파일에 css 와 js를 등록합니다.

등록시 css 파일은 main.css 파일 이전에 등록하고 js 파일들은 이후 추가될 custom.js 이전에 등록해야 만 원하는 결과를 확인하실 수 있습니다.

functions.php
<?php
if ( ! function_exists( 'zeein_yellow_setup' ) ) :
function zeein_yellow_setup() {
register_nav_menus( array(
'primary' => esc_html__( 'Primary', 'zeein-yellow'),
) );
}
endif;
add_action( 'after_setup_theme', 'zeein_yellow_setup' );
function zeein_yellow_scripts() {
// css
// style.css
wp_enqueue_style( 'zeein-yellow-style', get_stylesheet_uri() );
// css: bootstrap
wp_enqueue_style( 'zeein-bootstrap.min', get_stylesheet_directory_uri() . '/assets/bootstrap-4.0.0-beta.2-dist/css/bootstrap.min.css', array(), 'v4.0.0.beta2' );
// css: slick
wp_enqueue_style( 'zeein-slick', get_stylesheet_directory_uri() . '/assets/slick-1.8.0/slick/slick.css', array(), 'v1.8.0' );
// css: main.css
wp_enqueue_style( 'zeein-main', get_stylesheet_directory_uri() . '/assets/css/main.css', array(), 'v1.0' );
// script
// jquery
wp_enqueue_script( 'zeein-jquery.min', get_stylesheet_directory_uri() . '/assets/js/jquery-3.2.1.min.js', array(), 'v3.2.1', false );
// navigation
wp_enqueue_script( 'zeein-navigation', get_stylesheet_directory_uri() . '/assets/js/navigation.js', array(), 'v10.0', true );
// bootstrap
wp_enqueue_script( 'zeein-popper.min', get_stylesheet_directory_uri() . '/assets/bootstrap-4.0.0-beta.2-dist/js/popper.min.js', array(), 'v 1.12.3', true );
wp_enqueue_script( 'zeein-bootstrap.min', get_stylesheet_directory_uri() . '/assets/bootstrap-4.0.0-beta.2-dist/js/bootstrap.min.js', array(), 'v4.0.0.beta2', true );
// slick
wp_enqueue_script( 'zeein-slick.js', get_stylesheet_directory_uri() . '/assets/slick-1.8.0/slick/slick.min.js', array(), 'v1.8.0', true );
// custom
wp_enqueue_script( 'zeein-custom.js', get_stylesheet_directory_uri() . '/assets/js/custom.js', array(), 'v1.0', true );
}
add_action( 'wp_enqueue_scripts', 'zeein_yellow_scripts' );
?>
view raw functions-3.php hosted with ❤ by GitHub
custom.js
(function ($) {
$( document ).ready(function() {
});
})(jQuery);
view raw custom.js hosted with ❤ by GitHub

테마폴더의 assets > js 폴더에 custom.js 파일을 생성합니다.
앞으로  추가되는 js 스크립트는 모두 위의 파일에 추가 됩니다.

header.php, main.css, custom.js, style.css 4개의 파일을 수정 하는데 수정하기 전에

fontello.com 사이트를 방문해서 slider 에 사용될 좌우 버튼 폰트를 다운 받습니다.
zeein-yellow 테마에서는 위의 4가지만 선택해서 다운 받았으며 다운 받은 파일을 압축 해제 후 폴더 이름을 fontello 로 변경 하고
assets > font 폴더에 폴더 전체를 복사 합니다.

style.css
/*
Theme Name: zeein yellow
Theme URI: blog.d1p2.com
Description: zeein yellow theme
Version: 1.0
Author: zeein
Author URI: http://blog.d1p2.com
*/
@charset "utf-8";
/* font : kor */
@import url('./assets/font/SpoqaHanSans_subset/SpoqaHanSans-kr.css');
/* font : eng */
@import url('./assets/font/OpenSans/stylesheet.css');
/* font : fontello */
@import url('./assets/font/fontello/css/fontello.css');
view raw style-2.css hosted with ❤ by GitHub

css 파일 하단에 fontello 관련 css 파일을 추가 해 줍니다.

header.php
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="profile" href="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_get_archives('type=monthly&format=link'); ?>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="page" class="site">
<a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'zeein-yellow' ); ?></a><!-- .skip-link -->
<header id="mastheads" class="site-header">
<div class="container">
<div class="row">
<div class="col-12">
<div class="site-branding">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><img src="<?php echo bloginfo('template_url'); ?>/assets/img/logo/logo-default-84x40.svg" /></a>
</div>
<nav id="site-navigation" class="main-navigation">
<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e('Primary menu', 'zeein-yellow' ); ?><span></span></button>
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'menu_id' => 'primary-menu',
) );
?>
</nav>
</div><!-- .col-12 -->
</div><!-- .row -->
</div><!-- .container -->
</header><!-- .header -->
<div class="slick-slider-wrap">
<div class="slick-slider">
<div>
<div class="bg-wrap bg-wrap-1"></div>
<div class="div-content">
<p class="lead">Welcome to our company.</p>
<h1>ZEEIN <strong>YELLOW</strong> THEME</h1>
<p>Branding / Development / Web / Photo</p>
<button class="zeein-button">READ MORE</button>
</div>
</div>
<div>
<div class="bg-wrap bg-wrap-2"></div>
<div class="div-content">
<p class="lead">Good artists copy, great artists steal.</p>
<h1>ZEEIN <strong>WOW</strong> STORY</h1>
<p>CI / BI / Print</p>
<a href="#" class="zeein-button">READ MORE</a>
</div>
</div>
</div>
</div>
<div id="content" class="site-content">
view raw header-2.php hosted with ❤ by GitHub

임의의 슬라이더를 추가 했습니다.

custom.js
(function ($) {
function initSlick() {
var $slider = $('.slick-slider')
.on('init', function(slick) {
$('.slick-slider .bg-wrap').addClass('init');
})
.slick({
dots: true,
infinite: true,
speed: 350,
cssEase: 'ease-in-out'
});
}
$( document ).ready(function() {
initSlick();
});
})(jQuery);
view raw custom-1.js hosted with ❤ by GitHub

slick slide 사이트를 참고해서 jQuery 를 입력해 줍니다.
위의 소스에서는 처음 로딩시 슬라이더의 opacity를 0으로 하는 style 지정후에 로딩이 끝나면(init) opacity를 1로 주도록 init라는 class를 추가 하는 소스입니다.
또한 좌우 버튼 클릭시 계속해서 반복되는 것과 하단에 바로 이동하는 도트 버튼을 추가 하도록 설정 했습니다.

main.css
@charset "utf-8";
/* ==========================================================================
웹 접근성
========================================================================== */
.screen-reader-text {
border: 0;
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute !important;
width: 1px;
word-wrap: normal !important;
}
/* ==========================================================================
텍스트
========================================================================== */
body,
button,
input,
select,
optgroup,
textarea {
color: rgba(0, 0, 0, 0.65);
background-color: rgba(222, 222, 222, 1);
font-family: "Spoqa Han Sans", Helvetica, Arial, "Apple SD Gothic Neo", AppleSDGothic, "Malgun Gothic", Gulim, sans-serif;
font-size: 16px;
font-size: 1rem;
line-height: 1.6rem;
font-weight: 300; }
.font__eng {
font-family: "Open Sans", Helvetica, Arial, "Apple SD Gothic Neo", AppleSDGothic, "Malgun Gothic", Gulim, sans-serif;
}
h1 {
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
font-size: 64px;
font-weight: 300;
color: white;
transition: all 0.3s ease; }
h1 strong {
color: #FBD04B; }
/* ==========================================================================
Button
========================================================================== */
.zeein-button {
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
font-weight: 600;
border: 2px solid white;;
padding: 0.8rem 1.5rem;
background: none;
color: white;
font-size: 0.8rem;
line-height: 0.8rem;
display: inline-block;
border-radius: 100px;
cursor: pointer;
transition: all 0.25s ease; }
.zeein-button:active,
.zeein-button:focus,
.zeein-button:hover {
color: black;
text-decoration: none;
background-color: #FBD04B;
border-color: #FBD04B;
outline: none;
}
/* ==========================================================================
Logo & Navigation
========================================================================== */
/* 모바일 햄버거 메뉴 */
.menu-toggle {
position: absolute;
top: 10px;
right: 15px;
display: none;
text-indent: -9999rem;
border: none;
padding: 0;
width: 40px;
height: 40px;
z-index: 10;
background-color: rgba(0, 0, 0, 0); }
.menu-toggle:active,
.menu-toggle:focus {
cursor: pointer;
outline: none; }
.menu-toggle span,
.menu-toggle span::before,
.menu-toggle span::after {
content: '';
position: absolute;
display: block;
width: 100%;
height: 4px;
background-color: black;
transition-duration: 0.15s, 0.15s;
transition-delay: 0.15s, 0s; }
.menu-toggle span {
top: 18px; }
.menu-toggle span::before {
top: -12px;
transition-property: top, transform; }
.menu-toggle span::after {
bottom: -12px;
transition-property: bottom, transform; }
.menu-toggle[aria-expanded="true"] span {
background-color: rgba(0, 0, 0, 0); }
.menu-toggle[aria-expanded="true"] span::before {
top: 0;
transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] span::after {
bottom: 0px;
transform: rotate(-45deg); }
.menu-toggle[aria-expanded="true"] span::before,
.menu-toggle[aria-expanded="true"] span::after {
transition-delay: 0s, 0.15s; }
/* 로고 및 메뉴 */
.site-header {
position: fixed;
top: 0;
z-index: 100;
width: 100%;
transition: all 0.25s ease-in-out; }
/* 로고 */
.site-header .site-branding {
position: absolute;
display: inline;
top: 50px;
width: 83px;
z-index: 10; }
/* 메뉴 */
.site-header .main-navigation {}
.site-header .main-navigation ul {
list-style: none;
margin: 0;
padding: 0; }
.site-header .main-navigation .menu-main-container { }
.site-header .main-navigation .menu-main-container ul.nav-menu {
position: absolute;
right: 0; }
.site-header .main-navigation .menu-main-container ul li {
float: left; }
.site-header .main-navigation .menu-main-container ul li a {
background-color: transparent;
color: white;
padding: 60px 15px 30px;
display: inline-block;
font-size: 1rem;
line-height: 1rem;
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
font-weight: 600;
outline: none;
text-decoration: none;
text-transform: uppercase;
transition: background-color 0.2s ease-in-out; }
.site-header .main-navigation .menu-main-container ul li a:active,
.site-header .main-navigation .menu-main-container ul li a:hover {
color: black;
background-color: rgba(251, 207, 75, 0.8); }
.site-content {
/* margin-top: 1400px; */
}
/* ==========================================================================
Slick Slider
========================================================================== */
/* 메인 슬라이드 */
.slick-slider-wrap { }
.slick-slider-wrap .slick-slider {}
.slick-slider-wrap .slick-slider .slick-arrow {
position: absolute;
font-size: 0;
line-height: 0;
z-index: 50;
border: none;
background: none;
outline: none;
cursor: pointer;
padding: 0;
width: 40px;
height: 40px;
opacity: 0.5;
top: 50%;
transform: translateY(-50%);
transition: opacity 0.3s ease; }
.slick-slider-wrap .slick-slider .slick-arrow.slick-next {
right: 10px;
}
.slick-slider-wrap .slick-slider .slick-arrow.slick-prev {
left: 10px;
}
.slick-slider-wrap .slick-slider .slick-arrow.slick-next::before,
.slick-slider-wrap .slick-slider .slick-arrow.slick-prev::before {
content: '\e800';
font-family: 'fontello';
color: white;
display: inline-block;
font-size: 1rem;
line-height: 1.2rem;
}
.slick-slider-wrap .slick-slider .slick-arrow.slick-next::before {
content: '\e801';
}
.slick-slider-wrap .slick-slider .slick-arrow:active,
.slick-slider-wrap .slick-slider .slick-arrow:hover {
opacity: 1;
}
.slick-slider-wrap .slick-slider .slick-dots {
position: absolute;
font-size: 0;
line-height: 0;
margin: 0;
padding: 0;
left: 50%;
transform: translateX(-50%);
bottom: 3rem;
list-style: none; }
.slick-slider-wrap .slick-slider .slick-dots li {
float: left; }
.slick-slider-wrap .slick-slider .slick-dots li button {
font-size: 0;
line-height: 0;
border: none;
background: none;
outline: none;
cursor: pointer;
padding: 0;
width: 22px;
height: 22px;
opacity: 0.3;
transition: opacity 0.5s ease; }
.slick-slider-wrap .slick-slider .slick-dots li button::before {
content: '';
display: inline-block;
width: 8px;
height: 8px;
background-color: white;
border-radius: 100%;
}
.slick-slider-wrap .slick-slider .slick-dots li.slick-active button { opacity: 1; }
.slick-slider-wrap .slick-slider .slick-dots li.slick-active button::before {
width: 12px;
height: 12px;
}
.slick-slider-wrap .slick-slider .slick-slide {
position: relative;
height: 70vh;
background-color: black;
outline: none;
transition: height 0.3s ease; }
.slick-slider-wrap .slick-slider .slick-slide .bg-wrap {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
opacity: 0;
transition: all 0.3s ease-in-out; }
.slick-slider-wrap .slick-slider .slick-slide .bg-wrap.init {
opacity: 0.3;
}
.slick-slider-wrap .slick-slider .slick-slide .bg-wrap.bg-wrap-1 {
background-image: url('/wp-content/uploads/2017/11/top-slide-01.jpg');
}
.slick-slider-wrap .slick-slider .slick-slide .bg-wrap.bg-wrap-2 {
background-image: url('/wp-content/uploads/2017/11/top-slide-02.jpg');
}
.slick-slider-wrap .slick-slider .slick-slide .div-content {
position: relative;
display: inline-block;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
text-align: center;
color: white;
}
/* ==========================================================================
미디어 쿼리
========================================================================== */
@media only screen and (max-width: 991px) {
h1 {
padding: 0 2.6rem;
font-size: 250%; }
/* 모바일 햄버거 메뉴 */
.menu-toggle {
display: block; }
/* 모바일 사이즈에서 상단 좌우 폭을 100% */
.site-header .container {
max-width: 100%; }
/* 로고 */
.site-header .site-branding {
top: 10px;
left: 50%;
transform: translateX(-50%); }
/* 메뉴 */
.site-header .main-navigation .menu-main-container {
position: absolute;
top: calc(-100vh + 60px);
left: 0;
width: 100%;
height: 100vh;
background-color: white;
transition: all 0.3s ease-in-out; }
.site-header .main-navigation.toggled .menu-main-container {
top: 0;
}
.site-header .main-navigation .menu-main-container ul {
position: absolute;
text-align: center;
left: 50%;
top: 50%;
right: inherit !important;
transform: translate( -50%, -50% ); }
.site-header .main-navigation .menu-main-container ul li {
float: none; }
.site-header .main-navigation .menu-main-container ul li a {
color: rgba(0, 0, 0, 0.2);
font-size:1.6rem;
line-height: 1.6rem;
padding: 0.8rem 1rem;
width: 100%; }
/* 메인 슬라이드 */
.slick-slider-wrap .slick-slider .slick-slide {
height: 80vh; }
.slick-slider-wrap .slick-slider .slick-slide .div-content {
top: calc( 50% + 60px);
transform: translate( -50%, calc( -50% + -30px) );
}
}
view raw main-2.css hosted with ❤ by GitHub

슬라이드의 스타일을 추가 하며 정리 했습니다.

위의 순서대로 적용하면 slick slider 가 정상적으로 작동하는 것을 확인하실 수 있습니다.

Site link
Share this

PREV

상단 메뉴

NEXT

grid 이해