워드프레스강의안(부산시교육청)

2013. 7. 18. 11:35블로그

워드프레스 강의안



이동현원장
010-2984-8138



그림입니다.
원본 그림의 이름: CLP000008980007.wmf
원본 그림의 크기: 가로 1135pixel, 세로 820pixel그림입니다.
원본 그림의 이름: CLP000008980008.wmf
원본 그림의 크기: 가로 99pixel, 세로 103pixel
                                                         
http://goo.gl/zrsBo





1. 워드프레스로 나만의 콘텐츠 센터 구축하기


(1) 워드프레스는 뭐지

모바일인터넷의 대중화로 인해 스마트폰과 태블릿PC의 대중화인해 개인에서부터 기업에 이르기까지 많은 사람들이 스마트기기로 정보 검색에서부터 수입창출에 이르기까지 활용하고 있다. 특히 기업에서 수입창출을 위해 홈페이지제작에 많은 관심을 가진 이유도 여기에 있기 때문이다. 워드프레스를 이용하면  홈페이지, 블로그, 소핑몰에 이르기까지 활용범위가 높다. 워드프레스는 설치후 테마와 플러그인등을 통해 홈페이지를 쉽게 구축할 수 있으며 콘텐츠관리에 있어 가장 효과적이다.

(2) 교사들이 홈페이지나 블로그 구축시 워드프레스로 해야하는 이유?

워드프레스는 오픈소스기반으로 다양한 테마와 플러그인을 제공하고 있으며 과거 홈페이지구축시 알아야할 html에 대한 지식이 없어도 누구나 쉽게 자신만의 홈페이지를 구축할 수 있다. 특히 트위터, 페이스북, 구글플러스등과 연동할 수 있다. 특히 모바일인터넷시대에 맞는 모바일 웹도 지원하고 있다.

(3) 자신만을 위한 브랜드 홈페이지를 만들려면 설치형으로 한다.

워드프레스에는 설치형(wordpress.org)과 서비스형(wordpress.com)이 존재한다. 자신이 소유한 도메인을 사용하면서 소스수정과 자신만의 광고을 넣고자 한다면 설치형 워드프레스를 선택해야 하지만 트패픽이 많이 발생하는 사이트의 경우라면 호스팅부담이 있을 수 있다. 반대로 서비스형의 경우에는 아이디.wordpress.com 으로 서비스를 이용할 수 있는 반면 서비스이용에 제한과 광고삭제로 인한 추가비용이 발생한다. 다만 트래픽비용은 없다.

이동현닷컴
http://leedonghyun.com

구글오프라인사용자모임
http://googler.pe.kr




2.  워드프레스, 티스토리, 네이버, 다음블로그로 홈페이지 구축하기


 

워드프레스

티스토리

네이버블로그

일반홈페이지

구축

직접 구축가능

불가

불가

매우 어려움

개발자

필요없음

필요없음

필요없음

필요함

유지보수

필요없음

필요없음

필요없음

추가비용 발생

SNS연동

플러그인 이용

플러그인 이용

특정 플러그인 지원

추가비용 발생

게시판

자체게시판

자체게시판

자체게시판

자체개발

공개용 보드
(제로, 그누보드)

웹표준화

기본적용

 

 

불가

SNS연동

플러그인 이용

일부 가능

일부 가능

가능

SEO최적

구글검색 최적화

부분가능

부분가능

검색모듈설치시





그림입니다.
원본 그림의 이름: CLP00002b440001.wmf
원본 그림의 크기: 가로 1019pixel, 세로 770pixel


워드프레스로 제작된 구글전문블로그 구글러(http://googler.pe.kr)



그림입니다.
원본 그림의 이름: CLP00002b440002.wmf
원본 그림의 크기: 가로 1024pixel, 세로 768pixel


티스토리로 제작된 이동현닷컴(http://leedonghyun.com)

그림입니다.
원본 그림의 이름: CLP00002b440003.wmf
원본 그림의 크기: 가로 1019pixel, 세로 773pixel


네이버블로그로 제작된 구글스마트워크 블로그(http://blog.naver.com/church4u1)


그림입니다.
원본 그림의 이름: CLP00002b440004.wmf
원본 그림의 크기: 가로 1023pixel, 세로 771pixel


홈페이지 솔루션으로 제작한 교회정보기술연구원 홈페이지(http://citi.or.kr)



3. 워드프레스 설치에서 운영까지


 (1) 가입형 -  블로그 회원가입 – 블로그 스킨선택 – 위젯설치 – 블로그 운영


그림입니다.
원본 그림의 이름: CLP00002b440005.wmf
원본 그림의 크기: 가로 1022pixel, 세로 770pixel


가입형 워드프레스 http://wordpress.com/



  (2) 설치형 – 워드프레스설치 – 테마선택 – 플러그인설치 – 블로그 운영


그림입니다.
원본 그림의 이름: CLP00002b440006.wmf
원본 그림의 크기: 가로 1024pixel, 세로 770pixel




Notes 대표적인 워드프레스 사이트 - 블로터닷넷, 딴지일보, LG전자 블로그, 서울 홈페이지, 구글러, ZDNet


그림입니다.
원본 그림의 이름: CLP00002b440008.wmf
원본 그림의 크기: 가로 1020pixel, 세로 768pixel


그림입니다.
원본 그림의 이름: CLP00002b440007.wmf
원본 그림의 크기: 가로 1026pixel, 세로 769pixel



4. 사이트기획에서 구성까지



  (1) 사이트의 목적 -







  (2) 사이트 컨셉 -







  (3) 사이트 콘텐즈 -







  (4) 사이트 메뉴구조 -







  (5) 사이트구축 프로세스


    도메인등록 – 웹호스팅 – 설치 – 옵션 – 테마설치 – 플러그인 설치 – 소스수정





5. 무료 웹호스팅 신청하기


  (1) 닷홈홈페이지에 가입한다.(http://www.dothome.co.kr/)

그림입니다.
원본 그림의 이름: CLP00002b440009.wmf
원본 그림의 크기: 가로 1025pixel, 세로 660pixel

  


  (2) 무료호스팅 및 블로그 자동설치하기

      http://www.dothome.co.kr/web/free/index_3.php

그림입니다.
원본 그림의 이름: CLP000010e02289.wmf
원본 그림의 크기: 가로 1233pixel, 세로 853pixel




그림입니다.
원본 그림의 이름: CLP000010e00001.wmf
원본 그림의 크기: 가로 787pixel, 세로 718pixel


무료 호스팅 신청후 바로 워드프레스 설치가 이루워진다. 무료호스팅 신청하기를 클릭한다.


그림입니다.
원본 그림의 이름: CLP000010e00002.wmf
원본 그림의 크기: 가로 650pixel, 세로 262pixel


무료 호스팅 신청이 완료되었다면 완료즉시 해당 주소로 접속 가능하다.


그림입니다.
원본 그림의 이름: CLP00002b44000a.wmf
원본 그림의 크기: 가로 1018pixel, 세로 763pixel


http://koreagoogler.dothome.co.kr 

6. 워드프레스 접속하기


  아이디(koreagoogler).dothome.co.kr 입력후 엔터를 치며 워드프레스 첫페이지에 방문한다.


그림입니다.
원본 그림의 이름: CLP000010e00003.wmf
원본 그림의 크기: 가로 1064pixel, 세로 602pixel

워드프레스 초기화면





7. 관리자모드로 접속하기


하단에 있는 로그인이나 http://koreagoogler.dothome.co.kr/wp-login.php 주소로 로그인 한다. 로그인시 아이디는 가입시 신청한 아이디입니다.


그림입니다.
원본 그림의 이름: CLP000010e00004.wmf
원본 그림의 크기: 가로 533pixel, 세로 538pixel


워드프레스 로그인 화면

그림입니다.
원본 그림의 이름: CLP000010e00005.wmf
원본 그림의 크기: 가로 1251pixel, 세로 768pixel


로그인 후 초기화면



8. 대시보드 접속후 테마 선택하기(외모 –테마선택)


그림입니다.
원본 그림의 이름: CLP000010e00006.wmf
원본 그림의 크기: 가로 157pixel, 세로 338pixel


대시보드 메뉴화면



자신의 블로그에 맞는 테마를 선택한 후 활성화하기 위해 지금 설치하기를 클릭한다.


설치가 완료되면 활성화를 선택한다.


자신의 도메인으로 접속하면 변경된 홈페이지를 확인할 수 있다.


이미지와 로그, 포스트가 없기 때문에 제시된 블로그 페이지처럼 보이지 않을 뿐이다.


그림입니다.
원본 그림의 이름: CLP000010e00007.wmf
원본 그림의 크기: 가로 318pixel, 세로 366pixel


테마 설치전 테마에 대한 정보을 확인한 후 자신에게 맞는 테마인지 확인할 수 있다. 테마 설치후에도 언제든지 테마를 변경할 수 있으며 잘못된 테마나 원하지 않는 테미일 경우에는 비활성화 또는 삭제할 수 있다. 


지금설치하기를 클릭하면 워드프레스에 설치되는데 설치전 미리보기를 통해 완성된 후의 워드프레스를 확인한다.


그림입니다.
원본 그림의 이름: CLP00002b44000b.wmf
원본 그림의 크기: 가로 1024pixel, 세로 724pixel



무료테마 사이트 : http://www.themeshock.com/wordpress-themes/


셀럽워드프레스 무료테마 33선  http://goo.gl/ZTIKk


워드프레스 테마를 가장 손쉽게 구할 수 있는 곳이 바로 wordpress.org(http://wordpress.org/extend/themes/)이다. 이곳에 등록된 테마들은 일정 기준의 검사를 통과한 것으로 웹사이트의 보안을 고려한다면 추천할 만하다. 무료이며 다량의 무료 테마가 등록되어 있어 워드프레스에 입문자의 경우에 관심을 가져야 한다. 다만 등록된 테마의 레이아웃이 비슷 비슷하고 독특한 기능 없이 단조롭게 구성되어 있다.


그림입니다.
원본 그림의 이름: mem00002f583a98.png
원본 그림의 크기: 가로 580pixel, 세로 490pixel

wordpress.org에 등록된 테마의 분류 기준


wordpress.org에서는 테마를 몇개의 태그로 분류하고 있는데 주요 색상, 화면 분할수, 가로폭 고정 유무, 주요 기능 및 특성, 주제별로 나누고 있다. 워드프레스 관리자에서 Appearance(외모)의 Themes(테마) 메뉴 안에 들어가면 상단에 Install Themes(테마 설치)라는 탭이 있는데 여기서도 확인할 수 있다.

그림입니다.
원본 그림의 이름: mem00002f580001.png
원본 그림의 크기: 가로 750pixel, 세로 422pixel



    워드프레스 한글판이 설치되어 있다면 관리자에서 한글로 번역된 분류 기준을 볼 수 있다. 색상은 자신의 분위에 맞는 색상을 선택하고 블로그 처음 사용자면 2열, 사이드바는 블로그형태라면 우측, 홈페이지 형태라면 우측에 설정하는 것이 좋다. 필터을 많이 설정하게 되면 검색되는 내용이 정확할 수 있지만 검색되는 것이 적기 때문에 색상, 열, 폭정도만 입력하여 검색하는 것이 좋다.



9. 대시보드 익히기


  (1) 글메뉴 영역 – 모든글, 새글쓰기, 카테고리, 태그



  (2) 미디어 영역 – 게시글, 페이지의 첨부시킬 이미지와 동영상 생성과 편집하는 곳이며 라이브러리와 파일올리기로 구성되어있다.



  (3) 링크영역 – 모든링크, 링크만들기, 링크카테고리관리가 가능하다.



  (4) 페이지영역 – 자주 변경되지 안는 내용을 올리는 곳(모든 페이지, 페이지만들기)



  (5) 댓글영역 – 전체 댓글을 관리하는 곳



 (6) 외모영역 – 테마와 위젯을 관리하는 영역



  (7) 플러그인 영역 – 플러그인을 관리하는 영역으로 설치된 플러그인과 플러그인 추가하기



  (8) 사용자 영역 – 모든 사용자, 사용자추가, 프로필로 구성된다.





10. 기본값 설정하기


설정영역에서는 사이트의 타이클, 주소, 태그등을 입력하고 기본적인 설정이 가능하다. 화면에 보이는 게시글 개수와 노출시킬 카테고리 선정이 가능하다.


그림입니다.
원본 그림의 이름: CLP000010e00008.wmf
원본 그림의 크기: 가로 1063pixel, 세로 761pixel




    사이트제목이나 태그라인을 입력하면 워드프레스 상단에 표시된다. 일반설정시 시간대와 날짜형식, 시간형식을 반드시 확인한 후 설정한다.  이외에도 쓰기, 읽기, 고유주소에 대한 셋팅시 워드프레스 사용자의 취양이나 표현 방식에 따라 설정하는 것이 좋다.


    팀블로그로 블로그을 운영하고자 한다면 팀블로그에 참여할 이들의 이름, 이메일, 권한등을 설정해 두어야 하면 권한에 따라 수정과 삭제, 편집등이 가능해 진다.


자신의 메뉴 설정값

 

12.  필수 플러그 다운로드  및 설치하기


그림입니다.
원본 그림의 이름: CLP000008980005.wmf
원본 그림의 크기: 가로 1254pixel, 세로 724pixel



플러그인 추가하기를 클릭한 후 필요한 플러그인을 설치한다.



  (1) 글쓰기 에디터 플러그인 :  tinyMCE


그림입니다.
원본 그림의 이름: CLP00002f580001.wmf
원본 그림의 크기: 가로 683pixel, 세로 580pixel


  (2) 검색플러그인 : google xml sitemaps


그림입니다.
원본 그림의 이름: CLP00002f580002.wmf
원본 그림의 크기: 가로 679pixel, 세로 574pixel



  (3) SNS 연동 : sexy bookmarks


그림입니다.
원본 그림의 이름: CLP00002f580003.wmf
원본 그림의 크기: 가로 635pixel, 세로 502pixel

 


  (4) 스마트폰 연동 : wptouch


그림입니다.
원본 그림의 이름: CLP00002f580004.wmf
원본 그림의 크기: 가로 641pixel, 세로 533pixel




  (5) 갤러리 : NextGEN Gallery


그림입니다.
원본 그림의 이름: CLP00002f580005.wmf
원본 그림의 크기: 가로 407pixel, 세로 422pixel


  (6) 소셜플러그인 : social media widget


그림입니다.
원본 그림의 이름: CLP00002f580006.wmf
원본 그림의 크기: 가로 681pixel, 세로 579pixel



  (7) 스팸방지 : akismet


그림입니다.
원본 그림의 이름: CLP00002f580007.wmf
원본 그림의 크기: 가로 1014pixel, 세로 766pixel


http://akismet.com/wordpress/


13, 카테고리 만들기 – 상하카테고리 생성만들기(3depth 대분류, 중분류, 소분류)

그림입니다.
원본 그림의 이름: CLP000008980004.wmf
원본 그림의 크기: 가로 1246pixel, 세로 759pixel



  대시보드 – 글 – 카테고리순으로 선택한다. 카테고리 선택시 카테고리 이름, 슬러그, 상위카테고리 유무선정, 카테고리 설명등을 작성한다.  첫탭스는 슬래그에는 메뉴명을 상위는 없음을 선택한다. 두 번째 탭스의 경우에는 상위에는 첫탭스 이름(상위메뉴명)을 넣고 설명은 카테고리의 특징을 작성하거나 빈칸으로 넣는다.


마인드맵형태로 탭스을 구성하세요

 


14. 게시글 작성하기


그림입니다.
원본 그림의 이름: CLP000008980003.wmf
원본 그림의 크기: 가로 1279pixel, 세로 552pixel



  (1) 대시보드 – 글 – 새글쓰기 선택



  (2) 페이지 글의 제목과 내용입력


     1) 제목 잡는 법



     2) 본문 내용 작성법


       - 서론



       - 본론(3스텝구조)


     

       - 결론

     



  (3) 태그입력 – 본문내용관련 내용




  (4) 이미지 삽입과 태그




15. 페이지 만들기


  카테고리, 페이지는 사이트 메인화면에 노출되는 메뉴영역이다. 카테고리는 하나의 카테고리안에 여러 개의 게시글이 존재할 수 있다. 게시글을 작성할때마다 최신글이 상위에 노출되며 페이지는 하나의 페이지안에 하나의 게시글만 존재한다. 주로 회사소개나 약도등 내용이 쉽게 변하지 않고 바로 접근해야 하는 내용을 페이지로 설정한다.



그림입니다.
원본 그림의 이름: CLP000008980002.wmf
원본 그림의 크기: 가로 1261pixel, 세로 421pixel


페이지 : 고정적인 콘텐츠  / 포스트 : 변화하는 콘텐츠



그림입니다.
원본 그림의 이름: CLP000008983746.wmf
원본 그림의 크기: 가로 1270pixel, 세로 710pixel






16. 위젯 등록에서 사이드바에 등록하기


기본 위젯에서부터 플러그인 등록시 생성된 위젯에 이르기까지 사용자의 편의에 따라 사이드바에 등록한다. 



그림입니다.
원본 그림의 이름: CLP000008980001.wmf
원본 그림의 크기: 가로 1261pixel, 세로 660pixel


그림입니다.
원본 그림의 이름: CLP00002f580008.wmf
원본 그림의 크기: 가로 1015pixel, 세로 720pixel





17. 블로그에 글쓰기 잘하는 방법(포스팅 노하우)


  (1) 자신의 경험을 바탕으로 한다.


  (2) 주제 제목, 키워드등을 만든후 포스팅한다. 


  (3) 단순하고 쉬운 문장으로 만든다.


  (4) 초안작성후 편집하고 보정한다.


  

그림입니다.
원본 그림의 이름: CLP00002f580009.wmf
원본 그림의 크기: 가로 1031pixel, 세로 773pixel


전병선기자의 블로그


 그림입니다.
원본 그림의 이름: CLP00002f58000a.wmf
원본 그림의 크기: 가로 987pixel, 세로 669pixel


문인수의 파워포인트 블로그


18. 워드프레스 제작시 도움이 되는 곳


그림입니다.
원본 그림의 이름: CLP00002f58000b.wmf
원본 그림의 크기: 가로 1035pixel, 세로 741pixel


워드프레스 포럼 http://ko.wordpress.org/


그림입니다.
원본 그림의 이름: CLP00002f58000d.wmf
원본 그림의 크기: 가로 992pixel, 세로 667pixel



워드프레스 사용자 모임 http://kopress.kr/




그림입니다.
원본 그림의 이름: CLP00002f58000e.wmf
원본 그림의 크기: 가로 1013pixel, 세로 707pixel


황씨닷컴 http://www.hwangc.com/



그림입니다.
원본 그림의 이름: CLP00002f58000f.wmf
원본 그림의 크기: 가로 1025pixel, 세로 766pixel



구글러전문블로그 – 블로그코너 http://goo.gl/dH3jN



워드프레스 다운로드


그림입니다.
원본 그림의 이름: CLP00002f580010.wmf
원본 그림의 크기: 가로 989pixel, 세로 205pixel




1. 워드프레스 한글판 다운로드 http://ko.wordpress.org/wordpress-3.5.2-ko_KR.zip




2. 워드프레스 영문판 다운로드 http://wordpress.org/latest.zip




3. 워드프레스 플러그인 다운로드 http://wordpress.org/plugins/




4. 워드프레스 테마 다운로드  http://wordpress.org/themes/




5. 스마트기기 애플리케이션 다운로드  http://wordpress.org/mobile/


  아래의 QR코드를 스캔하면 스마트기기에서 해당 애플리케이션을 다운로드됩니다.

그림입니다.
원본 그림의 이름: CLP00002f580011.wmf
원본 그림의 크기: 가로 159pixel, 세로 201pixel



강사프로필 및 연락처



그림입니다.
원본 그림의 이름: photo.jpg
원본 그림의 크기: 가로 150pixel, 세로 150pixel

 

이  름 : 이동현 원장

 

근무처 : (사)교회정보기술연구원

 

연락처 : 010-2994-8138

 

팩  스 : 1515-010-2984-8138

 

이메일 : mail@leedonghyun.com

 

 

홈페이지 : http://www.citi.or.kr

 

구글전문블로그 : http://googler.pe.kr

 

개인블로그 : http://leedonghyun.com

 

트위터 : http://twitter.com/koreagoogler

 

페이스북 :

http://facebook.com/koreagoogler

 

구글플러스 : http://gplus.to/leedonghyun

 

카카오톡 : iamleedonghyun