WordPress được phát triển với mục tiêu là tạo ra một nền tảng dễ sử dụng cho người dùng để tạo và đăng bài trên trang web của họ. Tuy nhiên, việc điều chỉnh giao diện của WordPress vẫn đòi hỏi một số kiến thức kỹ thuật cơ bản.
Trong bài viết này, InterData.vn sẽ cung cấp thông tin về giao diện WordPress là gì? Tại sao phải chỉnh sửa giao diện WordPress và sẽ hướng dẫn một cách chi tiết về cách chỉnh sửa giao diện WordPress từ cơ bản đến nâng cao sao cho phù hợp với mọi đối tượng, kể cả những người mới bắt đầu.
Giao diện WordPress là gì?
Giao diện WordPress là giao diện người dùng được sử dụng để quản lý và tạo nội dung trên trang web được xây dựng bằng nền tảng WordPress. Giao diện này cho phép người dùng thực hiện các tác vụ như: viết bài, chỉnh sửa nội dung, tải lên hình ảnh và video, quản lý chủ đề (theme) và plugin, cũng như thay đổi cấu trúc và giao diện của trang web một cách dễ dàng mà không cần kiến thức lập trình sâu.
Giao diện WordPress thường có giao diện đồ họa thân thiện và trực quan để người dùng có thể tùy chỉnh và quản lý trang web của họ một cách thuận tiện.
Tại sao phải chỉnh sửa giao diện WordPress?
Có một số lý do mà người dùng WordPress có thể muốn chỉnh sửa giao diện của trang web của họ:
- Thích nghi với mục đích cụ thể: Chỉnh sửa giao diện giúp bạn tạo ra một trải nghiệm tùy chỉnh để phù hợp với mục tiêu và đối tượng của trang web của bạn.
- Tạo thương hiệu riêng: Chỉnh sửa giao diện cho phép bạn tạo ra một thiết kế và trải nghiệm độc đáo, thể hiện thương hiệu và phong cách riêng của bạn, giúp trang web của bạn nổi bật trong đám đông.
- Tối ưu hóa trải nghiệm người dùng: Bằng cách chỉnh sửa giao diện, bạn có thể tối ưu hóa trang web để cải thiện trải nghiệm người dùng, làm cho nó dễ sử dụng và hấp dẫn hơn.
- Tăng tốc độ và hiệu suất: Chỉnh sửa giao diện có thể giúp bạn loại bỏ mã không cần thiết, tối ưu hóa hình ảnh và cải thiện tốc độ tải trang web, điều này có thể làm tăng hiệu suất và SEO của trang web.
- Đáp ứng thiết bị di động: Chỉnh sửa giao diện để làm cho trang web phản ánh tốt trên các thiết bị di động và tablet, cải thiện trải nghiệm của người dùng trên các nền tảng khác nhau.
- Đáp ứng yêu cầu cụ thể: Sửa đổi giao diện cho phép bạn thêm các tính năng hoặc chức năng cụ thể mà bạn cần cho trang web của mình, bằng cách sử dụng các plugin hoặc tùy chỉnh mã nguồn.
Vì vậy, chỉnh sửa giao diện WordPress hiệu quả giúp bạn tạo ra một trang web độc đáo, phù hợp với mục tiêu của bạn và tối ưu hóa giao diện Website WordPress giúp bạn cải thiện chất lượng trải nghiệm của người dùng.
Cần làm những gì để chỉnh sửa giao diện WordPress?
Để bắt đầu chỉnh sửa giao diện WordPress, trước tiên bạn cần sẵn sàng với các thông tin sau trước khi tiếp tục đến hướng dẫn chi tiết ở phần dưới:
- Địa chỉ URL quản trị trang web WordPress của bạn (Ví dụ: tenwebsite.com/wp-admin/).
- Thông tin đăng nhập của tài khoản quản trị.
- Đảm bảo rằng bạn đã cài đặt và sử dụng Gutenberg (đối với WordPress Block Editor).
- Sử dụng các công cụ như Page builder (ví dụ: Divi hoặc Elementor) là một phương tiện hiệu quả để tùy chỉnh giao diện trang web mà không cần phải viết mã code trên phần giao diện người dùng (front-end).
Cách chỉnh sửa giao diện wordpress cơ bản
Các chỉnh sửa cụ thể trên giao diện của Theme WordPress có thể bao gồm việc thay đổi font chữ, màu nền, hình ảnh và nhiều yếu tố khác trên trang web của bạn, tạo ra sự độc đáo và phong phú cho trang web của bạn.
Tất cả những điều này có thể được thực hiện một cách dễ dàng, và bạn có thể tham khảo hướng dẫn bên dưới để biết thêm chi tiết:
Các tùy chỉnh giao diện WordPress chính
Customize Appearance là tính năng mặc định có sẵn trong WordPress, giúp người dùng dễ dàng điều chỉnh những yếu tố cơ bản liên quan đến ngoại hình của trang web của họ.
Để bắt đầu quá trình chỉnh sửa, trước tiên bạn cần truy cập vào Dashboard của trang web. Ở phần menu bên phải, hãy nhấp vào Appearance => Customize. Các mục chính dành cho chỉnh sửa Theme WordPress sẽ hiển thị và chúng có thể khác nhau tùy theo giao diện cụ thể.
Các giao diện miễn phí thường đi kèm với tính năng tùy chỉnh cơ bản, bao gồm: Colors, Header Image, Background Image, Menus, Widgets, Homepage Setting, Additional CSS.
Còn các giao diện trả phí thường cung cấp nhiều tùy chọn tùy chỉnh giao diện WordPress phức tạp hơn. Ví dụ: Bạn có thể có sẵn các tùy chọn như: General, Topbar, Logo and Header Option, Features Slider, Featured Video Background, Other Layout,…
Cách chỉnh sửa Identify của Theme WordPress
Dưới đây là hướng dẫn để chỉnh sửa tên trang web hoặc tagline – mô tả ngắn dưới tiêu đề. Ngoài ra, trong phần xác định (Identify), người dùng có thể upload hoặc thay đổi hình ảnh logo của trang web. Ngay cả các icon nhỏ trên thanh trình duyệt cũng có thể được tùy chỉnh.
Tuy nhiên, khi bạn tiến hành chỉnh sửa Theme WordPress này, hãy lưu ý kích thước của hình ảnh bạn sử dụng. Tất cả nên tuân theo hướng dẫn của hệ thống, ví dụ như biểu tượng (icon) cần phải có hình dạng vuông, với kích thước tối thiểu là 512px*512px.
Cách chỉnh sửa Background Image
Để thay đổi hình nền cho trang web, bạn có thể tuân theo hướng dẫn dưới đây. Có hai phương pháp để làm điều này, bao gồm:
- Lựa chọn kích thước ảnh cho giao diện của trang web có sự đánh đổi giữa hiển thị nổi bật và tốc độ tải trang.
- Việc sử dụng hình ảnh lớn sẽ làm cho giao diện trang web trở nên hấp dẫn và ấn tượng hơn. Tuy nhiên, điều này cũng có thể làm tăng thời gian tải trang, gây ra sự chậm trễ trong trải nghiệm của người dùng.
- Nếu bạn sử dụng ảnh có kích thước nhỏ và ghép chúng lại theo mẫu (Pattern) hoặc sử dụng các hình vẽ (Textures), trang web sẽ tải nhanh hơn, nhưng giao diện có thể trở nên ít ấn tượng hơn. Bạn có thể tham khảo và tải ảnh chất lượng từ các nguồn như: Pixabay, Awwwards, Topal, tùy theo nhu cầu của bạn.
Trong quá trình chỉnh sửa Theme WordPress này, bạn hoàn toàn linh hoạt để điều chỉnh và sử dụng ảnh một cách tùy ý dựa trên mục tiêu và phong cách của trang web của mình.
Cách tùy chỉnh Menu và mục thông tin Widget
Đầu tiên, trong phần tùy chỉnh Menu, bạn sẽ thực hiện thao tác với một số mục quan trọng như:
- Chức năng “Chỉnh sửa Menu” (Edit Menus) là nơi bạn có thể dễ dàng chỉnh sửa menu, thêm mới hoặc xóa đi các liên kết và mục menu.
- Phần “Quản lý Vị trí” (Manage Location) cho phép bạn tùy chỉnh vị trí hiển thị của menu theo mong muốn của bạn. Menu có thể được đặt ở bên trái hoặc bên phải, phía trên hoặc phía dưới chân trang, tùy thuộc vào thiết kế và cấu trúc trang web của bạn.
- Trong phần “Chọn menu để chỉnh sửa” (Select a menu to edit), bạn có thể dễ dàng chọn loại menu phù hợp với trang web của mình. Chỉ cần nhấp vào menu cần chỉnh sửa và sau đó chọn “Chọn” (Select), bạn đã hoàn thành quá trình chỉnh sửa menu một cách thành công.
Bước thứ hai, chúng ta sẽ thảo luận về việc tùy chỉnh Widget – mục bổ sung thông tin cho trang web của bạn. Với mỗi giao diện Theme khác nhau, kiểu Widget cung cấp sẽ khác nhau. Vì vậy, để chỉnh sửa các Widget trong Theme WordPress, bạn cần trước tiên truy cập vào trang quản trị Dashboard.
Sau đó, hãy chọn Appearance => và nhấp vào mục Widgets, hệ thống sẽ hiển thị các tùy chọn để bạn điều chỉnh. Nhu cầu thay đổi các Widget của bạn thường tương ứng với 3 mục cụ thể sau:
- Available Widgets: Đây là các Widget đã được cung cấp sẵn trong Theme của bạn.
- Vị trí Widget: Bạn có thể chọn nơi hiển thị các Widget, ví dụ như Sidebar – cột menu bên phải, bên trái hoặc phía dưới chân trang.
- Inactive Widgets: Đây là khu vực “tạm lưu” các Widget mà bạn đã tạo ra nhưng không muốn sử dụng tại thời điểm đó. WordPress sẽ lưu lại các thiết lập của chúng và bạn có thể dễ dàng kéo và thả lại các Widget này vào vị trí mong muốn khi cần.
Cách chỉnh sửa Color trong Theme WordPress
Phần này được sử dụng để thực hiện việc điều chỉnh màu sắc của trang web của bạn, bao gồm các khía cạnh sau:
- Màu sắc của giao diện.
- Màu nền của trang web.
- Màu sắc của các liên kết.
- Màu sắc của văn bản chính trên trang web.
- Màu sắc của văn bản phụ trên trang web.
Những thay đổi về màu sắc này có thể giúp bạn tạo ra một giao diện trang web thú vị và phù hợp với phong cách và mục tiêu của bạn.
Cách tùy chỉnh Header Image
Head Image là hình ảnh hiển thị ở đầu trang web của bạn. Để chỉnh sửa phần này, bạn cần chọn một hình ảnh có kích thước phù hợp. WordPress đề xuất kích thước tối ưu cho hình đầu trang là 1200px x 280px.
Người dùng cần tuân thủ quy tắc này để duy trì tính thẩm mỹ của các tùy chỉnh trên giao diện của chủ đề. Bạn có thể sử dụng các Plugin nén ảnh để đảm bảo rằng hình ảnh đạt đúng kích thước được đề xuất.
Cách chỉnh sửa giao diện WordPress sử dụng CSS
CSS được sử dụng để điều chỉnh các khía cạnh ngoại hình của trang web như: kích thước chữ, màu chữ, đường viền, màu nền và nhiều yếu tố khác. Bạn có thể thực hiện các chỉnh sửa như sau:
Bước 1: Tìm kiếm mã CSS của thành phần bạn muốn chỉnh sửa trên trang web. Bạn có thể dễ dàng làm điều này bằng cách sử dụng tính năng “Inspect” trong Google Chrome. Cụ thể, truy cập vào trang web bạn muốn thay đổi giao diện, sau đó nhấp chuột phải và chọn “Inspect“.
Bước 2: Nhấp vào biểu tượng dấu mũi tên ở góc phải của cửa sổ “Inspect“.
Bước 3: Chọn phần tử bạn muốn chỉnh sửa trên trang web. CSS code sẽ hiển thị trong tab “Styles“. Bạn có thể sao chép code này. Các thông số mà bạn có thể chỉnh sửa bao gồm: font chữ, kích thước chữ, màu chữ, kiểu chữ in hoặc thường.
Bước 4: Thay đổi các thông số trong cửa sổ “Inspect” và kiểm tra để đảm bảo rằng các chỉnh sửa phù hợp với nhu cầu của bạn.
Bước 5: Để áp dụng tùy chỉnh cho phần tử trên trang web, truy cập vào giao diện Dashboard, chọn Appearance => Customize => Additional CSS. Tìm CSS code của phần tử bạn muốn chỉnh sửa và dán CSS code mới mà bạn đã chỉnh sửa để thay thế. Cuối cùng, nhấp vào nút “Publish” khi bạn đã hài lòng với các thay đổi.
Cách chỉnh sửa giao diện wordpress bằng code nâng cao
Tùy chỉnh menu chính
Thường thì, trong menu chính, bạn sẽ tìm thấy các danh mục quan trọng và lớn của trang web. Để chỉnh sửa menu chính, trước hết, bạn cần mở tệp header.php.
Thao tác trên header.php
Tìm kiếm đoạn code được hiển thị menu chính đã được build sẵn:
<!-- nav -->
<nav class="nav" role="navigation">
<?php html5blank_nav(); ?>
</nav>
<!-- /nav -->
Sau đó, bạn hãy cắt đoạn mã này và dán nó bên ngoài thẻ div có class là “wrapper“. Hành động này được thực hiện để đưa menu lên đầu trang và hiển thị nó trên toàn bộ màn hình.
<!-- nav -->
<nav class="nav" role="navigation">
<?php html5blank_nav(); ?>
</nav>
<!-- /nav -->
<!-- wrapper -->
<div class="wrapper">
Tiếp tục mở phần code ở trên và thêm một thẻ div mới với class là “page-width” vào. Hành động này giúp căn giữa menu trên trang web.
<!-- nav -->
<nav class="nav" role="navigation">
<div class="page-width">
<?php html5blank_nav(); ?>
</div>
</nav>
<!-- /nav -->
Khi bạn đã hoàn thành thao tác, hãy nhớ lưu lại. Nếu menu vẫn chưa được căn giữa màn hình, bạn có thể tiếp tục bằng cách mở tệp custom-style.css trong thư mục con và tìm kiếm class .wrapper.
wrapper {
width: 1020px; /* Do rong cua trang la 1020px */
}
Thêm class .page-width vào đoạn code bên trên, chung với class .wrapper:
wrapper, .page-width {
width: 1020px; /* Do rong cua trang la 1020px */
}
Các thao tác trên custom-style.css
Bước tiếp theo, bạn có thể tạo menu cấp 2 bằng cách sử dụng tính năng tùy chỉnh Menu trên Dashboard. Sau đó, để điều chỉnh cách menu cấp 2 hiển thị, hãy tìm đoạn code sau trong tệp custom-style.css:
nav .menu li {
display: inline; /* Hien thi tren cung mot hang */
}
.nav .menu a {
color: rgba(255, 255, 255, 0.75); /* Mau chu cua duong dan tren menu */
display: inline-block; /* Hien thi cung hang va nhay xuong hang khi het cho */
font-size: 13px;
font-weight: bold; /* Dinh dang kieu chu in dam */
padding: 20px;
text-transform: uppercase; /* Luon luon xuat chu IN HOA ra man hinh */
}
.nav .menu a:hover {
text-decoration: underline /* Gach chan khi dua chuot ngang qua */
}
Thay nguyên đoạn code css bên trên thành như bên dưới:
nav .menu li, .nav li {
display: inline-block; /* Hien thi tren cung mot hang */
vertical-align: top;
position: relative;
}
.nav .menu a, .nav li a {
color: rgba(255, 255, 255, 0.75); /* Mau chu cua duong dan tren menu */
display: inline-block; /* Hien thi cung hang va nhay xuong hang khi het cho */
font-size: 13px;
font-weight: bold; /* Dinh dang kieu chu in dam */
padding: 20px;
text-transform: uppercase; /* Luon luon xuat chu IN HOA ra man hinh */
}
.nav .menu a:hover, .nav li a:hover {
text-decoration: underline /* Gach chan khi dua chuot ngang qua */
}
.nav ul ul {
background-color: #CC3300;
display: none;
left: 0;
min-width: 180px;
position: absolute;
top: 100%;
z-index: 9999;
}
.nav li li {
display: block;
}
.nav li.menu-item-has-children:hover > ul {
display: block;
}
.nav li li:hover {
background-color: #B72D00;
}
Qua các bước bạn đã hoàn thành quá trình tạo menu cấp 2 cho trang web của bạn bằng WordPress.
Tùy biến hiển thị xem bài viết
Thao tác trên file index.php
Trước hết, bạn cần mở tệp index.php và loại bỏ dòng code sau:
<h1><?php _e( 'Latest Posts', 'html5blank' ); ?></h1>
Dòng code này thường không cần thiết đối với một số trang web, nhưng nếu bạn cảm thấy nó hữu ích, bạn có thể giữ lại nó.
Sau đó, tiếp tục mở tệp custom-style.css và tìm đoạn code sau:
main section h1 {
display: none; /* An di dong chu Latest Posts */
}
Chỉnh sửa đoạn code như sau để đảm bảo tiêu đề hiển thị khi người dùng xem bài viết:
main section h1 {
display: block;
}
Thao tác trên file custom-style.css
Tiếp theo, bạn có thể cá nhân hóa phần khung bình luận và nội dung bình luận để làm cho trang web của bạn trở nên hấp dẫn hơn. Để làm điều này, hãy mở tệp custom-style.css và thêm đ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à những thẻ HTML mặc định
Để tạo kiểu cho thanh sidebar, bạn không cần phải sửa đổi quá nhiều trong mã nguồn của giao diện. Thường chỉ cần thêm một số đoạn code CSS để làm cho sidebar trở nên sắp xếp gọn gàng và thẩm mỹ hơn.
Thao tác trên file custom-style.css
Hãy mở tập tin custom-style.css lên và thêm vào đoạn code sau:
.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;
}
Cuối cùng, để tùy chỉnh kiểu dáng CSS cho các thẻ HTML trên trang web của bạn, bạn cần thêm các dòng code sau vào phần đầu của tệp custom-style.css:
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;
}
Tóm lại, WordPress là một nền tảng quản lý nội dung mạnh mẽ, cho phép bạn tùy chỉnh giao diện mà không cần phải am hiểu về mã code, HTML,… Điều này giúp bạn có quyền kiểm soát tối ưu trang web của mình.
Bạn có thể bắt đầu sử dụng WordPress ngay hôm nay, chỉ cần tuân theo hướng dẫn chi tiết về việc chỉnh sửa giao diện WordPress ở trên và thực hiện những sửa đổi ban đầu cho trang web WordPress của bạn.
Dưới đây là hướng dẫn chi tiết về việc chỉnh sửa giao diện WordPress hiệu quả nhất, đặc biệt dành cho người sử dụng website. InterData.vn hy vọng rằng thông qua chia sẻ trên, bạn sẽ hiểu được khái quát về giao diện WordPress là gì và tại sao cần chỉnh sửa giao diện WordPress. Bạn có thể tự tạo ra một giao diện trang web đơn giản và hấp dẫn theo ý muốn của bạn ngay.