이제 곧 "웹 2.0 시대"에 맞게 웹사이트를 재설계할 때가 될 것입니다. 저는 이를 달성하기 위해 Drupal과 Joomla라는 두 가지 플랫폼을 진지하게 살펴보았습니다.
Drupal과 Joomla는 Drupal의 경우 블로그와 포럼을 핵심 모듈로 포함하는 포괄적인 패키지를 제공합니다. 이러한 플랫폼의 테마는 CSS(Cascading Style Sheets) 및 PHP(Personal Home Page 또는 PHP: Hypertext Preprocessor) 코드 수정을 통해 수행할 수 있습니다. 그러나 이러한 플랫폼은 복잡하며 이러한 플랫폼을 설치, 관리 및 사용자 정의할 만큼 충분히 배우는 것은 어려운 작업이 될 수 있습니다.
테스트 베드 플랫폼과 인터넷 모두에서 두 플랫폼을 사용하는 것을 포함하여 두 플랫폼을 연구한 후 향후 웹 요구 사항에 대한 가능한 솔루션으로 WordPress를 살펴보기로 결정했습니다. 최신 버전의 WordPress가 설치도 쉽고, 사용도 쉽고, 테마도 쉽다는 사실에 놀랐습니다.
이 기사에서는 WordPress 2.5를 사용자 정의하는 방법을 설명합니다.
스타일링 워드프레스
기본 WordPress 블로그의 모양을 구성하는 6가지 주요 구성 요소는 다음과 같습니다.
1. 헤더 그래픽
2. 블로그 제목
3. 태그라인
4. 페이지
5. 배경
6. 바닥글.
블로그를 빠르게 로드하기 위해 머리글이나 바닥글 그래픽을 사용하지 않기로 결정했습니다. 디자인은 본질적으로 새로운 코트를 갖춘 기본 WordPress 테마가 될 것이므로 약간의 그래픽 디자인 작업만 수행하면 됩니다. 실제로 두 개의 열 효과가 있는 블로그 페이지를 생성하려면 하나의 그래픽만 생성하면 되었습니다. 블로그 페이지는 페이지 프레임 역할을 하는 진한 파란색 *본문* 배경 중앙에 '떠' 있습니다.
그래픽 만들기
기본 WordPress 테마의 이미지 디렉토리를 보면 Kubrick 룩에 사용된 기본 이미지가 표시됩니다. 현재로서는 특히 관심을 끄는 파일이 하나뿐입니다: kubrickbgwide.jpg. 디자인에는 다른 큐브릭 이미지가 필요하지 않지만 보다 복잡한 디자인인 "팬시"에는 필요합니다.
블로그 페이지는 새로운 디자인의 중심을 통과하는 "슬라이스"로 생성됩니다. 슬라이스는 블로그 페이지 너비의 좁은 이미지입니다.
Adobe Illustrator에서 기본 페이지(760px X 600px)를 레이아웃하여 디자인을 시작했습니다. 저는 이런 종류의 작품을 만들 때 Illustrator를 사용하는 것을 좋아합니다. 물론 다른 프로그램도 사용할 수 있습니다.
기본 페이지를 페이지의 배경색으로 채웠습니다(짙은 파란색 *본문* 배경과 혼동하지 마세요). 밝은 배경색은 블로그 제목 및 태그라인과 같은 색상 텍스트를 "돋보이게" 합니다.
나는 두 개의 직사각형, 즉 “열”로 페이지를 오버레이했습니다. 왼쪽의 510px 너비 열은 파스텔 노란색으로 채워져 있습니다. 너비 230px의 오른쪽 열은 파스텔 블루 색상으로 채워져 있습니다. 두 열은 주위에 페이지 배경의 10px 테두리가 있는 기본 페이지에 맞습니다.
그런 다음 Illustrator에서 페이지에 760px X 40px 직사각형을 배치하고 이를 사용하여 조각을 만들었습니다. 슬라이스는 더 큰 이미지(이 경우에는 블로그 디자인)를 대표하는 부분일 뿐입니다. 슬라이스를 kubrickbgwide.jpg로 저장했습니다. Kubrickbgwide.jpg는 블로그 페이지 배경을 생성하는 데 사용됩니다. 블로그 페이지에 새 콘텐츠가 추가되면 슬라이스 복사본이 수직으로 쌓여 XNUMX열 배경이 "확장"됩니다. 이는 블로그 홈 페이지를 생성하기 위해 브라우저에 필요한 유일한 이미지입니다. 따라서 블로그는 매우 빠르게 로드됩니다.
지금까지는 꽤 쉽죠? 나머지 디자인은 테마의 CSS 파일 및/또는 WordPress 관리 인터페이스를 통해 수행됩니다.
CSS 변경
기본 CSS 파일은 wp-content_themes_default 디렉토리에 있습니다. 아래 CSS 텍스트는 style.css에 대한 코드 변경 사항을 보여줍니다. 기본 CSS 파일을 변경하기 전에 항상 원본의 복사본을 만들어 저장합니다. CSS 파일은 텍스트 편집기로 열고 수정할 수 있습니다. 삭제할 텍스트는 대괄호 안에 표시됩니다. 새로운 텍스트나 수정된 텍스트는 대괄호 없이 표시됩니다.
/* 타이포그래피 및 색상 시작 */
body { [배경: #d5d6d7 url('images/kubrickbgcolor.jpg');]
배경: #636f89; /* 본문 배경색을 파란색으로 설정 */
}
#페이지 {
[배경색: 흰색;] [테두리: 1px 단색 #959596;]테두리:없음;
} [#머리글 {
배경: #73a0c5 url('images/kubrickheader.jpg') 반복 없음 하단 중앙;
}
#헤더림그 {
여백: 7px 9px 0;
높이 : 192px;
폭 : 740px;
}]
#footer { [배경: #eee url('images/kubrickfooter.jpg') 반복 없음 상단;]
배경: #fffef2; /* 아주 연한 노란색 */
}
h1, h1 a, h1 a:hover, h1 a:visited, #headerimg [.description] {
텍스트 장식: 없음; [색상: 흰색;]
색상: 빨간색; /* 제목을 빨간색으로 표시 */
패딩 바닥: .5em; /* 제목과 태그라인 사이에 약간의 공백을 두세요 */
}
.설명 {
텍스트 장식 : 없음;
파란색; /* 태그라인을 파란색으로 만듭니다 */
텍스트 정렬 : 센터;
}
/* 타이포그래피 및 색상 끝 */
/* 구조 시작 */
#page { [배경색: 흰색;]
배경색: fffef2; /* 매우 연한 노란색 */ [테두리: 1px 단색 #959596;]
국경 : 없음;
}
#header { [배경색: #73a0c5;]
배경색: #fffef2; /* 아주 연한 노란색 */
}
/* 끝 구조 */
이러한 변경 사항을 style.css 파일에 적용하고 저장하면 새로 디자인된 블로그 페이지가 완성됩니다.
워드프레스 스타일링 — 멋진 드레스 디자인
나는 Jakob 블로그 디자인의 단순함을 좋아하지만 모든 사람의 관심을 끌지는 못할 것입니다. 많은 사람들이 "glitz"를 좋아합니다. 화려한 워드프레스 드레스의 가격은 유용성 증가 없이 블로그 로딩 속도가 느린 경우가 많습니다. 그러나 블로그의 모양을 "꾸미고" 싶은 사람들을 위해 이를 수행할 수 있는 추가 방법이 있습니다.
우선, WordPress 기본 페이지의 배경은 헤더(kubrickheader.jpg)와 바닥글(kubrickfooter.jpg) 그래픽을 사용한다는 점에 유의해야 합니다. 이러한 그래픽은 Jakob 디자인처럼 단색으로 채워지지 않고 그라데이션으로 채워져 있습니다. 또한 페이지 아래에 아주 작은 그림자가 있는 것 같습니다.
기본 페이지의 복잡성으로 인해 추가 그래픽이 필요하므로 더 많은 조각이 필요합니다. 또한 페이지를 "떠다니게" 하기 위해 더 복잡한 본문 배경이 필요한 경우 이에 대한 "시드" 이미지도 필요할 수 있습니다(kubrickbgcolor.jpg 이미지가 이에 대한 것입니다).
이전과 마찬가지로 Illustrator에서 블로그 페이지 그림을 만들었습니다. 모서리가 둥근 페이지는 기본 WordPress 배경에 떠 있으며 노란색 그라데이션과 작은 그림자가 있습니다.
먼저 Illustrator 아트보드에 760px X 600px 직사각형을 만들었습니다. 이 직사각형을 배경색(C:8, M:6, Y:6, K:0)으로 채웠습니다.
다음으로 Rounded Rectangle Tool을 사용하여 736px X 584px 직사각형을 그리고 노란색 그라데이션으로 채웠습니다. 기본적으로 저는 그림자를 위한 충분한 공간을 남겨두면서 배경 내에서 페이지를 최대한 크게 만들었습니다.
마지막으로 둥근 사각형에 작은 그림자를 추가했습니다.
슬라이스가 *본체* 배경에 완벽하게 병합되도록 하기 위해 동일한 배경색(C:60, M:60, Y:8, K:6)의 6px X 0px 정사각형을 만들고 다음 이름으로 저장했습니다. kubrickbgcolor.jpg. 작은 이미지는 본문 배경을 "채색"하는 데 사용됩니다. Fancy 디자인에서는 본문에 사용된 배경과 페이지에 사용된 배경이 완벽하게 일치해야 하기 때문에 중요한 단계입니다.
조각 만들기
직사각형 도구를 사용하여 위에서 설명한 레이아웃 위에 760px X 200px 직사각형을 배치했습니다. 저는 이 직사각형을 레이아웃 상단에 배치하고 이를 헤더 그래픽용 조각을 만드는 데 사용했습니다. 이 작업을 수행하기 전에 획과 채우기를 비활성화했습니다.
슬라이스를 kubrickheader.jpg로 저장했습니다.
비슷한 방식으로 바닥글과 페이지 조각을 생성하고 각각 kubrickfooter.jpg 및 kubrickbgwide.jpg로 이름을 변경했습니다. Kubrickfooter.jpg는 760px X 63px이고 kubrickbgwide는 760px X 40px입니다.
이미지 디렉토리에는 kubrickbg-ltr.jpg 및 kubrickbg-rtl.jpg(왼쪽에서 오른쪽으로, 오른쪽에서 왼쪽으로)라는 두 개의 다른 Kubrick 이미지가 있습니다. 해당 이미지는 kubrickbgwide.jpg와 동일합니다. 그래서 kubrickbgwide.jpg 사본을 두 개 만들고 그에 따라 이름을 바꿨습니다.
CSS 변경
기본 CSS 파일은 wp-content_themes_default 디렉토리에 있습니다. 아래 CSS 텍스트는 style.css에 대한 코드 변경 사항을 보여줍니다. 대괄호는 삭제할 코드를 표시하고 새 코드는 대괄호 없이 표시됩니다. 변경하기 전에 원본 파일을 복사하여 저장했습니다. Fancy 디자인의 경우 CSS 변경이 최소화됩니다.
/* 타이포그래피 및 색상 시작 */
body { [배경: #d5d6d7 url('images/kubrickbgcolor.jpg');]
배경: #e7e7e7 url('images/kubrickbgcolor.jpg');
}
#page { [배경색: 흰색;] [테두리: 1px 단색 #959596;]
}
#header { [배경: #73a0c5 url('images/kubrickheader.jpg') 반복 없음 하단 중앙;]
배경: #e7e7e7 url('images/kubrickheader.jpg') 반복 없음 하단 중앙;
}
#footer { [배경: #eee url('images/kubrickfooter.jpg') 반복 없음 상단;]
배경: #e7e7e7 url('images/kubrickfooter.jpg') 반복 없음 상단;
}
h1, h1 a, h1 a:hover, h1 a:visited, #headerimg [설명]{ [색상: 흰색;]
색상: 빨간색; /* 블로그 제목을 빨간색으로 표시 */
패딩 바닥: .5em; /* 제목과 태그라인 사이에 약간의 공백을 두세요 */
}
.설명 {
텍스트 장식 : 없음;
파란색; /* 블로그 태그라인을 파란색으로 만듭니다 */
텍스트 정렬 : 센터;
}
/* 타이포그래피 및 색상 끝 */
/* 구조 시작 */
#page { [배경색: 흰색;]
배경색: #e7e7e7; [테두리: 1px 단색 #959596;]
테두리: 없음; }
#header { [배경색: #73a0c5;]
배경색: #e7e7e7;
}
/* 끝 구조 */
디자인과 CSS 작업이 끝나면 WordPress는 새로운 옷을 인터넷 전체에 선보입니다.
스타일링 워드프레스 — 노그래픽 디자인
브라우저가 인터넷에서 페이지를 로드할 때 모든 것이 잘못되는 것은 아닙니다. 그렇죠? 실제로 그런 경우라도 그래픽을 찾을 수 없는 경우 페이지가 어떻게 표시될지 고려하는 것이 현명합니다.
Jakob 디자인의 경우 kubrickbgwide.jpg가 어떤 이유로든 다운로드되지 않으면 페이지가 제대로 표시되지 않습니다. 머리글과 바닥글은 밝은 배경을 사용하기 때문에 본문에 할당된 진한 파란색 배경에 정상적으로 표시됩니다. 그러나 페이지 내용은 읽기 어려워집니다. 진한 파란색 배경에 거의 묻혀버릴 정도입니다. 신체의 밝은 배경이 훨씬 현명한 선택이었을 수도 있습니다.
큐브릭 디자인의 창시자는 그래픽을 사용할 수 없는 경우 사용할 대체 배경색을 할당하여 이 문제를 해결했습니다. 할당은 style.css 파일 내에서 이루어집니다.
body { 배경: #d5d6d7 url('images/kubrickbgcolor.jpg'); }
#header { background: #73a0c5 url('images/kubrickheader.jpg') 반복 없음 하단 중앙; }
#footer { 배경: #eee url('images/kubrickfooter.jpg') 반복 없음 상단; }
이미지를 사용할 수 없는 경우 대체 RGB 색상 값이 사용됩니다.
그래픽을 사용할 수 없는 경우 기본 WordPress 블로그를 계속 표시하고 사용할 수 있습니다. 초기 페이지 재설계의 경우 그래픽 없이 기본 Kubrick 디자인부터 시작하는 것이 좋은 시작점이 될 수 있습니다. 이는 위의 설명을 단순화하여 수행할 수 있습니다.
본문 { 배경: #d5d6d7; }
#헤더 { 배경: #73a0c5; }
#footer { 배경: #eee; }
그런 다음 색상을 변경하여 다양한 블로그 색상 구성표를 시험해 볼 수 있습니다. RGB 색상 코드를 변경하고 CSS 파일을 저장한 다음 브라우저를 새로 고치면 변경 사항이 즉시 표시됩니다. 이것이 유용하고 읽기 쉬웠기를 바랍니다.
에 의해 작성된 게시물 로이스 티벨
