워드프레스소개및운용관리안내 1
목차 2
1. 워드프레스소개 역사 2003 년매트물렌웨그에의해탄생 ver0.7 플러그인구조, 애플리케이션프로그램밍인터페이스도입 테마구조와페이지운영이가능한 ver1.5 로테마변경및디자인에대한자유도부여 Wyswyg 방식의문서편집기도입 MU(multi-user) 개념의도입 Social 쉐어플러그인도입으로 (SNS 연계 ) 현재워드프레스 ver4.0 운영중 3
1. 워드프레스소개 현재진행형 2014년2월기준 WP Sites in the world 국내에서는 2009 년자리를잡으면서성장중 2013 년 CMS 시장의 54% 를차지 출처 : https://wordpress.com/activity/ 4
1. 워드프레스소개 현재진행형 4 억 9 백만명의인터넷사용자들이월간 16 억 3 천만 pageview 를발생시키고있다. 6 천백만건의신규포스트가생성되고있으며 5 천 5 백만개의코멘트가생성되고있다. 출처 : https://wordpress.com/activity/ 5
1. 워드프레스소개 현재진행형 최신워드프레스웹페이지제작의예제는아래의 URL 에서확인 http://www.creativebloq.com/web-design/examples-wordpress-11121165 출처 : http://en.wordpress.com/stats/ 6
2. 기존홈페이지 HTML Hyper Text Markup Language (abcd.html) 정적인페이지의단순연결 <>tag 를통한디자인의구현 A B Client (Browser) 가 ( 요청 ) 나 ( 정보제공 ) Server 7
2. 기존홈페이지 Data Base 서버프로그램밍언어 MySQL, 오라클, dbm, filepro PHP, ASP, JSP Database 와브라우저를오가며웹페이지형태로구현 동적인페이지를만들기위한기초 HTML 방식이개별페이지제작방식이가지는서버공간의낭비를없앤다. 공통분모는따로보관하고정보가호출되면공통양식에해당정보를대입하여사용자에게제공 A B C 가 ( 요청 ) Client (Browser) 폴더 Database 적은비용! 자유로운사용! 나 ( 정보제공 ) Linux- 운영체제 Apache- 서버프로그램 MySQL- 데이터베이스프로그램 PHP- 서버스크립트언어 8
2. 기존홈페이지 웹표준의등장 기존 HTML 만으로표현해내기어려운동적인정보를만들어내기위해사용되었던자바스크립트, 액티브 X, Flash 등이모두그시대의막을내리고있음. HTML5 + CSS3 의조합으로웹표준에맞는페이지제작이가능크로스브라우징, 웹접근성, 검색엔진최적화 (SEO) 등의수행에반드시필요한제작방식 9
2. 기존홈페이지 크로스브라우징 현재사용되는브라우저는다음과같다. -2014 년 1 월기준점유율 (Browser & OS)- 54.96% 10
2. 기존홈페이지 크로스브라우징 舊버전 Explorer 8.0 Browser HTML5 + CSS3 조합을해석하지못하고텍스트만나열되는즉, 디자인적인요소가결합되지못한정보노출. 브라우저업데이트! 크롬 (Chrome) Browser 11
3. 대안으로서의워드프레스 PC(1980x1280) One-Source Multi Use ipad(2048x1536) PC 버젼과모바일버전을따로관리하는것은시간과비용의낭비다. Galaxy S3(1280x720) 12
3. 대안으로서의워드프레스 Block 구조로설계 memu1 Contents A Contents D < 홈페이지의구성 > memu2 Design component Contents B Contents E memu3 Contents C Contents F 반응형 memu1 memu2 memu3 Design component Contents A Contents B Contents F 모니터영역 모바일영역
3. 대안으로서의워드프레스 Responsive Design( 반응형디자인 ) 제공 하나의페이지만만들되, 다양한디바이스에서모두최적화되어보이도록하겠다는뜻. ex) http://picasa.google.com/ http://www.google.com/about/ http://www.google.com/goodtoknow/ http://www.google.com/intl/en/chrome/business/ http://www.google.com/culturalinstitute/home http://www.google.com/intl/en/+/learnmore/ 14
3. 대안으로서의워드프레스 편리한 CMS 툴제공 C.M.S.(Contents Management System, 페이지내의모든입력정보에대한관리시스템 ) http:// 도메인 /wp-admin 관리자모드로입장 직관적인메뉴를제공하여초보자도쉽게자사의홈페이지에대한 Contents 관리를할수있음. 15
3. 대안으로서의워드프레스 편리한 CMS 툴제공 이미지의수정 < 브라우저 > 텍스트정보의수정 < 관리자페이지 > 16
3. 대안으로서의워드프레스 Theme 제공 워드프레스홈페이지는기본테마를유, 무료로제공하고있으며, 테마를이용함으로써관리나제작의시간을절약할수있다. 운영자의능력에맞고해당아이템을가장잘어필할수있는테마를선택한경우운영이그만큼쉬워진다. 그렇게때문에테마를선택하는과정에서길게는 1 개월이상의시간이소요되기도한다. 17
3. 대안으로서의워드프레스 Theme 제공 모든테마는미리보기및샘플을통해결과물이어떤디자인적구성요소를가지고있는지를반드시확인한후에구매해야한다. 18
3. 대안으로서의워드프레스 Plug-in 선택한테마가내장한기능외에 Contents 관리를위해필요한다양한플러그인을직접선택하고설치하여사용한다. 음식을돋보이게하기위해서그주변을장식하는 Garnish( 가니쉬 ) 와그의미적정의가동일하다고볼수있다. 19
3. 대안으로서의워드프레스 Plug-in 20
3. 대안으로서의워드프레스 Plug-in Visual Composer 플러그인을설치하면직관적인 Contents 관리가가능하다. 21
4. 워드프레스구축사례 예제 22
4. 워드프레스구축사례 예제 더많은 EC21 의제작예제는 http://ec21wp.com 참조바람 23
5. 워드프레스홈페이지제작전고려대상 WHY? 필요성
5. 워드프레스홈페이지제작전고려대상 계획 Direction! Schedule!
5. 워드프레스홈페이지제작전고려대상 계획
5. 워드프레스홈페이지제작전고려대상 환경