Demo Data를 끌고 왔고, 그 모양 그대로 쓰거나 조금만 변경해서 사용하고자 한다면, 각 페이지의 내용을 조금씩 바꾸면 됩니다. 하지만 계속 언급했듯이, 테마들은 워드프레스의 기본 기능에 비해 여러 기능이 추가되었기 때문에 해당 기능들을 “Short Code” 방식이나 “Builder” 방식으로 페이지에 위치시킬 수 있습니다. 이러한 방식은 기존의 Html 에디터 기능에 비해 훨씬 직관적이고 수월한 웹페이지 편집의 특징을 갖고 있어, Html 에 대해 잘 몰라도 홈페이지를 쉽게 만들 수 있도록 합니다. 예를 들어 두장의 이미지 파일을 약간의 간격과 함께 한 화면에 위치시키고 싶다면 기존에는 <img scr="”이미지 주소"> 라는 Html 코드를 입력하고 여기에 자리를 배치하는 코드들도 입력하여 이미지 주소(파일경로)를 지정했습니다. 짧아도 두세줄의 Html 태그들이 사용되었고, 웹에디터를 통한다 해도 글자들이 잔뜩 나타난 화면은 초보자 입장에서는 어렵기 마련이었습니다. (따옴표나 괄호 하나때문에 웹페이지가 출력이 안되는 경우도 발생할 수 있습니다.) 하지만 Builder를 사용한다면 키보드의 큰 사용 없이 이미지의 자리를 배치하고 이미지 파일도 쉽게 업로드 하고 경로를 지정할 수 있습니다. 하지만 테마마다 제공하는 Builder는 다를 수 있으며 Builder가 없는 테마라도 별도로 사용할 수 있는 Builder 플러그인들을 설치하여 사용할 수도 있습니다. 1. Page에 대해 처음 대문 화면인 Front Page부터 수정을 시작합니다. One Page Layout 경우는 더욱 중요한 페이지가 됩니다. 홈페이지의 웹페이지들은 말 그대로 “Page”입니다. 따라서 워드프레스의 관리자 화면에서도 “Pages” 메뉴에서 확인할 수 있습니다. 홈페이지의 첫 화면도 하나의 Page이고 About Us 페이지도 하나의 Page입니다. 웹페이지 하나하나를 만들어주고 그 페이지들의 연결을 Menu로 구성해 주는 것입니다. 우리는 이미 Import 과정을 거쳤기 때문에 몇 장의 페이지가 저장되어 있습니다. 이들 중 Front Page를 찾습니다. 페이지의 제목(Title)이 Front Page가 아닐 수도 있습니다. 혹시나 Appearance의 테마 설정에서 Front Page를 지정했을 경우, 페이지 제목 옆에 검정색 글씨로 — Frontpage 라고 표시됩니다. 해당 페이지에 들어가면 Builder 화면을 만날 수 있습니다. 혹시 페이지 제목 아래에 Default Editor로 되어있다면 Advanced Layout Editor로 변경하면 Builder가 적용된 화면으로 변환됩니다. 2. Avia Layout Builder 테마마다 제공하는 Builder 중, Enfold에서는 자체적으로 Avia Layout Builder 를 제공하고 있습니다. 테마에서 제공하지 않는 경우는 Visual Composer와 같은 별도의 Builder 플러그인을 사용합니다. (이 플러그인은 유료이며 일부 테마의 경우 이 Visual Composer를 함께 제공하는 경우도 있습니다.) Enfold테마의 Builder 는 화면 구성 요소들을 고를 수 있는 Elements와 해당 요소들을 배치하여 실제 웹페이지를 만들 수 있는 Page 파트로 구성되어 있습니다. 상단에 위치한 Elements 탭은 세가지의 탭이 있고 각 탭마다의 기능을 달리 합니다. 3. Layout Elements 이 탭은 페이지의 레이아웃을 잡아주는 가로 분할의 역할을 맡습니다. Column(열)의 배치를 구성하는데, 예를 들면 사진을 화면에 가로로 두장 배치해야 할 경우, 1/2 열 상자를 두개 만들어서 1/2와 1/2의 열을 만들고 그 안에 사진을 배치하면 위와 같이 배치가 가능합니다. 처음에는 조금 생소할 수 있는데 두개의 이미지를 1/1 열에 넣을 경우 배치는 위아래로 적용되기 때문에 나란히 두개의 이미지를 배치 할 경우에는 1/2 열 상자를 두개 만들어서그 안에 이미지를 넣습니다. 물론 3장 경우는 1/3열 상자 3개를 배치하고 그 안에 각 이미지를 넣습니다. 4개의 경우는 1/4열 상자 4개가 되겠지요. 여기서 열 상자 의 상단에 마우스를 올리면 아래와 같은 아이콘들이 노출됩니다. 1번과 2번의 아이콘은 열의 크기를 조정할 수 있습니다. 1/1에서 1/2로 바꾸고 1/3 등으로 클릭으로 쉽게 바꿀 수 있습니다. 3번의 아이콘은 해당 열상자를 저장할 수 있는 기능입니다. 상자 자체의 저장이라기 보다는 Template로 저장해두고 다른 페이지를 구성할 때에 불러오기를 통해서 미리 저장한 열상자의 Template를 불러올 수 있습니다. 반복되는 구성요소들이 있다면 유용하게 사용할 수 있습니다. 이렇게 이름을 지정하여 저장하면 상단의 Template 버튼에서 불러올 수 있습니다. 4번의 아이콘은 복사 기능입니다. 열상자 자체를 복사합니다. 보통 하나의 상자 안에 조금 여러가지 요소들을 넣었을 때에 상세한 내용을 조금 바꾸게 된다면 복잡한 작업을 반복해야 하기 때문에, 복사해서 여러 번 사용하고 조금씩 수정해서 배치할 수 있습니다. 5번은 열상자의 세부적인 내용을 변경할 수 있습니다. 여백이나 높이, 테두리나 색상 등에 대한 변경이 가능합니다. 4. Color Section 1/2열상자와 같은 레이아웃과 다르게 Color Section은 열상자들을 내부에 배치할 수 있는 특징이 있습니다. 물론 그 안에 다시 여러 요소들을 넣을수도 있습니다. Color Section의 큰 특징 두가지는 Background의 색상 지정이 가능해서 화면을 구성할 때 인위적으로 구역을 나누는 효과를 나타낼 수 있습니다. 또 하나의 특징은 Color Section의 Edit를 통해 Section ID를 입력하면 One Page Layout 에서 링크나 버튼을 통해 지정해 둔 Section으로의 이동이 가능합니다. 즉, Section ID에 About, Works, Contact 라는 이름을 지정하고 상단의 메인 메뉴나 링크 버튼에 #About 에 대한 링크를 지정할 시에 한 페이지에서 About이나 Works, Contact섹션으로 이동합니다. 한 페이지 내에서 위 아래로 오갈 수 있는 효과의 활용이 가능합니다. 5. Tab Section 가로 탭으로 구성된 레이아웃을 구성할 수 있습니다. 오른쪽 상단의 X 버튼을 통해 필요 없는 탭을 지울 수 있고 + Add Tab 버튼을 클릭해서 탭을 추가할 수 있습니다. 또한 탭 내부에 열상자를 넣어 내용을 구성할 수 있고, 좌우 화살표 아이콘을 클릭하고 드래그 하면 탭의 위치를 변경할 수 있습니다. 탭을 사용하면 특정 내용이 높지 않게 구성하되, 유사하거나 연관된 내용을 탭을 클릭하거나 슬라이드 효과로 탭을 보여줄 수 있습니다. 6. 기본 사용 법 Builder 를 통해 내용을 만드는 것은 직관적이고 사용하기 쉽습니다. 수정하고자 하는 내용을 클릭하면 팝업이나 브라우저 탭이 아닌, 화면 내에서 새로운 화면이 떠오르고 (떠오른다는 표현이 맞는것 같습니다) 세부수정이 가능합니다. 그 안에서 여러 설정이나 변경 후, 하단의 Save 버튼을 클릭하면 적용 됩니다. 물론 Section 이나 열상자, 다음번에 다를 여러 Element들을 수정한 뒤에는 페이지 자체를 저장(Publish나 Update) 해야 웹페이지 적용이 완료됩니다. 주의할 점은 세부 수정창에서 Save 버튼을 클 릭하지 않고, 화면의 빈공간을 클릭했을 경우 저장되지 않고 해당 창이 종료 됩니다. 빨간 화살표로 가리키는 파란 Save 버튼을 클릭해야 저장이되고 뒤쪽의 어두운 회색 부분(X표시) 를 클릭하면 저장되지 않고 세부수정 창이 닫히게 됩니다. 중요한 내용은 저장을 습관화 합시다.
이번에는 테마에서 기본으로 제공하는 데모 데이터를 들여오겠습니다. 여러 목적에 따라 미리 제작된 테마의 예시를 불러와서, 많이 사용되는 기능을 알아보겠습니다. 물론 처음부터 백지에 그림을 그리듯이 페이지를 직접 구성하면 좋겠지만, 그렇지 못할 경우엔 테마 제작사에서 제공하는 예시 페이지를 통해 웹페이지의 각 구성요소를 미리 확인하고 적용 계획을 세울 수 있습니다. 1. 테마는 외관을 꾸미는 것 아닌지? 워드프레스에서 테마의 존재는 단순히 외관의 배치나 색상등을 바꾸는 것에서 기능과 화려함이 더해져 다양한 활용이 가능하도록 발전하였습니다. 그렇다 보니 테마마다 갖고 있는 구성요소들에 많은 차이가 있고 각자의 독특한 기능을 내세우고 있습니다. 사용자들은 훨씬 쉽게 다양한 기능을 활용할 수 있는 장점이 있지만 문제는 테마를 변경했을 때에는 그러한 기능들의 동작이 원할하지 않고 에러페이지를 나타내는 경우가 많습니다. 그렇다고 특성있는 기능들을 빼야하는 정도는 아니고, 기본적인 웹페이지의 구성은 테마 변경 전에 해당 테마에 맞게 배치하고 각 요소들을 적절히 활용하는 것이 중요합니다. 2. Demo Import? 현재 다루고 있는 Enfold 테마도 역시 여러 Demo Data를 제공하고 있습니다. 웹사이트의 목적에 맞도록 미리 꾸며놓은 페이지의 내용을 들여오는 Demo Import 기능을 통해 밋밋한페이지의 구성을 화려하게 만들어 볼 수 있습니다. 데모 데이터를 가져오는 것은 테마 설정 페이지 내에서 몇 차례 클릭만으로 가능합니다. 3. Import 로 페이지 들여오기 시작은 관리자 화면의 Enfold 테마 메뉴에서 가능합니다. Enfold 테마 메뉴의 아래쪽에 Demo Import 탭이 있습니다. 다만 이 탭은 테마의 예제를 가져오는 것입니다. Enfold의 경우 현재 36가지의 예제를 제공하고 있습니다. 일부 테마의 경우 WooCommerce 플러그인이 설치되어야 예제도 설치 가능하고, 이 경우 Required Plugins 에 WooCommerce 의 링크가 있어 우선 해당 플러그인 설치 후에 Demo Import가 가능한 경우가 있습니다. 첫 화면만 썸네일로 제공하고 있기 때문에 들여오기 전 Online Demo 링크를 클릭하여 해당 Demo를 직접 확인하고 들여올 수 있습니다. 원하는 테마 예제의 예시를 확인하고 썸네일의 Click to Import 버튼을 클릭하면 내 사이트가 예제의 사이트로 바뀌게 됩니다. 4. 간단한 회사 홈페이지 조금 단순하게 텍스트 위주로 구성된 페이지를 들여와 보겠습니다. 세번째의 Small Business – Flat Demo 데이터의썸네일사진에마우스를올리면 Click to import 가뜹니다. 이버튼을클릭하면경고문구가뜨게됩니다. “더미데이터를가져오는것은현재테마옵션을덮어씌웁니다.” 확인을클릭후 1분~5분내외로해당데이터들이덮어씌여집니다. 따라서데이터를들여오기전에혹시중요한내용이나설정이있다면미리백업해두는것이좋습니다. 물론데이터들을삭제하는것은아니고여러개혹은하나의웹페이지를가져오고그에다른이미지와설정들을적용하기때문에데이터의유실은되지않습니다. 또한이미지파일들이제대로들어오지않아, 홈페이지의곳곳이미지가있어야할위치에아무것도표시되지않을수도있습니다 5. 살펴보기 간단한 회사 홈페이지를 불러와 보았습니다. 메뉴 : 메뉴는 Home, Service, My Work, About, Blog, Contact, 검색 정도로 구성되어 있습니다. 물론 이 내용은 변경 가능합니다. 우리 회사는 Product만 제공하고 Service나 Work 부분에 다루지 않겠다고 하면 해당 메뉴 항목을 지울 수 있습니다. 상단에는슬라이더가위치하는방식이자주쓰입니다. 다만이예제에서는간단한텍스트로구성하고슬라이더는사용하지않았습니다. 모니터화면혹은모바일로도가장상단은웹페이지방문시제일처음보이는부분이기때문에, 이미지가화려하게변화하는각종슬라이드를구성하여방문자를잡아두게합니다. 아래쪽은설명이있고그아래에는아이콘과함께항목별세부설명부분으로구성되었습니다. 이아이콘들은별도의업로드없이기본적으로제공되는이미지가있으며, 부족할경우(자신만의아이콘이필요한경우) 새로운아이콘업로드도가능합니다. 중간은이미지들이보이고자사의포트폴리오혹은 work 등에대해나타납니다. 여기서타페이지로의링크를생성해서연결도가능합니다. 마우스를가져가면이미지가약간확대되는기능이나타납니다. 그아래쪽은고객의추천사부분입니다. 사진과함께설명을넣을수있고, 자동으로로테이션이가능한부분입니다. 그후는 Contact 링크와사이츠정보가나온어두운 Footer 부분입니다. 포트폴리오 – 추천사 – Contact Link – Footer로 구성된 페이지 아래쪽 부분 6. 어떻게 사용하는가? 이 상태에서는 자사의 상황과도 맞지 않고, 텍스트로 구성 된 글자들은 대부분 무작위로 넣은 내용들입니다. 사진이나 그림도 마찬가지라서 들여온 Demo Data를 그대로 사용하는 것은 무리가 있습니다. 따라서 가장 쉬운 방법은 적당한 Demo Data에서 사진이나 글씨를 바꾸어 구성하는 방법이 있습니다. 다만 그럴 경우 내용이 한정적이고 구성에 대해 상세한 변경과 적용은 어려운 한계가 있습니다. 따라서 Demo Data는 용도 대로 예제로만 보고 직접 페이지를 만드는 것이 적절한 예제와 테마의 활용입니다.
자식테마까지 설치 완료 했다면 이제 테마의 설정을 진행하겠습니다. 워드프레스에서 테마에 대한 설정은 Appearance – Theme 에서 해당 테마의 Customize에서 가능합니다. 여기서 사이트 제목 등의 설정과 메뉴, 위젯등의 설정이 가능한데, 요즘처럼 많은 기능이 있는 테마들은 각자 세부 사항을 설정할 수 있는 테마 자체의 설정페이지를 갖고 있습니다. 우리가 사용할 Enfold 테마에 대한 기본 설정들은 Admin 화면 내의 Enfold Child 라는 메뉴에서 가능합니다. 물론 Child 테마가 아닐 경우에는 child 라는 단어는 빠지겠지요. 모든 항목을 살펴볼 수는 없고, 몇 가지 중요 사항만 체크해 보겠습니다. 세부 항목을 수정한 후에는 상단, 하단에 있는 Save all changes 버튼을 클릭해야 저장이 됩니다. 다만 현재는 테마에 대한 설정을 진행하지 않고 매뉴얼의 기능으로 설명합니다. Demo data 를 Import 하게 되면 설정이 달라질 수 있기 때문입니다. 1. Theme Options Frontpage setting 에서홈화면에노출될페이지를선택하게됩니다. 현재는 Sample Page 정도만있을텐데, 메인에노출될페이지를만들고여기서지정하면됩니다. Logo와 Favicon은말그대로로고입니다. URL을입력해도되고이미지파일을올려도됩니다. 로고는기준사이즈에나온대로 340x156px 로구성하시면되고, 다른사이즈의경우에는 Header setting으로들어가헤더부분의사이즈를조정해주시면깨끗해게처리됩니다. 파비콘은 What is a favicon 에서도설명하지만브라우저상단에제목옆작은아이콘입니다. 크롬기준으로로딩중에는원형의로딩중아이콘이돌아가고, 페이지로딩이완료되면파비콘이출력됩니다. 테마설치후에는밋밋하게테마의기본파비콘으로추가되거나호스팅서비스의파비콘으로채워지는데, 간단한아이콘으로사이트의파비콘을사용할수있습니다. 2. General Layout 이 부분은 옵션을 변경할 경우 상단에 Preview로 미리보기를 제공합니다. 따라서 용어를 잘 모르더라도 크게 어려움이 없습니다. 다만 Sticky Sidebar menu 같은 경우는 달라붙는 다는 뜻과 마찬가지로 스크롤 할 때에 사이드바가 따라온다는 의미입니다. 3. General Styling 컬러셋을 선택할 수 있고, 직접 컬러를 조정할 수 있습니다. 배경이나 글자 색, 링크 글자 색, 박스 내부, 테두리 등등 여러 컬러들의 조합을 선택할 수 있습니다. 사실 저처럼 컬러 감각이 없는 경우는 미리 지정된 조합으로 컬러를 맞추는 것이 편하더군요. 4. Advanced Styling 이 부분은 CSS파일을 처리하던 곳을 나름대로 쉽게 변경할 수 있도록 하기 위한 기능입니다. 전반적인 글자의 색상, 폰트, 크기, 특성 등 한 속성에 대한 값을 지정할 수 있습니다. 사실 CSS를 다룰 줄 안다면 좋은 편의 기능 중 하나일 수 있지만, 상세설정이 너무 상세해서 어렵다면 딱히 건들지 않을 것을 추천합니다. 5. Main Menu 이 설정 역시 상단에서 Preview를 제공합니다. 그렇기 때문에 각 항목에 대한 변경 값을 미리 볼 수 있습니다. 외국에서 사용하는 어휘 중 특이했던 것은 “burger 아이콘” 이라는 말이 말 그대로 햄버거라는 뜻이 아니라, 메뉴 아이콘에 보통 3개의 가로줄이 있거나 모바일에서 그렇게 표시되는 아이콘을 “Burger icon” 이라고 하더군요. 6. Header 헤더는 웹사이트의 최상단을 의미합니다. 이 메뉴에서 상단의 로고와 메뉴 위치, 그림자 등의 약간의 효과, 메뉴의 배경 등 여러 효과를 설정할 수 있으며, 물론 Preview를 제공합니다. 혹시 첫번째의 Theme Option 에서 로고의 사이즈 높이가 Default 값인 156px가 넘거나 그보다 작을 경우, 이 메뉴의 Header Size 항목에서 Custom puxel value를 선택 하고 Header custom Height 를 알맞게 설정하면 됩니다. 예를 들어 로고 사이즈가 가로 300px 세로 200px 일 경우, Header Custom Height 를 200px 정도롤 변경 후에 실제 반영되는 사이즈를 확인하고 조금씩 조정하면 됩니다. 7. Sidebar setting 개인적으로 저는 Sidebar를 선호하는 편이 아니라서 Blog나 일부 페이지를 제외하고는 적용하지 않는 편입니다. 이 메뉴에서는 여러 페이지에서 사이드바를 어디에 위치 시킬지 설정 할 수 있습니다. 혹시 사이드바를 없애고 싶다면 이곳 외에서 페이지를 구성할 때에도 없앨 수 있으니 사이드바를 꼭 없애야겠거나 혹은 반드시 좌,우 배치를 고려해야 하는 경우에 설정하시길 권합니다. 8. Footer 푸터는 웹페이지의 최 하단을 뜻합니다. 보통 우리나라의 웹사이트에서는 아주 작은 글씨로 사업자정보, 연락처 등으로 구성합니다. 해외도 많이 다르지는 않습니다. 다만 하단에 들어가는 문구가 아주 작은 경우는 Copyright 에 대한 정보이고, 연락처 부분은 조금 크게 구성하기도 합니다. 물론 푸터에 연락처가 아닌 SNS나 링크, 뉴스 등으로 구성하기도 하며, 설정에 따라 특정 페이지나 위젯을 만들어두가도 합니다. 위젯을 설정한 경우에는 Appearance – Widget 에서 여러 설정이 가능하고 테마 Customizing 에서도 설정이 가능합니다. Social Icons를 클릭하면 자사(혹은 자신)의 Social 계정으로 넘어가는 아이콘을 푸터 부분에 표시하게 됩니다. Copyright 에는 기본적으로 “© Copyright – My Blog – Enfold Theme by Kriesi” 라는 항목이 표시되는데 (여기서 My Blog는 현재 사이트의 제목) 여기서 굳이 Enfold Theme by kriesi 라는 테마 제작자의 copyright 를 사용하지 않으려면 Copyright 에 © Copyright – 사이트제목 뒤에 [nolink] 라고 넣어주면 됩니다. [nolink]를 입력하여 테마 제작사 링크가 사라진 결과 9. Layout Builder 이 부분은 크게 건들지 않아도 됩니다. 페이지를 만들 때에 Layout builder라는 것을 사용하게 되는데, Enfold에서 제공되는 빌더에 대한 설정입니다. 조금 더 고급 기능을 활성화 할 것인지인데, 고급기능이라고 해서 다 좋다기 보다는 더 어려운 기능을 사용한다는 느낌으로 접근하는 것이 좋습니다. 10. Blog Layout 블로그를운영할시에블로그의레이아웃설정입니다. 스타일과함께블로그포스트에표시할항목들, 예를들면코멘트숫자나포스트의카테고리, 태그를보이게할것인지여부를설정합니다. […]