Cách chỉnh sửa giao diện wordpress dành cho người mới

WordPress đang là phần mềm mở bằng ngôn ngữ PHP được nhiều bạn lập trình biết đến. Tuy nhiên, để chỉnh sửa giao diện Worpress vẫn cần những bí kíp cơ bản và nâng cao. Trong bài viết này, Hostify.vn sẽ chia sẻ chi tiết Cách chỉnh sửa giao diện WordPress khác nhau cũng như cách để thêm hoặc thay đổi mọi thứ trên trang web WordPress dành cho người mới bắt đầu.

WordPress là gì?

giao-dien-wordpress
WordPress là gì?

WordPress là một mã nguồn mở bằng ngôn ngữ PHP để hỗ trợ tạo blog cá nhân, và được rất nhiều người sử dụng ủng hộ về tính dễ sử dụng, nhiều tính năng hữu ích. 

Đây là ngôn ngữ lập trình website thông dụng nhất hiện tại và được ra mắt lần đầu tiên vào ngày 27/5/2003 bởi tác giả Matt Mullenweg, Mike Little.

Cách chỉnh sửa giao diện WordPress cơ bản

Các tùy chỉnh giao diện chính.

Bạn có thể tùy chỉnh giao diện bằng chức năng Customize Appearance có sẵn trên WordPress. Customize Appearance hay còn gọi là chỉnh sửa giao diện. Đây là chức năng mặc định đã có sẵn trên WordPress nên chúng ta không cần phải cài thêm bất kỳ Plugin nào. Với chức năng Customize cho phép bạn điều chỉnh những danh mục cơ bản và quan trọng liên quan đến giao diện website.

cach-chinh-sua-giao-dien-wordpress01
Cách chỉnh sửa giao diện WordPress cơ bản

Để bắt đầu sử dụng các tùy chỉnh các giao diện (theme) trong WordPress, trước tiên bạn cần truy cập vào trang Dashboard của website. Tại vị trí menu bên phải, chọn mục Appearance => mục Customize.

Dù có khá nhiều tùy chỉnh khác nhau nhưng các theme thông thường sẽ có một số chức năng phổ biến sau:

Cách tùy chỉnh giao diện WordPress dựa trên Background Image

Đây được xem là một công cụ để hỗ trợ upload các hình ảnh làm background cho website của bạn.

Có 2 cách để tùy chỉnh các giao diện WordPress liên quan đến hình nền. Bạn cần lưu ý các điểm nổi bật.

Cách 1: Chọn một ảnh kích thước thật lớn để làm background cho trang web.

Cách 2: Chọn ảnh có kích thước nhỏ và ghép chúng lại với nhau để phủ kín toàn bộ giao diện website.

Cách tùy chỉnh Menu và Widget của Theme WordPress

Tại mục Customize, bạn có thể tự điều chỉnh mục Menu và Widget. Bạn có thể tùy chỉnh Menu và Widget thông qua mục Customize hoặc click vào các phần chuyên biệt của nó để tùy chỉnh theme WordPress.

Tùy chỉnh menu

Đầu tiên, bạn truy cập vào admin => Tại giao diện Dashboard, chọn ngay mục Appearance => Click vào Menu.

Hệ thống lúc này sẽ hiển thị các mục để bạn có thể tùy chỉnh menus theo ý muốn.

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:

Muốn tạo menu mới, chọn Create a new menu (bên cạnh nút “Select”)

Bước 1: Tại mục “Edit menu”, click vào dòng chữ “Create a new menu” ở bên cạnh có nút “Select”.

Bước 2: Đặt tên cho menu muốn tạo => Nhấn ngay nút “Create menu”. Sau đó click chọn “Primary Menu” để nó hiện lên trên phần Header của website.

Bước 3: Tích chọn các mục nội dung sẽ có trong menu (ở danh mục nằm phía bên tay trái của giao diện) => Nhấn vào mục “Add to Menu”.

cach-chinh-sua-giao-dien-wordpress02
Cách tùy chỉnh Menu và Widget của Theme WordPress

Ở đây, các mục nội dung sẽ có 4 phần, bao gồm:

Pages: Các trang trên website của bạn.

Posts: Các bài đăng trên website của bạn.

Custom Links: Các liên kết tùy chỉnh (tự do) mà bạn muốn thêm vào menu.

Categories: Các chuyên mục (thư mục) trên website của bạn.

Nếu muốn thêm mục nào, bạn chỉ cần chọn mục đó.

Bước 4: Sắp xếp lại các thứ tự hiển thị của các tab trên menu tùy ý.

Bước 5: Lưu menu bằng cách nhấn nút “Save Changes”.

Tùy chỉnh Widget

Widget là các mục thông tin bổ sung cho website thường nằm ở bên phải hoặc phía chân trang. Các loại theme khác nhau có thể cung cấp các kiểu widget khác nhau. Để tùy chỉnh theme WordPress Widget, đầu tiên, ở giao diện Dashboard, bạn cần chọn mục Appearance => Click Widget.

Lúc đó, 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, trang Widget gồm có 3 mục chính:

  • Các Widget sẵn có (Available Widgets): Các widget mà theme cung cấp sẵn.
  • Vị trí Widget: Vị trí mà widget sẽ được đặt trong trang (ví dụ: sidebar – cột menu bên tay phải/bên trái hoặc phía chân trang – footer).
  • Widget không sử dụng (Inactive Widget): Đây là khu vực chứa các widget mà bạn đã tạo ra nhưng không muốn sử dụng nữa. WordPress sẽ ghi nhớ các thiết lập trước đó của nó. Bất cứ khi nào muốn sử dụng lại, bạn chỉ cần kéo thả widget vào vị trí mong muốn và những thiết lập này sẽ giữ nguyên.

Cách thêm widget vào trang cũng rất đơn giản, bạn chỉ cần click giữ chuột trái và kéo thả widget vào vị trí mà mình muốn.

Cách tùy chỉnh Colors của Theme WordPress

Tại khu vực Colors, bạn có thể tùy chỉnh màu sắc cho nhiều phần của website
cach-chinh-sua-giao-dien-wordpress03
Cách tùy chỉnh Colors của Theme WordPress

Đây là khu vực bạn có thể tùy chỉnh màu sắc cho trang. Một số điều chỉnh bạn có thể thực hiện bao gồm:

  • Background color
  • Page background color
  • Link color
  • Main text color (màu chữ chính trên website)
  • Secondary text color (màu chữ phụ trên website)

Cách tùy chỉnh Header Image của Theme WordPress 

Header Image cũng là một mục WordPress có thể tuỳ chỉnh.

Khi upload Header Image (ảnh ở phần đầu trang web), bạn cần lưu ý chọn đúng kích cỡ mà WordPress gợi ý (ví dụ: kích cỡ tối ưu là 1200px*280px).

Nếu như hình ảnh bạn chọn kích thước không tối ưu thì dù vẫn hiển thị nhưng những tùy chỉnh theme WordPress giao diện sẽ thiếu tính thẩm mỹ. Do đó, người dùng có thể cân nhắc dùng plugin nén ảnh để tối ưu dung lượng cho Header Image.

CSS

Bằng tiện ích Inspect của Google Chrome, bạn có thể dùng cách này để dò CSS.

Ngoài ra, CSS được dùng để tùy chỉnh những vấn đề bên ngoài của website, có thể tùy chỉnh CSS của website theo các bước sau:

  • Bước 1: Dò CSS code của các thành phần bạn muốn điều chỉnh trên website bằng cách chọn mục “Inspect” của Google Chrome:
  • Vào trang web muốn thay đổi giao diện => Nhấp chuột phải, chọn mục “Inspect”.
  • Bước 2: Click ngay chuột vào biểu tượng có dấu mũi tên ở góc phải cửa sổ Inspect (hoặc bấm tổ hợp phím Ctrl + Shift + C).
  • Bước 3: Click vào đối tượng muốn chỉnh sửa trên website. Lúc này, CSS code của đối tượng sẽ hiện lên ở tab Styles (bạn có thể nhấp chuột và copy đoạn mã code của phần tử mà mình muốn thay đổi).

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 đúng theo ý mình muốn.

Bước 5: Chính thức tùy chỉnh phần tử trên website:

  • Trên giao diện Dashboard, vào mục Appearance => Customize => Additional CSS.
  • Tìm đoạn CSS code của phần tử bạn muốn thay đổi, bạn sẽ dán code mới đã chỉnh sửa vào để thay thế.
  • Sau khi thấy phần tử ưng ý thì bấm vào ngay nút Publish.

Cách tùy chỉnh giao diện WordPress nâng cao

Có thể thực hiện tùy chỉnh giao diện nâng cao bằng cách sửa code trong các file css và php. Tại đây, bạn cần có kiến thức nhất định và chuyên sâu về lập trình để thao tác. Để tác động tới các file ở hosting hoặc server, điều đầu tiên bạn cần biết về giao thức FTP cũng như các cách thức thao tác file trên hosting.

 

giao-dien-wordpress
Cách tùy chỉnh giao diện WordPress nâng cao

Xử lý menu chính

Menu chính thường chứa các chuyên mục lớn, quan trọng của trang. Để xử lý menu chính, đầu tiên, bạn cần mở tập tin header.php lên. Sau đó, bạn tìm kiếm đoạn code hiển thị menu chính đã được build sẵn: <nav class=“nav” role=“navigation”>         <?php html5blank_nav(); ?>

Tiếp đến, cắt đoạn code này và đặt ở vị trí ngoài thẻ div với class là wrapper. Mục đích chính của việc này là đưa menu lên đầu trang và hiển thị full màn hình:

<nav class=“nav” role=“navigation”>         <?php html5blank_nav(); ?> <div class=“wrapper”>

Tiếp tục mở phần code ở trên lên và thêm vào thẻ div với class là page-width để canh giữa menu:

<nav class=“nav” role=“navigation”> <div class=“page-width”>         <?php html5blank_nav(); ?>

Lưu lại sau khi hoàn thành thao tác. Nếu menu của bạn vẫn chưa được canh giữa, tiếp tục mở tập tin custom-style.css trong thư mục con và tì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 */
}

Tiếp tục, 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 hiển thị của menu cấp 2, hãy tìm trong tập tin custom-style.css dòng code sau:

.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;
}

Như vậy, bạn đã hoàn thành xong việc tạo menu cấp 2 cho website WordPress.

Tùy biến hiển thị xem bài viết

Tuỳ biến hiển thị xem bài viết trên website WordPress. Đầu tiên, hãy mở tập tin index.php và xóa dòng code bên dưới:
<?php _e( 'Latest Posts', 'html5blank' ); ?>

Dòng code này thật sự không cần thiết với một số website nhưng nếu cảm thấy hữu dụng thì bạn có thể để lại.

Tiếp theo, mở tập tin custom-style.css lên, tìm đoạn code:

main section h1 {
        display: none; /* An di dong chu Latest Posts */
}

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:

main section h1 {
        display: block;
}

Sau đó, bạn có thể tùy chỉnh khung bình luận, nội dung bình luận để trang hiển thị bài viết trông bắt mắt hơn. Hãy mở tập tin custom-style.css lên và thêm vào đ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;
}

Kết luận

Qua bài viết trên, bạn có thể biết thêm được Cách chỉnh sửa giao diện wordpress chi tiết cho người mới.Bạn có thể thao tác chỉnh sửa giao diện wordpres từ cơ bản đến nâng cao. Chúc bạn thao tác cũng như thực hành trên webite của mình tốt nhé.

Đọc thêm:

Các Lỗi Thường Gặp Khi Sử Dụng Elementor

Hướng dẫn cách tạo web trên wordpress đơn giản nhất cho người mới

Thông tin liên hệ tư vấn