Để 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é!
1. Cách chỉnh sửa theme trong wordpress cơ bản
1.1. Các tùy chỉnh chí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:
- Colors
- Header Image
- Background Image
- Menus
- Widgets
- Homepage Setting
- Additional CSS
Theme Twenty Seventeen (Miễn phí) sẽ có các tùy chỉnh bao gồm:
- Site Identity
- Colors
- Header Media
- Menus
- Widgets
- Homepage Settings
- Theme Options
- Additional CSS
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:
1.2. Cách tùy chỉnh Site Identity của một theme WordPress
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).
1.2. Cách tùy chỉnh Background Image của theme WordPress
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 một hình ảnh kích thước đầy đủ cho nền của trang web. Ưu điểm của nó là giúp giao diện website trông nổi bật và chất lượng. Tuy nhiên, hình ảnh lớn khiến web tải chậm hơn đối với người dùng lần đầu.
Để 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
- Chọn những hình ảnh có kích thước nhỏ và ghép chúng lại với nhau để bao phủ toàn bộ giao diện web (hoa văn, họa tiết). Ưu điểm của phương pháp này là giúp web tải nhanh hơn, tuy nhiên hình ảnh thường không bắt mắt bằng những hình ảnh có dung lượng lớn. Bạn có thể vào Toptal hoặc Transparenttextures.com để tìm chúng.
1.3. Cách tùy chỉnh menu và tiện ích của một theme WordPress
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:
- Tùy chỉnh menu
Đầ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:
- Edit Menus: Đây là nơi bạn có thể chỉnh sửa menu (menu), thêm, xóa liên kết và tiêu đề, v.v.
- Manage Locations: Trong phần này, bạn có thể đặt menu ở các vị trí mà theme WordPress cho phép. Các vị trí đó thường ở trên cùng, bên trái, bên phải hoặc cuối trang.
- Select a menu to edit: Một trang web có thể chứa nhiều menu khác nhau. Muốn chỉnh sửa menu nào thì bạn chọn menu đó tại đây và bấm vào nút Chọn bên cạnh rồi thực hiện các thay đổi cần thiết.
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:
- Pages: Các trang trên trang web của bạn.
- Posts: Bài đăng trên trang web của bạn.
- Custom Links: Các liên kết tùy chỉnh (miễn phí) mà bạn muốn thêm vào menu.
- Categories: Các danh mục (thư mục) trên trang web của bạ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”.
1.4. Tùy chỉnh tiện ích con – chỉnh sửa theme trong wordpress cơ bản và nâng cao
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:
- Các widget có sẵn (Available Widgets): Các widget mà chủ đề cung cấp có sẵn.
- Vị trí Widget: Vị trí mà tiện ích sẽ được đặt trên 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 nhưng không muốn sử dụng nữa. WordPress sẽ ghi nhớ các cài đặt trước đó của nó. Bất cứ khi nào bạn muốn sử dụng lại, bạn chỉ cần kéo và thả tiện ích vào vị trí mong muốn và các cài đặt này sẽ giữ nguyên.
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.
1.5. Cách tùy chỉnh Colors của Theme WordPress
Đâ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:
- 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)
1.6. Cách tùy chỉnh Header Image của một Theme WordPress
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.
1.7. CSS – chỉnh sửa theme trong wordpress
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à:
- Font chữ (font-family)
- Cỡ chữ (font-size/font-weight)
- Màu chữ (color)
- Dạng chữ in hay thường (text-transform)
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:
- Trên giao diện Dashboard, vào Appearance -> Customize -> Additional CSS.
- Tìm mã CSS của phần tử bạn muốn thay đổi. Dán mã đã chỉnh sửa mới vào thay thế.
- Sau khi hài lòng, hãy nhấp vào nút Publish.
2. Công cụ chỉnh sửa theme trong wordpress nâng cao
Ở đâ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.
2.1. Xử lý menu chính
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:
<!-- nav --> <nav class="nav" role="navigation"> <?php html5blank_nav(); ?> </nav> <!-- /nav -->
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:
<!-- nav --> <nav class="nav" role="navigation"> <?php html5blank_nav(); ?> </nav> <!-- /nav --> <!-- wrapper --> <div class="wrapper">
Tiếp tục mở mã ở trên và thêm thẻ div với class là page-width để canh giữa menu:
<!-- nav --> <nav class="nav" role="navigation"> <div class="page-width"> <?php html5blank_nav(); ?> </div> </nav> <!-- /nav -->
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:
.wrapper { width: 1020px; /* Do rong cua trang la 1020px */ }
Thêm class .page-width vào đoạn mã trên, cùng 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 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:
.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 việc tạo menu cấp 2 cho trang web WordPress của mình.
2.2 Tùy biến hiển thị xem bài viết
Đầu tiên, mở tệp index.php và xóa dòng mã bên dưới:
<h1><?php _e( 'Latest Posts', 'html5blank' ); ?></h1>
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ã:
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 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:
.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
Để đị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:
/* ============================ * 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; }
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; }
3. Tại sao biết cách sửa code WordPress lại quan trọng?
WordPress là một nền tảng cực kỳ trực quan và thân thiện với người dùng. Có nhiều cách để tùy chỉnh và thay đổi trang web của bạn mà không cần chạm vào một dòng mã nào nhờ các chủ đề và plugin.
Về mặt kỹ thuật, bạn không cần phải truy cập vào bất kỳ tệp hoặc mã nào của trang web để nó hoạt động đầy đủ. WordPress Dashboard, plugin và theme của WordPress đều giúp cho việc điều chỉnh và cá nhân hóa trang web của bạn trở nên nhanh chóng và dễ dàng.
Tuy nhiên, đôi khi bạn có thể muốn triển khai nhiều quyền kiểm soát hơn và thực hiện các tùy chỉnh nâng cao. Có lẽ thay đổi bạn đang cố gắng thực hiện không phải là một tùy chọn với theme hoặc plugin.
Một khả năng khác là trang web của bạn không hoạt động hoặc có một số lỗi khác khiến bạn không thể truy cập Admin Dashboard. Bạn có thể sẽ cần chỉnh sửa mã trong WordPress của mình để khắc phục sự cố.
Trong những trường hợp như vậy, sẽ rất hữu ích nếu bạn biết cách chỉnh sửa mã trong WordPress. Cũng như cách truy cập và sửa đổi mã nguồn khác một cách an toàn và hiệu quả. Bao gồm PHP, CSS và Javascript. Nói một cách đơn giản, hãy tìm hiểu một số vị trí viết mã WordPress cơ bản để giúp bạn kiểm soát và linh hoạt trong việc thiết kế, quản lý và bảo trì WordPress.
Trên đây là 9 cách chỉnh sửa theme trong wordpress cơ bản và nâng cao. Hy vọng compamarketing đã mang đến bạn những thông tin hữu ích trong quá trình quản lý, sử dụng website wordpress. Nếu có bất kì thắc mắc gì, hãy để lại comment bên dưới cho compamarketing nhé! Chúc các bạn thành công và đừng quên theo dõi các bài viết chia sẻ về thủ thuật wordpress của compamarketing.