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 Wordpress vẫn cần những thủ thuật 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 để bổ sung hoặc thay đổi mọi thứ trên trang web WordPress dành cho người mới bắt đầu Show
Mục Lục
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 trang web thông dụng nhất hiện nay 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ảnCác tùy chọn chỉnh sửa giao diện chínhBạn có thể tùy chỉnh giao diện bằng chức năng Tùy chỉnh Giao diện có sẵn trên WordPress. Tùy chỉnh Giao diện 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 đặt thêm bất kỳ Plugin nào. Với chức năng Tùy chỉnh cho phép bạn điều chỉnh các danh mục cơ bản và quan trọng liên quan đến trang web giao diện Để bắt đầu sử dụng các tùy chỉnh giao diện (chủ đề) trong WordPress, trước tiên bạn cần truy cập vào trang Bảng điều khiển của trang web. Tại vị trí menu bên phải, chọn mục Giao diện => mục Tùy chỉnh Dù có nhiều tùy chỉnh khác nhau nhưng các chủ đề 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 Hình nềnĐây được coi là một công cụ hỗ trợ tải lên các hình ảnh làm nền cho trang web của bạn Có 2 cách để tùy chỉnh giao diện WordPress liên quan đến hình nền. You have to save the floating point Cách 1. Chọn một kích thước ảnh thật lớn để làm nền 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 để bao phủ toàn bộ giao diện trang web Cách tùy chỉnh Menu và Widget của Theme WordPressTại mục Tùy chỉnh, 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 Tùy chỉnh hoặc nhấp vào các phần chuyên biệt của nó để tùy chỉnh chủ đề WordPress Menu tùy chỉnhĐầu tiên, bạn truy cập vào quản trị => Tại giao diện Dashboard, chọn ngay mục Giao diện => 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 các menu 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 Tạo menu mới (Bên cạnh nút “Select”) Bước 1. Tại mục “Chỉnh sửa menu”, nhấp vào dòng chữ “Tạo menu mới” ở bên cạnh có nút “Chọn” Bước 2. Đặt tên cho menu muốn tạo => Click ngay nút “Tạo menu”. Sau đó nhấp chọn “Primary Menu” để nó hiện lên trên phần Header của trang web Bước 3. Tích chọn các mục nội dung sẽ có trong menu (tại 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” Ở đây, các mục nội dung sẽ có 4 phần, bao gồm trang. Các trang trên trang web của bạn bài viết. Các bài đăng trên trang web của bạn Liên kết tùy chỉnh. Các tùy chỉnh liên kết (tự do) mà bạn muốn thêm vào menu Thể loại. Các chuyên mục (thư mục) trên trang web của bạn Nếu muốn thêm bất kỳ 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 chọn Bước 5. Lưu menu bằng cách nhấn nút “Lưu thay đổi” Widget tùy chỉnhWidget là các mục thông tin bổ sung cho trang web thường nằm ở bên phải hoặc phía chân trang. Các loại chủ đề khác nhau có thể cung cấp các loại tiện ích con 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 Giao diện => Nhấp vào 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 bao gồm 3 mục chính
Cách thêm widget vào trang cũng rất đơn giản, bạn chỉ cần nhấn giữ chuột trái và kéo thả widget vào vị trí mình muốn Cách tùy chỉnh Màu sắc của Chủ đề WordPressTại khu vực Màu sắc, bạn có thể tùy chỉnh màu sắc cho nhiều phần của trang web Đâ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
Cách tùy chỉnh Header Image của Theme WordPressHình ảnh tiêu đề cũng là một mục WordPress có thể tùy chỉnh Khi tải lên Hình ảnh tiêu đề (ảnh ở đầu trang web), bạn cần lưu ý chọn đúng kích thước mà WordPress gợi ý (ví dụ:. max size is 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 chủ đề WordPress giao diện sẽ thiếu tính thẩm định. Do đó, người dùng có thể cân nhắc việc sử dụng plugin nén ảnh để tối ưu dung lượng cho Header Image CSSBằng tiện ích Kiểm tra của Google Chrome, bạn có thể sử dụng cách này để khám phá CSS Ngoài ra, CSS được sử dụng để tùy chỉnh các vấn đề bên ngoài của trang web, có thể tùy chỉnh CSS của trang web theo các bước sau
Bước 4. Thay đổi các thông số trên cửa sổ Kiểm tra và xem bản xem trước trực tiếp để đảm bảo các chỉnh sửa đúng theo ý muốn của mình Bước 5. Chính thức tùy chỉnh phần tử trên trang web
Cách tùy chỉnh giao diện nâng cấp WordPressCó thể thực hiện tùy chỉnh nâng cao giao diện bằng cách chỉnh sửa mã trong tệp css và php. Tại đây, bạn cần có kiến thức định sẵn và chuyên sâu về lập trình để thao tác. Để tác động tới các tệp trên máy chủ lưu trữ 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ách thức thao tác tệp trên máy chủ
Menu xử lý chínhMenu 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ở tiêu đề tệp. php lên. Sau đó, bạn tìm đoạn mã tìm kiếm hiển thị menu chính đã được xây dựng sẵn. Tiếp theo, cắt đoạn mã này và đặt ở vị trí ngoài thẻ div với lớp là trình bao bọc. Mục đích chính của công việc này là menu được đưa lên đầu trang và hiển thị toàn màn hình Tiếp tục mở phần mã ở trên và thêm vào thẻ div với lớp là chiều rộng trang để canh giữa menu 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, hãy tiếp tục mở tệp theo kiểu tùy chỉnh. css trong thư mục con và tìm lớp. vỏ bánh .wrapper { width: 1020px; /* Do rong cua trang la 1020px */ } Thêm lớp. page-width to side-đoạn mã bên trên, chung với class. vỏ bánh .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 Bảng điều khiển. Sau đó, để điều chỉnh cách hiển thị của menu cấp 2, hãy tìm trong tệp custom-style. css line code after .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 đoạn mã 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 tất việc tạo menu cấp 2 cho website WordPress Các biến tùy chỉnh được hiển thị để xem bài viếtnướng biến hiển thị xem bài viết trên trang web WordPress. Đầu tiên, hãy mở tệp index. php và xóa dòng mã bên dưới <?php _e( 'Latest Posts', 'html5blank' ); ?> Dòng mã này thật sự không cần thiết với một số trang web nhưng nếu cảm thấy hữu ích thì bạn có thể lùi lại Next, open custom-style file. css up, tìm đoạn mã main section h1 { display: none; /* An di dong chu Latest Posts */ } Sửa đoạn mã 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 bắt mắt hơn. Please open custom-style file. css up và thêm vào đoạn 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; } Kết luậnQua 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. You can thao tác chỉnh sửa giao diện wordpress 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é |
