Để khiến website bạn nổi bật, để lại ấn tượng cũng như thu hút người xem hơn thì chọn theme độc đáo là một trong những bước quan trọng không thể bỏ qua khi xây dựng website wordpress. Tuy nhiên làm thế nào để chỉnh sửa theme wordpress dễ dàng? Trong bài viết hôm nay, compamarketing sẽ giới thiệu 9 cách chỉnh sửa theme trong wordpress cơ bản và nâng cao. Cùng theo dõi để tham khảo nhé!
Customize Appearance là chức năng mặc định có sẵn trên WordPress, vì vậy chúng ta không cần cài đặt thêm bất kỳ plugin nào để thực hiện thay đổi. Chức năng Customize cho phép người dùng điều chỉnh các mục cơ bản và quan trọng liên quan đến giao diện của trang web.
Để bắt đầu sử dụng các tùy chỉnh chủ đề WordPress, trước tiên bạn cần truy cập trang Bảng điều khiển của trang web của mình. Tại vị trí menu bên phải, chọn Appearance -> Customize.
Các phần chính của tính năng tùy chỉnh chủ đề sẽ khác nhau, tùy thuộc vào theme cụ thể mà bạn chọn trên WordPress. Thông thường những giao diện trả phí sẽ có nhiều chức năng phức tạp hơn những giao diện trả phí.Ví dụ: giao diện Twenty Sixteen (Miễn phí) sẽ có các tùy chỉnh bao gồm:
Theme Twenty Seventeen (Miễn phí) sẽ có các tùy chỉnh bao gồm:
Theme Soledad (trả phí) sẽ có nhiều tùy chọn tùy chỉnh theme WordPress hơn như: General Option, Topbar Option, Logo and Header Option, Features Slider Options, Featured Video Background Options, Other Layout Options,…
Mặc dù có nhiều tùy chỉnh khác nhau nhưng các theme chung sẽ có một số chức năng chung:
Tính năng này thường được sử dụng để điều chỉnh tên của trang web (tiêu đề trang web) và mô tả ngắn bên dưới tên trang web (khẩu hiệu). Bên cạnh đó, Site Identity còn là nơi để bạn upload, thay đổi hình ảnh logo của website và biểu tượng nhỏ nằm trên trình duyệt (favicon / site icon). Tuy nhiên, khi tải lên biểu tượng trang web, người dùng cần đảm bảo rằng hình ảnh đó có kích thước chính xác theo gợi ý của hệ thống (ví dụ: biểu tượng trang web phải là hình vuông và tối thiểu 512px * 512px).
Cách tùy chỉnh theme WordPress này là một công cụ để tải hình ảnh lên làm nền cho trang web của bạn.
Có 2 cách để tùy chỉnh Theme WordPress liên quan đến ảnh nền mà bạn cần lưu ý, đó là:
Để chọn ảnh nền chất lượng cao, sắc nét, bạn có thể tìm chúng trên Pixabay.com. Ngoài ra, bạn nên tham khảo thêm các ý tưởng sử dụng hình ảnh lớn làm nền cho web tại awwwards.co
Bạn có thể tùy chỉnh Menu và Widget thông qua phần Customize hoặc nhấp vào các phần chuyên biệt của nó để tùy chỉnh theme WordPress. Tiến hành như sau:
Đầu tiên, trong giao diện Dashboard, bạn chọn Appearance -> Click vào Menus.
Lúc này hệ thống sẽ hiển thị các mục để bạn có thể tùy chỉnh các menu theo ý muốn.
Một số chỉnh sửa quan trọng bao gồm:
Các bước tùy chỉnh menu
Để tạo menu mới, bạn cần thực hiện các bước sau:
Bước 1: Tại tab “Edit menu”, nhấp vào dòng chữ “Create a new menu” bên cạnh nút “Select”.
Bước 2: Đặt tên cho menu muốn tạo -> Nhấn vào nút “Create menu”. Sau đó nhấp vào “Primary Menu” để nó xuất hiện trên phần Header của trang web.
Bước 3: Chọn các mục nội dung sẽ có trong menu (trong danh sách bên tay trái giao diện) -> Nhấn “Add to Menu”.
Tại đây, các mục nội dung sẽ có 4 phần:
Nếu bạn muốn thêm một mục, chỉ cần chọn nó.
Bước 4: Sắp xếp lại thứ tự hiển thị của các tab trên menu theo ý muốn.
Bước 5: Lưu menu bằng cách nhấp vào nút “Save Changes”.
Widget là các mục thông tin bổ sung cho một trang web thường nằm ở bên phải hoặc chân trang. Các loại theme khác nhau có thể cung cấp các kiểu widget khác nhau. Nhưng có một số widget phổ biến mà hầu hết mọi theme đều có: ô tìm kiếm, categories, tags cloud, archives, recent post, recent comments, text, meta, RSS,…
Để tùy chỉnh theme Widget WordPress, đầu tiên, trong giao diện Dashboard, bạn cần chọn Appearance -> Click vào Widget.
Khi đó, hệ thống sẽ hiển thị các mục để bạn có thể tùy chỉnh widget theo ý muốn.
Thông thường, một trang Widget bao gồm 3 phần chính:
Việc thêm widget vào trang cũng rất đơn giản, bạn chỉ cần click và giữ chuột trái và kéo thả widget vào vị trí mình muốn.
Đây là khu vực mà bạn có thể tùy chỉnh màu sắc của trang. Một số điều chỉnh bạn có thể thực hiện bao gồm:
Khi tải lên Header Image (hình ảnh ở đầu trang web), bạn cần lưu ý chọn đúng kích thước mà WordPress gợi ý (ví dụ: kích thước tối ưu là 1200px * 280px). Nếu hình ảnh được chọn không có kích thước tối ưu, nó vẫn được hiển thị, nhưng các tùy chỉnh của chủ đề WordPress sẽ trông thiếu thẩm mỹ. Do đó, người dùng có thể cân nhắc sử dụng plugin nén ảnh để tối ưu hóa kích thước của Header Image.
CSS được sử dụng để tùy chỉnh các khía cạnh bên ngoài của trang web như: cỡ chữ, màu chữ, đường viền, màu nền, … Bạn có thể tùy chỉnh CSS của trang web bằng cách làm theo các bước sau:
Bước 1: Phát hiện mã CSS của phần tử bạn muốn điều chỉnh trên trang web của mình bằng tiện ích mở rộng “Kiểm tra” của Google Chrome:
Vào trang web bạn muốn thay đổi giao diện -> Nhấp chuột phải, chọn “Inspect”.
Bước 2: Nhấn vào biểu tượng mũi tên ở góc phải cửa sổ Inspect (hoặc nhấn tổ hợp phím Ctrl – Shift – C).
Bước 3: Bấm vào đối tượng muốn chỉnh sửa trên website. Lúc này, mã CSS của đối tượng sẽ xuất hiện trong tab Styles (bạn có thể nhấp và sao chép mã của phần tử bạn muốn thay đổi).
Một số thông số bạn có thể chỉnh sửa là:
Bước 4: Thay đổi các thông số trên cửa sổ Inspect và xem live preview để đảm bảo các chỉnh sửa theo cách bạn muốn.
Bước 5: Chính thức tùy chỉnh phần tử trên trang web:
Ở đây, bạn cần có một kiến thức nhất định và chuyên sâu về lập trình để thao tác.
Để ảnh hưởng đến các tập tin trên hosting hoặc máy chủ, điều đầu tiên bạn cần biết về giao thức FTP cũng như các cách thao tác với các tập tin trên hosting.
Menu chính thường chứa các danh mục lớn, quan trọng của trang. Để xử lý menu chính, trước tiên bạn cần mở tệp header.php. Sau đó, hãy tìm mã hiển thị menu chính được tạo sẵn:
Tiếp theo, cắt mã này và đặt nó bên ngoài thẻ div với class là wrapper. Mục đích của việc này là đưa menu lên đầu trang và hiển thị toàn màn hình:
Tiếp tục mở mã ở trên và thêm thẻ div với class là page-width để canh giữa menu:
Lưu sau khi hoàn thành thao tác. Nếu menu của bạn vẫn chưa được căn giữa, hãy tiếp tục mở tệp custom-style.css trong thư mục con và tìm class .wrapper:
Thêm class .page-width vào đoạn mã trên, cùng với class .wrapper:
Tiếp tục, bạn có thể tạo menu cấp 2 bằng tính năng tùy chỉnh Menu trên Trang tổng quan. Sau đó, để điều chỉnh hiển thị của menu cấp 2, hãy tìm trong tệp custom-style.css dòng mã sau:
Thay nguyên đoạn code css bên trên thành như bên dưới:
Như vậy, bạn đã hoàn thành việc tạo menu cấp 2 cho trang web WordPress của mình.
Đầu tiên, mở tệp index.php và xóa dòng mã bên dưới:
Dòng mã này thực sự không cần thiết đối với một số trang web, nhưng nếu bạn thấy nó hữu ích, bạn có thể bỏ nó đi.
Tiếp theo, mở tệp custom-style.css, tìm mã:
Sửa đoạn code trên thành như bên dưới để hiển thị lại tiêu đề khi người dùng vào xem bài viết:
Sau đó, bạn có thể tùy chỉnh khung bình luận và nội dung bình luận để trang hiển thị bài viết trông bắt mắt hơn. Mở tệp custom-style.css và thêm mã sau:
Định dạng sidebar và những thẻ HTML mặc định
Để định dạng sidebar, bạn không cần phải chỉnh sửa nhiều trong file code của giao diện. Chủ yếu chỉ thêm một số mã css để làm cho thanh bên trông gọn gàng và đẹp hơn.
Mở tệp custom-style.css và thêm mã sau:
Cuối cùng, để định dạng css cho các thẻ HTML trên blog của bạn, bạn cần thêm các dòng mã sau vào đầu tệp custom-style.css của mình:
input
.
button
{
padding
:
2px
10px
;
}
hr
{
background
:
url
(
"img/dotted-line.png"
)
repeat scroll center top
/
4px
4px
rgba
(
0
,
0
,
0
,
0
);
border
:
0
none
;
height
:
1px
;
margin
:
0
0
24px
;
}
input
.
file
,
input
[
type
=
text
],
textarea
,
input
[
type
=
password
]
{
border
:
2px
solid
#D4D0BA;
font
-
family
:
inherit
;
padding
:
5px
;
}
select
{
padding
:
3px
2px
;
}
table
{
border
-
bottom
:
1px
solid
#EDEDED;
border
-
collapse
:
collapse
;
border
-
spacing
:
0
;
font
-
size
:
14px
;
line
-
height
:
2
;
margin
:
0
0
20px
;
width
:
100
%;
}
caption
,
th
,
td
{
font
-
weight
:
normal
;
text
-
align
:
left
;
}
th
{
font
-
weight
:
bold
;
text
-
transform
:
uppercase
;
}
td
{
border
-
top
:
1px
solid
#EDEDED;
padding
:
6px
10px
6px
0
;
}
pre
{
background
:
none repeat scroll
0
0
#F5F5F5;
color
:
#666666;
font
-
family
:
monospace
;
font
-
size
:
14px
;
margin
:
20px
0
;
overflow
:
auto
;
padding
:
20px
;
white
-
space
:
pre
-
wrap
;
word
-
wrap
:
break
-
word
;
}
blockquote
{
font
-
size
:
17px
;
font
-
style
:
italic
;
font
-
weight
:
normal
;
margin
:
24px
40px
;
}
