Thay đổi màu văn bản css
Để thay đổi giao diện trang web WordPress, bạn cần biết những cách tùy chỉnh theme WordPress cơ bản và nâng cao sau. Nhận dạng trang web, Hình nền, Menu, Widget,… Show
Bạn muốn thay đổi phông chữ, màu nền, hình nền,… trên trang web WordPress? . Nhìn chung, cách tùy chỉnh theme WordPress cũng khá dễ dàng, chỉ cần bạn ghi nhớ và thực hiện theo những hướng dẫn sau đây. Xem video hướng dẫn từng bước tùy chỉnh giao diện WordPress Hướng dẫn tùy chỉnh Theme WordPress cơ bản và nâng cao trong 7 phút. Hosting WordPressMắt BãoCách tùy chỉnh giao diện WordPress cơ bảnBạ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 WordPressCác tùy chỉnh chínhGiao diện tùy chỉnh (Tùy chỉnh giao diện) 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 để thực hiện thay đổi. Chức năng Tùy chỉnh 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ọn chỉnh sửa chủ đề 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 Giao diện -> Tùy chỉnh Các mục chính của tính năng tùy chỉnh giao diện tùy chỉnh sẽ có sự khác biệt, tùy thuộc vào giao diện cụ thể mà bạn chọn trên WordPress. Thông thường các 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 trả phí Chẳng hạn, giao diện Twenty Sixteen (Free) sẽ có các tùy chọn bao gồm
Theme Twenty Seventeen (Free) sẽ có các tùy chọn đi kèm
Chủ đề Soledad (trả phí) sẽ có thêm nhiều lựa chọn tùy chọn tùy chỉnh chủ đề WordPress như. Tùy chọn chung, Tùy chọn thanh trên cùng, Tùy chọn logo và tiêu đề, Tùy chọn thanh trượt tính năng, Tùy chọn nền video nổi bật, Tùy chọn bố cục khác,… 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 Nhận dạng Trang web của Chủ đề WordPressSử dụng Nhận dạng trang web để điều chỉnh tên trang web, khẩu hiệu và logo,…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à các mô tả ngắn bên dưới tên trang web (dòng giới thiệu). Bên cạnh đó, Site Identity cũng là nơi để bạn tải lên, thay đổi hình ảnh logo của trang web và các biểu tượng nhỏ nằm trên trình duyệt (biểu tượng favicon/trang web). 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 đúng theo gợi ý của hệ thống (ví dụ:. biểu tượng trang web phải có hình vuông và kích thước ít nhất là 512px*512px) Cách tùy chỉnh Hình nền của Theme WordPressSử dụng hình nền để thay đổi hình nền trang webCách tùy chỉnh chủ đề WordPress này là công cụ để tải lên hình ảnh làm nền cho trang web Có 2 cách tùy chỉnh Theme WordPress liên quan đến ảnh nền bạn cần lưu ý, đó là
Để chọn ảnh nền sắc nét, chất lượng cao, bạn có thể tìm trên kho ảnh miễn phí Pixabay. com. Ngoài ra, bạn nên tham khảo thêm các ý tưởng sử dụng ảnh có kích thước lớn làm nền cho web tại awwwards. đồng
Tại mục Tùy chỉnh, bạn có thể tự điều chỉnh Menu và Widget Bạn có 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. Cách thức thực hiện như sau Đầu tiên, ở giao diện Dashboard, chọn Giao diện -> Nhấp 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 Một số mục chỉnh sửa quan trọng bao gồm
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”)
Widget tùy chỉnhCó thể thêm bớt Widget trên WordPress bằng cách kéo thảWidget 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. Nhưng có một số widget phổ biến mà hầu như bất cứ chủ đề nào cũng có là. ô tìm kiếm, danh mục, thẻ đám mây, lưu trữ, bài đăng gần đây, nhận xét gần đây, văn bản, meta, RSS,… Để tùy chỉnh theme WordPress Widget, đầu tiên, ở giao diện Dashboard, bạn cần chọn 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ó thể xem chi tiết. Thanh bên WordPress là gì 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 Colors, bạn có thể tùy chỉnh màu sắc cho nhiều phần của websiteĐâ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
Khi tải lên Header Image (ảnh ở phần đầ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 lựa chọn ảnh không có kích thước tối ưu, thì dù vẫn hiển thị nhưng những tùy chỉnh chủ đề WordPress giao diện trông vẫn sẽ thiếu tính thẩm mỹ. 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 CSSDò CSS bằng tiện ích Kiểm tra của Google ChromeCSS được sử dụng để tùy chỉnh các vấn đề bên ngoài của trang web như. chữ, màu chữ, viền, màu nền,… Bạn có thể tùy chỉnh CSS của trang web theo các bước sau
Một số thông số bạn có thể chỉnh sửa là chỉnh sửa
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à phpTạ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ủ hoặc máy chủ lưu trữ, đ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 với tệp trên máy chủ Menu chính thường chứa các 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 đó, 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 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 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ã ________số 8Sử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 0Cách định dạng thanh bên và các thẻ HTML mặc định không khó Để định dạng thanh bên, bạn không cần phải thực hiện nhiều chỉnh sửa trong mã tệp của giao diện. Chủ yếu chỉ cần thêm vào một số đoạn mã css để sidebar hiển thị gọn gàng, đẹp mắt hơn Please open custom-style file. css up và thêm vào đoạn mã sau 1 Cuối cùng, để định dạng css cho các thẻ HTML trên blog, bạn cần thêm vào custom-style file header. css lines code after 2 Tổng kếtBài viết hướng dẫn sử dụng WordPress Kỳ trước. Chủ đề WordPress là gì? the after. Widget là gì? Mắt bão mang đến cho bạn danh sách những Theme WordPress mà bạn nên sử dụng Trên đây là các hướng dẫn cách tùy chỉnh chủ đề WordPress từ cơ bản đến nâng cao rất quan trọng mà mọi người dùng trang web trên nền tảng này đều nên biết. Hy vọng qua bài viết này, bạn đã có thể tự tạo cho mình một giao diện đơn giản và đẹp mắt. Hãy liên hệ ngay với nhà cung cấp dịch vụ cho thuê Hosting WordPress của bạn để được tư vấn kỹ càng hơn nhé. Chúc bạn thành công |