지난 6개월 동안 워드프레스 책을 만드느라고 글을 제대로 올리지 못했습니다. 이제 마무리 단계에 접어들어 최종 교정작업을 마치고 책 표지까지 디자인돼 나왔으며 인쇄과정에 들어갔습니다. 10월말이면 서점에 출시될 것으로 예상됩니다.
책의 내용은 두 개 부분으로 나눠져서 전반부는 워드프레스의 전반적인 사용법이고 후반부는 워드프레스 테마 만들기와 트위터 부트스트랩을 이용한 테마 수정 방법입니다. 책의 전체적인 내용은 목차를 보시면 짐작이 되리라 생각되므로 링크를 걸어둡니다. 이곳은 책을 소개한 워드프레스 사이트입니다.
워드프레스 책의 분량이 664 페이지나 되는데 테마 만들기 부분이 많습니다. 많은 내용을 넣지 못해서 워드프레스 플러그인 부분을 블로그에 싣기로 했습니다. 지금 진행되고 있는 워드프레스 젯팩 플러그인은 그러한 취지에서 올리는 것이고 책과는 상관 없이 참고할 수 있도록 여러 가지 플러그인에 대해서 올리겠습니다. 워드프레스가 영어로 만들어진 것이고 대부분의 플러그인이 영어로 돼 있어서 접근하기가 어려울 수도 있습니다. 원하시는 워드프레스 플러그인이 있을 경우 댓글을 달아주시면 찾아서 사용법을 올리겠습니다.
플러그인 설치 및 사용 방법이나 추가적인 테마 수정방법에 대해서도 올릴 예정이며, 책에서 기본테마인 Twenty-Eleven을 기반으로 자식테마를 만들었는데 이 테마를 사용해서 올리겠습니다. 사용하실 분은 이곳(http://martian36.tistory.com/933)에서 책의 모든 첨부파일을 내려받을 수 있습니다.
워드프레스 샘플 콘텐츠 사용하기
워드프레스로 테마를 만들거나 웹사이트를 만들려면 샘플 콘텐츠가 필요하죠. 샘플 콘텐츠를 만들어주는 플러그인인 WP Dummy Contents를 사용할 수도 있지만 이미지도 없고 영어로 돼 있습니다. 자신이 만들어 사용할 수도 있지만 책에서 사용한 샘플 파일을 사용할 수도 있습니다. 제 5장의 압축파일을 풀면 02-글 만들기 폴더에 webdesign.wordpress.2012-08-21.xml 파일이 있습니다. 워드프레스 주메뉴에서 도구-가져오기-워드프레스를 클릭해서 가져오기 플러그인을 설치, 활성화하고 위 파일을 업로드 합니다.
파일 업로드 후 가져오기 버튼을 클릭하면 다음 화면으로 넘어가며 "Download and import file attachments"에 체크하고 Submit 버튼을 클릭하면 콘텐츠가 다운로드 됩니다. 이미 만들어놓은 워드프레스 콘텐츠이므로 카테고리, 태그, 메뉴 등이 설정돼 있고 이미지도 제 워드프레스 블로그에서 다운로드 되므로 시간이 약간 걸립니다. All done. Have fun! 이라는 메시지가 나오면 정상적으로 설치된 것입니다. 미디어 라이브러리에서 이미지도 다운로드됐는지 확인하세요.
URL 변경하기
위와같이 워드프레스 파일을 가져오면 URL을 변경해줘야합니다. 플러그인 추가화면에서 "Search and Replace"로 검색해서 설치, 활성화합니다. 도구 → Search & Replace를 선택하면 아래와 같은 화면이 나타납니다. Search for에는 http://webdesigncss3.com/를 입력하고 Replace with에는 자신의 URL을 입력합니다. wamp 서버에서 구동 중이라면 http://localhost/wordpress/를 입력하면 됩니다. All-search/replace! 의 field에 체크하고 Go 버튼을 클릭합니다.
그러면 아래와 같이 교체된 URL의 위치와 개수가 나타납니다
메뉴
메뉴 화면에서 테마위치 박스의 기본메뉴를 Blank top Menu로 선택하고 저장하면 블로그 화면에서 이미 설정한 메뉴가 나타납니다.
위젯화면 변경
외모-->위젯으로 가면 컨텐트 위젯 영역에 위와같이 위젯이 배치돼 있습니다. 컨텐트 위젯 영역은 주로 컨텐트 영역에 구글 광고 728픽셀 사이즈의 리더보드 광고를 배치하기 위한 위젯 영역입니다. 그러니 위의 위젯들을 사이드바 위젯 영역으로 이동하면 됩니다.
위처럼 텍스트 위젯을 배치하고 구글 광고코드만 삽입하면 됩니다. 위젯 영역이 블로그 화면에서 어느곳에 사용되는지는 다음과 같습니다.
컨텐트 위젯 영역은 위에서 설명했듯이 구글 광고를 위한 영역이고 좌측 위젯은 초기화면의 컨텐트 영역 좌측에 하나의 카테고리 영역의 글이 썸네일 이미지와 요약글로 나오는 영역입니다. 중앙 위젯은 좌측 위젯의 우측에 나오고 하단 위젯은 이 두 개의 위젯 바로 아래에 나옵니다. 사이드바 2 위젯은 초기화면용 사이드바를 담당하는 위젯 영역입니다. 이 테마는 3개의 사이드바를 사용합니다. 포럼 사이드바 위젯은 bbPress로 포럼이나 게시판을 만들었을 경우 게시판 전용 사이드바 위젯을 배치할 수 있도록 했습니다. 초기화면 사이드바 추가 위젯은 뉴스 스크롤러 플러그인이 IE에서 오류를 일으키므로 이것을 배치해서 사용하기 위한 위젯영역입니다. 메인사이드바 위젯영역은 초기화면이 아닌 페이지에서 사이드바에 위젯을 배치하는 영역입니다. 푸터 1,2,3 영역은 푸터 영역에 위젯을 배치하는 영역입니다.
초기화면 사이드바 추가 위젯 영역에는 텍스트 위젯을 이용해서 구글 광고를 336픽셀 사이즈와 250픽셀 사이즈를 div 태그 안에 배치하면 화면 사이즈가 변하면서 두개의 광고가 교차해서 나타납니다. 큰화면에서는 336사이즈, 작은 화면에서는 250 사이즈가 나오죠. 점차로 작아지면 사이드바가 컨텐트 영역의 하단으로 내려가면서 큰 사이즈의 광고가 나타납니다.
테마 사용하기
책에서 만든 테마는 전면 페이지를 사용하도록 설계됐습니다. 책에서 여러가지 과정을 거치면서 만든 테마이므로 완성된 테마는 아니라서 세밀한 작업을 해야 제대로된 테마로 사용할 수 있습니다. 제 티스토리 블로그 스킨은 같은 형태의 테마에서 시작해서 여러가지 수정작업을 거친다음 만들어진 것입니다.
테마는 기본테마인 Twenty-Eleven의 자식테마(Child Theme)이므로 기본테마가 설치돼 있어야 합니다. 5장의 첨부파일을 압축 해제하면 twentyeleven-child 폴더가 있습니다. 이것을 워드프레스의 themes 폴더에 붙여넣고 테마 화면에서 활성화합니다.
블로그 화면에서 보면 위와같이 나타납니다. 초기 화면이 front-page.php 템플릿 파일을 사용하고 있기 때문이죠. 이 파일은 처음 접속하면 사용되는 파일로 블로그 글 화면이 나타나는 것이 아니라 여러가지 카테고리의 글이 요약글과 썸네일 이미지로 나타나는 포털 페이지 역할을 합니다. 제대로 사용하려면 페이지 만들기 화면에서 제목을 홈, 블로그로 해서 빈 내용의 페이지를 두 개 만듭니다.
읽기 설정에서 정적인 페이지를 선택하고 전면 페이지를 홈으로, 글페이지를 블로그로 선택하고 페이지당 보여줄 글의 수는 6개로 설정하고 변경 사항 저장 버튼을 클릭합니다.
메뉴 화면에서 페이지 메타박스의 블로그, 홈에 체크하고 "메뉴에 추가" 버튼을 클릭하면 우측 열에 추가됩니다. 추가한 두개의 메뉴를 상단으로 이동하고 기존의 홈 메뉴는 삭제한 후 "메뉴 저장" 버튼을 클릭합니다.
푸터에도 메뉴를 사용할 수 있도록 했습니다. 우측 열의 플러스 탭을 클릭하고 "푸터 메뉴"를 입력한 다음 "테마위치" 메타박스에서 푸터메뉴를 선택합니다. 페이지 메타박스에서 메뉴를 추가하면 됩니다.
헤더 이미지
헤더이미지는 두가지로 나뉩니다. 초기화면의 헤더이미지는 기본테마의 헤더이미지 기능을 그대로 보존했고 그외의 페이지에서는 트위터 부트스트랩의 애니메이션 배너인 캐러젤을 사용하도록 했습니다.
메뉴에서 외모-->헤더를 선택하고 이미지 선택하기에서 자신의 이미지를 업로드하면 자르기 화면이 나옵니다. 자르기하고 저장하면 업로드된 이미지들에 나타나며 샘플이미지를 사용할 경우 첨부 파일에서 헤더이미지를 업로드 하면 됩니다.
하단에서 헤더텍스트의 "이미지와 함께 헤더 텍스트 보이기"에 체크해제하고 "변경 사항 저장" 버튼을 클릭합니다. 이제 블로그 화면에서 보면 상단에 헤더이미지만 나타납니다.
배경 이미지
메뉴에서 배경을 선택하고 첨부파일의 글만들기 폴더에서 bg-tile.png 파일을 업로드하고 저장하면 됩니다.
플러그인 설치하기
테마에 사용된 플러그인을 모두 설치합니다. 5장 첨부파일을 압축 해제하고 wp-content 폴더로 들어가서 plugin 폴더 안의 모든 플러그인을 설치하고 모두 활성화 합니다.
1-1. WP-PageNavi 플러그인
이 테마는 기본적으로 WP-PageNavi 라는 페이징 플러그인을 사용합니다. 이 플러그인을 사용하기 위해서는 워드프레스 설치 폴더에서 wp-includes 폴더로 들어가면 functions.php 파일이 있습니다. 이 파일을 텍스트 편집기에 열고 445번째 줄부터 수정해줘야 사용이 가능합니다.
function twentyeleven_content_nav( $nav_id ) {
global $wp_query;
if ( function_exists( 'wp_pagenavi' ) ) { ß시작
wp_pagenavi();
}
else { ß종료
if ( $wp_query->max_num_pages > 1 ) : ?>
<nav id="<?php echo $nav_id; ?>">
<h3 class="assistive-text"><?php _e( 'Post navigation', 'twentyeleven' ); ?></h3>
<div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">←</span> Older posts', 'twentyeleven' ) ); ?></div>
<div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">→</span>', 'twentyeleven' ) ); ?></div>
</nav><!-- #nav-above -->
<?php endif;
}
} ß중괄호 하나 삽입
endif; // twentyeleven_content_nav
위처럼 시작 부분부터 종료부분까지 코드를 삽입하고 마지막으로 중괄호 하나 삽입 부분까지 해주면 됩니다. 관리자 화면의 설정-페이지 네비로 가서 아래 그림처럼 설정하고 저장합니다.
이 플러그인을 설치하면 아래 그림처럼 블로그 하단에 페이징이 나타납니다.
글자를 보면 페이지 1의 27로 돼 있는데 반대로 되있죠. 번역의 순서가 잘못돼서 그런데 페이지 27의 1이 맞습니다. 이를 수정하려면 설정 화면에서 다음과 같이 수정합니다.
상단에서 변수의 위치를 위처럼 바꿔주면 됩니다.
다음의 플러그인을 설치해서 사용할 때는 블로그에서 글을 작성할 때 글 중의 이미지에 대해서 특성이미지 설정을 해야합니다. 특성이미지는 아래 그림처럼 정사각형의 이미지로 잘라서 사용합니다. 샘플 콘텐츠를 사용하는 경우 이미 정사각형으로 잘라진 특성이미지를 삽입했으므로 여러가지 플러그인에서 썸네일 이미지로 나타납니다.
1-2 Thumbnail for Excerpts 플러그인 설치
설정-->Thumbnail for Excerpts에서 하단의 3곳에서 no 라도 나와있는 것을 yes로 변경하고 저장합니다.
1-3 뉴스 스크롤러 설치하기
뉴스 스크롤러를 사이드바에 설치하겠습니다. 플러그인은 설정 방법이 다양해서 주 메뉴의 설정 메뉴에 있을 수도 있고 주 메뉴에 별도의 항목으로 있을 수도 있으며, 전혀 설정 항목이 없고 위젯 화면에서 위젯 영역에 배치하고 설정하는 경우도 있습니다. 이 플러그인이 마지막의 방법에 해당합니다. 위젯 화면으로 가서 뉴스 스크롤러 위젯 박스를 클릭한 후 드래그해서 메인 사이드바에 배치합니다.
타이틀을 입력하지 않고 카테고리 항목에서 모든 카테고리를 선택하거나 원하는 카테고리를 선택합니다. 작성일자(Show post date), 요약글(Show post excerpts), 특성 이미지(Show featured images)를 나타나게(show) 하고 트랜지션은 Fade로 선택합니다. 본문 영역에 슬라이드를 사용할 것이므로 두 곳에서 이미지가 슬라이드되면 혼란스럽습니다. 스크롤 타임아웃은 애니메이션 대기 시간입니다. 요약글 제한(Excerpt Limit)은 45단어로 합니다. 요약글의 크기에 따라 전체 높이가 결정됩니다. 최대 글 수는 원하는 대로 설정합니다. 마지막으로 스크롤 높이는 이미지와 이미지 하단에 나타나는 요약글의 전체 높이입니다. 높이가 작으면 스크롤되면서 글자가 겹치는 경우가 있습니다. 500픽셀로 입력합니다. 변경사항을 저장하고 블로그 화면에서 보면 잘 나타납니다.
1-4 카테고리 포스트 위젯
카테고리 포스트 위젯은 기본 설정 페이지가 있습니다. 설정 --> Category Posts(WP-CPL)을 클릭하면 상단에 설정이 있습니다. 썸네일 이미지의 가로 세로 크기를 이곳에서 설정합니다. 이미지 크기를 60으로 지정합니다. 기본 스타일시트를 사용하지 않으려면 이곳에서 체크해제해도 되지만 위젯 화면에서도 설정할 수 있습니다. 저장 버튼을 클릭하고 위젯 화면으로 갑니다.
위젯 화면에서 WP Category Post List 위젯을 5곳의 위젯 영역에 배치합니다. 좌측, 중앙, 푸터 1, 2, 3입니다. Browse라는 글자를 지우고 카테고리 제목 Hyperlink에 체크합니다. 다음의 Featuring은 “인기글”로 수정합니다. Category에서 글이 3개 이상 있는 것을 선택합니다. CSS Theme는 4가지가 있는데 마음에 안 들면 No CSS Theme을 선택하고 다음에 나오는 것과 같이 스타일시트에서 별도로 설정합니다. 보여줄 글 수(Number of Post to Show)는 3으로 입력합니다. 댓글 수(Show Comment Count), 날짜 보이기(Show date), 글쓴이 보이기(Show Author)는 선택사항이고 요약보이기(Show Excerpts)는 필수로 선택합니다. 요약글 길이(Excerps Length)는 상단 좌측과 중앙의 위젯은 150으로 입력합니다. 이것은 단어수가 아니라 영문을 기준으로 한 글자 수입니다. 구독하기(Show Feed)와 더보기(Show Read more)에 체크합니다. 영문을 한글로 각각 바꿔줍니다. 썸네일 보이기(Show Thumbnail)에 체크하고 저장합니다. 푸터는 기존의 달력 위젯을 제거하고 배치하며 각각 다른 카테고리를 선택하고. 요약글 길이를 250으로 합니다. 글의 수는 한 개로 설정합니다.
블로그 화면에서 보면 다음과 같이 나타납니다.
아래는 푸터 부분입니다.
1-6 콘텐츠 슬라이더
콘텐츠 슬라이더는 설정 --> WP Parallax Content Slider를 선택하고 기본 설정부터 합니다. Parallax는 각 요소의 움직이는 정도가 다른 것을 의미합니다. 예를 들어 멀리 있는 것은 천천히 움직이고 가까운 것은 빠르게 움직여서 3차원 효과를 주는 것을 말합니다. 그 정도를 설정할 수 있는 곳이 Number of pixels for background increment: 부분입니다. 50으로 그대로 둡니다. 슬라이더 모드(Slider display mode:)도 그대로 둡니다. Auto-play mode:에 체크하면 자동으로 애니메이션됩니다. Time between each slide (in ms):는 애니메이션 대기 시간으로 단위가 밀리초입니다. Number of articles to display:는 나타나는 콘텐츠 수를 설정합니다. Slide title max length:는 제목 글자수이며 70으로 설정합니다.
블로그 화면에서 보면 아래처럼 요약 글과 이미지가 나타납니다.
테마 디자인과 맞게 수정했는데 아래의 파일을 wp-content\plugins\wp-parallax-content-slider\css 폴더에 붙여넣으면 아래처럼 나옵니다.
style.css
모든 설정을 완료하면 아래처럼 초기화면이 나옵니다. 참고-->http://webdesigncss3.com
블로그 메뉴를 클릭했을 때 아래처럼 글 위주의 목록이 나옵니다.
화면 폭을 줄이면 모든 콘텐츠가 줄어들면서 메뉴바 전체가 함몰되고 우측의 아이콘을 클릭하면 메뉴가 나타납니다. 사이드바의 광고는 사이드바 영역의 사이즈와 맞지 않으므로 나타나지 않게 됩니다.
더 줄이다보면 사이드바는 컨텐트 영역 하단으로 내려가면서 아래처럼 나타납니다.
아직 고쳐야할 부분이 많지만 책의 한정된 분량으로 모든 것을 다루기는 어려우므로 제 블로그에서 순차적으로 새로운 테마로 변화해가는 과정을 진행할 것입니다.
