테마활용
게시판스킨 업데이트하기
안녕하세요. 케이테마입니다. 언제나 케이테마를 사랑해주셔서 감사합니다. 케이테마에서 판매되는 테마 중에서 패브릭 테마는 가장 인기좋은 테마 중 하나입니다. 오늘은 패브릭테마에서 케이보드 게시판스킨을 추가하는 방법을 알려드립니다. 케이테마는 지속적으로 디자인과 스킨을 추가하고 있습니다. 특히 2023년 케이테마 V2버전을 출시하면서 케이보드 게시판 스킨을 20종 이상 추가하게 되었습니다. 해당 스킨은 https://devktheme.mycafe24.com/bbsskins/%eb%aa%a9%eb%a1%9d%ed%98%95-1-basic/ 에서 확인이 가능합니다. 추가된 스킨에 대해서 기존발매된 테마에 적용하는 방법을 알려드리도록 하겠습니다. 먼저 해야할 파일작업은 다음과 같습니다. 아래 “파일 다운로드”를 클릭하여 파일을 받으시기 바랍니다.
theme.js 추가코드 /* 이미지 프래임 */ jQuery(window).on(‘load’, function() { jQuery(‘.thumb-info-wrapper-direction-aware’).each( function() { jQuery(this).hoverdir({ speed : 300, easing : ‘ease’, hoverDelay : 0, inverse : false, hoverElem: ‘.thumb-info-wrapper-overlay’ }); }); }); jQuery(‘.thumb-info-container-full-img’).each(function() { var $container = jQuery(this); jQuery(‘[data-full-width-img-src]’, $container).each(function() { var uniqueId = ‘img’ + Math.floor(Math.random() * 10000); jQuery(this).attr(‘data-rel’, uniqueId); $container.append(‘<div style=”background-image: url(‘ + jQuery(this).attr(‘data-full-width-img-src’) + ‘);” id=”‘ + uniqueId + ‘” class=”thumb-info-container-full-img-large opacity-0″></div>’); }); jQuery(‘.thumb-info’, $container).on(‘mouseenter’, function(e){ jQuery(‘.thumb-info-container-full-img-large’).removeClass(‘active’); jQuery(‘#’ + jQuery(this).attr(‘data-rel’)).addClass(‘active’); }); }); /* 이미지 프래임 마침 */
functions.php 추가코드 wp_enqueue_style( ‘ktheme-style-board’, get_template_directory_uri() . ‘/css/style_board.css’ );
- 케이보드 스킨파일 업로드
- 아래 첨부된 zip파일을 다운로드 합니다.
- wp-content/plugins/kboard/skin 폴더에 압축을 풀어서 스킨을 설치합니다. 이후 ftp를 통해 업로드 해야 합니다.
- sytle_board.css 파일 추가
- 아래 첨부된 style_board.css 파일을 다운로드 합니다..
- wp-conetent/themes/ktheme_starter/css 폴더에 추가합니다. 이후 ftp를 통해 업로드 해야 합니다.
- theme.js 파일 수정
- 아래의 추가코드를 삽입 후 저장하여 업데이트 합니다.
- functions.php 수정
- 아래의 추가코드를 삽입 후 저장하여 업데이트 합니다.
theme.js 추가코드 /* 이미지 프래임 */ jQuery(window).on(‘load’, function() { jQuery(‘.thumb-info-wrapper-direction-aware’).each( function() { jQuery(this).hoverdir({ speed : 300, easing : ‘ease’, hoverDelay : 0, inverse : false, hoverElem: ‘.thumb-info-wrapper-overlay’ }); }); }); jQuery(‘.thumb-info-container-full-img’).each(function() { var $container = jQuery(this); jQuery(‘[data-full-width-img-src]’, $container).each(function() { var uniqueId = ‘img’ + Math.floor(Math.random() * 10000); jQuery(this).attr(‘data-rel’, uniqueId); $container.append(‘<div style=”background-image: url(‘ + jQuery(this).attr(‘data-full-width-img-src’) + ‘);” id=”‘ + uniqueId + ‘” class=”thumb-info-container-full-img-large opacity-0″></div>’); }); jQuery(‘.thumb-info’, $container).on(‘mouseenter’, function(e){ jQuery(‘.thumb-info-container-full-img-large’).removeClass(‘active’); jQuery(‘#’ + jQuery(this).attr(‘data-rel’)).addClass(‘active’); }); }); /* 이미지 프래임 마침 */
functions.php 추가코드 wp_enqueue_style( ‘ktheme-style-board’, get_template_directory_uri() . ‘/css/style_board.css’ );