Oxygen 빌더에서 부드럽게 흐르는 무한 Carousel을 구현하고 싶을때, OxyExtras 플러그인의 Carousel Builder를 활용하여 구현할 수 있습니다.
아래에서 설정법을 그대로 따라하면 끊김 없이 부드럽게 흐르는 캐러셀을 만들 수 있습니다.
Carousel Builder 위젯 추가 후 Behaviour/Interaction 클릭 후 위와 같은 설정을 해줍니다. 여기서 중요한 것은 Ticker Speed를 조절해 자연스러운 흐름 줄 수 있습니다.
Oxygen Builder는 고급 사용자와 개발자를 위한 페이지 빌더로, 성능 최적화와 자유로운 디자인 커스터마이징이 강점이지만 기본적으로 폰트를 직접 추가하거나 관리하는 기능이 제공되지 않습니다. 따라서 원하는 폰트를 적용하려면 외부 플러그인이나 커스텀 CSS를 활용해야 합니다.
이 글에서는 외부 Json 파일을 import하여 쉽게 커스텀 폰트를 업로드 하는 방법을 안내하겠습니다.
플러그인 > 새로 추가에서 Code Snippet 플러그인을 검색하여 설치, 활성화합니다.
https://www.altmann.de/en/blog-en/code-snippet-custom-fonts 해당 블로그를 방문하여 아래에 Download 섹션에서 Json 파일을 다운로드 한 후 관리자페이지 Snippets > Import 에서 Json 파일을 업로드 합니다.
파일 매니저 플러그인을 통해 별도의 FTP 접속 없이 플러그인으로 폰트를 업로드합니다.
관리자 페이지 WP 파일 관리자 화면에서 wp-content > uploads > fonts 폴더에 로컬에 저장된 폰트를 드래그앤드롭으로 업로드 하면 사이트 페이지에서 글로벌 폰트로 불러올 수 있습니다.
페이지 생성 후 Settings > Global Styles > Text font 옵션창에서 설치한 폰트를 적용할 수 있습니다.
@font-face {
font-family: 'Pretendard';
src: url('파일 위치 경로') format('woff2');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Pretendard';
src: url('파일 위치 경로') format('woff2');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Pretendard';
src: url('파일 위치 경로') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}폰트 파일을 업로드하여 Oxygen Setting에 기본 폰트로 적용 하면 내 화면에만 보이고, 다른 방문자의 화면은 위와 같이 CSS에 font-face를 설정해주어야 폰트 적용이 마무리 됩니다.
워드프레스에서 차일드 테마(Child Theme) 즉, 자식테마를 사용하는 것은 테마 업데이트 시 커스터마이징한 내용이 유지되도록 하는 가장 안전한 방법입니다. 특히 Hello Elementor 테마는 매우 가볍고 커스터마이징이 많은 테마이기 때문에, 차일드 테마 사용이 거의 필수적입니다.
지금부터 Hello 테마의 차일드 테마를 만드는 간단하고 확실한 방법을 알려드리겠습니다.
파일매니저 플러그인을 설치하여 폴더, 파일을 만드는 것이 가능하나 서버 에러가 났을 경우, 관리자 페이지 및 사이트가 먹통이 되므로 FTP에 들어가 오류 해결 작업이 필요합니다. 그래서 파일매니저를 통해 작업을 하여도 FTP 계정이 사전에 준비되어 있어 오류시 바로 접속하도록 사전 준비가 필요합니다.
파일 매니저 플러그인 사용시 플러그인에서 아래 폴더 및 파일을 만들고, 코드 편집기는 관리자 페이지 모양 > 파일 편집기에서 코드를 저장하는 방법이 간편합니다.
워드프레스 설치 경로의 wp-content/themes 디렉토리 안에 아래와 같이 새 폴더를 만듭니다.
/wp-content/themes/hello-child/
폴더 이름은 자유지만, 일반적으로 hello-child로 많이 씁니다.
style.css 파일 생성hello-child 폴더 안에 style.css 파일을 만들고 다음 내용을 입력합니다.:
/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/
Description: A child theme of Hello Elementor
Author: [당신의 이름 또는 회사명]
Author URI: [당신의 사이트]
Template: hello-elementor
Version: 1.0.0
*/
/* 차일드 테마에서 커스터마이징 CSS는 여기에 작성합니다 */Template: hello-elementor 는 부모 테마 폴더명과 정확히 일치해야 합니다. 보통 hello-elementor가 맞지만, FTP나 파일 관리자에서 실제 폴더명을 한 번 확인해보세요.
functions.php 파일 생성
같은 폴더(hello-child) 안에 functions.php 파일을 만들고 다음 코드를 넣습니다.:
<?php
add_action( 'wp_enqueue_scripts', 'hello_child_enqueue_styles' );
function hello_child_enqueue_styles() {
wp_enqueue_style( 'hello-elementor-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'hello-child-style', get_stylesheet_directory_uri() . '/style.css', array('hello-elementor-style') );
}이는 부모 테마의 스타일을 그대로 불러오기 위한 코드입니다.
💡 여기서 중요한 점: 기존에 functions.php 파일에 추가한 코드를 삭제 후 hello-child의 functions.php 파일 내에 붙여넣기 합니다. 반드시 기존 것을 삭제해야 하고, 삭제하지 않으면 코드 중복으로 에러가 나 사이트 진입이 불가합니다.
이제 워드프레스 관리자 화면으로 가서외모 > 테마 에 들어가면 "Hello Elementor Child" 테마가 보입니다. 이를 활성화하면 차일드 테마가 적용됩니다.
이 작업 후 오류가 날 경우가 있으므로 반드시 FTP 계정을 사전에 준비하여 접속하도록 합니다.
Elementor의 페이지 빌더 설정이나 페이지 자체에는 영향을 주지 않으므로, 차일드 테마 적용 후에도 기존 디자인은 그대로 유지되지만 기존에 사용자 정의 css에 정의한 코드가 있다면 이 부분은 없어지기 때문에 복사하여 다시 관리자 페이지 사용자 정의에 가서 붙여넣기 해야 합니다.
WP-PostViews 플러그인을 설치합니다. 설치방법은 관리자 페이지 > 플러그인 > 새로추가를 검색 후 설치 > 활성화 합니다. 이후 포스트 뷰수는 관리자 페이지 > 글 목록에서 확인할 수 있습니다.
필터링과 관련된 여러가지 플러그인 있는데요. 저는 Unlimited Elementor의 Sorting Filter 위젯을 사용하였습니다. 편집기에서 Sorting Filter 위젯을 추가한 후 편집기에서 Fields > Filed Type : Meta Field, Meta Field Name을 views로 지정하면 WP-PostViews에 지정된 views로 연결됩니다.
하단에 Unlimited Elementor의 Post Grid 위젯과 Filter를 연결하면 포스트를 인기순으로 정렬할 수 있습니다. Unlimited Elementor 멀티 필터링 포스트를 통해 포스트와 필터 연결방법을 참고할 수 있습니다.
views 수치를 관리자가 임의대로 조작하여 필터링 순위 조작이 가능합니다.이를 진행하기 위해서는 ACF 플러그인 설치가 필요합니다.
설치 후 ACF > 필드 그룹 > 새로 추가하기를 눌러 아래 사항에 맞추어 입력합니다.
이제 글 또는 포트폴리오 편집기의 하단에 ACF에서 저장한 views 필드 그룹이 나옵니다. Default 값인 1에서 원하는 숫자로 자유롭게 변경이 가능합니다. 숫자 변경 후 저장을 한 후 페이지 필터링을 통해 조작한 view 수에 맞게 정렬이 되는지 테스트합니다.
포트폴리오 관리를 위해 카테고리를 상위, 하위로 나뉘고, 페이지에서 보다 편리하게 결과값을 보기 위해 멀티 필터링을 구현하였습니다. 이 글에서 제가 구현한 방법을 차례대로 안내하도록 하겠습니다.
ACF 플러그인을 설치, 활성화 한 후 관리자 페이지의 ACF > 게시물 유형 > 새로 추가하기를 통해 포트폴리오라는 post type을 새로 생성합니다.
일반적으로는 ACF의 택소노미 탭에서 포트폴리오용 카테고리를 생성하지만, 해당 카테고리가 포트폴리오 페이지 빠른 편집에서 카테고리 첫 업데이트 후 빠른 편집 클릭시마다 리스트에서 사라지는 오류가 발생하여 다른 방법을 사용하였습니다. 위의 이미지에서 언급한 바와 같이 여러가지 방법을 시도한 결과 마지막으로 선택한 방법은 택소노미를 카테고리(elementor_library_category)로 등록하였습니다. 이를 통해 빠른 편집 오류가 사라졌고, Unlimited Elementor의 Post Grid 위젯에서도 문제 없이 카테고리를 가져와 필터링이 작동되습니다.
고급 설정 > URL > 공개적으로 쿼리 가능을 활성화합니다.
일반적인 ACF 사용법은 다음 게시물을 참고하세요. ACF에서 게시물 생성하기
관리자 페이지 > 포트폴리오 > 카테고리에서 상위 카테고리, 하위 카테고리를 입력합니다. 상위 카테고리를 먼저 생성한 후 하위 카테고리는 부모 카테고리에 해당 상위 카테고리를 지정하여 추가하면 됩니다.
멀티 필터링을 사용하기 위하여 Unlimited Elemntor 플러그인의 Checkboxes Filter 위젯과 Post Grid 위젯을 함께 사용하였습니다.
Checkboxes Filter의 Filter Settings에서 Logic을 Or, Filter Role을 Single로 설정합니다.
Terms Selection은 아래와 같이 설정합니다.
레이아웃은 Accordion, 버튼명을 지정합니다.
Post Grids에서는 위의 Filter와 연결을 할 수 있습니다. 아래와 같이 설정합니다.
나머지 부분은 디자인 시안에 맞게 설정한 후 업데이트하여 체크박스 필터링 설정에 맞추어 포스트가 동적으로 바뀌어 제대로 작동하는지 확인합니다.
워드프레스 백업은 사이트를 안전하게 유지하기 위한 필수 작업입니다. 이 글에서는 백업 방법 중 FTP를 통한 파일 백업, phpMyAdmin을 을 통한 데이터 백업, 플러그인을 활용한 방법을 안내하겠습니다.
워드프레스 사이트 이전을 위해 가장 추천하는 백업 방법은 FTP를 사용하여 wp-content 폴더를 다운로드하는 것입니다. 이 폴더에는 테마, 플러그인, 이미지 파일이 포함되어 있습니다. 또한, 게시글과 데이터베이스 정보를 백업하려면 호스팅 업체의 phpMyAdmin에 접속해 데이터베이스를 내보내기 하면 됩니다.
워드프레스의 테마, 플러그인, 업로드된 이미지를 포함하는 wp-content 폴더를 다운로드하면, 사이트에 필요한 대부분의 파일이 백업됩니다.
워드프레스 사이트의 모든 게시글, 페이지, 댓글, 사용자 정보 등은 데이터베이스에 저장되어 있습니다. 따라서 사이트 이전을 위해 데이터베이스 백업도 필수입니다.
UpdraftPlus와 같은 플러그인을 통해 무료로 간편하게 백업을 진행할 수 있습니다.
워드프레스 사이트 이전을 위해 가장 추천하는 백업 방법은 FTP를 통해 wp-content 폴더를 다운로드하고, phpMyAdmin을 이용해 데이터베이스를 내보내기 하는 것입니다. 이 방법은 워드프레스의 모든 중요한 데이터와 파일을 안전하게 백업할 수 있도록 도와줍니다. 정기적인 백업 습관을 들여 사이트 관리와 이전 작업을 더욱 쉽게 만들어보세요! 😊
ACF(Advanced Custom Fields) 플러그인은 사용자 정의 필드를 보다 쉽게 추가하고 관리할 수 있게 도와주는 강력한 플러그인입니다. ACF를 활용하면 웹사이트의 다양한 요소를 사용자 정의하여 동적 콘텐츠를 효과적으로 생성할 수 있습니다. 아래에 ACF 사용 방법을 단계별로 정리하였습니다.
ACF > 게시물 유형 > 새로 추가하기로 이동합니다. 예시로 템플릿이라는 게시물을 생성합니다.
고급 설정 > 가시성 탭으로 이동 후 게시물 숫자로 게시물 위치를 지정하고 아이콘을 설정하여 커스텀 할 수 있습니다.
필드에 맞는 필드 유형을 선택합니다.
필드 그룹이 표시될 특정 게시물을 선택하여 저장합니다. 위에서 생성한 템플릿을 넣으면 앞으로 템플릿 게시물을 편집할 때마다 하단에 사용자 정의 필드가 자동 생성되게 됩니다.
ACF는 사용자가 원하는 대로 WordPress 콘텐츠를 확장할 수 있는 무궁무진한 가능성을 제공합니다. 특히 커스텀 템플릿을 제작하거나 동적 콘텐츠를 처리하는 데 매우 유용합니다. 예전에는 게시물을 다른 플러그인을 통해 생성하고, ACF 플러그인에서 만든 필드 그룹을 매칭시켰다면 이제는 이 플러그인 하나로 모든 동작을 제어할 수 있으니 잘 활용해보시길 바랍니다.
카카오톡은 한국에서 가장 인기 있는 메신저 앱으로, 많은 사람들이 정보를 공유하는 데 사용되지요. 이번 글에서는 워드프레스 사이트에서 카카오톡 아이콘 버튼을 삽입하여 카카오톡 공유하기 기능을 구현하는 방법을 소개하겠습니다. 프로그래밍에 익숙하지 않아도 누구나 따라 할 수 있도록 최대한 쉽게 정리했으니, 함께 살펴보세요!
참고로 예전에는 카카오톡 공유 기능을 카카오스토리 API를 통해 만들었으나 현재 해당 API는 서비스를 중단하였기 때문에 아래 방법을 통한 코드를 이용하시길 바랍니다.
사전에 카카오 개발자 센터에서 가입 후 내 애플리케이션 > 애플리케이션 추가하기를 통해 앱을 생성합니다.
아래의 두가지 사항을 처리해주세요.
위의 아이콘 이미지를 다운로드 합니다.
script 코드 삽입을 위해 코드 삽입이 가능한 플러그인을 설치합니다. 제가 추천드리는 플러그인은 Admin and Site Enhancements(ASE) 또는 WPCode-Insert Headers and Footers 입니다. 해당 플러그인을 플러그인 > 새로추가 페이지에서 검색하여 설치, 활성화 작업을 합니다.
편집기에서 이미지 위젯을 통해 다운로드한 카카오 아이콘을 업로드 한 후 고급 탭의 CSS ID에 kakao-share-btn를 입력한 후 업데이트 합니다.
<script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
<script>
// Kakao SDK 초기화
Kakao.init('Javascript 키');
document.addEventListener('DOMContentLoaded', function () {
var kakaoShareBtn = document.getElementById('kakao-share-btn');
if (kakaoShareBtn) {
kakaoShareBtn.addEventListener('click', function () {
Kakao.Link.sendScrap({
requestUrl: window.location.href // 현재 페이지 URL
});
});
}
});
</script>Admin and Site Enhancements(ASE) 또는 WPCode-Insert Headers and Footers 플러그인을 통해 </body> 태그 앞 부분에 위의 코드를 입력합니다. 카카오 개발자 사이트에서 복사한 Javascript 키만 적용하면 됩니다. 코드 삽입 후 포스트 페이지 내에서 버튼을 클릭하여 카카오톡 앱이 실행되는지 확인하고, URL이 제대로 공유되는지 확인합니다.
이번 글에서는 워드프레스 사이트에 카카오톡 공유하기 기능을 간단히 추가하는 방법을 살펴보았습니다. 제목, 설명, 이미지 없이도 URL만 공유할 수 있어 구현이 매우 간단하며, 초보자도 부담 없이 시도할 수 있습니다.
Elementor는 다양한 기본 폰트를 제공하지만 국내 한글 폰트가 거의 없기 때문에 커스텀 폰트를 추가하고자 할 때가 있습니다. 이 글에서는 Elementor에서 커스텀 폰트를 추가하는 방법을 단계별로 안내하겠습니다.
커스텀 폰트를 활성화하기 위해서는 Elementor Pro가 필요합니다. Free 기본 버전에는 추가 기능이 제공되지 않기 때문에 아래 링크를 통해 Pro 요금제에 가입할 수 있습니다.
커스텀 폰트를 추가하기위해서는 TTF, OTF, WOFF, WOFF2 등의 파일 형식이 필요합니다. 먼저 사용할 폰트 라이센스가 웹사이트에 사용될 수 있는지 확인 후 폰트 파일을 다운로드 합니다.
워드프레스 대시보드에서 Elementor > Custom Fonts로 이동하여 ADD NEW 버튼으로 폰트를 등록합니다.
준비된 폰트 파일을 각 형식별로 업로드합니다. WOFF와 WOFF2 파일은 특히 웹 최적화된 형식입니다. 각 파일에 대해 굵기(font-weight)와 스타일(italic 등)을 설정할 수 있습니다. 모든 파일을 업로드 하고 속성을 설정한 후 Publish 버튼을 눌러 저장합니다. 이제 커스텀 폰트를 Elementor Typography 설정에서 사용 가능합니다.
커스텀 폰트를 적용하려면 개별 페이지나 템플릿 편집창에서 Typography 설정에서 폰트를 선택하면 됩니다. 이보다 더 편리한 방법은 전역 글꼴을 통해 사이트 전체적으로 기본 폰트를 설정할 수 있습니다. 대시보드에서 Elementor > 사이트 설정 > 전역 글꼴로 이동하여 기본의 타이포그래피에서 커스텀 폰트명을 찾은 후 저장 합니다. 여기서 주의할 것은 폰트 외에 굵기, 선 높이와 같은 다른 속성은 기본 값으로 놔두어야 나중에 H태그 등 추가로 지정한 값이 페이지에 제대로 적용이 됩니다.
워드프레스의 엘레멘터 빌더에서 Posts 위젯을 사용한 페이지의 경우, 하단에 있어야할 푸터가 모바일에서 위치가 페이지 중간으로 올라가면서 float가 된 오류가 발생하였는데요. 이 글에서는 오류를 해결한 방법을 안내하겠습니다.
개발자 도구를 통해 코드를 하나씩 살펴보니 이 코드가 문제였습니다.
flex-wrap이라는 변수를 사용하여 Elementor 전체적으로 사용 중인데, 이를 flex-wrap-mobile에서 flex-wrap으로 변경하니 푸터가 최하단으로 위치한 것을 알 수 있었습니다.
Custom Post Type UI(CPT UI)와 사용자 정의 필드, Advanced Custom Fields(ACF)를 조합하여 커스텀 포스트 타입을 생성하고 사용자 정의 필드를 추가하는 방법을 단계별로 설명하겠습니다.
워드프레스 기본 타입의 페이지와 포스트 이외에 커스텀 필드가 추가된 다른 형식의 페이지와 포스트 발행을 위해 Custom Post Type UI와 ㅁ플러그인을 활용하여 멤버십 또는 포트폴리오와 같은 포스트를 생성하고 포트폴리오는 작품명, 제작 날짜, 장르, 저자 등과 같은 입력필드를, 멤버십의 경우 닉네임, 이름, 지역, 나이, 특이사항 등의 사용자 정의 필드를 추가하여 커스텀 할 수 있습니다.
워드프레스에서 기본적으로 제공하는 포스트와 페이지 이외에도 사용자가 원하는 새로운 컨텐츠 유형을 추가하는 기능입니다. 위와 다른 예시로 블로그 글을 제공한다고 할 때 CPT를 통해 뉴스, 포트폴리오 등 다른 형식의 글을 CPT를 통해 추가하여 기존 블로그 글과 다르게 구분하여 뉴스, 포트폴리오 관련된 정보만 구체적으로 정의하고 따로 구분하여 저장하고 관리할 수 있습니다.
포스트, 페이지 등과 관련된 추가 메타 데이터를 저장하는데 사용되는 Key와 Value에 쌍을 말합니다.
<?php get_post_meta($post->ID, 'membership-category', true)?> 이와 같이 커스텀 필드값을 불러오는 내장 함수를 이용하여 사이트에 보다 많은 정보를 불러올 수 있습니다.
관리자 페이지에서 플러그인 > 새로 추가에서 Custom Post Type UI, ACF를 검색하여 설치 > 활성화 합니다.
Custom Post Type UI를 사용하여 Membership 이라는 커스텀 포스트 타입 생성합니다.
Post Type 입력
기존의 글이 있지만 아래에 Membership이라는 별도의 메뉴가 추가되는 것을 확인할 수 있습니다. 이제 일반 글은 글에서 관리하고, Membership과 관련된 글은 Membership에서 따로 관리해 나갈 수 있습니다.
Edit Post Types 탭 > Select에서 해당 콘텐츠를 선택한 후 편집할 수 있습니다.
Post Type 세팅
관리자 페이지 > CPT UI > Add/Edit Taxonomies 페이지로 이동하여 아래 사항을 입력합니다.
Taxonomies 입력
Taxonomies 세팅
Memership-categories라는 Taxonomy가 생성되었고, 여성 회원, 남성 회원과 같은 소분류를 추가 생성하여 소분류를 생성해줍니다.
관리자 페이지 > ACF > 필드 그룹 페이지에서 새로 추가하여 필드 상세 정보를 입력합니다.
필드 입력
필드 위치 설정
만든 Post Type에만 적용되도록 설정한 후 Publish를 클릭하여 해당 필드 그룹을 저장합니다.
Membership 글쓰기 하단에 지정한 필드가 항상 표시되어 나타납니다.
<?php echo esc_html(get_field('슬러그명')); ?>원하는 위치에 숏코드를 추가하여 저장된 필드 값을 불러와 페이지와 글에서 표시할 수 있습니다.
CSS, Javascript 파일 삽입 (functions.php)
국내에서 가장 보편적으로 사용되는 웹 에디터는 Visual Studio Code 입니다. VS Code에 FTP를 연결하여 사용하는 방법을 안내하겠습니다. FTP 연결 후 로컬 파일을 편집하고 저장하면 자동으로 FTP 서버에 업로드에서 실시간으로 웹 편집을 할 수 있습니다.
FTP를 열고 사이드바에서 Extensions 아이콘을 클릭한 후 검색을 통해 ftp-simple 플러그인을 설치합니다.
F1 또는 Ctrl+Shift+P를 통해 명령 팔레트를 실행하고 FTP Simple: Config - FTP Connection Settings를 선택하여 아래 형식으로 연결 정보를 입력한 후 저장합니다.
name: 이름host: FTP 서버의 주소port: FTP 서버의 포트 번호 (기본값은 21)type: 연결 유형 (ftp, sftp 등)username: FTP 서버의 사용자 이름password: FTP 서버의 비밀번호path: 기본 원격 디렉토리 경로autosave: 파일을 저장할 때 자동으로 FTP 서버에 업로드할지 여부
설정 완료 후 다시 팔레트를 열고 FTP Simple: Remote directory open to workspace를 선택하여 설정파일에서 저장한 이름을 선택하고, 연결되면 원격 디렉토리가 작업공간에 열립니다.
연결의 문제를 파악하기 위해 OUTPUT 창을 열고 ftp-simple을 설정하여 오류 로그를 참조하여 문제를 해결할 수 있습니다.
워드프레스를 제작시 CSS를 통해 디자인을 꾸미고, Javascript를 통해 기능 추가 또는 동적인 화면을 구현할 수 있습니다. Bootstrap 또는 각종 플러그인, 라이브러리를 적용하기 위해서 필요한 파일 삽입 방법을 안내하겠습니다.
function 테마명_style(){
wp_enqueue_style('theme-default-style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', '테마명_style');get_stylesheet_uri() 함수 사용시 자동으로 style.css를 삽입해줍니다.
function 테마명_style(){
wp_enqueue_style('theme-default-style', get_stylesheet_directory_uri().'경로');
}
add_action('wp_enqueue_scripts', '테마명_style');function 테마명_script(){
wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts', '테마명_script');워드프레스 코어 속에 jQuery가 내장되어 있으므로 wp_enqueue_script('jquery'); 명령어를 통해 간단히 제이쿼리를 불러올 수 있습니다.
function 테마명_script(){
wp_enqueue_script('theme-default-script', get_template_directory_uri().'경로', array());
}
add_action('wp_enqueue_scripts', '테마명_script');if(is_front_page()) { //프론트 페이지의 경우
wp_enqueue_script('front-script', get_stylesheet_directory_uri() . '/js/front.js', array(), '1.0.0', true);
}
if(is_page('about')) { //슬러그 about 페이지의 경우
wp_enqueue_script('about-script', get_stylesheet_directory_uri() . '/js/about.js', array(), '1.0.0', true);
}실제 사용되는 페이지에서만 CSS와 스크립트 코드가 로드되어야 불필요한 리소스가 동작하지 않고, 페이지 속도를 최적화 시킬 수 있습니다. 리소스 컨트롤을 위해 워드프레스에서 제공하는 conditional tags를 사용할 수 있습니다.
워드프레스 위젯 추가하는 방법
Bootstrap 워드프레스에서 사용(css)
워드프레스 폰트 추가 방법
워드프레스 위젯은 디자인과 용도에 따라 사이드바, 헤더, 푸터 영역에 배치하여 사용할 수 있습니다. 위젯은 사이드바에서만 등록이 가능하므로 register_sidebar, dynamic_sidebar 함수를 이용해 등록 할 수 있습니다. 이 글에서는 위젯 추가하는 방법을 살펴보겠습니다.
function 테마명_widget_init(){
register_sidebar(
array(
'name'=> __('sidebar1', '테마명'),
'id'=> 'custom-widget1',
'description'=>__('헤더용 사이드바', '테마명')
)
);
}
add_action('widgets_init', '테마명_widget_init')코드에서 name과 id는 적절히 수정해주도록 합니다. 위의 코드를 functions.php 파일에 추가하면 관리자 페이지에서 외모 > 위젯으로 이동해보면 다음과 같이 새로운 위젯 영역이 추가되어 있습니다.
위젯 구성 화면에서 원하는 위젯을 만듭니다.
<?php if(is_active_sidebar('custom-widget1')) { ?>
<div>
<?php dynamic_sidebar('custom-widget1'); ?>
</div>
<?php } ?>위젯을 화면에 헤더에 출력하기 위해서 header.php 파일에 상단 코드를 배치합니다. dynamic_sidebar 함수를 호출하여 register_sidebar 함수에 등록한 id를 인자로 넣어줍니다. 헤더 뿐만 아니라 푸터, 본문(예를 들어 footer.php, page.php, index.php) 등 필요한 곳에 입력할 수 있습니다.
이렇게 헤더부분에 커스텀한 위젯이 나온 것을 확인할 수 있습니다. 추가적으로 style.css 파일에서 디자인을 입히는 작업을 할 수 있습니다.
워드프레스를 통해 커스텀 테마를 만들 때 헤더 내비게이션에 들어가는 메뉴 제작 방법을 살펴보겠습니다. 코드에 대한 자세한 내용은 워드프레스 공식 가이드를 통해 확인하기 바랍니다.
function 테마명_theme_menus(){
//관리자 페이지에 메뉴 넣기
add_theme_support('menus');
//테마에서 사용할 메뉴 프레임 만들기
add_theme_support('menus');(
array (
'main_nav'=> __('Main', '테마명'),
'second_nav'=> __('Second', '테마명')
)
);
}
add_action('after_setup_theme', '테마명_theme_menus');위의 add_theme_support('menus') 코드를 functions.php 파일에 삽입하면 관리자 페이지 > 외모에 메뉴가 생성됩니다. 여기서 'main_nav', 'second_nav' 는 헤더에 출력할 때 불러오는 id와 같은 역할을 합니다. 이를 클릭하여 화면을 이동하면 위와 같이 Main과 Second 메뉴 프레임이 생성된 것을 확인할 수 있습니다. 이는 PC용 메뉴, 모바일용 메뉴, off canvas용 메뉴 등을 만들어 위치별, 메뉴 콘텐츠별로 다르게 구성하여 활용할 수 있습니다.
관리자 페이지로 돌아가 외모 > 메뉴 화면에서 메뉴별 페이지를 구성합니다. 자세한 내용은 워드프레스 메뉴 만들기를 참고하세요.
위치 관리 탭을 선택 후 메뉴 프레임별 만든 메뉴를 지정해줍니다.
<?php
wp_nav_menu(
array(
'theme_location'=>'main_nav', //functions.php 코드의 메뉴 이름
'container'=>'div',
'container_class'=>'my-navbar' //css를 위한 class 값
)
);
?>헤더에서 메뉴를 출력하기 위해 header.php 파일에서 wp_nav_menu() 함수 코드를 입력합니다. theme_location에 functions.php에서 입력한 메뉴 이름을 넣어주고, container_class에는 style.css 파일에 사용할 클래스명을 넣어줍니다.
사이트를 새로고침하여 헤더 내비게이션에 메뉴가 출력되었음을 확인합니다. 추가적으로 style.css 파일에서 스타일 코드를 이용해 디자인을 변경하면 완성됩니다.
워드프레스에서 폰트를 추가하는 방법 중 하나인 구글 폰트와 같은 폰트 제공 사이트로부터 웹폰트를 연결하는 방법은 구글의 연결이 느려지면 사이트도 느려질 수 있기 때문에 폰트를 직접 업로드 하는 방법을 권장합니다.
구글폰트에 들어가 원하는 폰트를 다운로드 받은 후 업로드 합니다. 혹은 내 컴퓨터에 이미 업로드된 폰트를 이용합니다. 필자는 예시로 구글폰트에서 Roboto 폰트를 다운받아 테스트하겠습니다.
테마 아래에 fonts 폴더를 만든 후 다운로드한 폰트를 업로드합니다. 사이트 속도 최적화를 위해 실제 사용할 굵기의 폰트만 선택하여 올려줍니다. 이 폰트를 등록하기 위해 폰트이름의 css 파일을 생성합니다.
구글에서 register font-face를 검색 후 font-face Rule 사이트로 이동하여 font-face 코드를 복사합니다. 이 코드를 css 파일에 삽입합니다.
font-face 코드를 업로드한 폰트명과 같이 바꿔줍니다.
<?php
function wptutorial_style(){
//font css 등록하기
wp_enqueue_style('roboto', get_template_directory_uri().'/fonts/Roboto/roboto.css');
}
add_action('wp_enqueue_scripts', 'wptutorial_style');
?>css 파일을 워드프레스에서 사용하기 위해서는 funtions.php 파일 내에 wp_enqueue_style 함수를 이용하여 등록시켜야 합니다.
style.css에서 등록한 폰트를 사용하기 위해 font-family를 수정합니다.
개발자 모드에서 제대로 폰트가 적용되었는지 확인하여 완료합니다.
Bootstrap은 웹사이트를 쉽게 만들 수 있도록 도와주는 css, js 프레임워크 입니다. 복잡하지 않는 커스텀 디자인된 사이트가 아닌 일반 사이트에서는 많이 Bootstap을 사용하여 사이트를 제작하는데요. 이 글에서는 Bootstrap을 워드프레스에 적용하여 사용하는 방법을 안내하겠습니다.
여기에서 Bootstrap Source file을 다운로드합니다. 압축을 해제하면 css와 js 폴더로 이루어져 있습니다.
테마 폴더(루트: wp-content > themes > 해당 테마) 안에 bootstrap 폴더를 생성하고 다운로드한 css, js 폴더를 업로드 합니다.
<?php
function wptutorial_style(){
//style.css 삽입하기
wp_enqueue_style('theme-default', get_stylesheet_uri());
//bootstrap-css 삽입하기
wp_enqueue_style('theme-bootstrap', get_template_directory_uri().'/bootstrap/css/bootstrap.min.css');
//bootstrap-js 삽입하기
wp_enqueue_script('theme-bootstrap-js', get_template_directory_uri().'/bootstrap/js/bootstrap.min.js');
}
add_action('wp_enqueue_scripts', 'wptutorial_style');
?>워드프레스에서 style이나 script를 링크해주려면 functions.php 파일에 워드프레스용 코드를 삽입해야 합니다. style sheet를 링크해주기 위해서는 wp_enqueue_style 함수를, script는 wp_enqueue_script를 사용해야 합니다.
코드 입력 후 페이지 소스보기 화면에서 css와 js가 잘 들어갔는지 확인합니다.
Bootstrap은 이미 완성된 css 코드를 가져와 편하게 사이트에서 적용하기 위해 사용하는 css 프레임워크입니다. Bootstrap 코드를 가져와 웹에서 사용하면 별도의 스타일 코딩 작업이 없어 시간을 단축할 수 있어 효율적입니다.
scss는 css와 완전히 호환되는 스타일시트 언어로 보다 짧게 코드를 입력하고, 넓게 사용이 가능하여 선호하기에 Bootstrap scss를 이용해 워드프레스에서 적용하는 방법을 살펴보겠습니다.
방법은 Bootstrap 소스 파일을 다운로드 한 후 테마 폴더안에 업로드 한 후 functions.php 함수 파일 내에 코드를 등록하면 되는데요. scss는 컴파일링한 css 파일을 functions.php 함수 파일 내에 등록한 후, 이 업로드한 scss 파일을 import하여 사용할 수 있습니다.
cdn 코드를 가져와서 간단하게 사용하는 방법도 있지만 scratch 작업을 할 경우, 파일을 다운로드 하는 방법을 사용하는 것을 권장합니다.
여기에서 Bootstrap Source file을 다운로드합니다.
테마 폴더(루트: wp-content > themes > 해당 테마) 안에 css 폴더를 생성하고 안에 다운로드한 Bootstrap 폴더를 업로드합니다.
코드 편집기를 이용해 css 폴더 내에 main.scss 파일을 생성한 후 Live Savss Compiler 별도의 플러그인을 검색한 후 설치해 줍니다. 이 플러그인을 이용해 scss를 css로 컴파일링합니다.
필자는 코드 편집기로 무료인 Visual Studio Code를 사용합니다.
하단에 Watch Sass를 클릭하여 컴파일링 작업이 실행되어 같은 위치에 main.css, main.css.map 파일이 자동 생성됩니다.
functions.php 파일 내에서 **Enqueue scripts and styles. 를 찾아 테마명_scripts() 함수 안에 아래 코드를 추가합니다. 이 함수는 script와 style 적용을 위해 생성된 함수이므로 여기에 추가하면 등록이 됩니다.
wp_enqueue_style( 'custom3-main', get_template_directory_uri() . '/css/main.css' );
Bootstrap scss 코드 사용을 위해서는 업로드한 폴더를 main.scss 폴더에서 importing 하는데요. 코드는 Bootstrap 사이트 > Customize > Sass의 Importing 섹션에서 가져옵니다.
main.scss 파일 내 최상단에 아래 코드를 입력합니다.
@import "업로드한 scss bootsrap 폴더(경로 맞게)"
상단에서 설치한 complier 플러그인이 자동으로 컴파일링을 하면서 main.css 파일에 bootstrap css 코드가 불러와집니다.
이 파일의 크기는 272kb로 많은 용량을 차지하지는 않음을 알 수 있습니다.
import 후 테스트를 위해 import 코드 상단에 custom 코드를 추가한 후 사이트에 정상적으로 적용된 것을 알 수 있습니다.
