DIY 웹사이트 따라하기

DIY 웹사이트 따라하기

by | Feb 16, 2017 | DIY 워드프레스, 워드프레스 (Wordpress) 사용법

시작하면서

웹사이트 따라하기는 워드프레스를 이용해서 여러분이 본인의 힘으로 직접 웹사이트를 제작하는 방법을 자세하게 알려드리는 가이드입니다.  본 가이드에서는 Avada라는 디자인 테마를 사용하고 있습니다. 본 가이드를 진행 하시기 위해서는 Avada 디자인테마가 반드시 필요합니다.  본 가이드에서는 가능한 복잡한 기술적인 설명은 과감하게 생략하고 실제로 웹사이트를 만드는데 꼭 필요한 설명과 화면 위주로만 정보를 최대한 간추려서 정리 했습니다. 꼭 설명이 필요한 용어의 정리는 용어가 처음 나타나는 곳에서 바로 보실 수 있도록 했습니다. 내용이 조금 많지만, 천천히 따라하시면 멋진 DIY 커스텀 웹사이트를 본인의 힘으로 직접 만드실 수 있을 것입니다. 🙂 아래 순서로 가이드가 진행 됩니다.

 

 

  1. 워드프레스 설치하기
  2. Avada 디자인테마 구입하기
  3. Avada 디자인테마 설치하기
  4. 워드프레스 기본설정
  5. 페이지 만들기
  6. 메뉴 만들기
  7. 헤더와 푸터(Header & Footer) 만들기
  8. 사이드바(Sidebar) 및 위젯(Widget) 설정하기
  9. 블로그 설정하기
  10. 페이지 꾸미기
  11. 한국형 게시판 만들기
  12. 웹사이트 접속통계 플러그인 설치하기

1.웹호스팅 및 도메인이름

웹호스팅 이란?  웹사이트를 운영하기 위해서는 웹사이트가 운영될 서버, 사용자들의 접속을 감당할만한 네트워크, 데이터 센터 (서버와 네트워크가 있을장소)가 필요합니다.  그러나, 이러한 환경을 모두 갖추기 위해서는 많은 비용이 들어가기 때문에 개인이나 스몰비지니스가 감당하기가 어렵습니다. 그래서 이러한 환경을 모두 갖춘 웹호스팅 회사에서 저렴한 월 비용만 지불하고 웹호스팅 서비스를 받게 됩니다. 특희, 쇼핑몰의 경우는 사용자의 민감한 개인정보를 다루기 때문에 일반 웹호스팅 보다는 보다 안전하고 속도가 빠른 웹호스팅이 필요합니다.

도메인(Domain)이름 이란?  웹사이트를 인터넷에서 구별하는 이름입니다. 흔희 URL 이라고도 얘기하는 경우가 있습니다. 예를들어 GOOGLE.COM AMAZON.COM, DAUM.NET 등이 있습니다. 도메인 이름은 보통 1년 단위로 도메인 등록 회사에서 임대해서 사용하게 됩니다.

웹호스팅 구입 및 설정하기 (도메인 이름 설정 포함)

웹호스팅 구입을 위해서 워드프레스 웹호스팅 선택하기를 참조 하세요. 웹호스팅 구입하기 및 워드프레스 설치를 위해서 사이트그라운드 웹호스팅 구입 및 기본설정하기를 참조하세요.

2.웹사이트 만들기

아래 내용들을 순차적으로 진행 하시기 바랍니다.

1) 워드프레스 설치하기.

이전 단계인 웹호스팅 구입 및 설정 단계를 잘 따라하신 경우 이미 워드프레스가 설치 되 있을 것 입니다. 만약, 아직 웹호스팅 구입 및 설정 단계를 진행 하지 않으신 경우는 위 단계를 먼저 진행 하세요.

2) Avada 디자인 테마 구입하기

본 가이드에서는 가장 기능이 풍부하고 디자인을 원하는데로 커스터마이징이 가능한 Avada 디자인 테마를 사용합니다. 여기 –> AVADA 테마 구입 링크를 클릭하신 후 다음 단계를 진행 하기 전에 구입을 하시기 바랍니다.   (이미 Avada 디자인 테마를 가지고 계시면 별도로 구입 하실 필요가  없습니다.)

3) Avada 디자인테마 설치하기

먼저 워드프레스 관리자 화면으로 로그인 합니다. 워드프레스 관리자 주소(URL)는 원래 웹사이트 주소 뒤에 “/wp-admin”을 붙여주면 됩니다. 예를들어 웹사이트 주소가  “MYDOMAIN.COM” 이라면 다음과 같이 해주시면 됩니다.  관리자주소 URL )  MYDOMAIN.COM/wp-admin,   “/wp-admin”는 반드시 소문자로 입력하셔야 합니다.인터넷 브라우져에서 위와 같이 주소(URL)를 입력하고 이동하면 아래 화면이 나타 납니다. 아래 화면에서 Username or Email Address 에 관리자 아이디 혹은 이메일을 입력 하시고, Password란에 패스워드를 입력하신 후 Log In 버튼을 클릭 합니다.

로그인을 하면 아래와 같은 화면이 나타납니다.

아래 화면과 같이 Appearance > Themes를 클릭 합니다.

아래 화면에서 새로운(유료)테마를 설치 하기 위해서 ‘Add New’를 클릭 합니다. %ed%85%8c%eb%a7%88%ec%84%a4%ec%b9%982

아래 그림과 같이 ‘Upload Theme’을 클릭 합니다. %ed%85%8c%eb%a7%88%ec%84%a4%ec%b9%983

아래 그림과 같이 (1) ‘Choose File’을 클릭 하면  디자인 테마 화일을 선택하는 창이 나타납니다. 이미 다운 받아놓은 (2) Avada Theme 설치 화일을 선택 합니다 (3) ‘Open’을 클릭 합니다. %ed%83%9c%eb%a7%88%ec%84%a4%ec%b9%984

아래 그림과 같이 ‘Install Now’를 클릭 합니다. %ed%85%8c%eb%a7%88%ec%84%a4%ec%b9%985

설치과정은 보통 1분 미만이 소요됩니다. 설치가 완료되면 아래 그림과 같은 화면이 나타납니다. ‘Activate’를 클릭 합니다. %ed%85%8c%eb%a7%88%ec%84%a4%ec%b9%986

설치가 완료되면 아래와 같이 Avada 디자인테마의 Welcome 화면으로 이동 합니다. 설치를 하신 후에는 제품등록을 하셔야 정상적으로 기능을 사용하실 수 있습니다. 아래 그림과 같이 ‘Generate a personal token’ 링크를 클릭합니다. ( 아래 그림에 나타난 창은 닫지 마시고 그대로 두시기 바랍니다 ) %ed%85%8c%eb%a7%88%ec%84%a4%ec%b9%987

이전에서 ‘Generate a personal token’ 을 클릭하면 아래 그림과 같이 별도의 창(탭)에 Avada token 등록 화면이 나타납니다.  Token은 인증코드와 비슷한 것 정도로 알아두시면 됩니다. 아래 그림처럼 Token name을 하나 입력하시고 아래와 같이 체크를 하신 후 ‘Create Token’을 클릭 합니다. %ed%85%8c%eb%a7%88%ec%84%a4%ec%b9%988

그러면 아래 그림과 같이 새로운 Token이 정상적으로 만들어졌음을 알 수 있습니다. 아래 token key을 Copy합니다.  ( 보안상 제 token key는 흐릿하게  했습니다 ) %ed%85%8c%eb%a7%88%ec%84%a4%ec%b9%989

위에서 Copy한 Token key를 아래 그림과 같이  Avada 디자인테마의 Welcome 화면에 붙여 넣습니다. 그리고, ‘SUBMIT’을 클릭 합니다. %ed%85%8c%eb%a7%88%ec%84%a4%ec%b9%9810

아래 그림 하단과 같이 ‘Congratulations! Your product is registered now.’라는 메세지가 나타나는것을 확인 하실 수 있습니다. 화면 상단의 ‘Go Manage Plugins’를 클릭 합니다.

아래 그림처럼 3개의 플러그인을 하나씩 차례로 설치 합니다.

위 화면에서 (1), (2)번의 경우는 Install 을 하면 Activate까지 자동으로 해 주는데 (3)번 SLIDE REVOLUTION 의 경우는 아래 그림과 같이  Install 후 Activate을 한번 더 클릭해 주어야 합니다. %ed%85%8c%eb%a7%88%ec%84%a4%ec%b9%9813

위 과정까지를 마쳤으면, 이제 실제로 웹사이트가 어떻게 보이는지 한번 확인을 해 보시기 바랍니다. 웹브라우져를 열고 여러분의 도메인 이름을 입력 해 보세요. 아래와 같이 보이면 워드프레스 와 디자인테마 (Avada)가 정상적으로 설치 된 것입니다. ( 디자인테마의버젼에 따라서 조금 다르게 보일 수 있습니다. 그러나, 에러가 없이 아래와 비슷한 화면이 나타나면 문제가 없는 것 입니다)

4) 워드프레스 기본설정

먼저, 관리자 화면으로 로그인 합니다. 아래 관리자 화면에서 Settings를 클릭 합니다. settings1

아래 내용을 참조해서 이어지는 화면의 내용을 입력하세요. 아래 내용중 (필수) 라고 되있는 부분은 반드시 확인하고 본인의 상황에 맞도록 수정 하세요

  • Site Title (필수) :  브라우져 (크롬,파이어폭스등 ….) 의 탭에 나타나는 웹사이트 제목을 입력 합니다.
  • setting1-1
  • Tagline  : 웹사이트를 설명하는 자신만의 특징있는 문장을 입력 합니다.
  • WordPress Address (URL)   : 서버에 실제 워드프레스가 설치된 URL 입니다. 처음에는 웹호스팅 회사에서 제공한 URL이 입력 되 있을 수 있습니다. 본인의 도메인 이름을 http://mydomain.com 형식으로 입력 하시면 됩니다.
  • Site Address (URL) (필수) : 사용자들이 인터넷에서 본인의 웹사이트로 연결되기 위한 URL입니다.  본인이 구입한 URL 을 http://mydomain.com ( mydomain.com 은 본인의 도메인 이름 ) 의 형식으로 입력하세요.
  • Email (필수) : 웹사이트에서 이메일을 받거나 보낼 때 기본이 되는 이메일을 입력하세요. 예를들어 Contact Us 페이지에서 방문자가 질문을 입력하면 전송되어지는 이메일 주소등을 말합니다.
  • Membership : 회원가입이 가능한 사이트를 만드는 옵션 입니다. 회원가입이 필요 없는 사이트는 체크하지 마시고 그대로 두세요.
  • New user default role : 새 회원이 가입 했을때 새 회원의 기본 권한을 자동으로 설정 하는 기능 입니다.
  • Time Zone (필수) : 본인이 위치한 지역의 시간대를 선택 하세요. ( 워드프레스는 전세계의 모든 지역의 시간대를 지원 합니다 )
  • Date Format : 웹사이트에서 날짜를 보여주는 형식을 지정할수 있습니다.
  • Time Format : 웹사이트에서 시간을 보여주는 형식을 지정할수 있습니다
  • Week start on : 일반적으로 월요일로 그대로 두시면 됩니다.
  • Site Language (필수) : 본인이 원하는 언어를 선택 하세요. 워드프레스는 전세계의 거의 모든 언어를 지원합니다. 처음 워드프레스를 설치하면 기본적으로 영어로 설치가 됩니다. 이 설정을 바꾸면 웹사이트 전체가 선택한 언어로 변경  됩니다.

본 가이드에서는 영문 관리자 화면을 기준으로 설명을 드리고 있습니다. 워드프레스는 언어 설정을 언제든지 자유롭게 변경 가능 합니다.

5) 페이지 만들기

페이지 만들기는 아래 포스팅을 참조하세요. 아래 포스팅에서는 실제로 5개의 페이지를 만드는 것 까지 만을 알아보고, 페이지를 멋지게 꾸민는 것은 10)에서 자세히 설명드리겠습니다.

워드프레스 페이지 만들기 

6) 메뉴 만들기

메뉴 만들기는 아래 포스팅을 참조하세요.

워드프레스 메뉴만들기 

wp-design-structure보통 웹사이트는 보여지는 영역에  따라서 크게 4가지로 구분 할 수 있습니다.  일반적으로 이러한 영역들을 헤더,메인 컨텐츠,사이드바,푸터로 구분 합니다.

일반적인 웹사이트의 경우 헤더와 푸터의 경우는 페이지가 바뀌어도 똑같은 내용을 보여주는것이  일반적입니다, 즉, 한번만 만들어 놓으면 거의 모든 페이지에서 사용되어 진다는 것을 의미합니다.

보통 헤더에는 로고, 메인메뉴, 연락처등이 보여지고, 푸터의경우는 Contact us정보, 메인 메뉴에서 빠진 메뉴들, Copyright 정보등이 보여집니다.

헤더(Header) 만들기

아래 그림과 같이 웹페이지의 상단 부분중 모든 페이지에서 동일하게 보여지는 부분을 헤더(Header)라고 합니다. 일반 적으로 웹사이트 로고(Logo), 메인메뉴등이 보여지게 됩니다. %ed%97%a4%eb%8d%941

헤더를 만들기 위해서는 우리가 사용중인 Avada 디자인 테마의 ‘Theme options’로 이동 합니다.

%ed%97%a4%eb%8d%942

Avada 디자인테마의 Theme Options

Avada 디자인테마를 설치 하면 ‘Theme Options’라는 별도의 관리자 영역을 제공 합니다. 보통 일반적인 워드프레스 유료 디자인테마도 이러한 영역을 제공 합니다. 그러나, Avada 디자인테마의 경우는 이 기능이 아주 잘 되있습니다. 다른 유료 디자인테마에 비해서 훨씬 많은 기능을 제공 합니다. 저희가 추천해 드리는 가장 큰 이유입니다. 본 가이드를 진행 하면서 Avada 디자인테마의 ‘Theme Options’의 좋은 기능들을 최대한 많이 소개해 드리도록 하겠습니다.”

%ed%97%a4%eb%8d%943

아래와 같이 Header Position은 Top으로 유지 합니다. Header Layout 여러분이 보시고 가장 마음에 드는 것으로 선택하시면 됩니다. 선택을 하신 후에는 화면 하단의 Save Changes를 클릭 하신 후 실제로 웹사이트를 열어서 어떻게 보이는지 확인해 보세요. 선택된 Layout이 마음에 들지 않으면 다시 변경 하고 Save Changes를 클릭 하면 됩니다. 항상 무엇인가를 변경하신 후에는 Save Changes를 클릭 하세요!

헤더에 백그라운드 이미지를 넣어 줄 수 있습니다.

%ed%97%a4%eb%8d%946%ed%97%a4%ed%84%b05

Header styling 을 클릭해서 아래와 같이 스타일을 설정 해줍니다. %ed%97%a4%eb%8d%947

Sticky Header 설정을 해줍니다. %ed%97%a4%eb%8d%948

로고(Logo) 설정하기

Theme Options > Logo로 이동 합니다. 아래 그림과 같이 로고를 설정 해줍니다. logo1

 

파비콘(Favicon) 설정하기

Theme Options > Logo > Favicon 으로 이동 합니다. 아래 그림과 같이 파비콘을 설정 해줍니다. 파비콘(Favicon)이란? 웹브라우져의 탭의 왼쪽에 나타나는 웹사이트 고유의 아이콘 입니다. 보통 24×24, 16×16  픽셀 사이즈의 아이콘을 말합니다.  http://www.favicon-generator.org/  에서 Free로 만드실 수도 있고, 직접 만드셔도 됩니다.

favicon

푸터는 헤더와 마찬가지로 모든 페이지에서 동일하게 보이게 됩니다. 그리고, 화면 가장 아래 부분에 위치 하게 됩니다. 보통 메인 메뉴이외의 페이지 링크, Contact 정보, 최근글 혹은 제품 2~3개정도를 보여주게 됩니다. 그리고, 화면 가장 하단에는 Copyright 문구를 넣는 것이 일반 적입니다.

%ed%91%b8%ed%84%b00

Avada > Theme Options > Footer > Footer Contents를 클릭 합니다.

%ed%91%b8%ed%84%b01

푸터 컨텐츠 영역을 보이지 않게 하려면 ‘Footer Widgets’을 Off로 변경할 수 있습니다. 푸터 컨텐츠를 몇개의 컬럼(가로로 영역을 나눔)으로 나눌 것인지 설정 할 수 있습니다.  아래 그림의 ‘Footer Special Effects’ 의 경우는 다음과 같은 효과들을 선택 할수 있습니다. ( 설명이 이해가 않되시면 직접 설정을 변경 하신 후 웹사이트가 어떻게 보이는지 확인 하시면 보다 명확히 이해하 실 수 있습니다)

  • Footer Parallax Effect : 푸터의 위치를 항상 고정 시키고 스크롤을 아래로 하면 푸터가 위에서 내려온 컨텐츠에 덮히는 효과를 나타내줌.
  • Parallax Background Image : 푸터의 배경 이미지의 위치를 항상 고정 시키고 스크롤을 아래로 하면 푸터 배경 이미지가가 위에서 내려온 컨텐츠에 덮히는 효과를 나타내줌.
  • Sticky Footer : 푸터의 위치를 위 헤더에서 설명한 Sticky Header 처럼 항상 화면 하단에 보이도록 하는 효과를 나타네줌.
  • Sticky Footer and Parallax Background Image : 푸터의 배경 그림은 항상 같은 위치에 있고 푸터 컨텐츠만이 스크롤되는 효과를 줌.

Copyright Bar를 보여줄지 말지 설정이 가능 합니다. Copyright에 보여줄 내용을 직접 입력 가능 합니다.

%ed%91%b8%ed%84%b02

Avada > Theme Options > Footer > Footer Background Image를 클릭 합니다. 아래 그림과 같이 푸터 배경 이미지를 업로드 하실 수 있습니다. 여기서 업로드된 이미지는 푸터 컨텐츠 영역에 보여지게 됩니다. ‘100% Background Image’를 On 하시면 이미지의 사이즈에 상관없이 푸터의 컨텐츠 영역을 꽉채워 줍니다.

%ed%91%b8%ed%84%b03

Avada > Theme Options > Footer > Footer Styling를 클릭 합니다. 푸터 부분을 아래 그림과 같이 아주 세밀하게 설정이 기능 합니다. 자세한 설정 방법은 아래 그림을 참조하세요.

%ed%91%b8%ed%84%b04

8) 사이드바 (Sidebar) 및 위젯 (Widget) 설정하기

%ec%82%ac%ec%9d%b4%eb%93%9c%eb%b0%942%ec%82%ac%ec%9d%b4%eb%93%9c%eb%b0%941 사이드바 (Sidebar)란? 웹사이트 메인 컨텐츠의 왼쪽 혹은 오른쪽에 위치하며 메인 컨텐츠에 따라서 공통적으로 보이는 부분들을 보여주는 영역 입니다. 일반적으로 서브 메뉴, 최근글 리스트, 검색창, 광고등이 올 수 있으며, 페이지의 내용별로 사이드바를 별도로 지정하 실 수도 있습니다. 사이드바는 경우에 따라서 보이지 않게  하기도 합니다. %ec%82%ac%ec%9d%b4%eb%93%9c%eb%b0%943사이드바를 만들기 전에 한가지 먼저 알아 두셔야 할 것이 있습니다. 바로  위젯 (Widget) 이라는 것입니다. 위젯은 사이드바에 쉽게 끼워 넣을 수 있는 웹사이트 컨텐츠의 덩어리 입니다. 즉, 사이드바에 위젯을 하나 혹은 여러개를 끼워넣어서 원하는 컨텐츠 영역을 만들 수 있습니다. 이런 위젯들은 이미 기본적으로 제공되는 것 들도 있고 Avada 디자인테마같이 유료 디자인테마를 구입하면 추가적으로 제공되는 것들도 있습니다. 이러한 위젯을 통해서 웹사이트를 보다 Active하고 Unique하게 꾸미 실 수 있습니다.

사이드바에 위젯 추가하기

Avada > Appearance > Widgets 을 클릭 합니다. %ec%82%ac%ec%9d%b4%eb%93%9c%eb%b0%944

아래 그림과 같이 사이드바와 위젯은 밀접한 관계가 있기 때문에 한 화면에서 관리를 합니다.  필요 따라서 사이드바를 추가로 만들 수 있습니다. 보통은 이미 만들어져 있는 사이드바를 사용합니다. 아래 그림에서 보면 이전 프터에서 알아봤던 푸터 컨텐츠 영역을 위한 사이드바 4개 (Footer Widget1, Footer Widget2, Footer Widget3, Footer Widget4)가 이미 만들어져 있음을 알 수 있습니다. %ec%82%ac%ec%9d%b4%eb%93%9c%eb%b0%945

아래 그림과 같이 Archive라는 위젯을 Drag & Drop방식을 통해서 Blog라는 사이드바에 넣어줄 수 있습니다. 사이드바에는 여러개의 위젯을 넣어 줄 수 있고 Drag & Drop방식을 통해서 순서를 정해 줄 수 있습니다. 각각의 위젯을 사이드바로 이동한 후에는 위젯의 설정을 해줄 수 있습니다. %ec%82%ac%ec%9d%b4%eb%93%9c%eb%b0%946

사이드바 위치및 내용 정해주기 (전체적으로)

사이드의 위치및 내용은 전체적으로 정해 주거나 페이지별로 따로 정해 줄 수 있습니다. 먼저 전체적으로 사이드바의 위치및 내용을 통일해서 정해주는 방법부터 설명해 드리겠습니다.  Avada > Theme Options > Sidebars를 클릭합니다. 그러면 각각의 페이지 타입별로 사이트바의 위치와 내용을 정해주도록 구분되 있습니다. 여기서는 일반 페이지(Pages)의 경우를 설명합니다. (다른 페이지 타입들도 동일하게 적용하시면 됩니다)

%ec%82%ac%ec%9d%b4%eb%93%9c%eb%b0%948

사이드바 위치및 내용 정해주기 (페이지마다)

개별 페이지마다 사이드바의 위치와 내용을 따로 설정 할 수 있습니다. 아래 그림처럼 Pages > All Pages 로 이동 합니다. 사이드바를 다르게 설정해 줄 페이지의 제목을 클릭 합니다. (여기서는 About us 페이지 입니다) %ec%82%ac%ec%9d%b4%eb%93%9c%eb%b0%9410

아래 그림과 같이 개별 페이지별로 설정을 다르게 할 수 있습니다. 설정을 마치신 후에는 반드시 화면 상단으로 스크롤하셔서 우측에 있는 ‘Publish’ 혹은 ‘Update’ 버튼을 클릭 하세요.

%ec%82%ac%ec%9d%b4%eb%93%9c%eb%b0%9411

9) 블로그 설정하기

블로그는 웹사이트를 마케팅 하기위한 가장 유용한 방법중 하나입니다. 워드프레스의 경우는 이러한 블로그를 만들고 관리하는데 특화되 있습니다. 그리고, 워드프레스 블로그의 경우는 검색엔진에서 잘 노출 되도록 개발이 되있습니다. 블로그만 잘 관리해도 여러분의 웹사이트에 방문자가 늘어나는것을 직접 경험 하실 수 있습니다.

블로그 카테고리 설정하기

블로그는 글의 내용에 따라서 별도의 카테고리별로 구분 할 수 있습니다. 카테고리별로 구분을 해 놓으면 향후에 검색 과 관리가 편리합니다. 미리 카테고리 내용을 정해줄 수도 있고 글(Post)을 작성 하면서 카테고리를 추가 할 수도 있습니다. 여기서는 미리 카테고리를  정하는 방법에 대해서 설명 드리겠습니다. Posts > Categories로 이동 합니다.

%eb%b8%94%eb%a1%9c%ea%b7%b81

아래와 같이 새로운 카테고리를 만들거나 이미 만들어진 카테고리를 수정하거나 삭제 할 수 있습니다.

%eb%b8%94%eb%a1%9c%ea%b7%b82

블로그 글(Post) 작성하기

블로그 글 작성 방법은 다음과 같습니다. Posts > Add New를 클릭 합니다.

  1. 제목을 입력 합니다.
  2. 내용을 입력 합니다. 만약 이미지를 추가 하려면 왼쪽 상단에 있는 ‘Add Media’ 버튼을 클릭한 후 이미지를 업로드 합니다. 내용 입력 창은 아주 편리하게 사용이 가능 합니다. 예를들어 Youtube 비디오의 경우 주소만 copy & paste하면 자동으로 비디오를 추가 해줍니다.
  3. 카테고리를 선택해 줍니다. 만약 원하는 카테고리가 없으면 ‘ Add New Category’를 클릭해서 새로운 카테고리를 직접 만들 수 있습니다.
  4. Feature Image를 클릭해서 글이 리스트 될때 보여질 대표 이미지를 입력 합니다.
  5. Publish를 클릭해서 작성한 내용을 저장 해줍니다.

아래 그림 하단에서 볼 수 있듯이 Avada 디자인테마를 사용하면 기본적으로 글 작성 할 때 제공되는 옵션보다 훨씬 다양한 옵션들이 제공 됩니다. %eb%b8%94%eb%a1%9c%ea%b7%b83

워드프레스 기본 에디터 사용방법 (글,페이지 작성용)

블로그의 내용은 워드프레스 기본 에디터를 사용해서 작성하게 됩니다. 아래 그림은 대략적인 기본 에디터의 사용 방법입니다.

10) 페이지 꾸미기

이번 단계에서는 페이지를 보기 좋게 디자인하는 방법에 대해서 자세히 설명 드리겠습니다. 보통 페이지를 보기 좋게 꾸미기 위해서는 HTML, CSS, JAVASCRIPT등의 웹사이트 제작 기술을 잘 알고 있어야 가능 합니다. 그러나, 우리는 현재  Avada 디자인테마를 사용하고 있습니다. Avada 디자인테마는 페이지를 멋지게 꾸미기 위해서 Fusion Builder 라는 도구를 제공 합니다. 이 Fusion Builder를 통해서 우리는 코딩을 하지 않고도 Drag & Drop 방식으로 멋지게 페이지들을 디자인 할 수 있습니다.

Avada 디자인테마의 Fusion Builder 사용법

이미 우리가 만들어 놓은 Home 페이지를 오픈 합니다. Pages > All Pages > Home을 선택 합니다. %ed%8e%98%ec%9d%b4%ec%a7%80%eb%94%94%ec%9e%90%ec%9d%b81

아래 그림처럼 워드프레스 기본 에디터로 기본 선택이 되있으면 Avada Fusion Builder로 변경 합니다.

%ed%8e%98%ec%9d%b4%ec%a7%80%eb%94%94%ec%9e%90%ec%9d%b82

Fusion Builder를 사용하는 방법은 아래와 같습니다.

  1. Container를 클릭해서 컨텐츠를 만들 영역을 만들어 줍니다.
  2. Container가 어떤 컬럼(Column)의 조합으로 만들어 질 것인지 선택해 줍니다.
  3. 각각의 컬럼(Column)에 있는 Add Element를 클릭해서 컨텐츠 Element 선택창을 오픈해 줍니다.
  4. 컨텐츠 Element 선택 창에서 원하는 컨텐츠 Element를 선택 합니다.
  5. 컨텐츠 Element 설정창을 통해서 컨텐츠 Element를 원하는 형태로 만들어 줍니다.
  6. 위에서 원하는대로 작업이 끝나면 ‘SAVE’를 클릭해서 컨텐츠 Element를 저장해 줍니다

위 순서를 반복해서 원하는 컨텐츠 Element를 원하는 컬럼에 추가 해줍니다.

%ed%8e%98%ec%9d%b4%ec%a7%80%eb%94%94%ec%9e%90%ec%9d%b83

Fusion Builder에서 사용 가능한 컨텐츠 Element들은 다음과 같습니다. 각각의 컨텐츠 Element들은 설정 방법이 조금씩 다릅니다. 그러나, 하나씩 직접 적용해 보면서 본인의 요구에 맞는 설정을 찾아나가다 보면 어렵지 않게 원하는 결과를 얻을 수 있을것이라 생각됩니다.

%ed%8e%98%ec%9d%b4%ec%a7%80%eb%94%94%ec%9e%90%ec%9d%b84

11) 한국형 게시판 만들기

전세계적으로 운영되는 웹사이트들은 대부분 정보를 제공하는 기본적인 도구로 블로그(Blog) 형태를 사용합니다. 그러나, 가끔 한국적인 포털(Portal)사이트에 익숙한 사용자들을 위해서 한국형 게시판을 제공해야 할 필요가 있을때가 있습니다. 이러한 요구 사항에 부합하기 위해서는 몇가지 플러그인을 설치 해야만 합니다.

플러그인 이란?

플러그인이란, 쉽게 예를 들어서 iPhone App Store혹은 Google Play의 App Store에서 제공하는 App과 같은 것이라 생각하시면 됩니다. 워드프레스는 현존하는 웹사이트 제작 도구중 가장 많은 약 50,000개의 Free 플러그인을 가지고 있으며 이보다 많은 유료 플러그인들이 우리가 상상 할 수 있는 거의 모든 분야의 기능적인 부분들을 지원해주기 위해서 준비중 입니다. 따라서 이러한 플러그인을 장 활용하면 여러분들이 원하시는 웹사이트의 기능들을 구현 하 실 수 있습니다.

한국형 게시판 KBOARD 설치

한국형 게시판 KBOARD 다운로드  에서 KBOARD 플러그인을 다운로드 합니다. 아래 그림처럼 게시판 플러그인과 댓글 플러그인 2개의 화일을 본인의 PC(Lap Top)에 다운로드 받습니다. %ed%95%9c%ea%b5%ad%ed%98%95%ea%b2%8c%ec%8b%9c%ed%8c%901-1

다운로드 받은 KBOARD 게시판을 설치하기 위해서 Plugins > Add New로 이동 한 후, Upload Plugin을 클릭 합니다.

%ed%95%9c%ea%b5%ad%ed%98%95%ea%b2%8c%ec%8b%9c%ed%8c%902

Choose File’을 선택 후 아래 그림과 같이 kboard-wordpress-plugin-X.X.X 화일 (게시판 플러그인 메인 화일)을 선택 합니다.

%ed%95%9c%ea%b5%ad%ed%98%95%ea%b2%8c%ec%8b%9c%ed%8c%903

Install Now를 클릭 합니다.

%ed%95%9c%ea%b5%ad%ed%98%95%ea%b2%8c%ec%8b%9c%ed%8c%904

‘Active Plugin’을 클릭 합니다.

댓글 플러그인 4.4 버젼을 설치 하기 위해서  Plugins > Add New로 이동해서 ‘Upload Plugin’을 클릭 합니다.

Choose File을 클릭해서 댓글 플러그인인 ‘kboard-comments-wordpress-plugin-X.X’를 선택 합니다.

‘Install Now’를 클릭합니다. %ed%95%9c%ea%b5%ad%ed%98%95%ea%b2%8c%ec%8b%9c%ed%8c%906

Activate Plugin’을 클릭합니다. %ed%95%9c%ea%b5%ad%ed%98%80%ea%b2%8c%ec%8b%9c%ed%8c%905

한국형 KBOARD에 새로운 게시판 만들기

New Forum’으로 이동 합니다. %ed%95%9c%ea%b5%ad%ed%98%95%ea%b2%8c%ec%8b%9c%ed%8c%90-%eb%a7%8c%eb%93%a4%ea%b8%b01

새 게시판 만들기 (일반설정). 아래그림을 참조하세요. 보다 자세한 설정 방법은 KBOARD 사용자 커뮤니티 를 참조하세요. %ed%95%9c%ea%b5%ad%ed%98%95%ea%b2%8c%ec%8b%9c%ed%8c%90-%eb%a7%8c%eb%93%a4%ea%b8%b02

새 게시판 만들기 (보안설정). 아래그림을 참조하세요. 보다 자세한 설정 방법은 KBOARD 사용자 커뮤니티 를 참조하세요. %ed%95%9c%ea%b5%ad%ed%98%95%ea%b2%8c%ec%8b%9c%ed%8c%90-%eb%a7%8c%eb%93%a4%ea%b8%b03

한국형 KBOARD를 페이지에 추가하기

Forum List로 이동 한 후 게시판을 선택 합니다. %ed%95%9c%ea%b5%ad%ed%98%95%ea%b2%8c%ec%8b%9c%ed%8c%90-%ec%82%ac%ec%9a%a9%ed%95%98%ea%b8%b01

Forum List로 이동 한 후 게시판을 선택 합니다. %ed%95%9c%ea%b5%ad%ed%98%95%ea%b2%8c%ec%8b%9c%ed%8c%90-%ec%82%ac%ec%9a%a9%ed%95%98%ea%b8%b02

Kboard > 게시판으로 사용 할 페이지를 선택 합니다. ( 예제의 경우는 ‘자유게시판’이라는 페이지를 새로 만들었습니다) %ed%95%9c%ea%b5%ad%ed%98%95%ea%b2%8c%ec%8b%9c%ed%8c%90-%ec%82%ac%ec%9a%a9%ed%95%98%ea%b8%b03

페이지 메인 컨텐츠 부분에 Copy해 두었던 ‘게시판숏코드’를 븥여넣습니다. ‘Update’를 클릭 합니다. %ed%95%9c%ea%b5%ad%ed%98%95%ea%b2%8c%ec%8b%9c%ed%8c%90-%ec%82%ac%ec%9a%a9%ed%95%98%ea%b8%b04

숏코드(Shortcode)란?

숏코드(Shortcode)는 미리 만들어진 기능을 메인 컨텐츠에 간단한 형태로 입력해서 원하는 기능을 구현하는 방법입니다. 워드프레스(WordPress)만의 독특한 기능 입니다.  Kboard 게시판의 경우 ‘kboard id=1’과 같이 간단한 코드를 입력 함으로써 게시판을 페이지에 보여주고 기능이 작동 하도록 해줍니다. 이러한 숏코드(Shortcode)기능을 많이 갖춘 플러그인이 보다 활용도가 높은 플러그인이라 할 수 있습니다.

실제로 웹사이트에 접속해서 게시판이 정상적으로 만들어졌는지 확인합니다. 아래 그림과같이 ‘자유게시판’이라는 게시판이 정상적으로 만들어 졌음을 확인 할 수 있습니다.

%ed%95%9c%ea%b5%ad%ed%98%95%ea%b2%8c%ec%8b%9c%ed%8c%90-%ec%82%ac%ec%9a%a9%ed%95%98%ea%b8%b05

12) 웹사이트 접속통계 플러그인 설치하기

웹사이트를 운영하면서 접속자에 대한 통계정보를 기록하는 것은 아주 중요합니다. 웹사이트를 접속한 사용자의 위치(국가), 어떤 검색엔진을 통해서 접속했는지, 어떤 키워드를 입력해서 접속을 했는지, 하루/일주일/한달간의 접속 통계는 어떻게 되는지…등의 통계 정보를 잘 모니터링 하면 웹사이트 컨텐츠를 어떻게 운영해야 하는지, 온라인 마케팅을 어떤 방향으로 해야 하는지 실마리(Clue)를 얻게 됩니다. 그래서 WP Statistics라는 유용한 웹사이트 접속 통계정보를 제공하는 플러그인을 소개 해드립니다..

웹사이트 방문통계 플러그인(WP Statistics)설치 및 리포트보기

Plugins > Add New 를 클릭 합니다. weblog1

Keyword를 ‘wp statistics’라고 입력 합니다. 그런후 아래와 같이 리스트가 나오면 첫번째 플러그인인 WP Statistics의 ‘Install Now’를 클릭 합니다. weblog2

Activate’을 클릭합니다. weblog3

WP Statistics가 정상적으로 설치 된후 아래와 같이 WP Statistics > Overview를 클릭 합니다. weblog4

아래 그림과 같이 다양한 웹사이트 방문 통계 정보를 확인 하실 수 있습니다. weblog5

ThemeForest에서 구입한 디자인테마 웹사이트에 설치하기

ThemeForest에서 구입한 디자인테마 웹사이트에 설치하기

by | Jan 14, 2016 | 워드프레스 (Wordpress) 사용법

ThemeForest 에서 디자인테마를 구입 하셨으면 이제 실제로 웹사이트에 설치하는 작업이 필요합니다.
디자인테마 설치는 아주 간단합니다.

(본 포스팅은 이미 ThemeForest에서 디자인테마를 구입한 후의 설치과정을 설명드리는 내용 입니다. 아직 디자인테마를 구입하지 않으신 경우는 ThemeForest에서 원하는 디자인테마 검색하고 구입하기를 먼저 참조하세요)

[fusion_builder_container hundred_percent=”yes” overflow=”visible”][fusion_builder_row][fusion_builder_column type=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”no” center_content=”no” min_height=”none”][fusion_fontawesome icon=”fa-play-circle” size=”” flip=”” rotate=”” spin=”no” alignment=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” circle=”yes” iconcolor=”” circlecolor=”” circlebordercolor=”” animation_type=”” animation_direction=”down” animation_speed=”0.1″ animation_offset=””/][/fusion_fontawesome]ThemeForest.net 으로 접속해서 로그인 하기.
아래 그림처럼 Sign in을 클릭합니다.THEMEFOREST-DOWNLOAD-1

Web Hosting
[fusion_fontawesome icon=”fa-play-circle” size=”” flip=”” rotate=”” spin=”no” alignment=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” circle=”yes” iconcolor=”” circlecolor=”” circlebordercolor=”” animation_type=”” animation_direction=”down” animation_speed=”0.1″ animation_offset=””/][/fusion_fontawesome]로그인 아이디 와 패스워드를 입력 한 후 Sing in your account 를 클릭 합니다.THEMEFOREST-DOWNLOAD-2

 

[fusion_fontawesome icon=”fa-play-circle” size=”” flip=”” rotate=”” spin=”no” alignment=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” circle=”yes” iconcolor=”” circlecolor=”” circlebordercolor=”” animation_type=”” animation_direction=”down” animation_speed=”0.1″ animation_offset=””/][/fusion_fontawesome]로그인을 한 후 우측 상단 본인의 아이디에 마우스를 가져가면 하위 메뉴중 “Downloads” 가 있는데 그 링크를 클릭합니다.THEMEFOREST-DOWNLOAD-3

 

[fusion_fontawesome icon=”fa-play-circle” size=”” flip=”” rotate=”” spin=”no” alignment=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” circle=”yes” iconcolor=”” circlecolor=”” circlebordercolor=”” animation_type=”” animation_direction=”down” animation_speed=”0.1″ animation_offset=””/][/fusion_fontawesome]Downlaod 페이지에는 여러분이 구입 하신 디자인테마 혹은 플러그인이 전부 나타납니다. 이 중 여러분이 구입한 디자인 테마 중 하나를 찾아서  “Download” 를 클릭 합니다.
하위 메뉴 중 Install WordPress File Only 를 선택 합니다.THEMEFOREST-DOWNLOAD-4

 

[fusion_fontawesome icon=”fa-play-circle” size=”” flip=”” rotate=”” spin=”no” alignment=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” circle=”yes” iconcolor=”” circlecolor=”” circlebordercolor=”” animation_type=”” animation_direction=”down” animation_speed=”0.1″ animation_offset=””/][/fusion_fontawesome]디자인 테마를 웹사이트에 적용(설치)하기 위해서 워드프레스 관리자 페이지로 로그인 합니다.
Appearance > Themes 으로 이동 합니다. 한글 워드프레스의 경우는 외모 > 테마  입니다.THEMEFOREST-DOWNLOAD-8

 

[fusion_fontawesome icon=”fa-play-circle” size=”” flip=”” rotate=”” spin=”no” alignment=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” circle=”yes” iconcolor=”” circlecolor=”” circlebordercolor=”” animation_type=”” animation_direction=”down” animation_speed=”0.1″ animation_offset=””/][/fusion_fontawesome]“Add New” 버튼을 클릭 합니다. THEMEFOREST-DOWNLOAD-9

 

[fusion_fontawesome icon=”fa-play-circle” size=”” flip=”” rotate=”” spin=”no” alignment=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” circle=”yes” iconcolor=”” circlecolor=”” circlebordercolor=”” animation_type=”” animation_direction=”down” animation_speed=”0.1″ animation_offset=””/][/fusion_fontawesome]Upload Theme 을 클릭 합니다. THEMEFOREST-DOWNLOAD-10

 

[fusion_fontawesome icon=”fa-play-circle” size=”” flip=”” rotate=”” spin=”no” alignment=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” circle=”yes” iconcolor=”” circlecolor=”” circlebordercolor=”” animation_type=”” animation_direction=”down” animation_speed=”0.1″ animation_offset=””/][/fusion_fontawesome]디자인 테마 설치 화일을 선택 합니다.THEMEFOREST-DOWNLOAD-11

 

[fusion_fontawesome icon=”fa-play-circle” size=”” flip=”” rotate=”” spin=”no” alignment=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” circle=”yes” iconcolor=”” circlecolor=”” circlebordercolor=”” animation_type=”” animation_direction=”down” animation_speed=”0.1″ animation_offset=””/][/fusion_fontawesome]“Install  now” 를 클릭 합니다.THEMEFOREST-DOWNLOAD-12

 

[fusion_fontawesome icon=”fa-play-circle” size=”” flip=”” rotate=”” spin=”no” alignment=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” circle=”yes” iconcolor=”” circlecolor=”” circlebordercolor=”” animation_type=”” animation_direction=”down” animation_speed=”0.1″ animation_offset=””/][/fusion_fontawesome]설치가 완료되면 “Active” 를 클릭해서 설치한  디자인 테마를 실제로 웹사이트 디자인으로 적용합니다.THEMEFOREST-DOWNLOAD-13

 

[fusion_fontawesome icon=”fa-play-circle” size=”” flip=”” rotate=”” spin=”no” alignment=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” circle=”yes” iconcolor=”” circlecolor=”” circlebordercolor=”” animation_type=”” animation_direction=”down” animation_speed=”0.1″ animation_offset=””/][/fusion_fontawesome]설치한 디자인 테마가 워드프레스의 Active 디자인으로 적용된것을 확인 하실수 있습니다.THEMEFOREST-DOWNLOAD-14

 

위 와 같이 ThemeForest 에서 구입한 디자인 테마를 웹사이트에 적용하는 방법에 대해서 알아 봤습니다.
처음에는 무료 디자인테마를 가지고 시작을 하실 수 도 있습니다.
그리고, 무료 디자인테마도 잘 찾아보면  쓸만한 것들이 많이 있습니다.
그러나, 저희의 경험상 무료 디자인테마에는 몇가지 분명한 한계가 있습니다 .

  • Support를 받기가 어렵습니다.
  • 워드프레스 업데이트에 따른 디자인테마 업데이트가 확실하지 않습니다.
  • 필요한 기능은 Pro버전(유료버전)에서 지원하는 경우가 많습니다.
  • 디자인테마 커스터마이징 옵션에서 큰차이가 있습니다. (커스터마이징 옵션을 별로 지원하지 않습니다)

여러분이 빠른 시간안에 전문가가 제작한 것과 같은 커스텀 디자인 웹사이트를 제작하기를 원하시면 유료 디자인테마가 많은 도움을 줄 것이라 생각합니다.
ThemeForest에서 디자인 테마들을 더 검색해 보시려면 아래 버튼을 클릭하세요.
[/fusion_builder_column][/fusion_builder_row][/fusion_builder_container][fusion_builder_container hundred_percent=”yes” overflow=”visible”][fusion_builder_row][fusion_builder_column type=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”no” center_content=”no” min_height=”none”][fusion_button link=”https://ezwebmis.com/go/themeforest/” icon=”fa-search-plus” side=”left” target=”blank” color=”5218b7″ textcolor=”ffffff”]ThemeForest 웹사이트로 이동하기[/fusion_button]

Web Hosting[/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]

웹사이트 메뉴만들기

웹사이트 메뉴만들기

by | Oct 31, 2015 | 워드프레스 (Wordpress) 사용법

메뉴는 보통 웹사이트 상단(헤더) 부분에 포함됩니다. 메뉴는 사용자에게 원하는 페이지로 쉽게 이동 할 수 있도록 링크를 제공 합니다.

[fusion_builder_container hundred_percent=”yes” overflow=”visible”][fusion_builder_row][fusion_builder_column type=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”no” center_content=”no” min_height=”none”][fusion_fontawesome icon=”fa-play-circle” size=”” flip=”” rotate=”” spin=”no” alignment=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” circle=”yes” iconcolor=”” circlecolor=”” circlebordercolor=”” animation_type=”” animation_direction=”down” animation_speed=”0.1″ animation_offset=””/][/fusion_fontawesome]관리자의 왼쪽 메뉴에서 ‘Appearance > Menus’를 클릭 합니다.%eb%a9%94%eb%89%b41

Web Hosting

[fusion_fontawesome icon=”fa-play-circle” size=”” flip=”” rotate=”” spin=”no” alignment=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” circle=”yes” iconcolor=”” circlecolor=”” circlebordercolor=”” animation_type=”” animation_direction=”down” animation_speed=”0.1″ animation_offset=””/][/fusion_fontawesome]아래 그림과 같이 Menu name을 하나 정해주고 ‘Create menu’를 클릭 합니다. 여기서는 main 이라는 이름을 정해 줬습니다.%eb%a9%94%eb%89%b42

 

[fusion_fontawesome icon=”fa-play-circle” size=”” flip=”” rotate=”” spin=”no” alignment=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” circle=”yes” iconcolor=”” circlecolor=”” circlebordercolor=”” animation_type=”” animation_direction=”down” animation_speed=”0.1″ animation_offset=””/][/fusion_fontawesome]아래 그림과 같이 5개의 페이지를 선택 한 후 ‘Add to Menu’를 클릭 합니다.%eb%a9%94%eb%89%b43

 

[fusion_fontawesome icon=”fa-play-circle” size=”” flip=”” rotate=”” spin=”no” alignment=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” circle=”yes” iconcolor=”” circlecolor=”” circlebordercolor=”” animation_type=”” animation_direction=”down” animation_speed=”0.1″ animation_offset=””/][/fusion_fontawesome]아래 그림과 같이 5개의 페이지가 메뉴로 추가 되었습니다. 그러나, 메뉴의 순서가 우리가 원하는대로 되있지 않습니다. 이럴경우는 이동을 원하는 메뉴를 마우스로 Drag & Drop 방식으로 이동이 가능합니다. 아래 그림처럼 원하는 위치로 차례로 이동 시킵니다.%eb%a9%94%eb%89%b45

 

[fusion_fontawesome icon=”fa-play-circle” size=”” flip=”” rotate=”” spin=”no” alignment=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” circle=”yes” iconcolor=”” circlecolor=”” circlebordercolor=”” animation_type=”” animation_direction=”down” animation_speed=”0.1″ animation_offset=””/][/fusion_fontawesome]원하는대로 메뉴를 변경 하신 후에는 화면 하단의 ‘Main Navigation’을 클릭 한 후 ‘Save Menu’를 클릭 합니다.%eb%a9%94%eb%89%b46

 

[fusion_fontawesome icon=”fa-play-circle” size=”” flip=”” rotate=”” spin=”no” alignment=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” circle=”yes” iconcolor=”” circlecolor=”” circlebordercolor=”” animation_type=”” animation_direction=”down” animation_speed=”0.1″ animation_offset=””/][/fusion_fontawesome]메뉴설정이 잘 됬는지 확인 하기 위해서 본인의 웹사이트를 확인 합니다. 아래 그림과 같이 이전 화면에서 설정한 5개의 메뉴가 원하는 순서대로 구성되 있는 것을 확인 할 수 있습니다.%eb%a9%94%eb%89%b47

Web Hosting[/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]

워드프레스 페이지 만들기

워드프레스 페이지 만들기

by | Oct 30, 2015 | 워드프레스 (Wordpress) 사용법

하나의 웹사이트는 하나 이상의 페이지들이 모여서 만들어지게 됩니다.
따라서 자신의 컨텐츠를 어떻게 구분 할 것 인지에 따라서 페이지수가 결정 됩니다.

이번 포스팅에서는 일반적으로 가장 많이 사용되는 아래 몇개의 페이지를 실제로 만들어 보도록 하겠습니다.
여기서는 페이지를 만드는것 까지만을 알아보고 실제로 페이지를 멋지게 디자인하는 방법은 다른 포스팅에서 알아 보도록 하겠습니다.

  • Home : 웹사이트에 처음 접속 할 때 보여지는 페이지 입니다.
  • About us : 무엇을 위한 웹사이트인지 소개하는 페이지 입니다.
  • Our Products & Services : 웹사이트에서  방문자들에게 전달 할 중요한 정보들을 하나 혹은 여러개의 페이지로 나누어서 보여주게 됩니다. 예를들어, 제품이나 서비스에 대한 소개등을 들 수 있습니다.
  • FAQ : 자주 묻는 질문을 정리해 놓은 페이지 입니다.
  • Contact us : 주소, 연락처, 이메일, 간단한 질문을  사용자가 입력하면 이메일등으로 받을 수 있도록 만든 페이지 입니다.

 

[fusion_builder_container hundred_percent=”yes” overflow=”visible”][fusion_builder_row][fusion_builder_column type=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”no” center_content=”no” min_height=”none”][fusion_fontawesome icon=”fa-chevron-right” circle=”yes” size=”13px” iconcolor=”” circlecolor=”” circlebordercolor=”” rotate=”” spin=”no” animation_type=”0″ animation_direction=”down” animation_speed=”0.1″ alignment=”left” class=”” id=””/]페이지를 만들기 위해서는, 워드프레스 관리자로 로그인 합니다. 왼쪽 메뉴 중 ‘Pages’라는 메뉴를 클릭 합니다.

Web Hosting

[fusion_fontawesome icon=”fa-chevron-right” circle=”yes” size=”13px” iconcolor=”” circlecolor=”” circlebordercolor=”” rotate=”” spin=”no” animation_type=”0″ animation_direction=”down” animation_speed=”0.1″ alignment=”left” class=”” id=””/]이미 만들어진 페이지가 있으면 여기에 리스트로 보여지게 됩니다. 리스트에서 특정 페이지를 선택해서 편집 혹은 삭제가 가능 합니다.  새로운 페이지를 만들기 위해서는 ‘Add New’를 클릭 합니다.%ed%8e%98%ec%9d%b4%ec%a7%802

[fusion_fontawesome icon=”fa-chevron-right” circle=”yes” size=”13px” iconcolor=”” circlecolor=”” circlebordercolor=”” rotate=”” spin=”no” animation_type=”0″ animation_direction=”down” animation_speed=”0.1″ alignment=”left” class=”” id=””/]아래와 같이 새 페이지 작성 화면이 나타납니다. 먼저, 페이지 제목을 ‘Home’ 이라고 입력 합니다. 이번 과정에서는 페이지 내용을 일단 비워두겠습니다. 오른쪽에 있는 ‘Publish’를 클릭 합니다.%ed%8e%98%ec%9d%b4%ec%a7%803

[fusion_fontawesome icon=”fa-chevron-right” circle=”yes” size=”13px” iconcolor=”” circlecolor=”” circlebordercolor=”” rotate=”” spin=”no” animation_type=”0″ animation_direction=”down” animation_speed=”0.1″ alignment=”left” class=”” id=””/]다시 ‘Pages’를 클릭 하면 아래와 같이 ‘Home’ 페이지가 만들어 졌음을 알 수 있습니다.%ed%8e%98%ec%9d%b4%ec%a7%804

[fusion_fontawesome icon=”fa-chevron-right” circle=”yes” size=”13px” iconcolor=”” circlecolor=”” circlebordercolor=”” rotate=”” spin=”no” animation_type=”0″ animation_direction=”down” animation_speed=”0.1″ alignment=”left” class=”” id=””/]위와 같은 과정을 반복해서 원하는 만큼 페이지를 만드세요. 아래 화면은 5개의 페이지를 모두 만든 후의 페이지 리스트 입니다.%ed%8e%98%ec%9d%b4%ec%a7%805

5개의 페이지를 만들어 보았습니다. 위 내용을 참조하셔서 여러분의 Needs에 맞도록 페이지를 직접 만들어 보세요.

Web Hosting[/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]

웹사이트 디자인 구조이해

웹사이트 디자인 구조이해

by | Oct 29, 2015 | 워드프레스 (Wordpress) 사용법

수많은 웹사이트들은 다양한 디자인과 구조들을 가지고 있습니다.  그러나, 실제로 내부를 들여다 보면 대부분 비슷한 구조를 가지고 있음을 알수 있습니다.  좌측에 있는 그림과 같이, 웹사이트의 디자인 관점에서 크게 4가지로 나눌수 있습니다.

wp-design-structure헤더 및 푸터의 경우는 모든 페이지에서 같은 내용이 보여지도록 되있습니다. 즉, 한번 만 헤더 및 푸터를 만들어 놓으면 모든 페이지에서 자동으로 보여지게 되는 것입니다.  내용을 변경하는 경우도 마찬 가지 입니다. 해더나 푸터의 내용을 한번 만 변경하면 모든 페이지에서  자동으로 변경이 됩니다.  이 부분에 착안해서 웹사이트에서 항상 보여질 필요가 있는 컨텐츠들을 헤더나 푸터에 넣으면 좋습니다.

메인 컨텐츠 부부은 웹사이트의 실제 내용이 들어가는 부분 입니다. 만약 ABOUT US 페이지라면 회사 혹은 단체, 개인의 소개가 들어가는 부분 입니다. 메인 컨텐츠는 선택한 테마에 따라서 디자인 요소가 달라질수 있습니다.  잘 만들어진 디자인테마들은 거의 대부분 DRAG & DROP 형태의 페이지 작성 툴(Page Builder)를 가지고 있습니다. 쉽게 여러분이 원하시는 형태로 컨텐츠를 페이지에 입력하시고 다양한 방법으로 표현이 가능합니다.

사이드바는 메인컨텐츠의 왼쪽 혹은 오른쪽에 나타나는 부분으로 일반적으로 전체 화면 넓이의 20~30 % 정도의 넓이를 갖습니다. 사이드바의 경우는 페이지마다 ON/OFF를 할수 있습니다. 또한, 사이드바를 여러게 만들고 페이지마다 다른것을 넣을수도 있습니다. 사이드바에는 주로 최근 게시물 리스트, 배너, 메인메뉴 이외의 특별한 목적의 메뉴등을 보여줄수 있습니다.

[fusion_builder_container hundred_percent=”yes” overflow=”visible”][fusion_builder_row][fusion_builder_column type=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”no” center_content=”no” min_height=”none”]

웹사이트 디자인 영역별구분

Web Hosting[/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]

ThemeForest에서 원하는 디자인테마 검색하고 구입하기

ThemeForest에서 원하는 디자인테마 검색하고 구입하기

by | Oct 28, 2015 | 워드프레스 (Wordpress) 사용법

ThemeForest는 전세계에서 가장 유명한 워드프레스 디자인테마 마켓플레이스 입니다. $40 ~ $70 사이의  가격에 훌륭한 디자인과 기능을 갖춘 디자인테마들을 구입 할 수 있습니다.

그러나, 수천개의 디자인테마 중 본인의 요구사항에 맞는 디자인테마를 찾는 것은 쉽지않습니다.

실제로 ThemeForest에서 수많은 디자인테마를 구입하고 고객들의 웹사이트에 적용해 본 경험을 바탕으로 여러분의 요구사항에 가장 적합한 디자인테마를 어떻게 찾는지 ? 그리고, 어떻게 구입을 하는지? 에 대해서 설명을 드리겠습니다.

[fusion_builder_container hundred_percent=”yes” overflow=”visible”][fusion_builder_row][fusion_builder_column type=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”no” center_content=”no” min_height=”none”][fusion_fontawesome icon=”fa-play-circle” size=”” flip=”” rotate=”” spin=”no” alignment=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” circle=”yes” iconcolor=”” circlecolor=”” circlebordercolor=”” animation_type=”” animation_direction=”down” animation_speed=”0.1″ animation_offset=””/][/fusion_fontawesome]아래 링크를 클릭해서 ThemeForest 워드프레스 디자인테마 마켓플레이스로 이동 합니다.
[/fusion_builder_column][/fusion_builder_row][/fusion_builder_container][fusion_builder_container hundred_percent=”yes” overflow=”visible”][fusion_builder_row][fusion_builder_column type=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”no” center_content=”no” min_height=”none”][fusion_button link=”http://themeforest.net/category/wordpress?ref=usjhk” color=”default” size=”xlarge” type=”” shape=”” target=”_blank” title=”” gradient_colors=”|” gradient_hover_colors=”|” accent_color=”” accent_hover_color=”” bevel_color=”” border_width=”1px” icon=”fa-external-link” icon_divider=”yes” icon_position=”left” modal=”” animation_type=”0″ animation_direction=”down” animation_speed=”0.1″ alignment=”center” class=”” id=””]Themeforest 워드프레스 디자인테마 마켓플레이스로 이동 (새창)[/fusion_button]

 

[fusion_fontawesome icon=”fa-play-circle” size=”” flip=”” rotate=”” spin=”no” alignment=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” circle=”yes” iconcolor=”” circlecolor=”” circlebordercolor=”” animation_type=”” animation_direction=”down” animation_speed=”0.1″ animation_offset=””/][/fusion_fontawesome]그러면 아래와 같은 화면이 나타납니다.  이 화면에서 중앙에 있는 검색 창에 본인이 원하는 검색어를 입력후 검색버튼 ( 돋보기 그림 )을 클릭합니다.
THEMEFOREST1
Web Hosting

[fusion_fontawesome icon=”fa-play-circle” size=”” flip=”” rotate=”” spin=”no” alignment=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” circle=”yes” iconcolor=”” circlecolor=”” circlebordercolor=”” animation_type=”” animation_direction=”down” animation_speed=”0.1″ animation_offset=””/][/fusion_fontawesome]다음 화면은 검색어에 회사소개 웹사이트 제작을 위한 디자인테마를 찾기 위해서 ‘Company’ 를 입력 후 검색한 결과 입니다.  아래 그림을 보면 ‘Company’ 라 키워드로 전체 475개의 테마가 검색 된 것을 알 수 있습니다. 그러나 475개의 테마를 처음부터 다 확인 할 필요는 없습니다.

가장 좋은 방법은, 화면 중앙의 Sort by 를 ‘Best Sellers’ 로 변경해서 조회하는 것입니다.
즉, 가장 많이 판매된 디자인테마 위주로 보는 것입니다.
전세계의 많은 워드프레스 사용자들이 가장 많이 선택한 디자인테마라면 조금 더 신뢰 할 수 있을 것입니다.
여기서부터 1~2 페이지 정도의 디자인 테마 중 하나를 선택 하시면 시간 과 노력을 많이 아끼실 수 있고,
결과도 조금더 만족 스러울 것입니다.THEMEFOREST2

 

[fusion_fontawesome icon=”fa-play-circle” size=”” flip=”” rotate=”” spin=”no” alignment=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” circle=”yes” iconcolor=”” circlecolor=”” circlebordercolor=”” animation_type=”” animation_direction=”down” animation_speed=”0.1″ animation_offset=””/][/fusion_fontawesome]위 화면에서 왼쪽에 있는 Category를 클릭하면 아래 그림과 같이 각각의 Category에 검색어에 해당하는 디자인테마 만을 다시 검색해 줍니다. 즉,  ‘Technology  Category’ 에서 ‘Company’에 관련된 디자인테마 만을 검색 하려면 아래 그림에서 와 같이 Technology 를 클릭하면 됩니다. 현재 ‘Technology  Category’에는 내가 원하는 ‘Company’ 라는 검색어를  같는 디자인테마가 15개가 있다는것도 알수 있습니다.

THEMEFOREST2-1

 

[fusion_fontawesome icon=”fa-play-circle” size=”” flip=”” rotate=”” spin=”no” alignment=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” circle=”yes” iconcolor=”” circlecolor=”” circlebordercolor=”” animation_type=”” animation_direction=”down” animation_speed=”0.1″ animation_offset=””/][/fusion_fontawesome]아래 그림은 검색된 테마중 하나를 클릭했을때 나타나는 상세 화면 입니다.
아래 그림에서 처럼 Live Preview 를 클릭하시면 실제 데모를 보실수 있습니다.
메뉴 및 링크등도 한번 눌러보시고 본인이 원하는 부분들과 비교해 보시기 바랍니다.
Screenshot을 통해서 보실 수도 있습니다. ( 최근에는 Screenshot이 없는 경우도 있습니다. 라이브 프리뷰 기능이 테마를 검토해보기 훨씬 유용하기 때문에 별도로 Screenshot을 추가하지  않는 경우가 많습니다 ).
오른쪽 중간 하단에 보시면 현재 얼마나 많은 사람들이 이 테마를 구입했는지, 그리고 그들이 전반적으로 어떤 평가를 했는지를 보실수 있습니다.
또, 중요한 것 중 하나는 가장 최근에 업데이트한 날짜가 언제인지? 그리고, 가장 최근의 워드프레스 버전을 지원하는지 여부도 확인하세요.
이런 부분들을 종합적으로 검토후 디자인 테마를 구입하세요. 구입 방법은 우측의 Add Cart를 클릭하고 이어지는 구입 과정을 그대로 따라 하시면 됩니다.

THEMEFOREST3

EZWEBMIS 의 POWER TIP –

가능 하시면 저희 EZWEBMIS에서 추천해 드리는 분야별 디자인 테마를 구입하세요.  전문가의 평가에서 합격점을 받은 디자인테마들이니 조금 더 신뢰할 수 있을 것 입니다.

구입한 디자인테마를 본인의 웹사이트에 설치 하는 방법은 아래 포스팅을 참조하세요.


직접 원하는 디자인테마를 찾아 보시기 위해서는 아래는 ThemeForest 에서 WordPress 디자인테마만 볼 수 있는 링크로 이동하세요. 

 


Web Hosting[/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]