워드프레스에서 차일드 테마(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와 연결을 할 수 있습니다. 아래와 같이 설정합니다.
나머지 부분은 디자인 시안에 맞게 설정한 후 업데이트하여 체크박스 필터링 설정에 맞추어 포스트가 동적으로 바뀌어 제대로 작동하는지 확인합니다.
카카오톡은 한국에서 가장 인기 있는 메신저 앱으로, 많은 사람들이 정보를 공유하는 데 사용되지요. 이번 글에서는 워드프레스 사이트에서 카카오톡 아이콘 버튼을 삽입하여 카카오톡 공유하기 기능을 구현하는 방법을 소개하겠습니다. 프로그래밍에 익숙하지 않아도 누구나 따라 할 수 있도록 최대한 쉽게 정리했으니, 함께 살펴보세요!
참고로 예전에는 카카오톡 공유 기능을 카카오스토리 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 편집 모드에서 복사하려는 섹션에 마우스를 올리고 오른쪽 클릭하여 복사합니다. 정확한 지정을 위해. 구조창에서 해당 컨테이너를 클릭 복사합니다.
대상 사이트에서 원하는 페이지의 Elementor 편집 모드에서 원하는 위치에 마우스를 올리고 오른쪽 클릭 후 붙여넣기를 하면 되는데요. 같은 사이트 내 이동은 붙이기를, 다른 사이트로 이동은 다른 사이트에서 붙여넣기를 하면 됩니다.
옮길 수 있는 대상은 아래와 같습니다.
실사이트에서 라이브로 Elementor의 작업을 할 때 시스템 오류, 플러그인 충돌로 인하여 갑자기 전역 글꼴, 색상, 스타일을 포함한 기본 키트가 사라질 경우 종종 있습니다. 이럴 경우, 백업이 안되어 있거나, 백업을 해도 이 부분을 되돌릴 수 없다면 기존에 로컬에서 작업물이 있다면 이런식으로 빠르게 복구가 가능합니다.
Elementor 섹션과 템플릿을 다른 사이트로 옮기는 작업은 사이트 관리에서 자주 필요한 절차입니다. 섹션 복사 및 붙여넣기는 빠르고 간단한 이동에 적합하며, 템플릿 내보내기 및 가져오기 키트는 더 많은 콘텐츠와 전역 설정이 필요할 때 유용합니다.
Elementor Pro 버전과 무료 버전의 비교
Elementor 글꼴, 색상 바꾸기
Elementor 팝업 만들기
엘레멘터에서는 세로선 위젯이 제공하고 있지 않지만 다른 위젯으로 비슷한 효과를 낼 수 있습니다. 이 포스팅에서는 엘레멘터 빌더 사용시 세로선 만드는 법을 살펴보도록 하겠습니다.
Elementor 편집기의 왼쪽 메뉴에서 분리자 위젯을 사용하여 세로선 효과를 낼 수 있습니다.
분리자 편집창에서 콘텐츠 탭에서 실선, 폭은 높이로 입력합니다. 80px일 경우, 높이 80px을 뜻합니다. 두번째 스타일 탭에서는 적절한 색상, 무게 입력 후 간격에서 바의 숫자를 충분히 증가시킵니다.
마지막으로 고급탭에서 변환 > 회전 > 90도로 설정을 통해 가로를 세로로 만듭니다.
Elementor Pro 버전과 무료 버전의 비교
Elementor 글꼴 색상바꾸기
워드프레스의 엘레멘터 빌더에서 Posts 위젯을 사용한 페이지의 경우, 하단에 있어야할 푸터가 모바일에서 위치가 페이지 중간으로 올라가면서 float가 된 오류가 발생하였는데요. 이 글에서는 오류를 해결한 방법을 안내하겠습니다.
개발자 도구를 통해 코드를 하나씩 살펴보니 이 코드가 문제였습니다.
flex-wrap이라는 변수를 사용하여 Elementor 전체적으로 사용 중인데, 이를 flex-wrap-mobile에서 flex-wrap으로 변경하니 푸터가 최하단으로 위치한 것을 알 수 있었습니다.
Elementor는 인기 있는 노코드 페이지 빌더 플러그인으로 코드 개발 없이 웹사이트를 제작하도록 도와줍니다. 이 도구는 드래그 인 드롭 방식으로 웹 페이지의 요소를 배치하고 화면을 꾸밀 수 있습니다.
엘리멘터는 무료 버전과 프로 버전이 있는데 무료에서는 기본적인 웹사이트를 위한 최소한 기능의 위젯만 제공하기 때문에 원하는 사이트를 만들고자한다면 더 복잡하고 다양한 기능을 제공하는 프로 버전으로 업그레이드하는 것을 권장드립니다.
이 글에서는 엘레멘토 프로의 주요 기능과 프로 버전에서 제공하는 기능을 무료 버전과 비교하여 살펴보겠습니다.
| 위젯 기능 | 무료 버전에서 제공 | 프로 버전에서만 제공 |
|---|---|---|
| 텍스트 편집기 | O | |
| 이미지 | O | |
| 비디오 | O | |
| 버튼 | O | |
| 이미지 박스 | O | |
| 헤드라인 애니메이션 | O | |
| 아이콘 | O | |
| 아이콘 박스 | O | |
| 소셜 아이콘 | O | |
| 이미지 갤러리 | O | |
| 이미지 카루셀 | O | |
| 기본 갤러리 | O | |
| 구글 맵 | O | |
| 아코디언 | O | |
| 탭 | O | |
| 토글 | O | |
| 소셜 버튼 | O | |
| 알림 | O | |
| 프로그레스 바 | O | |
| 테스트 모듈 | O | |
| 비디오 플레이어 | O | |
| 카운터 | O | |
| 타이머 | O | |
| 폼 빌더 | O | |
| 포스트 네비게이션 | O | |
| 포스트 정보 | O | |
| 포트폴리오 | O | |
| 로그인 | O | |
| 애니메이션 헤드라인 | O | |
| 가격표 | O | |
| 카운트다운 | O | |
| 팝업 빌더 | O | |
| 메뉴 | O | |
| 우커머스 위젯 | O | |
| 다이나믹 태그 | O | |
| 테마 빌더 | O |
Elementor 글꼴, 색상 바꾸기
Elementor에서 breadcrumbs 삽입
Elementor는 드래그 앤 드롭 페이지 빌더 플러그인으로 작동법이 쉽고 편해 현재 가장 인기있는 빌더입니다. 이 글에서는 Elementor에서 글로벌 설정을 통해 전체 사이트에 걸쳐 일괄된 글꼴과 색상을 적용하는 방법을 살펴보겠습니다.
페이지 Elementor 편집창에서 왼쪽 Elementor 편집 도구에서 메뉴 아이콘을 선택합니다.
최상단에 위치한 사이트 설정을 클릭합니다.
이어 나오는 편집도구 디자인 시스템에서 전역 색상과 전역 글꼴에서 사이트에 글로벌하게 사용되는 컬러와 폰트를 지정할 수 있습니다.
전역 색상 섹션에서 기본, 보조, 텍스트, 악센트에 원하는 색상을 지정하고, 사용자 정의 색상을 통해 추가적인 색상을 저장하여 사용할 수 있습니다.
전역 글꼴 섹션에서는 기본 폰트 종류와 폰트 크기, 굵기, line height, letter spacing, 단어 간격을 직접 지정할 수 있습니다. 모든 설정을 마친 후 저장/업데이트 버튼을 클릭합니다.
Elementor 초보자를 위해 전체 사이트에 일괄된 글꼴과 컬러는 넣는 방법을 알아보았습니다. 이는 사이트 제작 초기 단계에 진행하는 것을 권장합니다.
많은 테마 또는 빌더가 자체적으로 breadcrumbs 기능을 제공하고 있지만 Elementor에서는 제공하지 않아 Yoast 또는 Rank Math와 같은 SEO 플러그인을 사용해야 합니다. 이 포스팅에서는 Elementor에서 Rank Math 플러그인을 이용해 페이지에서 breadcrumbs를 추가하는 방법을 살펴보겠습니다.
플러그인 > Add New Plugin에서 Rank Math를 검색하여 설치 후 활성화 합니다. 해당 기능은 무료에서 사용할 수 있습니다.
Rank Math 검색엔진 최적화 > 일반 설정 > Breadcrumbs 에서 Breadcrumbs 기능을 활성화 해줍니다. 아래 구분 문자로 디자인을 선택할 수 있어요.
페이지 내에 Breadcrumbs를 보여주는 방법은 테마 템플릿 파일에서 코드를 복사해거나 숏코드를 이용하는 방법이 있는데 간단한 방법은 코드 변경 없는 숏코드 사용입니다.
[rank_math_breadcrumb]
해당 페이지 > Elementor으로 편집으로 편집 화면에 들어와 Breadcrumbs를 위치 시킬 영역에 텍스트 편집기 위젯을 추가한 후 복사한 숏코드를 붙여넣기합니다.
페이지 발행 후 현재 위치가 잘 나타난 것을 확인하여 마무리 합니다.
Rank Math에서 사이트 제목, 설명글 설정
Elementor 글꼴, 색상 바꾸기
Opengraph 오픈그래프 썸네일 적용 (Rank Math)
