워드프레스에서 엘레멘터 빌더를 사용하여 팝업을 만들고 불러오는 방법을 단계별로 살펴보겠습니다. 참고로 이 기능을 위해서는 Elementor Pro 버전에서만 사용할 수 있습니다. 무료 버전에서는 기본적인 페이지 빌딩 기능만 사용할 수 있기 때문에 프로로 업그레이드 하여 사용하시는 것을 추천드립니다.
알림판에서 템플릿 > 새 템플릿을 추가를 클릭합니다.
템플릿 유형은 옵션에서 Popup으로 선택, 적당한 이름을 작성 후 템플릿 만들기
여러가지 템플릿이 나와 선택하거나 새롭게 디자인할 수 있습니다. 보통 지정된 디자인이 있기 때문에 엘레멘터 편집기를 사용하여 팝업의 내용을 제작할 수 있습니다. 텍스트, 이미지, 버튼 등을 추가할 수 있고, 편집기 상단 가운데의 세팅 아이콘을 선택하여 왼쪽 패널에서 Popup 설정을 변경합니다.
게시 후에 조건 탭에서 팝업을 표시할 특정 페이지나 섹션을 선택하거나 다양한 트리거 옵션을 설정할 수도 있습니다. 예를 들어 페이지 로드 시 트리거를 설정하면 해당 페이지 접근하면 팝업이 자동으로 표시 됩니다. 별도의 옵션 없이 저장 후에는 아래처럼 수동으로 팝업 불러오기를 할 수 있습니다.
팝업 표시를 위해 클릭할 버튼 또는 섹션을 선택 > 왼쪽 패널에서 링크 오른쪽 아이콘 선택 > Popup 선택
Popup을 클릭한 후 아래 설정 섹션에서 팝업 템플릿 이름을 검색하여 선택합니다. 이렇게 하면 엘레멘터 빌더로 팝업을 만들고 원하는 방식으로 불러올 수 있습니다.
Elementor 글꼴, 색상 바꾸기
Elementor Pro 버전과 무료 버전의 비교
워드프레스에서 바로 폰트 설치를 위해 폰트 파일을 미디어에 삽입시 죄송합니다. "이 파일 타입 업로드할 권한이 없습니다."라는 오류가 나옵니다. 이를 해결하기 위해서는 function.php 파일에 폰트 형식을 허용하는 코드의 삽입이 필요합니다.
이 글에서는 폰트 타입 허용 코드를 삽입 후 직접 폰트 파일을 업로드하여 사이트에 추가하는 방법을 살펴보겠습니다.
function custom_mime_types($mimes) {
$mimes['otf'] = 'font/otf';
$mimes['ttf'] = 'font/ttf';
$mimes['woff'] = 'font/woff';
$mimes['woff2'] = 'font/woff2';
return $mimes;
}
add_filter('upload_mimes', 'custom_mime_types');위의 코드를 functions.php 파일에 추가하면 otf, ttf, woff, woff2 파일을 자유롭게 미디어에 업로드하여 폰트를 설치하여 내 사이트에 적용할 수 있습니다.
관리자페이지에서 모양 > 테마 파일 편집기에서 functions.php 파일을 찾을 수 있으며, 테마 파일 편집기가 메뉴에 없다면 FTP를 접속하거나 파일 매니저라는 플러그인을 설치하면 됩니다.
@font-face {
font-family: 'Pretendard-Medium';
src: url('폰트 위치') format('woff');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'Pretendard-SemiBold';
src: url('폰트 위치') format('woff');
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: 'Pretendard-Bold';
src: url('폰트 위치') format('woff');
font-weight: 700;
font-style: normal;
}
html {
scroll-behavior: smooth;
}
h1,
h2 {
font-family: 'Pretendard-Bold';
}
h3,
h4,
h5,
h6,
strong,
b {
font-family: 'Pretendard-SemiBold';
}
body {
word-break: keep-all;
font-family: 'Pretendard-Medium';
}모양 > 사용자 정의 > 추가 CSS 에서 위의 font-face를 통해 폰트를 사이트에 적용할 수 있습니다.
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)
워드프레스 폰트 추가 방법
Elementor는 드래그 앤 드롭 페이지 빌더 플러그인으로 작동법이 쉽고 편해 현재 가장 인기있는 빌더입니다. 이 글에서는 Elementor에서 글로벌 설정을 통해 전체 사이트에 걸쳐 일괄된 글꼴과 색상을 적용하는 방법을 살펴보겠습니다.
페이지 Elementor 편집창에서 왼쪽 Elementor 편집 도구에서 메뉴 아이콘을 선택합니다.
최상단에 위치한 사이트 설정을 클릭합니다.
이어 나오는 편집도구 디자인 시스템에서 전역 색상과 전역 글꼴에서 사이트에 글로벌하게 사용되는 컬러와 폰트를 지정할 수 있습니다.
전역 색상 섹션에서 기본, 보조, 텍스트, 악센트에 원하는 색상을 지정하고, 사용자 정의 색상을 통해 추가적인 색상을 저장하여 사용할 수 있습니다.
전역 글꼴 섹션에서는 기본 폰트 종류와 폰트 크기, 굵기, line height, letter spacing, 단어 간격을 직접 지정할 수 있습니다. 모든 설정을 마친 후 저장/업데이트 버튼을 클릭합니다.
Elementor 초보자를 위해 전체 사이트에 일괄된 글꼴과 컬러는 넣는 방법을 알아보았습니다. 이는 사이트 제작 초기 단계에 진행하는 것을 권장합니다.
워드프레스에서 폰트를 추가하는 방법 중 하나인 구글 폰트와 같은 폰트 제공 사이트로부터 웹폰트를 연결하는 방법은 구글의 연결이 느려지면 사이트도 느려질 수 있기 때문에 폰트를 직접 업로드 하는 방법을 권장합니다.
구글폰트에 들어가 원하는 폰트를 다운로드 받은 후 업로드 합니다. 혹은 내 컴퓨터에 이미 업로드된 폰트를 이용합니다. 필자는 예시로 구글폰트에서 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를 수정합니다.
개발자 모드에서 제대로 폰트가 적용되었는지 확인하여 완료합니다.
워드프레스 사이트를 그대로 이전해야 할 경우 마이그레이션 플러그인을 통해 10분 이내로 사이트를 그대로 옮길 수 있습니다. 필자는 외주 또는 포트폴리오 제작을 위해 로컬 컴퓨터로 작업한 후 마이그레이션 플러그인을 활용하여 타사이트로 이전 작업을 하고 있습니다. 본 포스팅에서는 All-in-One Migration 플러그인 사용법에 대해 설명하겠습니다.
플러그인 > 새로 추가에서 All-in-One WP Migation 플러그인을 설치합니다. 내보낼 사이트와 받을 사이트 두 군데 모두 설치해야 합니다.
All-in-One WP Migration > 내보내기 > 파일을 클릭합니다. 다른 옵션을 선택하면 추가 구매를 안내하는 사이트로 이동합니다.
파일 백업이 완료되면 다운받을 수 있도록 용량 안내 메시지가 나옵니다. 이 버튼을 눌러 다운로드 합니다. 파일 확장자는 wpress 입니다. 이를 이전할 사이트에 들어가 들여오기 하면 완성입니다.
이전 받을 사이트에서도 동일한 All-in-One WP Migration 플러그인 설치한 후 들여오기 > 파일 > 해당 wpress 파일 업로드를 합니다.
들여오기 절차가 데이터베이스, 매체, 플러그인, 그리고 테마를 포함하는 웹사이트를 덮어쓸 것입니다. 다음 단계로 진행하기 전에 자료를 백업하였는지 확인하시기 바랍니다. 라는 팝업창이 뜨면 진행을 선택하고, 사이트에 데이터를 성공적으로 가져왔습니다! 에서 마침을 눌러 완료합니다.
완료 후 새로고침시 자동으로 로그아웃이 됩니다.
"파일이 이 사이트의 최대 업로드 크기를 추가합니다." 라는 용량 초과 오류 메시지 출현시에는 All-in-One WP Migration Unlimited Extension 추가 설치한 후 들여오기 작업을 진행해야 합니다.
복제를 하면 이전 데이터가 날아가고, 덮어쓰기가 되면서 After 사이트에서 사용하던 계정도 삭제가 되기 때문에 Before 사이트 계정으로만 로그인할 수 있습니다. 로그인 후 사용자 새로 추가를 통해 After 사이트 계정을 추가해주시고, 로그인한 Before 계정은 삭제하면 됩니다.
아래의 과정을 따라합니다.
사이트 복제, 이전이 필요하신 분들에게는 해당 플러그인을 통해 10분 만에 간편하게 작업이 가능하니 알아두면 좋겠습니다.
