Đã đến lúc phải thiết kế lại trang web của tôi cho “Thời đại Web 2.0”. Tôi đã xem xét nghiêm túc hai nền tảng, Drupal và Joomla, để thực hiện điều này.
Drupal và Joomla cung cấp các gói toàn diện, trong trường hợp của Drupal, bao gồm blog và diễn đàn làm mô-đun cốt lõi. Việc tạo chủ đề cho các nền tảng này có thể được thực hiện thông qua cả sửa đổi mã CSS (Cascading Style Sheets) và PHP (Trang chủ cá nhân hoặc PHP: Bộ tiền xử lý siêu văn bản). Tuy nhiên, những nền tảng này rất phức tạp và việc tìm hiểu đủ để cài đặt, quản lý và tùy chỉnh những nền tảng này có thể là một nhiệm vụ khó khăn.
Sau khi nghiên cứu hai nền tảng, bao gồm cả việc sử dụng chúng trên cả nền tảng thử nghiệm và trên Internet, tôi quyết định xem WordPress như một giải pháp khả thi cho nhu cầu Web trong tương lai của mình. Tôi rất ngạc nhiên khi phát hiện ra rằng phiên bản mới nhất của WordPress rất dễ cài đặt, dễ sử dụng và dễ tạo chủ đề.
Trong bài viết này, tôi sẽ mô tả cách tùy chỉnh WordPress 2.5.
PHONG CÁCH WORDPRESS
Có sáu thành phần chính tạo nên giao diện của blog WordPress mặc định:
1. Đồ họa tiêu đề
2. Tiêu đề blog
3. Dòng giới thiệu
4. Trang
KHAI THÁC. Lý lịch
6. Chân trang.
Để blog tải nhanh, tôi quyết định không sử dụng đồ họa đầu trang hoặc chân trang; và vì thiết kế về cơ bản sẽ là chủ đề mặc định của WordPress với lớp áo mới nên chỉ cần thực hiện một chút công việc thiết kế đồ họa. Trên thực tế, tôi chỉ cần tạo một đồ họa để tạo trang blog với hiệu ứng hai cột. Trang blog sẽ “nổi” ở giữa nền *nội dung* màu xanh đậm dùng để đóng khung trang.
Tạo đồ họa
Nhìn vào thư mục hình ảnh của chủ đề WordPress mặc định sẽ hiển thị các hình ảnh mặc định được sử dụng cho giao diện Kubrick. Hiện tại, chỉ có một tệp được đặc biệt quan tâm: kubrickbgwide.jpg. Đối với thiết kế, các hình ảnh Kubrick khác không cần thiết nhưng sẽ cần cho thiết kế “Fancy”, phức tạp hơn.
Trang blog sẽ được tạo từ một “lát cắt” xuyên qua trung tâm của thiết kế mới. Lát cắt là một hình ảnh hẹp có chiều rộng của trang blog.
Tôi bắt đầu thiết kế của mình bằng cách bố trí một trang cơ bản (760px X 600px) trong Adobe Illustrator. Tôi thích sử dụng Illustrator cho tác phẩm nghệ thuật thuộc loại này, mặc dù các chương trình khác cũng có thể được sử dụng.
Tôi đã tô màu nền của trang vào trang cơ bản (đừng nhầm với nền *nội dung* màu xanh đậm). Màu nền sáng sẽ “làm nổi bật” phần chữ có màu sắc như tiêu đề, tagline của blog.
Tôi phủ lên trang này hai hình chữ nhật hoặc “cột”. Cột bên trái, rộng 510px được tô màu vàng nhạt; cột bên phải, rộng 230px, được tô màu xanh lam nhạt. Hai cột vừa với trang cơ bản với đường viền nền trang 10px xung quanh chúng.
Trong Illustrator, sau đó tôi đặt một hình chữ nhật có kích thước 760px X 40px trên trang và sử dụng nó để tạo một lát cắt. Một lát cắt không gì khác hơn là một phần đại diện của một hình ảnh lớn hơn, trong trường hợp này là của thiết kế blog. Tôi đã lưu lát cắt này dưới dạng kubrickbgwide.jpg. Kubrickbgwide.jpg sẽ được sử dụng để tạo nền cho trang blog. Khi nội dung mới được thêm vào trang blog, các bản sao của lát cắt sẽ được xếp chồng lên nhau theo chiều dọc để “phát triển” nền hai cột. Đây là hình ảnh duy nhất mà trình duyệt cần để tạo trang chủ của blog. Do đó, Blog sẽ tải rất nhanh.
Khá dễ dàng cho đến nay, phải không? Phần còn lại của thiết kế được thực hiện thông qua tệp CSS của chủ đề và/hoặc thông qua giao diện quản trị WordPress.
CSS Những thay đổi
Tệp CSS mặc định nằm trong thư mục wp-content_themes_default. Văn bản CSS bên dưới hiển thị các thay đổi mã đối với style.css. Trước khi thực hiện bất kỳ thay đổi nào đối với tệp CSS mặc định, tôi luôn tạo và lưu một bản sao của bản gốc. Tệp CSS có thể được mở và sửa đổi bằng bất kỳ trình soạn thảo văn bản nào. Văn bản cần xóa sẽ được hiển thị trong dấu ngoặc vuông. Văn bản mới hoặc được sửa đổi sẽ được hiển thị mà không có dấu ngoặc.
/* Bắt đầu kiểu chữ và màu sắc */
nội dung { [nền: #d5d6d7 url('images/kubrickbgcolor.jpg');]
nền: #636f89; /* Đặt màu nền của Body thành màu xanh */
}
#trang {
[màu nền: trắng;] [đường viền: 1px liền khối #959596;]đường viền: không có;
} [#tiêu đề {
nền: #73a0c5 url('images/kubrickheader.jpg') ở giữa dưới cùng không lặp lại;
}
#headerimg {
lề: 7px 9px 0;
chiều cao: 192px;
chiều rộng: 740px;
}]
#footer { [nền: #eee url('images/kubrickfooter.jpg') không lặp lại trên cùng;]
nền: #ffef2; /* Màu vàng rất nhạt */
}
h1, h1 a, h1 a:hover, h1 a:visited, #headerimg [.description] {
trang trí văn bản: không có; [màu trắng;]
màu đỏ; /*Đặt tiêu đề màu đỏ*/
đệm-đáy: .5em; /* Đặt một khoảng cách nhỏ giữa tiêu đề và dòng giới thiệu */
}
.Sự miêu tả {
văn bản-trang trí: không có;
màu sắc: xanh dương; /* Làm cho dòng giới thiệu có màu xanh */
text-align: center;
}
/* Kết thúc kiểu chữ và màu sắc */
/* Bắt đầu cấu trúc */
#trang { [màu nền: trắng;]
màu nền: ffef2; /* Màu vàng rất nhạt */ [viền: 1px Solid #959596;]
biên giới: không có;
}
#header { [màu nền: #73a0c5;]
màu nền: #ffef2; /* Màu vàng rất nhạt */
}
/*Cấu trúc kết thúc */
Sau khi thực hiện và lưu những thay đổi này vào tệp style.css, trang blog mới được thiết kế đã hoàn tất.
STYLING WORDPRESS — THIẾT KẾ VÁY LẠ MẮT
Mặc dù tôi thích sự đơn giản trong thiết kế blog Jakob nhưng nó sẽ không hấp dẫn tất cả mọi người. Rất nhiều người chỉ thích “sự hào nhoáng”. Giá của một chiếc váy WordPress sang trọng thường là blog tải chậm hơn mà không tăng khả năng sử dụng. Tuy nhiên, đối với những người muốn “trang điểm” cho diện mạo blog của mình, đây là những cách bổ sung có thể thực hiện được.
Trước hết, cần lưu ý rằng nền của trang WordPress mặc định sử dụng đồ họa tiêu đề (kubrickheader.jpg) và chân trang (kubrickfooter.jpg). Những đồ họa này không được tô bằng một màu đồng nhất như trong thiết kế Jakob mà có độ dốc. Ngoài ra còn có một bóng đổ rất nhỏ dưới trang.
Do sự phức tạp của trang mặc định nên cần có đồ họa bổ sung và do đó sẽ cần nhiều lát hơn. Ngoài ra, khi muốn có nền nội dung phức tạp hơn để "nổi" trang, thì hình ảnh "hạt giống" cho trang này cũng có thể được yêu cầu (đây là mục đích của hình ảnh kubrickbgcolor.jpg).
Như trước đây, tôi đã tạo một bản vẽ trang blog trong Illustrator. Trang có các góc được bo tròn, nổi trên nền WordPress mặc định, có độ dốc màu vàng và có bóng đổ nhỏ.
Lần đầu tiên tôi tạo một hình chữ nhật 760px X 600px trên bản vẽ minh họa Illustrator. Tôi tô màu hình chữ nhật này bằng màu nền (C:8, M:6, Y:6, K:0).
Tiếp theo, bằng cách sử dụng Công cụ hình chữ nhật tròn, tôi đã vẽ một hình chữ nhật có kích thước 736px X 584px và tô màu nó bằng gradient màu vàng. Về cơ bản, tôi đã làm cho trang càng lớn càng tốt trong nền trong khi vẫn chừa đủ chỗ cho bóng đổ.
Cuối cùng, tôi tạo cho hình chữ nhật tròn một bóng đổ nhỏ.
Để đảm bảo rằng các lát cắt sẽ hợp nhất hoàn hảo vào nền *body*, tôi đã tạo một hình vuông 60px X 60px có cùng màu nền (C:8, M:6, Y:6, K:0) và lưu nó dưới dạng kubrickbgcolor.jpg. Hình ảnh nhỏ sẽ được dùng để “vẽ” nền cơ thể. Đây là một bước quan trọng vì nền sử dụng cho phần nội dung và nền sử dụng cho trang phải phù hợp hoàn hảo với thiết kế Fancy.
Tạo các lát cắt
Sử dụng Công cụ Hình chữ nhật, tôi đặt một hình chữ nhật có kích thước 760px X 200px lên trên bố cục được mô tả ở trên. Tôi đặt hình chữ nhật này ở trên cùng của bố cục và sử dụng nó để tạo một lát cắt cho đồ họa tiêu đề. Trước khi làm điều này, tôi đã tắt đột quỵ và tô màu.
Tôi đã lưu lát cắt này dưới dạng kubrickheader.jpg.
Tôi đã tạo phần chân trang và lát trang theo cách tương tự và đổi tên chúng lần lượt là kubrickfooter.jpg và kubrickbgwide.jpg. Kubrickfooter.jpg có kích thước 760px X 63px và kubrickbgwide là 760px X 40px.
Có hai hình ảnh Kubrick khác trong thư mục hình ảnh: kubrickbg-ltr.jpg và kubrickbg-rtl.jpg (từ trái sang phải và từ phải sang trái). Những hình ảnh này giống với kubrickbgwide.jpg. Vì vậy, tôi đã tạo hai bản sao của kubrickbgwide.jpg và đổi tên chúng cho phù hợp.
Thay đổi CSS
Tệp CSS mặc định nằm trong thư mục wp-content_themes_default. Văn bản CSS bên dưới hiển thị các thay đổi mã đối với style.css. Dấu ngoặc vuông hiển thị mã nào cần xóa và mã mới được hiển thị không có dấu ngoặc. Trước khi thực hiện thay đổi, tôi đã sao chép và lưu tệp gốc. Đối với thiết kế Fancy, những thay đổi về CSS là tối thiểu.
/* Bắt đầu kiểu chữ và màu sắc */
nội dung { [nền: #d5d6d7 url('images/kubrickbgcolor.jpg');]
nền: #e7e7e7 url('images/kubrickbgcolor.jpg');
}
#page { [màu nền: trắng;] [đường viền: 1px liền khối #959596;]
}
#header { [nền: #73a0c5 url('images/kubrickheader.jpg') ở giữa dưới cùng không lặp lại;]
nền: #e7e7e7 url('images/kubrickheader.jpg') ở giữa dưới cùng không lặp lại;
}
#footer { [nền: #eee url('images/kubrickfooter.jpg') không lặp lại trên cùng;]
nền: #e7e7e7 url('images/kubrickfooter.jpg') không lặp lại trên cùng;
}
h1, h1 a, h1 a:hover, h1 a:visited, #headerimg [description]{ [color: white;]
màu đỏ; /* Đặt tiêu đề blog thành màu đỏ */
đệm-đáy: .5em; /* Đặt một khoảng cách nhỏ giữa tiêu đề và dòng giới thiệu */
}
.Sự miêu tả {
văn bản-trang trí: không có;
màu sắc: xanh dương; /* Làm cho dòng giới thiệu blog có màu xanh */
text-align: center;
}
/* Kết thúc kiểu chữ và màu sắc */
/* Bắt đầu cấu trúc */
#trang { [màu nền: trắng;]
màu nền: #e7e7e7; [đường viền: 1px liền khối #959596;]
đường viền: không có; }
#header { [màu nền: #73a0c5;]
màu nền: # e7e7e7;
}
/*Cấu trúc kết thúc */
Sau khi thiết kế và CSS hoạt động, WordPress sẽ hiển thị bộ quần áo mới của nó trên toàn bộ Internet.
STYLING WORDPRESS — THIẾT KẾ KHÔNG ĐỒ HỌA
Không có gì sai sót khi trình duyệt tải một trang từ Internet, phải không? Trên thực tế, ngay cả khi trường hợp này xảy ra, vẫn nên cân nhắc cách trang sẽ hiển thị trong trường hợp không thể tìm thấy đồ họa.
Trong trường hợp thiết kế Jakob, nếu kubrickbgwide.jpg không được tải xuống, vì bất kỳ lý do gì, trang sẽ không hiển thị ở mức chấp nhận được. Do nền sáng được sử dụng cho đầu trang và chân trang nên chúng hiển thị bình thường trên nền xanh đậm được gán cho phần nội dung. Tuy nhiên, nội dung trang trở nên khó đọc: nó gần như bị chìm trong nền xanh đậm. Nền sáng hơn cho phần thân có thể là sự lựa chọn khôn ngoan hơn nhiều.
Người tạo ra thiết kế Kubrick đã giải quyết vấn đề này bằng cách chỉ định các màu nền thay thế sẽ được sử dụng nếu không có đồ họa. Các bài tập được thực hiện trong tệp style.css:
body { nền: #d5d6d7 url('images/kubrickbgcolor.jpg'); }
#header { nền: #73a0c5 url('images/kubrickheader.jpg') ở giữa dưới cùng không lặp lại; }
#footer { nền: #eee url('images/kubrickfooter.jpg') không lặp lại trên cùng; }
Nếu không có hình ảnh, giá trị màu RGB thay thế sẽ được sử dụng.
Nếu đồ họa không có sẵn, blog WordPress mặc định vẫn có thể hiển thị và sử dụng được. Đối với thiết kế lại trang ban đầu, bắt đầu với thiết kế Kubrick cơ bản, không có đồ họa, có thể là nơi tốt để bắt đầu. Điều này có thể được thực hiện bằng cách đơn giản hóa các câu trên:
thân {nền: #d5d6d7; }
#header { nền: #73a0c5; }
#footer { nền: #eee; }
Sau đó, màu sắc có thể được thay đổi để thử các cách phối màu blog khác nhau. Chỉ cần thay đổi mã màu RGB, lưu tệp CSS và làm mới trình duyệt để xem thay đổi ngay lập tức. Hy vọng điều này hữu ích và dễ đọc.
Bài được viết bởi Royce Tivel
