워드프레스로 웹사이트를 만들기
워드프레스라는 것을 안지는 꽤 된 것 같다. 그러나 본격적으로 워드프레스를 연구해보면서, 워드프레스만이 가진 차별점과 강점들을 보고는, 이 일에 집중을 해야겠다란 생각을 했다.
워드프레스는 사실, 블로그를 만드는 솔루션이다. 워드프레스의 역사는 급격한 발전과 성장의 길을 걸어왔는데, 그 이념에는 워드프레스의 확장성과 변동성 때문이다. 먼저, 개념정리부터 하고 가자.
CMS
Contents Management System 의 약자로, 콘텐츠를 관리할 수 있는 시스템이라는 말이다. 즉 워드프레스는 CMS 의 하나이다. 그 태생이 블로그라고 말했듯, 블로그의 글들을 관리하고 수정, 편집하기 위해서 만들어진 컨텐츠 관리 시스템이다. 국내에서는 대표적인 것이 제로보드가 이에 해당한다.
홈페이지를 좀 만들어본 사람들이라면 아마 제로보드를 다 알 것이다. 필자도 제로보드를 좋아하고 사용을 많이 한 입장에서 제로보드와 워드프레스를 비교한다면 제로보드는 국내에 한정되어 있다 한다면 워드프레스는 전세계적인 유저들의 사용과 변형을 거듭하고 있다는 것이다.
제로보드도 그렇지만, 오픈형 CMS의 경우는 소스가 오픈되고 확장성이 뛰어날수록 시스템은 발전할 수밖에 없다. 왜냐하면 그만큼 많은 사람들이 솔루션을 건들고 손을 볼 뿐만 아니라, 다양한 플랫폼을 연동시키기 때문에 시간이 지날수록 발전할 수밖에 없다.
오늘은 그 첫 시간으로 워드프레스의 장점에 대해서 몇가지 정리하고, 내가 작업한 워드프레스 사이트를 소개한다. 워드프레스에 관련된 내용은 지속적으로 업데이트를 해서 글을 쓸 계획이며, 국내에서는 아직까지 워드프레스에 대해 잘 모르거나 좀 더 고급정보, 실질적인 정보를 원하는 분들에게 매우 유용한 포스팅이 될 것이라 생각한다.
워드프레스의 장점
1. 검색엔진에 별도의 유료광고 없이도 노출이 가능
- 검색엔진이나 각종 포털검색시 검색엔진의 알고리즘에 맞게 사이트/페이지
구조를 맞추어 검색결과에서 상위에 노출 가능
- 별도의 유료광고 없이 WP는 검색엔진에 최적화되어 있기 때문에 포스팅
만으로도 각종 포털이나 구글에서 유저들이 검색시 상단에 랭킹
2. 상호 피드백
3. 웹표준
5. 사용이나 유지보수가 용이
웹사이트 개발분야에 10여년간 있어본 필자의 경험으로는, 웹사이트 운영에 있어서 가장 큰 숙제는 지속적인 관리에 있다. 그리고 그런 관리시에 항상 비용이 발생한다는 것이 문제이다. 왜냐하면, 기존의 제작 방식은 개발하고 난 후 변경할려면 전체 구조를 변경하고 연결된 프로그램을 수정해야만 할 뿐만 아니라, 관련페이지도 다 손을 봐야 하는 복잡한 구조를 가진다. 그러나 워드프레스의 경우는 메뉴수정을 아주 쉽게 할 수 있다. 그리고 페이지의 내용 변경도 아주 쉽게 가능하다. 즉 유지보수나 운영에 있어서 비용이 아주 적게 들거나 거의 들지 않는 장점이 있다.
이 외에도 다양한 장점들, 여러가지 플러그인을 활용한 파워풀한 기능들을 제공하고 있다. 단, 영어로 되어 있는 것을 적절하게 한글로 작업화를 해야 하는 숙제는 남겨져 있다.
이상의 내용을 정리하면 다음과 같다.
|
구분 |
기존 웹사이트 |
워드프레스 |
비고 |
|
검색 |
검색 노출이 되기 위해선 유료광고비 지출 필요 |
SEO(Search Engine Optimaze) 를 통해 광고 없이도 포털사이트에 검색 |
|
|
상호피드백 |
쇼셜플러그인 별도개발 / 설치 , 유저와의 피드백을 위한 별도의 개발 필요 |
간단히 플러그인 설치만으로 쇼셜계정 쉽게 연동 |
|
|
웹표준 |
별도로 개발을 해야 하며 , 별도로 개발시 고비용 발생 |
웹표준 (html5) 에 기준하여 개발됨 |
|
|
모바일 |
별도 개발 |
지원 |
|
|
콘텐츠 관리 |
수정이 어렵고 번거로움 |
간단히 수정 가능 |
|
|
다국어지원 |
별도로 구축 필요 |
지원 |
|
|
뉴스레터 |
별도 솔루션 구축 필요 |
무료 플러그인 지원 |
|
|
디자인변경 |
비용이 많이 듬 |
테마 변경만으로 간단히 가능 |
|
한편 외국에서는 최고의 CMS툴이긴 하지만, 국내에서 도입할 경우에 고려해야 할 점들이 다음과 같은 것들이 있다.
우리나라 상황에서 구축시 고려해야 할 점
- 구축이 다소 어렵다 . ( 전문가에 의해 작업을 해야 한다 .)
- 한글폰트가 이쁘지 않다 .
- 커스터마이징이 어렵다 .
- 커스터마이징 및 디자인을 많이 고치면 모바일페이지에 영향을 준다 .
- 국내의 높은 점유율을 가진 네이버 등에서 상위 검색결과에 노출되지 않는다 .
- 서비스지원을 받고자 할 경우 영어로 진행을 해야 한다 .
- 각 테마별 지원하는 기능과 설정이 틀려서 전문적인 접근이 필요하다 .
필자가 작업한 워드프레스 사이트들
(2) 워드프레스 설치해보기
워드프레스의 장점은 포스팅이 진행되면서 그 기능들을 소개하면 자연스럽게 알게
될 것이라 여겨집니다. 향후 워드프레스의 수요는 지속적으로 늘어날 것으로 예상
됩니다. 본 사이트는 워드프레스를 만드는 것에 목적을 둔 것이 아니라, 바이럴 마케팅, 쇼셜 마케팅 진행을 위한 도구로 워드프레스가 필요하여서 해당 부분에 목적
을
두고 포스팅을 진행하고자 합니다.
워드프레스는 서버 자체에 설치할 수 있는 설치형 워드프레스와 인터넷에서 가입
을 통한 가입형 워드프레스가 존재합니다. 설치형의 경우는 서버나 웹호스팅을
준비
해야 하며, 가입형의 경우는wordpress.com 에서 바로 신청해서 사용할 수
있습니다.
가입형의 경우는 광고글들, 스팸글들 등 제약조건이 많고 용량의 한계도 많아 실
제적으로 큰 의미가 없습니다. 그래서 설치형(호스팅/서버)을 통해서 구축하는
법을 중심으로 설명합니다. 여기에서 사용하는 법대로 하면 누구나 쉽게 사용할
수 있으니 겁 먹지 말고 따라오시면 됩니다.
일단, 워드프레스 프로그램을 다운받기 위해서 wordpress.org에 들어갑니다.
wordpressorg
이번에 개편된 워드프레스 업데이트버전(3.6)의 경우 모바일 앱을 제작하기 위한
별도의 워드프레스가 제공됩니다. 해당 사용법은 향후 다루도록 하구요, 먼저 워드
프레스를 다운받도록 합니다.
다운이 다 완료되었나요? 그러면 이제 워드프레스를 깔기 위한 호스팅서비스를
이용하겠습니다. 호스팅은 무료로 제공해주는 곳들도 있습니다. 그리고 국내
호스팅업체들 또한 가격이 그렇게 높진 않습니다. 그러나 우리는 바이럴마케팅을
위해서 용량이 제한없는, 남들과는 차별화된 서비스를 위한 호스팅을 시도하고자
합니다. 그래서 저의 경우 워드프레스가 해외에서 만든 것이기 때문에 마찬가지로
해외 호스팅업체를 알아봤습니다.
눈에 들어오는 두개 정도의 호스팅 업체가 있었습니다. 그 중 초보자가 쉽게 할 수
있는 곳, 그리고 워드프레스를 자동으로 깔아주고 설치해주는 편리한 곳인 고데디
호스팅서비스를 받고자 합니다. 가격도 저렴하고, 무엇보다 무제한 용량에 무제한
트래픽의 서비스를 받을 수 있기 때문에 국내의 서비스와 차별화됩니다. 해외에
있으니 속도가 느리지 않을까 걱정하실 수 있는데, 현재 제가 운영중인
viralpresent.org 가 고데디 호스팅서비스를 받고 있으며, 전혀 문제 없이 잘 돌아
가고 있습니다. 접속도 원활하며 무엇보다 모바일 페이지를 꾸밀 수 있는 기능을
제공합니다.
아래 고데디배너를 클릭해서 고데디페이지로 갑니다.
(아래 배너 클릭)
고데디 메인페이지에서 "Get web hosting"을 클릭합니다.
일단 파격적인 가격조건을 좀 살펴볼까요?
눈에 띄는게, 무제한 용량, 무제한 전송량(트레픽), 그리고 1년치 결재를 하면 도
메인비용은 무료로 제공해주는 서비스 등이 매력적입니다.
먼저 회원가입을 합니다.
플랜을 설정합니다.
12개월치를 설정하면, 이벤트 기간동안에 도메인(1년치 비용)을 무료로 줍니다.
도메인 주소를 설정해 줍니다.
도메인이 등록된 것이 없다면 그대로 진행합니다.
결재항목을 확인합니다.
1년 무제한 호스팅, 무제한 대역폭 해서 62,775원입니다. 도메인까지...
저렴하죠!
다시 한번 본인 인증을 거칩니다.
그럼, 결재항목이 나옵니다.
결재하실 때, 아래의 내용을 참조하셔서 결재진행하시면 됩니다.
다시, 로그인을 하시면, 웹사이트를 설치할 도메인을 묻습니다.
그런 후, 워드프레스를 인스톨합니다.
그러면 워드프레스가 인스톨됩니다.
워드프레스에서 사용할 아이디와 패스워드를 입력합니다.
다음 페이지는 모바일 을 활성화할것인지 물어봅니다.
고데디에서는 별도의 모바일 편집기능을 제공하기때문에, 이와 같은 안내가
나옵니다.
그러나, 우리는 워드프레스 테마에서 자체적으로 제공하는 모듈을
사용할 예정이므로,
Not Now
를
클릭합니다.
거의 다 되셨습니다.
축하드립니다. 워드프레스 세팅이 끝나셨습니다.
Preview를 클릭하시거나, 자신의 도메인을 클릭하시면 아래의 페이지가
보이실 것입니다.
자신의 호스팅 정보에서, Appilication을 클릭합니다.
그러면 아래의 이미지가 보입니다. Log in을 클릭합니다.
그러면 워드프레스로 로그인할 수 있는 아이디와 패스워드 입력폼이 나옵니다.
해당 아이디와 패스워드를 입력하시면 워드프레스 관리자 모드로 들어가게 됩니다.
(고데디FTP 계정 생성하기, 접속하기, 워드프레스)
오늘은 고데디에서 워드프레스를 설치하는 것이 아니라, FTP계정을 통해서 직접 설치하는 법을 다루도록 하겠습니다.
먼저 FTP에 대해서 잘 모르시는 분들(초보자분들)을 위해서 잠깐 설명드리자면, 다음의 설명으로 대체합니다.
오늘은 고데디에서 워드프레스를 설치하는 것이 아니라,
FTP계정을 통해서 직접 설치하는 법을 다루도록 하겠습니다.
먼저 FTP에 대해서 잘 모르시는 분들(초보자분들)을 위해서 잠깐 설명드리자면,
다음의 설명으로 대체합니다.
쉽게 설명드리면, 웹상에서 서버(및 호스팅)에다가 다량의 파일, 큰 파일들을 옮기기 위한 툴입니다.
해당 툴로는 여러가지가 있지만, 가장 보편적이고 사용하기 편한 파일질라를 이용하도록 하겠습니다.
먼저 FTP 프로그램인 파일질라를 다운받습니다.
사실 고데디에서는 클릭만으로도 쉽게 설치되는데,
굳이 어려운 길을 가시고자 하는 분들을 위한 안내입니다.^^;
고데디 자신의 계정으로 로그인합니다.
클릭하면, 오른쪽 하단에 FTP 주소가 보입니다.
고데디 호스팅의 특징은 FTP계정을 최대 50개까지 만들 수 있다는 것입니다.
즉, 또 다른 웹사이트를 서브도메인을 사용하여 하위에 만들어 설치할 수 있다는 것이지요.
(이 말은 50개의 별도 다른 웹사이트를 만들 수 있다는 겁니다.)
저는 기본적인 워드프레스 사이트 + 워드프레스 쇼핑몰 사이트를 만들어볼려고 합니다.
그래서 일단, 기본사이트는 본계정이 될 것이고, 서브도메인으로 쇼핑몰 계정을
하나 더 만들 계획이어서 두개의 FTP가 존재하게 됩니다.
지난 번에는 고데디콘트롤 시스템으로 만들고자 하는 워드프레스 사이트를 세팅했으니,
오늘은 서브도메인으로 쇼핑몰 사이트의 기본적인 세팅을 진행하도록 해보겠습니다.
이번에는 고데디에서 진행하는 것이 아니라 FTP를 통해서 고데디 계정에 쇼핑몰
사이트를 세팅하도록 하겠습니다.
Settings 부분에서 FTP 추가계정 생성을 클릭합니다.
ADD를 클릭하여 FTP계정을 추가합니다. 오른쪽에 보면 FTP 계정 생성할 수가 나와 있습니다.
(48개로 표시되고 있네요)
FTP계정을 하나 새로 만듭니다.
다운받은 파일질라를 클릭해서 FTP 정보를 입력합니다.
이제 워드프레스 wordpress.org 사이트에서 워드프레스 솔루션을 다운받습니다.
압축을 풀어줍니다. 그런 후, FTP에 다시 접속해서 업로딩합니다.
받은 파일을 업로딩합니다.
출처 : 바이럴프레즌트 의 Why 워드프레스에서...
워드프레스 테마 설치하기
- 4 강 -
글쓴이 : 바이럴프레즌트
안녕하세요. 워드프레스 기초강의를 본격적으로 시작합니다.
이제 실전용으로 설명을 드리겠습니다. 지난 주에 유학생보험 관련 사이트개발건에 대해서 워드프레스 기반으로 개발하기로 계약을 했습니다. 이 프로젝트를 중심으로 프로젝트를 어떻게 진행하고, 어떻게 완성되는지에 대한 핵심적인 비밀노트를 공개할 예정이니, 이런 일에 관심있거나, 비즈니스를 하시고자 하는 분들에게 현장의 생생한 정보를 느끼실 수 있을 것입니다. 일단, 사이트를 만들기 전에 기본적으로 해야 하는 것들이 있는데요. 고객이 원하시는 사이트 유형을 파악하는 것이 중요합니다. 하지만, 고객의 말을 다 들어주는 것도 그렇게 현명한 방법은 아닙니다. 왜냐하면, 고객들은 전문가들보다 보는 눈이 넓지 않기 때문입니다.
즉, 웹페이지를 만들어주는 사람이라면 고객의 요구를 일방적으로 따라하기보다는, 주관을 가지고, 사이트를 구축할 필요가 있다는 점을 먼저 알려드리고 싶습니다.
그리고 개인이 사이트를 구축하고자 할 경우에도, 워드프레스의 장점을 살리기 위해서, 자신이 기존에 생각했던 방식과는 다르게 접근할 필요가 있습니다. 쇼셜네트워크, 각종 유용한 플러그인, 저렴한 호스팅, 검색엔진 최적화, 모바일 최적화 등 수많은 장점들이 많기에, 소를 버리고 대를 취해야 할 경우가 있습니다. 대표적인 예가, 워드프레스가 국내환경과 가장 큰 차이가 있는 것이 바로 게시판이라 할 수 있습니다. 해외에서는 포럼 형태(게시판과 유사함)로 커뮤니티를 운영하는 반면, 우리나라는 게시판 문화 중심입니다.
다시, 유학생 보험 관련 사이트 개발건으로 돌아가도록 하겠습니다.
일단, 사이트를 구축하기 전에, 중심적으로 생각해야할 점이 다음과 같습니다.
첫째, WHY ----- 왜!
둘째, HOW ----- 어떻게
셋째, WHAT ----- 무엇으로!!!
왜 사이트를 만드는 것인가?
차별화된 유학생 보험사이트를 구축하여 추가적인 영업을 창출하기 위해서
어떻게?
워드프레스 기반으로 웹사이트를 만들고 난 후, 각종 바이럴 노하우를 바탕으로 프로모션을 하기 위해서, 그리고 검색시 우위에 선점하기 위해서
무엇으로?
Wordpress, Blog, Social Network Service(facebook, twitter, me2day etc), 통계분석기
제 고객이 원하는 바는 유학생 보험 사이트에서 차별화된 정보를 제공하는 사이트를 원하였습니다. 그리고
샘플로 제시한 사이트는 다음과 같습니다.
해당 보험 사이트는 사람들에게 직접적으로 보험을 신청할 수 있도록 보험료 산출기능등을 제시하고, 가입현황을 실시간으로 보여주는 등, 방문객들에게 비교적 접근하기 쉽도록 구성한 사이트입니다. 내 보험료 알아보기를 클릭하면, 계산해서 나오는 방식이 아니라, 전체적인 보험료 정보를 일목요연하게 나열되어 있는 가격표로 이동하게끔 구성하였습니다.
일단 의뢰자가 원하는 방식은 이런 류의 스타일이라는 것을 고려해서 몇가지 테마 중 한가지를 선택했습니다.
저희가 선택한 테마는 엘레강스 테마 중 하나입니다.
비교적 의뢰자가 요구한 스타일이랑 비슷한 레이아웃입니다.
해당 테마를 구매하고, PSD소스와, 테마소스를 다운받습니다.
해당 PSD 소스는 디자이너에게 넘겨서, 메인시안 작업을 요청했습니다. 이제, 워드프레스에 구매한 테마를
깔아보겠습니다.
먼저 제가 구매했던 고데디 계정으로 들어갑니다.
(고데디는 아주 저렴한 호스팅서비스로 여러 계정을 만들 수 있습니다. 고데디 계정생성 및 관련정보는 이전 포스팅 참조, 참고로, 국내에서의 호스팅 중 가비아의 경우 퍼미션 설정 등, 워드프레스설정이 매우 까다롭습니다. 다른 건 안해봤고..)
해당메뉴로 이동하여, 폴더를 Insurance로 주고 워드프레스를 설치를 클릭해주면 자기가 알아서 다 해 줍니다.
커피 한잔 먹고 오시면 깔려 있을 것입니다.
아래 보시는 것처럼 열심히 깔고 있지요?
국내 호스팅사의 서비스 중에서도 이와 같은 서비스를 해 주는 경우가 있는데, index 폴더로 안깔려서 절대경로를 일일이 설정하거나, 제대로 테마설치가 안되는 경우가 종종 있습니다. 제 경험상으론, 고데디에선 그런 경우가 없었습니다. 전 한 계정으로 보험사이트까지 해서 4개의 사이트를 운영하게 되었네요. 고대디 서비스는 도메인까지 구매하고 무제한 용량, 트래픽해서 1년에 10만원도 채 안 되었던 것 같습니다. 여튼 미국에 서버가 있다는 것 외에는 비교 불가이지요 ^^
여튼.. 아래의 서브도메인으로 보험 사이트를 위한 워드프레스 사이트 설치가 진행중입니다.
일단 제 호스팅서비스에서 사이트를 다 만들어 놓고, 완료가 되면, 고객의 서버에다가 넘길 계획을 가지고
있습니다.
이제 설치가 다 되었으면 아래의 메뉴 로그인을 클릭하시면 됩니다.
Appearance > Theme 를 클릭합니다.
INSTALL THEME 를 클릭하여, 구매한 테마소스를 선택합니다.
보통 구매한 테마가 ZIP파일로 압축되어 있습니다.
압축되어 있어도 풀 필요가 없습니다. 워드프레스는 알아서 풀어서 설치를 합니다.
업로드를 클릭해야겠죠?
제가 구매한 Feather.zip 파일이 설치되고 있습니다.
자, 이제 다 파일이 풀렸으면, Active 를 클릭해서 활성화를 해 줍니다.
그러면, 저희가 설정한 테마가 기본으로 세팅이 됩니다.
그래서, 현제 임시 페이지인 http://viralpresent.org/insurance 를 클릭하면 다음의 페이지가 보입니다.
워드프레스 미디어관리 강좌
워드프레스 미디어관리
워드프레스는 미디어관리를 별도로 합니다.
즉, 글과 미디어(동영상 포함)를 별도로 관리해서, 필요할 경우에 미디어만 따로 올리거나 관리할 수 있도록 합니다. 이는 해당 페이지를 다양하게 편집하고 사용할 수 있게끔 하기 위한 방법입니다.
메뉴에서 미디어관리를 클릭하면 등록된 리스트가 다음과 같이 보여집니다.
이미지를 등록하거나 동영상을 등록하실 수 있습니다. 이미지를 등록해보도록 하겠습니다.
이미지를 등록하려면, 파일올리기를 클릭합니다.
사진 이미지를 올립니다.
그러면 아래와 같이 이미지가 등록되었습니다.
워드프레스 글 작성 및 편집하기
워드프레스를 구축하고 난 후, 가장 중요한 작업 중 하나는 글을 작성하는 것입니다. 워드프레스는 기본적으로 글을 작성하기에 최적화된 설치형 블로그이기 때문에 쉽게 접근할 수 있지만, 좀 더 전문적인 작업을 위해선 HTML, PHP 를 어느정도 다룰 수 있어야하고, 좀 더 나아가 CSS 까지 다루어야 내가 원하는 인터렉티브한 웹페이지 작성이 가능합니다. 오늘은 가장 기본적인 내용부터 다루겠습니다.
워드프레스 관리자모드로 로그인을 한 후 '글관리 메뉴를 보시면' 다음과 같은 페이지가 보여집니다.
이 메뉴 중에서 왼쪽에 구성된 메뉴는 다음과 같습니다.
글 / 미디어 / 페이지 / 메뉴가 보이십니다.
이 많은 메뉴들을 다 살펴볼 수는 없고, 핵심적인 것 중심으로 설명드리면 다음과 같습니다.
글 : 워드프레스는 블로그 기반 CMS(Contents Management System) 툴입니다. 즉, 워드프레스 테생 자체가 블로그를 위해 만들어졌기 때문에, 글을 쓰고, 알리는 것에 최적화되어 있습니다. 쉽게 말씀드리면 네이버의 블로그 글쓰기나 티스토리의 글쓰기와 유사하다고 보면 되겠습니다. 여기서 글과 페이지는 유사한 것 같지만 차이가 있습니다. 쉽게 설명드리자면, 글은 매번 발행이 되거나 소식이 계속 업데이트 되는 메뉴에 해당하는 글 작성시 사용됩니다.
미디어 : 워드프레스는 동영상, 그림 등 미디어 파일들을 개별적으로 관리할 수 있게끔 설정되어 있습니다. 미디어에 저장되어 있는 그림과 동영상 등은 언제건 재활용을 할 수 있도록 객체 중심적으로 묶여져 있습니다. 향후 작업시 사용하는 법을 자세히 다루도록 하겠습니다.
페이지 : 페이지는 글과 유사한 구조로 되어 있지만, 앞서 설명한대로 고정된 페이지에 적합합니다. 즉, 회사홈페이지를 워드프레스로 만들 경우에, 페이지는 인사말, 연혁, 오시는 길 등에 해당되는 메뉴가 페이지로 구성되는 것이 옳습니다.(잘 변하지 않는 컨텐츠이기 때문에) 한편, 글은 지속적으로 변하기 때문에 뉴스나 공지사항 혹은 업데이트 되는 소식지 중심의 컨텐츠를 다룰 때 쓰게 되겠지요.
그러면 오늘은 글에 대해서 좀 더 살펴보도록 하겠습니다. 일단 아래의 메뉴 중에서 글을 클릭
합니다. 그럼 아래처럼 여러가지 글들이 보여집니다.
해당 글에 마우스를 올려보면 좀 더 세부적인 내용을 볼 수 있습니다.
편집 / 빠른 편집 / 휴지통 / 보기
메뉴가 보이는데, 말 그대로 편집과 빠른 편집은 해당 페이지를 에디터링 할 수 있는 메뉴이고,
휴지통은 지우는 기능이며, 보기는 실제 페이지를 보는 것입니다. 한번 보기를 클릭하도록
하겠습니다.
그럼 아래의 그림처럼 페이지가 보여집니다.
이 본문을 바로 편집을 하길 원하면 상단에 이 글 편집을 클릭합니다.
그럼 다음과 같은 메뉴가 보여집니다.
편집을 해야 하기 때문에 하나씩 살펴 보도록 하겠습니다.
(해당 작업은 글과 페이지가 유사합니다.)
먼저, (가) 부분의 미디어 추가 부분을 클릭하면 다음의 화면이 보여집니다.
가. 미디어 추가하기
미디어 추가 부분은 사진 이미지, 그림 이미지나 동영상 이미지를 올리는 공간입니다.
클릭을 하면 다음의 화면이 보여집니다.
가. 파일 업로드 : 만약, 해당 이미지가 라이브러리에 없다면 파일 업로드를 클릭해서
직접 파일을 올립니다. 해당 파일을 올리면 다에서 보는 것처럼,
파일의 썸네일이 보여집니다.
나. 미디어 라이브러리 : 현재 올려져 있는 전체 이미지를 볼 수 있습니다.
다. 미디어 선택 : 원하는 이미지를 선택할 수 있습니다. 복수 선택도 가능합니다.
라. 글에 삽입하기 : 선택된 이미지를 클릭하면 해당 이미지가 본문 글에 삽입됩니다.
나. 숏트코드 넣기
워드프레스는 숏트코드를 사용하여서 멋진 웹페이지를 제공합니다. 숏트코드란 무엇인가 하면, 복잡하게 짜여져 있는 웹페이지 편집 소스를 클릭만으로 간단하게 입력할 수 있도록 제공하는 코드를 숏트코드라고 합니다. (쉽게 설명드리면, 각종 블로그제공 업체에서 제공되는 블로그를 꾸밀 수 있는 툴이라고 이해하시면 됩니다.)
해당 숏트코드는 테마마다 조금씩 차이가 있기 때문에 어떤 테마를 사용하느냐에 따라서 보여지는 메뉴들이 다릅니다.
다. 비쥬얼 / 텍스트
비쥬얼의 경우는 테그를 잘 사용하지 못하는, 웹 프로그램 디자인을 잘 모르는 유저들이 사용하기 편하게 구성된 위지윅 기능이라고 보시면 됩니다. 반면 텍스트는 프로그램 소스를 아시는 분들이 쉽게 사용할 수 있는 툴이라고 보시면 됩니다. 한편, 워드프레스는 웹표준화를 따르기 때문에, 텍스트로 작업을 하다가 비쥬얼 모드로 작업을 한 후 다시 텍스트로 작업 을 하면, 원래 소스가 바뀌게 됩니다.
이는, 워드 프레스에서 웹표준을 지키는 명령 때문에 강제적으로 변경되는 현상으로 가능
하면, 코딩을 하여 작업한 사람은 해당 코딩방식(텍스트)으로 작업 을 추천드립니다.
한편, 비쥬얼로 작업을 한 사람은 비쥬얼로 작업을 하는 것이 두번, 세번 작업하는 오류를
줄일 수 있습니다.
라. 본문
워드프레스는 대부분의 작업이 글 중심으로 작업되기 때문에, 작업 후에 변경이나 수정이 용이합니다.
마. 미리보기 변경
미리보기 변경을 클릭하시면, 작업한 작업물을 미리 볼 수 있습니다. 해당 작업물은 저장되는 것이 아니라 임시로 보여 지는 것이어서, 작업자가 자신이 구상한대로 구현되었느지
미리 알 수 있는 툴입니다.
바. 업데이트
업데이트를 클릭하시면 전체 편집에 대한 업데이트가 진행됩니다.
페이지에 대한 개념 정리 )
페이지관리는 워드프레스사이트를 구성할 때 있어서 가장 중요한 부분입니다. 즉, 고정된(변경이 잘 안되는) 페이지로, 글쓰기와 기능은 동일하지만, 특성이 다르다고 보시면 됩니다.
여러 페이지 중에서 홈페이지를 설정할 수 있습니다. 쉽게 설명드리면 다음과 같습니다. 여러 페이지 중에서 한가지를 선택해서 홈페이지(메인페이지)로 잡는 것입니다.
( 여러 페이지 중 한가지를 홈페이지로 설정 )
여기서, 다른 페이지를 홈페이지로 설정하는 법은 어떻게 하는지 설명드리겠습니다.
외모 클릭
사용자 정의하기 클릭
그리고 해당 작업한 페이지를 설정하면 메인페이지로 설정됩니다.
그럼 다시 페이지로 돌아가볼까요? 홈페이지로 작업한 두개의 페이지가 보여집니다.
여기서, 왜 동일한 페이지를 두 페이지로 만들었는가 하면, 메인페이지의 경우 만약 작업에 에러가 생기거나 문제가 생기면 해당 소스를 복사해 둔 것을 활용해서 복원시키기 위함입니다.
그 중 Home 이라는 페이지가 아래처럼 붉은 색에서 보여지는 것을 확인하실 수 있습니다.
Home 메뉴를 가까이에 가져가면 아래처럼 보기 를 클릭합니다.
해당 페이지를 세부적으로 보시면 비주얼 모드 | 텍스트 모드 로 아래처럼 두가지가 보여집니다.
(편집 - 텍스트 모드)
(편집 - 비주얼 모드)
비주얼이 작업하기 더 쉽긴 하지만, 왜 비주얼모드가 웹페이지에서 보여지는 것이랑 다른 이유는 커스터마이징 작업이 많이 들어갔기 때문입니다. 실제로 화면에서 보여지는 페이지는 다음과 같습니다.
(실제로 보여지는 메인페이지 화면)
* 참고로, 가능하면 테마가 제공하는 기능을 그대로 사용하면 문제가 없지만,
맞춤 수정(커스터마이징)작업을 하면 할수록, 코딩은 복잡해지고, 사용이
불편해질 수 있습니다. 그러니, 어떤 테마를 선택하느냐가 중요하며, 선택한
테마를 최대한 변경하지 않고, 그 테마의 특징을 살려 사용하는 것이 중요합니다.
* 워드프레스의 강점은 손쉽게 수정이 된다는 점입니다만, 커스터마이징이 많이
들어가면 들어갈수록, 결국 전문가들에게 맡길 수밖에 없어지기 때문에, 워드프레스
의 강점을 잃어버릴 수도 있는 것이지요!
페이지 수정작업 )
이제 페이지 수정작업을 해보도록 하겠습니다.
예로, 수정할 페이지는 웹페이지에서 다음과 같습니다.
만약, 로그인을 했다면, 해당 페이지에서 바로 편집을 할 수 있습니다. 아래의 편집을 클릭합니다.
그럼 아래의 변경가능한 소스파일이 보여집니다. (해당 화면은 비주얼모드입니다.)
해당 숏트코드를 좀 더 이해할려면, 비주얼모드보다 텍스트모드로 보는 것이 더 편합니다. 어렵지 않으니 따라오시면 됩니다. 그럼, 붉은 색으로 표시된 부분이 슬라이드로 보여지는 사진 이미지의 경로입니다. 해당 사진 경로는 어떻게 넣을까요?
빙고, 미디어관리에서 해당 주소를 복사해서 넣으면 해당 이미지가 보여지겠지요!
다른 페이지도 다 이와 같이 편집이나 수정이 가능하십니다.
워드프레스에서 포트폴리오 메뉴는 특이한 메뉴 중 하나입니다. 해당 메뉴의 특징은 포트폴리오 자체로 쓰여지기보다는, 포트폴리오를 활용하여 다양한 형태의 템플릿을 구현하는 도구로 사용된다고 보시면 좋습니다. 한번 구체적으로 살펴보도록 하겠습니다.
포트폴리오 메뉴를 통해서 사진갤러리 형태를 구현하도록 해보겠습니다.
여기에서 포트폴리오의 특성을 이해할 필요가 있습니다.
포트폴리오는 직접 쓰여지기보다는, 콘텐츠를 다양한 템플릿으로 보여지기 위한 도구입니다. 즉, 포트폴리오에서 컨텐츠를 올려 놓고, 페이지에서 해당 컨텐츠를 보여주는 형태입니다. 보통은 제공되는 테마마다 포트폴리오의 형태가 조금씩 차이가 있지만, 일반적인 컨셉은 유사하다고 보시면 됩니다.
바이럴프레즌트에서 작업한 '연세한국병원'의 홈페이지는 기본 테마를 '아바다'를 사용했습니다. 물론 거의 뜯어고치다시피한 커스터마이징 작업이 들어가서 기존의 테마와는 많이 다르지만, 아바다에서 제공되는 숏트코드 및 기능들은 유효합니다.
이해를 돕기 위해서, 아바다(테마)에서 제공되는 포트폴리오 형태를 한번 살펴보도록 하겠습니다.
아바다에서 제공하는 그리드 스타일의 포트폴리오)
해당 이미지를 클릭하면 아래처럼 좀 더 디테일한 정보를 인터렉티브한
화면으로 볼 수 있습니다.
아바다에서 제공하는 클래식 스타일의 포트폴리오)
텍스트와 함께 제공되는 스타일의 포트폴리오 )
원프레임으로 크게 보이는 스타일의 포트폴리오 )
이제, 확보한 사진을 포트폴리오에 먼저 올리도록 하겠습니다.
아래의 특성이미지를 클릭합니다.
그리고 선택한 이미지를 올립니다.
올릴때에, 특성이미지에다가 올려야 합니다.
올리고자 하는 이미지는 아래와 같습니다.
해당 이미지를 업로드합니다.
특성이미지를 설정해 주시면 아래처럼 설정된 이미지가 보여집니다.
카테고리를 설정해 줍니다. (없을 경우 하나 만듭니다)
여기선, Photography 로 설정해 준 후, 업데이트를 합니다.
그 다음이 중요한데요, 이제 설정한 컨텐츠를 해당페이지에서 불러들이는 방법을 안내해드리겠습니다.
대시보드에서 페이지를 클릭합니다.
아래의 페이지를 사진갤러리 페이지로 구성하고자 할 예정이기 때문에 해당 페이지를 편집합니다.
클릭한 후 편집모드로 들어갑니다.
그 후, 설정한 포트폴리오를 불러오기 위해선 포트폴리오 유형을 선택해주셔야
합니다. 템플릿 항목에서 다른 것들은 보실 필요 없고, Portfolio 로 되어있는 여러 유형들 중에서 한가지를 선택합니다. 해당 템플릿은 구매한 테마가 보유한 기본적인
템플릿입니다. (여기선 아바다 테마를 사용했습니다.)
그리고 처음에 설정한 카테고리, 즉 Photography 를 설정해줍니다.
업데이트를 눌러주고, 페이지 보기를 클릭하면 아래와 같이 적용된 페이지가 보여집니다. (해당 페이지는 포트폴리오에서 컨텐츠를 끌어오는 것이겠지요!)
이상으로 포트폴리오를 만들고, 페이지에 적용하는 법까지 알아봤습니다.
워드프레스 메뉴얼 - 외모(Appearance)관리
(테마 / 사용자정의 / 위젯 설정)
워드프레스에서 가장 중요한 메뉴 중 하나가 바로 외모(Appearance)관리일 것입니다. 왜냐하면 테마 및 세부적인 설정을 여기에서 할 수 있기 때문입니다. 먼저 해당 메뉴를 클릭하면 내가 설정한 테마가 보이고, 그 아래에 존재하는 테마가
보여집니다. 다른 테마를 구매해서 바꿔주기만 하면, 다른 테마가 적용됩니다.
하지만, 테마마다 고유의 설정이 다르기 때문에 한번 적용한 테마를 다른 테마로 바꾸고자 하면 대대적인 작업이 필요하단 부분을 먼저 알려드리고 싶습니다. (즉, 테마 선택이 가장 중요하며, 데이터가 들어가고 어느정도 작업이 끝난 상황에서는
테마를 변경하여도 해당 테마에 맞게 다시 작업을 해야 하는 고충이 있습니다. )
테마 밑 사용자정의를 클릭합니다.
사이트 제목과 태그라인
메인메뉴 설정 : 전체 메뉴 설정 / ( 해당 메뉴설정 부분은 아래에 구체적으로 설명을 추가하겠습니다. )
정적인 전면 페이지 설정 : 메인 홈페이지 설정과 블로그 페이지 설정메뉴입니다.
다음으로 위젯에 대해서 살펴보도록 하겠습니다. 위젯은 필요한 아이템들을 블로그 오른쪽 사이드나 웹사이트에서 아랫
페이지(footer)에다 넣을 수 있습니다. 예를 들자면, 네이버 블로그나 다음 블로그에서 사용하는 위젯과 동일하다고 보시면 되겠습니다. 단지, 워드프레스 위젯은 전세계인들이 올린 여러 위젯을 활용할 수 있습니다.
(가)에서 보이는 것이 지금 사용 가능한 위젯입니다. 여러 위젯 중에서 필요한 위젯을 마우스로 클릭한 상태에서 오른쪽
블로그 사이드바(나)에다 올리면 해당 기능이 적용됩니다.
위젯이 중요한 이유는 각종 플러그인을 설정한 후, 위젯에서 설정해서 해당 사이드바에 구성하기 때문입니다. 예를 들자면, SENDPRESS 라는 플러그인, 메일링 서비스를 제공하는 플러그인을 구축했을 경우에, 해당 플러그인을 활성화하면 위젯에 활성화되어 보여집니다. 예를 들자면, 아래의 Sendpress 플러그인을 활성화합니다.
그리고 아래의 그림처럼 위젯에서 드래그해줍니다.
세부적 내용들을 입력해줍니다.
그리고 세부내용을 입력합니다. 그럼 아래처럼 뉴스레터 위젯이 들어왔네요.
(웹사이트에 어울리게 작업하기 위해선 편집작업이 필요하겠지요?)
워드프레스, 테마 설치부터, 샘플페이지 적용까지
오늘은 테마 설치부터, 샘플페이지 적용까지 살펴보도록 하겠습니다. 먼저 구축하고자 하는 테마는 다음의 테마입니다.
해당 사이트
구축하고자 하는 호스팅 서비스에서 워드프레스를 설치한 후, 테마를 설치합니다.
그리고 인스톨을 해 줍니다.
설치되었습니다.
하지만, 해당 사이트에 들어가면 다음과 같은 화면이 뜹니다.
저희가 봤던 깔끔한 데모와는 틀리지요, 데모와 동일하게 하기 위해선 다음의 작업이 필요합니다.
툴박스를 클릭합니다.
Import를 클릭한 후 Wordpress를 클릭합니다.
Install Now 를 클릭합니다.
설치 후, 테마에서 제공하는 xml 파일을 업로드합니다.
파일을 업로드하면 다음의 화면이 보여집니다.
Select 에서 해당 아이디를 선택합니다.
여기까지 설정해서 사이트를 보면 아래의 페이지가 보여집니다.
샘플사이트처럼 보여지기 위해선, 해당 테마 옵션에서 홈페이지를 설정해줘야합니다.
커스터마이징을 클릭합니다.
메인메뉴를 설정해줍니다.
홈페이지를 설정해줍니다.
이렇게 설정을 다 하셨다면, 데모사이트와 동일하게 보이실 것입니다.
워드프레스 메뉴얼 - 플러그인
워드프레스를 잘 다루기 위해서 가장 중요한 개념 중의 하나가 바로 플러그인입니다. 플러그인에 대해서 간략히 설명드리자면, 워드프레스 기반 웹사이트를 활용해서 보다 다양한 일들을 할 수 있는 기능을 지원하는 툴입니다. 좀 더 쉽게 설명드리자면, 일전에 제가 그린 그림을 통해서 설명드리겠습니다.
(그림1)
(그림 1)에서 보듯이, 워드프레스가 차의 본체라고 본다면, 플러그인은 각종 유용한 툴들이 되겠습니다. 그럼 플러그인들은 어떤 것들이 있을까요? 결론적으로 말하면 온라인에서 구현가능한 모든 것들이 거의 들어 있습니다. 예를 들자면, 메일을 보내는 기능의 Sendpress, 페이스북 덧글을 달 수 있는 플러그인, 국내의 게시판 플러그인 등 원하는 것들을 검색해서 장착을 하면 됩니다. 한번 해 볼까요?
(그림2)
검색을 합니다. 단, 워드프레스는 해외솔루션이기 때문에 영어로 검색을 해야겠지요? 요즘, 쇼셜네트워크 계정과 연계하여서, 덧글을 다는 서비스가 유행하는데, 해당 플러그인을 검색해보도록 하겠습니다. 검색어에 "facebook" 이라고 입력합니다.
(그림3)
다양한 플러그인들이 보여집니다. 설명을 좀 드리면, (가) 부분은 이 플러그인에 대한 평가입니다. 당연히 별을 많이 딴 플러그인이 사람들이 좋아하는 플러그인이겠지요? 두번째 (나) 부분은 해당 플러그인에 대한 간략한 설명입니다. 다 영어라.. 알아서들 적당히 해석하시고...
(그림4)
이 중에서 "Hupso Share Buttons for Twitter, Facebook & Google+" 플러그인을 세부사항을 보면 세부적인 내용이 나오고, 지금 설치하기를 클릭하면 설치를 하게 됩니다. 지금 설치하기를 클릭합니다.
플러그인을 활성화를 클릭합니다.
그러면, 플러그인 활성화에 아래와 같이 활성화됩니다.
그러면, 홈페이지의 모든 페이지에 아래와 같이 소셜 네트워크로 퍼갈 수 있는 플러그인이 설치된 것을 확인하실 수 있습니다.
비활성화를 하면, 해당 플러그인이 삭제됩니다. 이와 같이 플러그인을 설치하고, 삭제할 수 있습니다. 한편, 플러그인 중에서 다양한 기능을 지원하는 플러그인의 경우는 유료플러그인들이 대부분이니, 이 점도 참조하세요.
워드프레스 플러그인 - 레볼루션 슬라이드
선택
(글자 및 이미지, 혹은 동영상) 수량
