Hướng dẫn chỉnh màu background của website wordpress
Plugin thay đổi màu nền của bài đăng, trang và tiện ích con (Change Background Color for Pages, Posts, Widgets). Nhiều bạn hỏi mình về làm sao thay đổi Background cho tùng bài viết, từng trăng hay từng Widgets trong web. Đây cũng là một yêu cầu của khác hàng khi bên mình thiết kế web, qua nhiều ngày tìm hiểu trên mạng và các Plugin hữu ích thì mình đã tim được Plugin giải quết vấn đề này. Đó là Plugin “Change Background Color for Pages, Posts, Widgets” Show
Một plugin WordPress đơn giản cho phép bạn thay đổi màu nền của bài đăng, trang, tiện ích con hoặc toàn bộ nội dung, trên toàn cầu hoặc riêng lẻ. Hướng dẫn cách dùng Plugin1. Cài đặt và kích hoạt plugin. 2. Thay đổi màu nền trên trang cài đặt. Lưu ý rằng bạn có thể cần phải xóa bộ nhớ cache của mình nếu bạn đã thay đổi màu sắc và bạn không nhận thấy bất kỳ thay đổi nào Plugin thay đổi màu nền của Pages, Posts, Widgets trong wordpressPlugin thay đổi màu nền của Pages, Posts, Widgets trong wordpressKết quả bạn xem nhé. Plugin thay đổi màu nền của Pages, Posts, Widgets trong wordpressMột số nhận xét cảu khách hàng Plugin rất dễ sử dụng ngoài ra nó còn cho phép bạn thay đổi hình nền cho toàn bộ trang web hoặc cho các trang / bài đăng cụ thể. Tôi đã phải xóa bộ nhớ cache của mình để xem các thay đổi. Cảm ơn bạn đã nỗ lực của bạn. Mời bạn Cài đặt tài Link dưới đây Change Background Color for Pages, Posts, Widgets Xem thêm: Flipbox Builder – Trình tạo hộp lật 3D cho WordPress Chúc bạn thành công ! Dịch vụ Thiết Kế Web chuyên nghiệp, lập trình App, Marketing Online, quảng cáo Google Ads, Facebook Ads, Zalo Ads...Video Marketing, SEO web, quản trị web, thiết kế logo, profile, catalogue... Để thay đổi giao diện website WordPress, bạn cần biết những tuỳ chỉnh theme Wordpress cơ bản và nâng cao sau: Site Identity, Background Image, Menu, Widget,... Bài viết sau của Mắt Bão sẽ cung cấp cho bạn thông tin cách tùy chỉnh Theme WordPress. Các công cụ tuỳ chỉnh giao diện website WordPress khá dễ sử dụng MỤC LỤC: Bạn muốn thay đổi font chữ, màu nền, hình ảnh background,… trên website WordPress? Với các thao tác tùy chỉnh dưới đây, chúng ta có thể tạo ra một giao diện web đẹp theo ý muốn của mình. Nhìn chung, việc 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. Cách tùy chỉnh giao diện Theme WordPress cơ bảnBạn có thể tùy chỉnh giao diện bằng chức năng Customize Appearance có sẵn trên WordPress Các tùy chỉnh chínhTùy chỉnh giao diện (Customize Appearance) 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 để thực hiện thay đổi. Chức năng Customize cho phép người dùng điều chỉnh những mục cơ bản và quan trọng liên quan đến giao diện của website. Để bắt đầu sử dụng các tùy chỉnh theme 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 Appearance -> Customize. Các mục chính của tính năng tùy chỉnh giao diện sẽ có sự khác nhau, 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í. Các ví dụ tùy chỉnh chính của Theme WordPressChẳng hạn, giao diện Twenty Sixteen (Free) sẽ có các tùy biến gồm:
Theme Twenty Seventeen (Free) sẽ có các tùy biến gồm:
Theme Soladad (trả phí) sẽ có thêm nhiều lựa chọn tùy chỉnh theme WordPress như: General Option, Topbar Option, Logo and Header Option, Features Slider Options, Featured Video Background Options, Other Layout Options,… Dù có 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: Site Identity/Định danh cho siteSite Identity dùng để điều chỉnh tên website, tagline và logo,... Tính năng này thường được sử dụng để điều chỉnh tên của website (site title) và những mô tả ngắn phía dưới tên website (tagline). Bên cạnh đó, Site Identity cũng là nơi để bạn upload, thay đổi hình ảnh logo của trang web và biểu tượng nhỏ nằm ở trên trình duyệt (favicon/site icon). Tuy nhiên khi upload site icon, người dùng cần đảm bảo hình ảnh có kích thước đúng theo gợi ý của hệ thống (ví dụ: site icon phải có hình vuông và kích thước ít nhất 512px*512px). Background Image/Ảnh nềnBackground Image dùng để thay đổi ảnh nền website Tùy chỉnh theme WordPress này là công cụ để upload hình ảnh làm background cho website. Có 2 tùy chỉnh liên quan đến ảnh nền bạn cần lưu ý, đó là:
Menu và WidgetỞ mục Customize, 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 Customize hoặc click vào các phần chuyên biệt của nó để tùy chỉnh theme WordPress. Cách thực hiện như sau: Tùy chỉnh menuCác mục chính cần biếtĐầu tiên, ở giao diện Dashboard, chọn Appearance -> Click Menus. 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. Một số mục chỉnh sửa quan trọng bao gồm:
Từng bước cách tùy chỉnh menu theme WordPressĐể 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 tab “Edit menu”, click 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 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 “Add to Menu”. Ở đây, các mục nội dung sẽ có 4 phầ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 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ấn nút “Save Changes”. Cách tùy chỉnh Widget Theme WordPressCó 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 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. Nhưng có một số widget phổ biến mà hầu như bất cứ theme nào cũng có là: ô tìm kiếm, categories, tags cloud, archives, recent post, recent comments, text, meta, RSS,… Để tùy chỉnh theme WordPress Widget, đầu tiên, ở giao diện Dashboard, bạn cần chọn 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á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 - Màu sắc Theme WordPressTại khu vực Colors, bạn có thể tuỳ 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:
Cách tùy chỉnh Header Image Theme WordPressHeader 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 chọn 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 theme WordPress giao trông vẫ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. Cách tùy chỉnh CSS của Theme WordPressDò CSS bằng tiện ích Inspect của Google Chrome CSS được dùng để tùy chỉnh những vấn đề bên ngoài của website như: cỡ chữ, màu chữ, viền, màu nền,… Bạn có thể tùy chỉnh CSS của website theo các bước sau: Bước 1: Dò CSS code của thành phần bạn muốn điều chỉnh trên website bằng cách sử dụng tiện ích “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 chuột vào biểu tượng 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). Một số thông số bạn có thể chỉnh sửa là:
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:
Cách tùy chỉnh giao diện Theme WordPress nâng cao.jpg) 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 Xử lý menu 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ở tập tin header.php lên. Thao tác trên header.phpTìm kiếm đoạn code hiển thị menu chính đã được build sẵn:
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 của việc này là đưa menu lên đầu trang và hiển thị full màn hình:
``0 ``1 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:
``4
``6
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: ``9 ` `0 ` `1 ` `2 ` `3 ` `0 ` `1 Các thao tác trên custom-style.cssTiế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: ` `6 ` `7 ` `1 ` `9 ``0 ``1 ``2 ``3 ``4 ``5 ` `1 ``7 ``8 ` `1 Thay nguyên đoạn code css bên trên thành như bên dưới: ` /nav >`0 ` /nav >`1 ` /nav >`2 ` /nav >`3 ` `1 ` /nav >`5 ``0 ``1 ``2 ``3 ``4 ``5 ` `1 ` nav >`3 ``8 ` `1 ` nav >`6 ` nav >`7 ` nav >`8 ` nav >`9 ``0 ``1 ``2 ``3 ` `1 ``5 ``6 ` `1 ``8 ``6 ` `1 ` `1 ` `2 ` `1 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ếtTuỳ biến hiển thị xem bài viết trên website Wordpress Thao tác trên file index.phpĐầu tiên, hãy mở tập tin index.php và xóa dòng code bên dưới: ` `4 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: ` `5 ` `6 ` `1 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: ` `5 ``6 ` `1 Thao tác trên file custom-style.cssSau đó, 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: ``1 ``2 ``3 ``4 ` `1 ``6 ``7 ``8 ``9 ` `1 ` /nav >`1 ` /nav >`2 ` /nav >`3 ``3 ` /nav >`5 ` /nav >`6 ` `1 ` /nav >`8 ``2 ``00 ` `1 ``02 ``03 ` `1 ``05 ``06 ``07 ``08 ``09 ``10 ` `1 ``12 ``13 ``14 ` `1 ``16 ``17 ``18 ` `1 ``20 ``21 ``09 ``23 ` `1 ``25 ``26 ``27 ``28 ` `1 ``30 ``26 ` `1 ``33 ``34 ` `1 ``36 ` /nav >`2 ``38 ` `1 ``40 ``41 ` `1 Định dạng sidebar và những thẻ HTML mặc địnhCách định dạng sidebar và những thẻ HTML mặc định không hề khó Để định dạng sidebar, bạn không cần thực hiện nhiều chỉnh sửa trong file code của giao diện. Chủ yếu chỉ cần thêm vào một số đoạn code css để sidebar hiển thị gọn gàng, đẹp mắt hơn. Thao tác trên file custom-style.cssHãy mở tập tin custom-style.css lên và thêm vào đoạn code sau: ``43 ``44 ``45 ``46 ``47 ` `1 ``49 ``41 ` `1 ``52 ``53 ``54 ` `1 ``56 ``57 ``58 ``59 ``60 ``61 ` `1 ``63 ``64 ` `1 ``66 ``67 ``68 ``69 ``8 ``46 ` `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 đầu tập tin custom-style.css các dòng code sau: ``73 ``74 ` `1 ``76 ``77 ``78 ``79 ``80 ` `1 ``82 ``83 ``84 ``46 ` `1 ``87 ``88 ` `1 ``90 ``91 ``92 ``93 ``94 ``95 ``96 ``97 ` `1 ``99 ` `00 ` `01 ` `1 ` `03 ` `04 ` `05 ` `1 ` `07 ` `08 ` `09 ` `1 ` `11 ` `12 ` `13 ` `14 ``94 ` `16 ` `17 ``4 ` `19 ` `20 ` `1 ` `22 ` `23 ``18 ` `00 ` `26 ` `1 Tổng kếtTrên đây là các hướng dẫn cách tùy chỉnh theme dành cho các website sử dụng Hosting WordPress từ cơ bản đến nâng cao rất quan trọng mà mọi người dùng website 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 được cho mình một giao diện đơn giản và đẹp mắt. Chúc bạn thành công! |