Hướng dẫn sửa css trong wordpress đơn giản mới nhất 2020

Sửa css trong wordpress là một vấn đề khá nhiều người quan tâm để tối ưu cho website của mình. Trong bài viết này, lamweb.vn sẽ viết bài Hướng dẫn sửa css trong wordpress đơn giản mới nhất 2020.

Xem thêm: Widget là gì? Hướng dẫn Chỉnh sửa widget trong wordpress mới nhất 2020

Hướng dẫn sửa css trong wordpress đơn giản mới nhất 2020

Chỉ có một số ít Theme cho phép tùy chỉnh font chữ, màu sắc… trong Theme Option Panel nhưng không thể tùy biến nhiều theo ý mình. post này, mình sẽ chỉ dẫn các bạn can thiệp sâu hơn vào Editor (Chức năng chỉnh sửa mã nguồn giao diện) để cải thiện mã nguồn WordPress theo ý mong muốn của mình. Thực chất, việc can thiệp vào Editor, chúng ta chủ yếu chỉnh sửa CSS nhiều hơn.

Refresh font chữ trong CSS

như hình dưới đây, các bạn có thể thấy font chữ đầu bài và content của mình khá xinh, nhưng không hỗ trợ hiển thị Tiếng Việt. vì thế, chúng ta phải thay font chữ cho nó.

• Bước 1:

  check tính chất của thị trường trên trình duyệt. Trong trình duyệt vừa mới sử dụng, các bạn click chuột phải vào phân khúc muốn thay đổi hiển thị rồi bấm “Kiểm tra” hoặc “nhấn F12”.

Sau khi nhấn rà soát, bảng mã nguồn WordPress hiển thị như hình dưới đây:

Lưu ý: Khi bạn rê chuột tới đối tượng nào thì mã nguồn cũng refresh theo. Khung màu xanh bên phải chính là content trong file .css (quy định màu sắc, font chữ…) vận dụng cho thị trường bạn đang xem, khung đỏ bên trái chính là nội dung trong file .php (quy định cấu trúc, chức năng…) của đối tượng đó.

Trong trường hợp bạn muốn refresh font chữ cho tiêu đề như hình ảnh trên. Hãy cùng mình nghiên cứu kỹ phần CSS của nó như sau:

Khung màu đỏ: Là tên của đối tượng cần chỉnh sửa. Trong trường hợp này, đối tượng cần chỉnh sửa là đầu bài (title) của Section đi kèm các thuộc tính css như sau:

– Font-weight: Độ đậm của font chữ;

– Letter-spacing: Khoảng mẹo giữa các ký tự của font chữ;

– Text-transform: định dạng font chữ: Đậm, nghiêng, vạch hoa, vạch thường…

– Font-size: kích thước font chữ

– Width: Độ rộng của font chữ

– Margin: Khoảng mẹo của thị trường so với lề

Khung màu xanh: Tên file chứa những thuộc tính cần refresh ở trên. Để chỉnh sửa, chúng ta phải tìm đúng file đó trong Editor của Giao diện. Trong trường hợp này, chúng ta sẽ chỉnh sửa trong file phong cách.css của Giao diện.

• Bước 2: Thử refresh trị giá các thuộc tính trong file .css.

Giao diện check thuộc tính cho phép chúng ta chỉnh sửa và xem trước sự thay đổi với các thuộc tính vừa chỉnh sửa.

giống như ảnh trên, mình đã thử chỉnh sửa giá trị cho các tính chất của tiêu đề như: Giảm letter-spacing xuống -1px; chỉnh sửa text-tranform thành None; giảm font-size xuống còn 36px và refresh font-family thành Helvetica. kết quả mình được Font chữ đầu bài bên trên khá là ổn.

Xem thêm: Hướng dẫn tối ưu tốc độ wordpress đơn giản mới nhất 2020

• Bước 3: Chỉnh sửa CSS trong Editor

– sao chép tên của thị trường cần chỉnh sửa như hình dưới:

– Các bạn vào Giao diện – Sửa (Editor) và tìm lựa chọn file phong cách.css (ver.xxxx).

– click tổ hợp phím Ctrl+F và Paste vào khung kiếm tìm.

Giao diện search phân khúc trong phong cách.css báo cho bạn có các đối tượng vừa mới được tìm thấy được bôi màu vàng. Bạn chỉnh sửa các thông số như lúc trước bạn vừa mới thử làm khi kiểm tra thuộc tính nhé! Chỉnh sửa xong nhớ “Lưu lại” để áp dụng thay đổi. Lưu ý: Nên copy tất cả file .css vào phần mềm Notepad trước khi chỉnh sửa, để lỡ các bạn có sửa bị hỏng thì đang có một bản backup sẵn để khôi phục lại.

Cứ giống như thế, bạn lần lượt check thuộc tính các đối tượng không giống và tiến hành chỉnh sửa theo các bước trên để refresh Css cho giao diện nhé! Bởi vì chúng ta đã đụng chạm tới Css của giao diện, nên các bạn cân nhắc thật kỹ trước khi sửa, và nhớ:định sửa file nào thì nên backup file đó để tránh trường hợp sửa mà bị lỗi thì có cái ta paste lại.

Xem thêm: Hướng dẫn tạo nút subscribe trên youtube mới nhất 2020

refresh content Chân trang

Mỗi giao diện WordPress khi down và cài đặt sẽ hiển thị mặc định tên Theme và nhà sản xuất theme ở chân trang của Giao diện như hình dưới đây:

Nếu bạn muốn cải thiện nội dung ở Chân trang, có thể làm theo các bước sau:

• Bước 1: sao chép đoạn nội dung ở chân trang “WordPress Theme”.
• Bước 2: Vào Giao diện > Sửa (Editor), tìm đến file Footer.php
• Bước 3: nhấn tổ hợp phím Ctrl + F và Paste nội dung vào khung search. kết quả kiếm tìm trả về cho bạn như sau:

• Bước 4: Thực hiện chỉnh sửa content bên dưới theo ý của bạn. Bạn đủ nội lực bỏ hết đoạn
  ….

  để cải thiện nội dung theo ý bạn nhé!

Bỏ hết đoạn được tô khung màu xanh và sửa lại content theo ý bạn nhé!

Và hiệu quả cuối cùng, mình vừa mới refresh được nội dung ở chân trang theo ý muốn rồi nhé!

Việt hóa các chữ Tiếng Anh trong Theme

Mặc dù có nhiều Giao diện support đa ngôn ngữ và cũng có nhiều Giao diện cho phép Việt hóa trong Theme Panel. tuy nhiên, không phải all mọi thứ đều được Việt hóa hoàn toàn. Hãy xem những ví dụ dưới đây:

Nút “Read more” trong Feature Section chưa được Việt hóa

Nút “Read more” trong Blog Section cũng chưa được Việt hóa

hiện nay, chúng ta sẽ tiến hành Việt hóa các nút bấm “Read more” trên nhé! Thực chất quá trình Việt hóa chính là sửa chữ “Read more” thành “Xem thêm” trong Editor của Giao diện. Điều cần thiết nhất là phải tìm được chữ đó nằm ở file nào trong Editor để mà sửa.

Mình nghiên cứu như sau: Các chữ “Read more” này thuộc các Section hiển thị ngoài trang chủ. giống như thế, mã nguồn của nó phải nằm ở các file liên quan đến hiển thị trang chủ. Cụ thể, trong Giao diện này, có 2 file liên quan đến trang chủ là Index.php và Frontpage.php.

• Bước 1:

  Mình vào tìm trong file Index.php thì không thấy có cụm từ “Read more” nào, vậy hiển nhiên nó phải nằm ở file Front page.php rồi.

• Bước 2: Vào Giao diện > Editor, tìm đến file Front page.php để chỉnh sửa.

• Bước 3: nhấn tổ hợp phím Ctrl + F, paste cụm từ “Read more” vào khung search. kết quả cho thấy có 2 vị trí chứa cụm từ “Read more”, pic dưới đây chúng ta đã thấy một vị trí rồi, sửa xong ấn Enter nó sẽ tự động nhảy xuống vị trí thứ 2 có chứa cụm từ đó nhé!.

• Bước 4:

  Thực hiện các chỉnh sửa. Xóa cụm từ “Read more” và thay vào bằng “”Xem thêm”. Lưu ý: đừng xóa thêm bất cứ ký tự nào trong file để tránh bị lỗi nhé!

• Bước 5: Lưu lại để xây dựng refresh. kết quả là mình đang Việt hóa thành công mấy cái nút nhấn này trên trang chủ rồi đấy.

Lời kết

như vậy, chúng ta đang thực hiện một số thao tác chỉnh sửa hiển thị cho Giao diện bằng hướng dẫn can thiệp sâu vào Editor của Giao diện. Các bạn đủ nội lực thực hiện tương tự với bất cứ nguyên nhân nào vừa mới hiển thị trên trang nhé! Chỉ một lưu ý: Cân nhắc kỹ trước khi sửa và đặc biệt, nên backup file định sửa lại để phòng trường hợp sửa bị sai lỗi. Chúc các bạn học tốt và sử dụng tốt.

Xem thêm: Hướng dẫn cài theme wordpress giống demo dễ dàng nhất 2020