카테고리 보관물: 워드프레스

워드프레스 테마 옵션

테마 옵션에서 색상표는 블로그 화면을 두가지 색상으로 변화시킬 수 있는 항목입니다. 기본으로 돼 있는 밝음은 배경이 밝고 글자가 어두운 색입니다. 어둠을 선택하면 배경은 어두운 색에 글자가 밝은 색으로 됩니다. 링크 색상은 링크가 있는 표시로 글자 색을 파란색으로 만듭니다. 웹브라우저는 전통적으로 링크 색상을 파란색으로 설정해 놓고 밑줄까지 만들어놓고 있습니다. 이곳에서 링크된 글자의 색을 변경할 수 있습니다. 밑줄은 웹페이지를 지저분하게 만드는 요인이므로 대부분의 경우 사용하지 않도록 디자인할 때 기본으로 없애고 있습니다.

기본 레이아웃은 세가지가 있으며 사이드바를 좌측에 배치하거나 또는 우측에 배치할 수 있고 아에 없앨 수 있습니다. 선택의 기준은 콘텐츠가 항상 앞서는 콘텐츠 좌측배열이 가장 좋으며 사이드바에 중요한 내용이 있다거나 글자를 오른쪽에서 왼쪽으로 사용하는 아랍권에서는 콘텐츠 우측배열을 사용합니다. 사이드바 없음을 선택하면 콘텐츠 폭이 줄어들고 사이드바가 사라집니다. 기본 테마의 자식테마 중 하나인 “Twenty Eleven Layouts”를 설치하면 더 많은 레이아웃으로 변경할 수 있습니다.

 

13-3 사용자 정의 헤더

기본테마의 헤더는 상단에 사이트 이름과 태그라인 그리고 검색창이 있습니다. 그 아래에 헤더이미지와 메뉴바가 있는 구조인데 기본테마에서 제공하는 사용자 정의 헤더를 이용하면 여러 가지 옵션을 적용할 수 있습니다. 헤더 이미지는 기본적으로 여러 개의 이미지가 설치돼 있고 페이지가 바뀔 때마다 다른 이미지가 나타나도록 하는 구조입니다. 또한 특성이미지 부분에서 알아보았듯이 특성이미지 기능을 사용하면 적용한 페이지의 헤더이미지도 같이 적용되어 블로그 글에서 대표이미지로 사용할 이미지가 동시에 헤더 이미지로도 사용되고 있습니다. 이것은 하나의 이미지를 업로드하면 정해진 사이즈로 자동으로 저장하기 때문에 가능합니다.

헤더 이미지를 변경하려면 헤더메뉴에서 이미지 선택하기 항목의 파일선택을 클릭하면 내 컴퓨터의 브라우저 창이 열립니다. 원하는 이미지를 선택하고 업로드 버튼을 클릭하면 자르기 화면으로 넘어갑니다. 아래에 있는 미디어 라이브러리에서 이미지 선택하기 버튼을 클릭하면 이미 업로드 된 이미지를 사용할 수 있습니다. 여기서 선택하면 이미 잘라진 이미지가 사용되므로 자르는 과정이 생략됩니다.

3-72 사용자 정의 헤더

기본 사이즈가 1000X288픽셀이므로 자르기툴이 이 크기로 정해져 나타납니다. 자르기툴의 내부를 클릭드래그하여 원하는 곳에 배치하고 조절점을 클릭드래그하면 자르는 위치를 조절할 수 있습니다. 높이가 기본인 288픽셀이지만 조절점을 위로 늘려서 높여도 됩니다. 조절이 완료되면 하단에서 “자르고 공개하기” 버튼을 클릭합니다.

3-73 헤더이미지 자르기

사용자 정의 헤더이미지를 업로드하면 하나의 이미지가 있을 때는 랜덤이라는 옵션이 없지만 두개 이상의 이미지가 업로드 되면 기본 이미지처럼 랜덤으로 나타나게 하거나 고정된 하나의 이미지로 나타나게 할 수 있습니다. 하나의 이미지만 나타나게 하려면 이미지 좌측의 라디오버튼을 클릭하면 됩니다. 랜덤은 페이지가 바뀔때마다 임의의 이미지가 나오도록하는 기능입니다.

3-74 램덤이미지

헤더이미지 삭제버튼을 클릭하고 저장하면 설정 화면에서 헤더이미지가 제거되고 블로그 화면에서도 헤더이미지만 나타나지 않습니다. 헤더이미지를 없애면 블로그를 헤더 부분의 높이를 줄여서 사용할 수 있습니다.

헤더텍스트 항목의 “이미지와 함께 헤더텍스트 보이기”에 체크 해제하면 사이트 이름과 태그라인이 제거되면서 검색창이 메뉴바로 배치되고 블로그의 상단은 헤더이미지가 상단으로 나타나게 됩니다.

글자 색상 항목의 색상선택을 클릭하면 색상환이 나타나서 해더 텍스트의 색상을 변경할 수 있고 원본 해더 글자 복원 버튼을 클릭하면 변경한 색상을 초기화할 수 있습니다.

3-75 헤더텍스트 변경

13-4 사용자 정의 배경

배경 메뉴를 선택하면 배경을 사용자 정의할 수 있습니다. 처음 화면은 표시옵션이 나타나지 않으나 배경으로 사용할 이미지를 업로드하고 나면 나타납니다. 대부분의 경우에 배경이미지는 큰 사진 파일을 사용하지 않습니다. 작은 이미지를 사용하여 상하좌우로 반복하도록 하며 큰 사진 파일을 사용하면 페이지가 로딩될 때 시간이 걸리기 때문입니다. 어떤 사이트는 3Mb나 되는 사진파일을 사용한 곳을 볼 수 있었는데 방문자로 하여금 다시는 오지 말라는 잘못된 디자인입니다. 상하좌우로 반복해도 서로 이어지는 이미지를 패턴이라고 하며 포토샵으로 직접 만들거나 패턴사이트에서 만들어 사용할 수 있습니다. 아래의 패턴은 무료 패턴사이트에서 만든 것으로 제 블로그글(http://martian36.tistory.com/828)을 참고하면 됩니다. 아래 미리보기 화면은 패턴이 이어지지 않은 것으로 나오지만 실제 블로그 화면을 보면 정상으로 나타납니다.

파일을 업로드한 후에 표시옵션의 각 라디오버튼을 클릭해보면 어떤 의미인지 알 수 있습니다. 반복 항목에서 반복 안 함에 클릭하고 위치항목에서 왼쪽을 선택하면 이미지가 왼쪽에 치우쳐서 배치됩니다. 위치항목은 배경이미지의 위치를 지정합니다. 반복 항목은 반복에 체크하면 상하좌우로 반복되고 수평반복은 좌우 방향으로만 반복되며 수직 반복은 상하방향으로 반복됩니다. 패턴을 사용하면 항상 “반복”에 체크해야합니다. 만일의 경우 큰 사진 파일을 사용하고자 하면 위치는 중앙, 반복은 “반복”에 체크하고 사용하면 됩니다. 큰 이미지를 사용할 경우에도 포토샵에서 웹페이지용으로 파일을 최적화하면 같은 크기의 파일이라도 최소의 용량으로 줄일 수 있습니다.

첨부는 화면을 스크롤할 때 배경이미지가 고정되느냐 아니면 같이 스크롤되느냐의 차이입니다. 배경이미지를 사용하지 않을 경우는 기본색상인 흰색이 사용되므로 원하는 경우 배경색상의 색상선택을 클릭하여 다른 색으로 설정할 수 있습니다.

3-76 사용자 정의 배경이미지

Advertisements

워드프레스 테마 관리

13. 테마

워드프레스의 테마는 테마에 따라서 설정방법이 모두 다릅니다. 테마에 따라서 위젯도 다르고 메뉴 항목이 없을 수도 있습니다. 기본테마인 Twenty-Eleven은 메뉴의 “외모” 항목에서 코드 수정을 하지 않고 테마를 변경할 수 있지만 대부분의 테마들은 별도의 항목을 추가해서 다양한 설정을 할 수 있도록 하고 있으며 특히 유료 테마의 경우는 아주 복잡한 설정까지 포함돼 있습니다. 이것은 제1장에서 알아보았듯이 블로그는 블로그 글의 주제에 따라서 그에 맞는 테마를 사용해야 하고 사용자의 취향에 따라서 원하는 테마가 다양해서 그에 맞는 설정이 필요하기 때문입니다.

유료 테마든 무료테마든 사용자의 마음에 드는 테마를 찾기는 어렵고 찾았다 하더라도 설치하고 보면 설정화면에서 설정하거나 코드를 직접 수정해야 원하는 모양이 나오게 됩니다. 다음 장 부터는 기본 테마를 바탕으로 자식테마(Child Theme)를 만들어서 php 코드를 추가하거나 스타일시트를 수정하여 원하는 테마를 만들어가는 과정이 나옵니다. 전 단계로서 테마관리에 대해 관리자화면에서 할 수 있는 것은 알아두면 다음 장에서 테마 수정 시 도움이 됩니다. 또한 테마 수정을 하지 않더라도 관리자 화면에서 일부나마 수정하는 방법은 알아두는 것이 좋습니다.

워드프레스 버전이 3.4로 업데이트 되면서 기본테마가 Twenty-Twelve(2012)로 변경될 예정이었지만 현재 개발완료가 안돼서 2012년 11월 경에 3.5버전으로 업데이트되면서 추가될 예정이고 현재 베타버전을 사용할 수는 있습니다. 기본 테마는 다양한 기능이 기본적으로 갖춰져 있어서 이를 수정하여 사용하도록 권장하고 있습니다. 그래서 처음 모양은 단순하지만 원하는 대로 디자인을 변경할 수 있습니다. 테마의 디자인 변경은 파일을 직접 변경하면 나중에 업데이트 시 모두 원상 복구되므로 자식테마를 만들어 이 자식테마를 대상으로 변경하는 것이 좋습니다. 자식테마는 기본테마를 부모테마로 하여 만들어지며 수정하는 내용만 추가하면 자식테마의 내용이 우선 적용되므로 파일관리가 쉽습니다.

 

13-1. 테마 관리

주 메뉴–>외모–>테마관리를 선택하면 테마를 관리 화면이 나타납니다. 워드프레스 3.4버전에서 두드러지게 바뀐 점은 테마를 실시간으로 미리 보기하면서 수정할 수 있다는 것입니다. 이 화면의 상단에는 현재 설치되어 활성화된 테마가 있고 테마 소개 내용 아래에 여러 가지 링크 메뉴가 있습니다. 이곳의 메뉴는 주 메뉴에 있는 것과 같고 “사용자 정의하기” 링크를 클릭하면 별도의 화면에서 테마의 실제 화면을 보면서 수정할 수 있는 화면이 나타납니다.

그 아래의 “존재하는 테마들”에는 설치는 돼 있지만 활성화되지 않는 테마들이 존재합니다. 활성화가 안됐어도 각 테마의 하단에 있는 “실시간 미리보기” 링크를 클릭하면 활성화된 테마처럼 미리보기 하면서 테마를 수정할 수 있습니다. 이 링크를 클릭하여 수정해봅니다.

화면 좌측에서 제목의 오른쪽에 있는 세모 아이콘을 클릭하면 설정할 수 있는 화면이 나타납니다. 테마 이름이 나온 곳은 테마의 소개에 대한 내용입니다. “사이트 제목과 태그라인”은 주 메뉴의 일반 설정에서 나오는 사이트 제목과 태그라인을 수정할 수 있습니다. 색상과 레이아웃은 주 메뉴의 테마옵션 항목에서 설정하는 것과 같은 내용이 나옵니다. “헤더이미지”와 “배경 이미지”는 주 메뉴의 헤더와 배경에서 설정하는 내용의 일부가 있습니다. “내비게이션”은 블로그 화면에 메뉴가 여러 개 있는 경우 선택할 수 있습니다. “정적인 전면 페이지”는 주 메뉴의 읽기 설정에서 전면 페이지 설정에 관한 내용입니다.

이처럼 테마 관리에서 사용자 정의하기 화면은 테마 설정 부분을 한곳에 모아서 간단한 설정을 할 수 있도록 만든 화면이며 테마에 따라서 설정할 수 있는 항목이 다릅니다.

 

블로그 – 무엇을 쓸 것인가?

안녕하세요. 베누시안입니다. 제가 요즘 워드프레스에 관한 책을 만드느라고 하루에 한번 이상은 웹디자인에 관한 정보를 꼭 올리곤 했는데 몇개월째 글을 자주 못올리고 있습니다. 댓글에 답변도 제대로 못하고 있는 상황이죠. 이제 반정도 완료돼서 워드프레스 테마 만들기에 관한 내용이 남았지만 아주 내용이 많아서 2, 3개월은 더 있어야 완성될 듯 합니다. 그 이후로는 많은 웹디자인 정보를 여러분께 전달해 드리도록 하겠습니다.

다음은 제가 만들고 있는 워드프레스 책(제목 아직 미정) 3장 내용의 일부입니다. 각 장 별로 3개까지는 제 나름대로 블로그에 게재해도 좋다는 허락을 받아 올리는 것입니다.

1 . 무엇을 쓸 것인가?

1-1 블로거는 인터넷 콘텐츠의 주 생산자

블로그에 글을 올리는 것은 다양한 소셜 네트워크 서비스 중에서도 가장 어려운 일에 속합니다. 트위터나 페이스북 같은 소셜 네트워크 서비스는 글 내용이 길지 않고 맞춤법이 틀리거나 특별한 내용이 아니더라도 무엇이든 올릴 수가 있죠. 즉, 내용이나 형식에 구애 받지 않는 장점이 있습니다. 단점이라면 한번에 그치는 글이라는 점입니다. 글이라고는 할 수 없고 쪽지에 불과해서 시간이 지나면 효력이 상실되는 내용의 글입니다. 그만큼 글의 수도 많아서 일일이 찾아보기도 어렵고 인터넷 검색도 힘듭니다.

 

블로그의 시작은 인터넷이 시작한 것과 같다고 해도 과언이 아닙니다. 인터넷에서 자신을 알리고 싶어하는 본능이 HTML로 홈페이지를 만들게 됐고 더 효율적인 방법으로 블로그 프로그램이 만들어졌습니다. 웹 2.0은 공유라는 개념을 도입했고 이때부터 소셜 네트워크 서비스가 발전하기 시작했습니다. 웹 2.0 플랫폼이 나오기 전에는 정보는 정보 전달자와 수요자가 별개였지만 이후로는 정보의 전달자가 수요자를 겸하고 있습니다. 즉, 내 정보를 전달하고 남의 정보도 얻는 정보의 공유가 시작된 것입니다. 21세기의 주된 정보 전달자는 뉴스 미디어가 아닌 바로 일반인입니다.
세계 최대의 검색엔진인 구글은 블로그를 아주 좋아합니다. 우리나라 포털의 검색엔진도 마찬가지지만 검색어에 따라 광고가 우선 나오기도 합니다. 검색엔진이 블로그 글을 좋아하는 이유는 수많은 사람들이 올리는 글이 다양하고 신선하기 때문입니다. 구글에서 검색해서 나오는 글의 우선순위는 대부분 블로그의 글들입니다. 웹디자인이나 워드프레스에서 필요한 정보는 구글만 통하면 다 해결됩니다. 단 영어로 된 정보가 대부분이라는 것이 흠입니다.

1-2 콘텐츠의 생산

구글 검색을 해보면 검색어에 가장 적절한 정보가 높은 순위로 나타나서 두 페이지 정도만 봐도 대부분 원하는 결과를 찾을 수 있습니다. 하지만 국내 검색엔진은 그렇지 않습니다. 정보도 부족하고 좋은 정보라 해도 높은 순위에 있는 경우가 드물어서 한참을 찾아야 합니다. 정보의 전달자로서 국내 블로그는 아직 부족한 점이 많습니다. 정보의 종류는 많지만 높은 순위를 차지하고 많은 블로거들이 택하는 주제가 맛집이더군요. 맛집 소개에 관한 글이 이렇게 많은 것을 보면 우리나라는 먹는 데 소비를 많이 하는 것 같습니다. 더 다양하고 깊이 있는 정보가 필요하다고 봅니다.

정보의 전달자로서 블로거는 자신이 잘할 수 있고 잘 알고 있는 전문적인 정보를 글로 표현하는 것이 가장 좋은 방법입니다. 이보다 쉬운 방법은 없겠지만 대부분의 사람들은 전문 지식이 없습니다. 전문 지식을 갖고 있는 사람이 한국에서 블로그에 글을 올리는 일은 드뭅니다. 바쁘기 때문이기도 하지만 전문적인 정보를 공유하기 싫어한다고나 할까요. 이런 점에서 외국 블로그를 살펴보면 참 대단하다는 생각이 듭니다. 고급 정보가 무료라는 게 의심스러울 정도입니다.

그렇다면 어떤 글을 어떻게 올려야 좋을지 궁금해집니다. 제 경우에는 웹디자인을 위해 가장 먼저 포토샵을 시작했고 그다음에 PHP, CSS, HTML5, 자바스크립트(제이쿼리) 등 웹디자인과 관련된 분야를 넓혀 나갔습니다. PHP를 공부하던 중 워드프레스와 드루팔, 익스프레스엔진 등 PHP로 만들어진 콘텐츠 매니지먼트 시스템(CMS) 프로그램을 알게 됐습니다. 여러 가지를 하다 보니 어느 하나 전문적으로 잘하는 것은 없습니다만 이런 공부를 하면서 알게 된 지식을 정리해서 블로그에 올리는 것은 잘합니다.

 

이처럼 자신이 전문적으로 잘 알지 못해도 내가 관심이 있거나 취미로 하고 있는 일을 정리해서 블로그에 올리면 좋은 글이 됩니다. 글을 작성하면서 정보의 정확성을 위해 더 찾아보고 확인한 정보를 올리려는 책임감으로 인해 지식은 깊이를 더하게 됩니다. 내 글을 누군가 보고 정보로 삼으려면 글을 대충 올려서는 안 되기 때문이죠. 취미가 직업이 된다면 이보다 좋은 직업이 없습니다. 취미를 살려서 깊이 있는 공부를 하다 보면 직업이 됩니다.

 

내 블로그의 글을 모아서 책을 만든다고 생각하고 글을 쓰면 블로그 글은 원고가 됩니다. 사실 티스토리에 블로그를 만들어 포토샵에 관한 글을 쓰면서 PDF로 책을 만들 계획이었습니다. 포토샵은 제가 경험한 분야 중에서 가장 잘 아는 분야이기 때문입니다. 포토샵 관련 글이 200개를 넘다 보니 더는 쓸 내용이 없어서 그다음으로 잘 아는 CSS와 워드프레스에 대해 글을 쓰기 시작했습니다. 6개월 정도 쓰고 나서 다른 분야로 넘어가려고 했더니 계획에 차질이 생겼습니다.

CSS와 워드프레스 글을 본 분들이 의뢰가 들어오기 시작한 것이죠. 그래서 포트폴리오 소셜 네트워크 서비스 디자인을 담당하게 됐고 출판사에서는 워드프레스에 관한 책을 만들자는 제안이 들어왔죠. 취미로 시작한 포토샵을 발전시켜서 웹디자인을 공부하게 됐고 이제는 직업이 됐습니다. 밤새도록 작업해도 싫증이 안 나는 일이 직업이 됐으니 이보다 좋은 직업은 없으리라 생각합니다.

이 책을 보시는 여러분들도 잘 할 수 있는 것에 대한 글을 만들어 블로그에 올려보세요. 방문자가 들어와 보고 좋아할 겁니다. 그러면 더 좋은 글을 쓸 힘이 납니다. 글재주가 없다고요? 저는 글을 잘 쓰지 못해서 원고를 작성해서 출판사에 보내면 모든 게 수정돼서 돌아옵니다. 처음엔 당황스럽고 이런 사람이 책을 만들 수 있을 것인가, 라는 의문이 들고 용기가 안 났지만 한편으로는 이런 생각도 들더군요. “나는 글을 쓰는 사람이 아니라 정보를 전달하는 사람이다. 정보 전달은 글 쓰는 능력이 없어도 된다”고 말이죠. 맞는 얘기죠?