엔트리
WordPress 해외 쇼핑몰 제작(20) : 워드프레스의 Theme 레이아웃 빌더-1
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를 불러올 수 있습니다. 반복되는 구성요소들이 있다면 유용하게 사용할 수 있습니다. 이렇게 […]
WordPress 해외 쇼핑몰 제작(19) : 워드프레스의 Theme 데모 데이터
이번에는 테마에서 기본으로 제공하는 데모 데이터를 들여오겠습니다. 여러 목적에 따라 미리 제작된 테마의 예시를 불러와서, 많이 사용되는 기능을 알아보겠습니다. 물론 처음부터 백지에 그림을 그리듯이 페이지를 직접 구성하면 좋겠지만, 그렇지 못할 경우엔 테마 제작사에서 제공하는 예시 페이지를 통해 웹페이지의 각 구성요소를 미리 확인하고 적용 계획을 세울 수 있습니다. 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, […]
WordPress 해외 쇼핑몰 제작(18) : 워드프레스의 Theme 설정
자식테마까지 설치 완료 했다면 이제 테마의 설정을 진행하겠습니다. 워드프레스에서 테마에 대한 설정은 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 […]