HƯỚNG DẪN CHỈNH SỬA GIAO DIỆN WEBSITE WORDPRESS BẰNG CODE CSS

website wordpress

Chào các bạn! bài viết này mình sẽ hướng dẫn cho các bạn mới xây dựng website WordPress muốn chỉnh sửa một vài giao diện nhỏ. Nhưng bạn lại không biết về code cũng như là không biết sẽ bắt đầu từ đâu.

Đầu tiên bạn phải hiểu, WordPress là nền tảng sáng tạo website được viết bằng ngôn ngữ lập trình PHP, giao diện được viết bằng HTML, CSS, JS. Vậy nếu việc chỉnh sửa một chi tiết nào đó mà WordPress không hỗ trợ, tất nhiên chúng ta phải sửa code nền của WordPress.

Ở bài viết này mình sẽ tập trung hướng dẫn các bạn chỉnh sửa giao diện ở mức độ cơ bản và cụ thể là tác động đến CSS của WordPress. Chúng ta bắt đầu nào!!!

1. CÁC THUỘC TÍNH ĐIỀU CHỈNH ĐẶC ĐIỂM CƠ BẢN CỦA GIAO DIỆN

2. MẸO VIẾT CODE CSS NHANH ĐỂ SỬA GIAO DIỆN TỨC THÌ

3. SỬA GIAO DIỆN WEBSITE WORDPRESS BẰNG CODE CSS

4. CHIA SẺ CÁC TÀI LIỆU HỌC CSS HAY

1. CÁC THUỘC TÍNH ĐIỀU CHỈNH ĐẶC ĐIỂM CƠ BẢN CỦA GIAO DIỆN

Giao diện website chúng ta chú ý đến dạng khối, nó là 1 bảng, một hình ảnh, một khung, một phần nội dung. Chúng đều có dạng khối hay gọi là Block.

Các đặc điểm cơ bản của Block như: dài, cao, màu sắc, viền, màu chữ, khoảng cách với các Block khác.

Các thuộc tính cơ bản trong code CSS:

  • Dài – width (đơn vị thông dụng là px (pixel))
  • Rộng – height (đơn vị thông dụng là px (pixel))
  • Màu nền – background-color (tùy chọn theo tên màu hoặc mã màu)
  • Màu chữ – color (tùy chọn theo tên màu hoặc mã màu)
  • Khoảng cách với các block khác – margin (đơn vị thông dụng là px (pixel))

2. MẸO VIẾT CODE CSS NHANH ĐỂ SỬA GIAO DIỆN TỨC THÌ

Một điều rất hay ở giao diện website là chúng ta có thể xem chúng bằng cách nhấn F12. Sau khi nhấn F12 toàn bộ code HTML, CSS sẽ lộ ra như một ma trận đối với những người mới tiếp cận.

Bắt tay vào việc thôi!

  • Đầu tiên bạn hay dùng máy tính truy cập vào trang mà bạn muốn chỉnh sửa giao diện
  • Nhấn F12 -> nhấn ctrl + shift + C -> rê chuột và click vào khối mà bạn muốn chỉnh sửa
  • Sau khi click vào khối muốn chỉnh sửa, bạn sẽ thấy ở mục số 3 có mục element.style{}
  • coppy nội dụng: width: 800px; height: 50px; background-color: aquamarine; color: red; margin-top: 5px; margin-left: 5px; vào element.style{} như hình trên.
  • Bạn đã thấy sự thay đổi của Block rồi đúng không?, giờ bạn hãy tự mình điều chỉnh các thông số để rõ hơn sư thay đổi nhé. Ví dụ như giảm 800px thành 100px, đổi màu đỏ thành màu xanh.v.v.

Đoạn code mà bạn coppy đó chính là code CSS, giờ nếu bạn refresh lại trang này thì mọi thứ sẽ trở lại bình thường do nãy giờ chúng ta chỉ mới chỉnh sửa trên trình duyệt. Giờ làm sao để đưa code này vào website wordpress??

3. SỬA GIAO DIỆN WEBSITE WORDPRESS BẰNG CODE CSS

Để code css trên có tác dụng thực tế bạn phải áp dụng trực tiếp code css lên đối tựng block mà bạn muốn bằng cách gọi tên đối tượng đó. Đối tượng có tên là “aside” có id là “text-13” có class là “widget” và “widget_text”. Cách đơn giản nhất để gọi tên chính xác đối tượng đó nhất mà không phải sửa code HTML đó là gọi tên kèm id và class. Có nghĩa là đối tượng sẽ có tên như sau: “aside#text-13.widget.widget_text” . Các bạn tham khảo bài viết về id và class để hiểu rõ hơn tại đây.

Nhấp vào mục CSS bổ sung trong phần Giao diện.

Sau đó coppy nội dung code css chúng ta đã soạn lúc này vào trong ngoặc {} dưới tên của đối tượng như hình và bấm lưu lại.

Đó là cách cơ bản để những bạn chưa biết về code website có thể chỉnh sửa tùy biến giao diện website wordpress ở mức độ cơ bản. Nhưng để có thể hiểu và vận dụng bài bản, chuẩn xác hơn bạn vẫn nên tham khảo những tài liệu, kênh học css dưới đây.

4. CHIA SẺ CÁC TÀI LIỆU HỌC CSS HAY

Trang học css kinh điển và cũng chuẩn mực nhất mình thường tham khảo đó là https://www.w3schools.com/ . Bạn có thể học từ HTML, CSS, JS, và nhiều thứ hay ho tại đây. Với những ví dụ minh họa thực tế trên website bạn sẽ học rất nhanh các ngôn ngữ về giao diện.

Tiếp theo một trang mà bất kỳ lập trình viên nào cũng biết đó là https://stackoverflow.com/ . Trang này có thể nói là bách khoa toàn thư của dân code. Nó là diễn đàn chia sẻ các mẫu code hay xử lý các trường hợp cụ thể học búa mà dân lập trình thường tìm đến. Không chỉ CSS nơi đây có đề cập đến mọi ngoại ngôn ngữ lập trình.

Qua đây rất mong nội dung mình chia sẻ sẽ giúp ích cho các bạn mới làm website wordpress. Và mình cũng chia sẻ thêm, wordpress là nền tảng website rất mạnh được phát triển mạnh mẽ trong thời gian dài. Vì vậy mọi cách sắp đặt đã rất ổn, bạn hãy cân nhắc thật kỹ trước khi muốn chỉnh sửa gì ở trong code nền wordpress trừ khi thật cần thiết.

Tham khảo các bài viết hay của chuyên mục Kiến thức tại đây.

One thought on “HƯỚNG DẪN CHỈNH SỬA GIAO DIỆN WEBSITE WORDPRESS BẰNG CODE CSS

  1. Pingback: CÁCH SEO WEBSITE HIỆU QUẢ - CÁC CÔNG CỤ BỔ TRỢ SEO WEBSITE - TẠPHÓA

Trả lời