Kiến thức WordPress
Hướng Dẫn Chỉnh Sửa Theme Trong WordPress Theo Nhiều Cách
Để chỉnh sửa theme trong WordPress không quá khó. Với Digi-4U, chúng tôi có nhiều cách khác nhau, giúp bạn thành công “làm chủ” website của mình. Theo dõi ngay chia sẻ sau đây để nắm bắt được những cách hay này.
NỘI DUNG CHÍNH
Giới thiệu về menu trong giao diện quản trị WordPress
Menu giao diện WordPress có nhiều đề mục khác nhau. Và khi đăng nhập vào trang quản trị WordPress, bạn cần hiểu các đề mục này để có những lựa chọn cài đặt hay chỉnh sửa tối ưu nhất.
Cụ thể, các đề mục này mang ý nghĩa:
– Giao diện: Đây là nơi cho phép người dùng chọn giao diện có sẵn hoặc tìm kiếm giao diện mới cho website.
– Tùy biến: Đây là nơi người dùng thao tác thực hiện các chỉnh sửa giao diện WordPress như: Đổi tiêu đề mới, thay màu sắc khác, thay ảnh nền,…
– Widget: Đây là đề mục chứa các tiện ích để người dùng có thể thêm vào giao diện WordPress. Chẳng hạn như menu, ô tìm kiếm, đồng hồ, lịch,…
Tìm hiểu chỉnh sửa giao diện WordPress
Hiểu đơn giản, chỉnh sửa theme trong WordPress là một loạt các thao tác tạo mới hoặc thay đổi một trang có sẵn trên WordPress. Tại đây, bạn sẽ thấy những trình chỉnh sửa khác nhau, chúng bao gồm:
– Thay đổi màu sắc trang
– Thay đổi ảnh của phần mục tiêu đề
– Thay đổi ảnh nền trang
– Tùy chọn danh mục menu
– Widgets là thêm mới hoặc xóa nội dung
– Thay đổi cài đặt của trang
– Thêm CSS
Hướng dẫn cài đặt giao diện WordPress đơn giản nhất
Tưởng rằng đây sẽ là bài toán khó, thế nhưng với hướng dẫn của Digi4U, việc cài đặt giao diện WordPress vô cùng đơn giản. Sau đây là 3 bước bạn nên tham khảo ngay:
Bước 1: Đầu tiên, người dùng cần đăng nhập vào trang quản trị WordPress, lựa chọn“Giao diện” và chọn mục “Thêm mới”
Bước 2: Ở bước này, bạn hãy tùy chọn chọn giao diện mà mình mong muốn. WordPress sẽ hiện những giao diện mẫu để bạn chọn. Một cách tìm kiếm dễ dàng hơn đó là gõ ra từ khoá ở ô tìm kiếm để trang hiện ra giao diện tương ứng.
Bước 3: Ở bước cuối cùng, bạn chọn giao diện mẫu và nhấn “Cài đặt”. Như vậy, giao diện WordPress đã được cài đặt thành công. Để có thể xem giao diện đã cài đặt, bạn hãy xem ở trang chủ.
Hướng dẫn cách chỉnh sửa Theme trong WordPress cơ bản
Nhìn chung, việc chỉnh sửa theme WordPress cũng khá dễ. Chỉ cần bạn ghi nhớ và thực hiện những hướng dẫn sau đây, chắc chắn việc chỉnh sửa sẽ thành công.
Các tùy chỉnh chính
Tùy chỉnh giao diện (Customize Appearance) là chức năng được mặc định trên WordPress. Vì thế người dùng không cần phải cài thêm bất kỳ plugin nào thay đổi. Chức năng Customize cho bạn tuỳ ý chỉnh sửa những mục cơ bản đến quan trọng. Miễn sao nó liên quan đến giao diện của website.
Ở đây, để bắt đầu sử dụng các tùy chỉnh theme WordPress, bạn cần truy cập vào trang Dashboard của website. Tại menu bên phải, bạn chọn Appearance, chọn Customize.
Các tính năng tùy chỉnh giao diện sẽ có khác nhau, vì thế, tùy thuộc vào giao diện cụ thể mà bạn chọn trên WordPress. Thông thường, giao diện trả phí sẽ có nhiều chức năng phức tạp hơn so với giao diện miễn phí.
Cách tùy chỉnh Site Identity
Tính năng này hay được sử dụng với mục đích điều chỉnh tên của website và mô tả ngắn dưới tên website. Bên cạnh đó, Site Identity cũng là nơi để bạn upload, thay đổi logo, hình ảnh của web và biểu tượng nằm ở trên trình duyệt. Thế nhưng, khi upload site icon, bạn cần phải chú ý kích thước của hình ảnh. Hình ảnh cần có kích thước chuẩn theo gợi ý của hệ thống.
2 cách tùy chỉnh Background Image cho website
Trong quá trình chỉnh sửa theme trong WordPress thì đây là cách giúp bạn upload hình ảnh để làm background cho website. Hiện tại, có 2 cách tùy chỉnh Theme WordPress liên quan đến ảnh nền, đó là:
- Sử dụng một ảnh kích thước lớn để làm background. Việc này sẽ giúp giao diện website nổi bật và chất lượng. Tuy nhiên, ảnh kích thước lớn lại tồn tại một nhược điểm là khiến tốc độ tải trang chậm hơn với những người truy cập lần đầu. Lưu ý rằng, bạn nên vào các kho ảnh miễn phí để chất lượng ảnh được sắc nét nhất.
- Cách thứ 2 đó là chọn ảnh kích thước nhỏ và ghép chúng lại với nhau. Như vậy, ảnh sẽ phủ kín toàn bộ giao diện website . Ưu điểm của phương pháp này đó là giúp tốc độ load trang nhanh. Tuy nhiên hình ảnh lại kém thu hút.
Cách tùy chỉnh Menu và Widget
Để tùy chỉnh Menu và Widget, bạn có thể thông qua mục Customize hoặc nhấn vào các phần chuyên biệt của nó. Sau đây là cách thực hiện chi tiết, tham khảo ngay:
Tùy chỉnh menu
Đầu tiên, ở giao diện Dashboard, bạn chọn Appearance và click vào mục Menus. Lúc này, hệ thống sẽ hiển thị ra các mục để bạn tùy chỉnh theo ý muốn.
Ở đây, các mục chỉnh sửa quan trọng sẽ có:
- Edit Menus: Là nơi để người dùng chỉnh sửa menu như xoá, thêm liên kết và đề mục,…
- Manage Locations: Người dùng có thể đưa menu vào những vị trí theme WordPress cho phép. Các vị trí đó thường nằm ở bên trên, bên phải, bên trái, hoặc ở chân trang.
- Select a menu to edit : Đây một trang web chứa rất nhiều menu khác nhau. Nếu muốn chỉnh sửa, bạn cần lựa chọn menu đó và nhấn Select để thực hiện các thao tác thay đổi theo ý muốn.
Tùy chỉnh Widget
Widget là các mục thông tin bổ sung cho website khi bạn thực hiện chỉnh sửa theme trong WordPress. Nó thường nằm ở bên phải hoặc chân trang. Các loại theme khác nhau sẽ cung cấp các kiểu widget khác nhau. Tuy nhiên, một số widget phổ biến, hầu như theme nào cũng có đó là: ô tìm kiếm, tags cloud, categories, archives, recent post, text, meta, recent comments, RSS,…
Để tùy chỉnh theme WordPress Widget, ở giao diện Dashboard, bạn chọn Appearance, nhấn Widget.
Khi hệ thống hiển thị các mục, bạn hãy chọn để tùy chỉnh widget theo ý muốn.
Thông thường, một trang Widget sẽ gồm có 3 mục:
- Widget sẵn có (Available Widgets): Đây là Các widget được theme cung cấp sẵn.
- Vị trí Widget: Đây là vị trí mà bạn sẽ đặt trong trang như: bên tay phải, bên trái, phía chân trang.
- Widget không sử dụng: Khu vực này sẽ chứa các widget mà bạn đã tạo nhưng không còn muốn sử dụng nữa. Lúc này, WordPress sẽ ghi nhớ các thiết lập đó. Và bất cứ khi nào muốn sử dụng lại thì bạn chỉ cần kéo thả widget vào vị trí mong muốn là được.
Như vậy, để thiết lập widget vào trang, bạn chỉ cần thực hiện thao tác giữ chuột trái và kéo thả vào vị trí mong muốn.
Các bước tùy chỉnh Menu
Bước 1: Đầu tiên, tại tab “Edit menu”, bạn click vào “Create a new menu” .
Bước 2: Sau đó, hãy đặt tên cho menu muốn tạo và nhấn nút “Create menu”. Tiếp theo, bạn click chọn “Primary Menu” để hiện lên trên phần Header của website.
Bước 3: Hãy chọn các nội dung sẽ có trong menu và nhấn “Add to Menu”. Cụ thể:
- Pages: Các trang trên website.
- Posts: Những bài được đăng trên website.
- Custom Links: Các liên kết tùy chỉnh thêm vào menu.
- Categories: Các thư mục trên website
Bước 4: Bạn cần 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: Nhấn nút “Save Changes” để lưu lại các thiết lập trên.
Cách tùy chỉnh Colors
Đây là khu vực để bạn tùy chỉnh màu sắc cho trang. Chẳng hạn như:
- Background color: là màu nền
- Page background color: là màu hình nền của trang
- Link color: là màu của liên kết
- Main text color: là màu chữ chính trên trang web
- Secondary text color: là màu chữ phụ trên trang web
Cách tùy chỉnh Header Image
Ở phần này, bạn cần chú ý chọn lựa đúng kích cỡ mà WordPress gợi ý cho ảnh. Nếu ảnh không có kích thước tối ưu thì giao diện sẽ kém tính thẩm mỹ. Vì vậy, bạn nên cân nhắc dùng plugin nén ảnh để tối ưu dung lượng cho Header Image.
Bạn có thể tùy chỉnh CSS theo các bước:
- Bước 1: Dò CSS code bạn muốn điều chỉnh trên website bằng cách sử dụng tiện ích “Inspect” của Google Chrome. Sau đó vào trang web muốn thay đổi giao diện và nhấp chuột phải chọn “Inspect”.
- Bước 2: Nhấn chuột vào biểu tượng mũi tên ở góc phải cửa sổ Inspect.
- Bước 3: Nhấn vào đối tượng bạn muốn chỉnh sửa trên website. để chỉnh sửa font chữ, cỡ chữ, màu chữ, định dạng chữ,…
- Bước 4: Bạn hãy thay đổi các thông số trên cửa sổ Inspect và xem live preview để chắc chắn các chỉnh sửa đã chuẩn xác.
- Bước 5: Bạn sẽ chính thức tùy chỉnh phần tử trên website. Trên giao diện Dashboard, chọn Appearance, nhấn Customize, nhấn Additional CSS. Sau đó, tìm CSS code của phần tử bạn muốn thay đổi và dán code mới vào để thay thế. Sau đó nhấn Publish.
Cách chỉnh sửa theme trong WordPress nâng cao
Việc chỉnh sửa này yêu cầu người làm cần có kiến thức nhất định và chuyên sâu về lập trình để thao tác. Sau đây là các bước thực hiện:
Xử lý menu chính
Để xử lý menu chính, bạn hãy mở tập tin header.php. Sau đó, tìm kiếm đoạn code hiển thị menu chính và cắt đoạn code này, đặt ở vị trí ngoài thẻ div với class là wrapper.
Tiếp theo, mở phần code ở trên lên, thêm vào thẻ div với class là page-width để canh giữa menu. Nhấn lưu lại khi hoàn thành.
Tùy biến hiển thị xem bài viết
Đầu tiên, bạn hãy mở ngay tập tin index.php và xóa bỏ dòng code:
<h1><?php _e( ‘Latest Posts’, ‘html5blank’ ); ?></h1>
Tiếp theo, hãy mở tập tin custom-style.css lên và sửa đoạn code:
main section h1 {
display: none; /* An di dong chu Latest Posts */
}
thành
main section h1 {
display: block;
}
Sau đó, bạn có thể tùy chỉnh khung bình luận, nội dung để trang hiển thị bài viết có thẩm mỹ nhất. Hãy mở custom-style.css và thêm ngay vào các đoạn code sau:
.comments h2 {
border-bottom: 1px solid #DFDFDF;
margin-top: 10px;
padding-bottom: 10px;
}
.comments ul {
list-style: none outside none;
margin: 0;
padding: 0;
}
.comments ul ul {
border-top: 1px solid #DFDFDF;
margin-left: 0;
margin-top: 10px;
padding-left: 40px;
padding-top: 10px;
}
.comments li {
border-bottom: 1px solid #DFDFDF;
margin-bottom: 10px;
}
.comments li:last-child {
border: medium none;
}
.comments img.avatar {
border: 1px solid #DDDDDD;
border-radius: 50%;
float: right;
margin-left: 10px;
padding: 2px;
}
.comments .fn a, .comments .fn {
font-size: 25px;
font-style: normal;
}
.comments .comment-meta a {
color: #999999;
font-style: italic;
}
.comment-form label {
display: inline-block;
margin-left: 10px;
margin-top: 6px;
}
.comment-form input, .comment-form textarea {
clear: both;
display: block;
float: left;
}
.comments .form-allowed-tags {
clear: both;
}
.comments p {
overflow: hidden;
}
.comment-respond {
border-top: 1px solid #DFDFDF;
margin-top: 20px;
}
.comments .required, .comments .comment-form-comment label {
display: none;
}
Định dạng sidebar và thẻ HTML mặc định
Để định dạng sidebar, bạn cần thêm vào một số đoạn code css để sidebar hiển thị gọn gàng và đẹp mắt hơn. Hãy mở ngay tập tin custom-style.css và thêm vào đoạn code sau:
/* ============================
* Dinh dang CSS cho sidebar
* ============================ */
.search input[type=”search”] {
background: none repeat scroll 0 0 #F3F3F3;
border: 1px solid #E3E3E3;
padding: 5px;
width: 95%;
}
.search .search-submit {
display: none;
}
.sidebar-widget ul {
padding-left: 25px;
padding-right: 10px;
}
.sidebar-widget > div {
background: none repeat scroll 0 0 #F9F9F9;
border-color: #C4C4C4 #E8E8E8 #E8E8E8;
border-style: solid;
border-width: 4px 1px 1px;
margin-bottom: 8px;
}
.sidebar-widget > div:first-child {
margin-top: 8px;
}
.sidebar-widget > div h3 {
background: none repeat scroll 0 0 #FFFFFF;
border-bottom: 1px solid #CFCFCF;
color: #444444;
margin: 0;
padding: 5px;
}
Và cuối cùng, để định dạng css cho các thẻ HTML trên blog thì bạn cần thêm vào đầu tập tin custom-style.css các dòng code:
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;
}
Lời kết
Như vậy, Digi-4U đã chia sẻ đến bạn những cách chỉnh sửa theme trong WordPress đơn giản, hiệu quả nhất. Ứng dụng ngay những cách này đối với website của bạn để sở hữu một website bắt mắt. Đừng quên theo dõi Digi-4U để cập nhật thêm nhiều thông tin hay, hữu ích khác nhé.
