[스마트정보화 시스템 연재03] 오픈소스 CMS 모바일웹(워드프레스, 미디어위키, 줌라)

[스마트정보화 시스템 연재03] 오픈소스 CMS 모바일웹(워드프레스, 미디어위키, 줌라)

 

오픈웹은 오픈계정(가입형)과 오픈소스(설치형)으로 나눈다. 가입형으로 워드프레스닷컴,스프링노트,구글사이트도구가 있고, 설치형으로 워드프레스, 미디어위키, 줌라가 있는데 설치형에 대하여 알아보자.

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

 

오픈소스 블로그의 대명사인 워드프레스를 개설하고 모바일웹으로 구현할수가 있다. 오픈소스를 사용하려면 서버가 있어야한다. 임시로 연습하기위해서는 바로 호스팅서비스를 제공해주는 닷홈(dothome.co.kr)를 이용할수 있다. IE(익스플로러)에서만 회원가입이 가능하지만 무료로 100MB를 제공해준다.최소의 비용으로 정식도메인을 개설하고 싶으면 나야나(nayana.com)를 이용하면된다. 나야나에서 도메인을 등록하면 400MB 무료웹호스팅을 해주기 때문이다. 그러면 워드프레스의 공식홈페이지(wordpress.org)에서 소스를 다운로드받아 모바일웹으로 구현하기 까지의 단계를 알아보자.

(1)소스(wordpress3.2.zip) 다운로드 후 알집으로 압축을 푼다.
소스 다운로드 - http://wordpress.org/download/

(2)알ftp로 서버루트에 wordpress폴더안에 있는 폴더와 화일들을 서버루트(html)에 올린다.

(3)Editplus로 DB정보(localhost,User Name,Password,DB Name)을 wp-config-sample.php에 삽입후 wp-config.php로 저장한다. 초기화면(http://URL)에서 로그인하면 관리자화면(http://URL/wp-admin)이 된다.

(4)관리자화면에서 테마를 자체FTP로 올리기 위하여 먼저 알ftp로 서버를 열어 wp-content/uploads 폴더를 만들고 권한설정을 777로 바꾼다.

(5)테마를 1400개중에서 선택한후 다운로드 한 상태에서 테마->install theme->Upload->FPT정보입력(주소,ID,비밀번호)->설치한후 활성화시킨다.
테마 다운로드 - http://wordpress.org/extend/themes/browse/new/

(6)플러그인은 1500여개중에서 선택한후 설치한다.

플러그인 다운로드 - http://wordpress.org/extend/plugins/

테마는 모양이지만, 플러그인은 기능을 추가해준다. 테마는 원하는 한가지만 선택하면 끝나지만, 플러그인은 계속적인 추가가 가능하다.워드프레스의 매력은 플러그인에 있다.(wordpress.com에서는 플러그인을 사용할수가 없다) 플러그인은 관리자화면,미디어,관련 플러그인으로 나눌수가 있다.

  1)관리자화면 관련 플러그인으로 좌측메뉴를 상단드롭다운메뉴로 바꾸어주는 Ozh’Admin Drop Down Menu, 보여주기모드에서 편집기추가가 가능한 TinyMCE Advanced, HTML모드에서 전체화면을 만들어주는 Fullscreen HTML Editor가 있다.그리고 소셜댓글서비스disqus와 스팸댓글방지가 가능한 kismet, 검색엔진최적화해주는 All in One SEO 백업및 복구해주는 Updraft가 있다.

  2)미디어 관련 플러그인으로 피카사와 유튜브를 이용하여 사진과 동영상을 삽입할수 있는 Picasa Express x2

와 Smart YouTube 가 있고, SNS(트위터,페이스북)와 포스트를 연동할수 있는 Sharedaddy,Twitter Tools가 있다.

  3)그외에 양식(Form)삽입이 가능한si-contact-form, 구글맵삽입이 가능한 RomeLuv Google Maps for WordPress가 있다.

  4)모바일웹으로 자동변환 시켜주는wptouch, 모바일지원을 해주는 disqus, Sharedaddy가 있다.

  5)60개 언어로 자동번역해주는 Transposh 가 있다.
플러그인 다운로드 주소와 설치및 사용방법은 다음과 같다. (워드프레스 버전3.2이상으로 업그레이드해야 설치가능한 플러그인이 있다)

 

* 플러그인 다운로드 주소

(1)Ozh’ Admin Drop Down Menu - 

http://wordpress.org/extend/plugins/ozh-admin-drop-down-menu/

(2)TinyMCE Advanced - http://wordpress.org/extend/plugins/tinymce-advanced/

(3)Fullscreen HTML Editor - http://wordpress.org/extend/plugins/fullscreen-html-editor/

(4)Picasa Express x2 - http://wordpress.org/extend/plugins/picasa-express-x2/

(5)Smart YouTube - http://wordpress.org/extend/plugins/smart-youtube/

(6)Disqus Comment System - http://wordpress.org/extend/plugins/disqus-comment-system/

(7)Sharedaddy - http://wordpress.org/extend/plugins/sharedaddy/

(8)Twitter Tools - http://wordpress.org/extend/plugins/twitter-tools/

(9)WPtouch - http://wordpress.org/extend/plugins/wptouch/

(10)Akismet - http://wordpress.org/extend/plugins/akismet/

(11)All in One SEO Pack - http://wordpress.org/extend/plugins/all-in-one-seo-pack/

(12)Updraft - http://wordpress.org/extend/plugins/updraft/

(13)si-contact-form - http://wordpress.org/extend/plugins/si-contact-form/

(14)RomeLuv Google Maps for WordPress - http://wordpress.org/extend/plugins/romeluv-google-maps-for-wordpress/

(15)Transposh - http://wordpress.org/extend/plugins/transposh-translation-filter-for-wordpress/

(16)WordPress.com Stats - http://wordpress.org/extend/plugins/stats/

 

* 플러그인 설치및 사용방법

(1)상단드롭다운메뉴로 만들기->Ozh’Admin Drop Down Menu 설치후 활성화->상단메뉴 생성->settings->admin menu->칼라선택->완료

(2)visual모드 에디터 추가하기->TinyMCE Advanced 설치후 활성화->settings->TinyMCE Advanced->원하는 메뉴를 끌어서 상단위치->save changes->완료

(3)html모드 전체화면 만들기->Fullscreen HTML Editor 설치후 활성화->메뉴에 fullscreen생성->완료

(4)검색엔진 최적화 만들기->All in One SEO Pack 설치후 활성화->settings->All in One SEO->enabled체크,Log important events체크->포스트작성화면에서 Meta TAg입력->구글검색결과로 노출 확인->완료

(5)포스트백업및 복구하기->Updraft설치후 활성화->settings->Updraft->백업 디렉토리(wp-content/updraft),백업 주기(weekly),백업파일 보관갯수(1) 설정->save changes->완료(알ftp로updraft폴더안에 백업화일확인)

* 복구하기->워드프레스설치-> Updraft설치->Restore->복구완료

(6)스팸댓글방지서비스 설치하기->Akismet설치후 활성화->무료API key(7fe7130a44a0)입력->updates option->활성화됨 완료

* 무료API Key 얻기:http://akismet.com/wordpress/->Get An Akismet API Key->Personal sign up->바를 끌어내려 0으로한후 이름,이메일 입력->APIkey 메일전송됨

(7)소셜댓글서비스 설치하기(모바일지원)->DISQUS Comment System 플러그인 설치후 활성화>settings->API Key, USer API Key 입력->enabled클릭->save->완료
* 디스커스 계정 신청 - http://disqus.com/profile/signup ->로그인후 API key 복사입력
* API key - http://disqus.com/api/keys/ 에서 API Key, USer API Key 복사입력

(8)사진,동영상 넣기->Picasa Express x2,smart-youtube설치후 활성화->포스트에 피카사아이콘 생성후 드래그드롭,httpv://youtube.com/이름

(9)양식(form) 넣기 ->si-contact-form설치후 활성화->양식삽입코드-[ ]안에 삽입 si-contact-form form=’1′->완료

(10)모바일웹 자동변환 설치하기 ->WPtouch설치후 활성화->settings->완료

(11)60개 언어 자동번역기 설치하기 ->Transposh설치후 활성화->기본 언어(Default Language)를 드래그앤 드롭으로 선택->Make all languages active, Sort by language name 선택 ,위젯 세팅의 스타일은 기본(default)로 하고 Effects 모두 체크->위젯에서 사이드바 설치

(12)통계정보 설치하기 ->WordPress.com Stats 설치후 활성화->대시보드 홈에 wordpress.com stat 클릭->API key(wordpress.com 회원가입후 부여) 입력->완료

* “You do not have sufficient permissions to access this page.”에러 경고 조치사항 : wp-config.php 화일의 72줄에 define(‘WPLANG’, ‘ko_KR’); 73줄에 $_SERVER['SERVER_SOFTWARE'] = ‘Apache’; 로 수정한다.

* 재설치시에는 서버루트의 wordpress폴더와 화일을 모두 삭제하고, 웹호스팅업체서버의 DB정보를 모두 삭제한후 재실시한다.

* 무료테마 다운로드(WordPress, Joomla) : http://cms.simplethemes.org/

* 무료CSS다운로드 : http://www.csstemplatesfree.org/

 

 

2.미디어위키(Media WiKi) 설치하기

 

 

미디어위키는 위키백과(wikipedia.org)를 만든 오픈소스이다. 내서버에 미디어위키(mw)를 설치해 보자.

1)공식홈페이지에서 소스를 다운로드한다. (2011년7월 현재버전 1.1.7.0)
http://www.mediawiki.org/wiki/Download

2)FileZilla로 업로드후 mw/config 폴더의 권한설정 777로 변경한다. (1)알zip으로 압축을 풀어서 올리는 방법( 이방법은 시간이 많이 걸린다)(2)FileZilla로 소스를 업로드후 Putty로 서버에서 압축을 푸는 방법 FileZilla 다운로드 : http://filezilla-project.org/download.php

Telnet 또는 SSH(putty)로 접속한후 tar zxvf mediawiki-1.17.0.tar.gz 명령어로 서버에서 압축을 푼다.

3)http://URL/mw 에서 인스톨한다. (1)set up the wiki 클릭->한국어 선택->DB정보 입력->UTF-8선택->로그인정보 입력->Localsettings.php화일을 다운로드한다. (2)Localsettings.php화일을 mw폴더로 업로드후 config폴더를 삭제한다.

4)초기화면(http://URL/mw)에서 로그인한후 관리자화면으로 들어간다.

5)PC스킨을 설정하려면, 관리자화면->사용자환경설정->문서 보이기설정->9가지중 택일(모던선택후 저장)하여 완료한다.
데모 - http://kwma.kr/mw/index.php/%EB%8C%80%EB%AC%B8

6)모바일스킨을 설정하려면, 다음 사이트를 참고한다.
http://www.mediawiki.org/wiki/Extension:MobileSkin

 

 

3.줌라(Joomla)설치하기

 

다양한 템플릿과 기능이 들어있는 세계적으로 가장 많이 사용되고 있는 홈페이지 빌더 줌라(jl) 설치에 대하여 알아보자.

1)소스 다운로드 (2011년7월 현재 : Joomla_1.6.5-Stable-Full_Package.zip)
http://www.joomla.org/download.html

2)알zip으로 압축을 풀고 jl폴더를 만들고 서버에 업로드한다.

3)초기화면(http://URL/jl)에서 인스톨한다. (1)언어선택 : 영어->(2)설치환경체크->(3)라이센스 : 확인->(4)FTP환경 : 무시->(5)환경설정 : 사이트이름,이메일,어드민비밀번호 입력,DB정보,로그인정보 입력->(6)installation폴더삭제후 완료

4)관리자화면(http://URL/jl/administrator)->로그인

5)PC템플릿 설치
기본으로 3개의 템플릿이 있으며,추가되는 템플릿은 jl/templates폴더안에 넣고, 관리자화면의 메뉴 : extensions->template manager->site클릭후 템플릿선택-> default클릭후 미리보기(preview)로 확인한다.

데모 - http://kwma.kr/jl/

6)모바일템플릿 설치
모바일템플릿 다운로드 : http://extensions.joomla.org/search?q=mobile

 

KWMA 선교정보개발원 장원근원장의 스마트 미션 블로거 내용으로 허락받아 올립니다.