Cách chỉnh sửa css trong wordpress dễ dàng và nhanh nhất

Trong wordpress hỗ trợ chúng ta chỉnh sửa css hay còn gọi là giao diện Web ngay trong phần quản trị của admin nhưng không phải người nào cũng biết  dùng nó 1 cách hiệu quả hãy tưởng tượng xem khi mà bạn vào một trang Website bạn rất thích font chữ của nó mà không biết làm thế nào có thể copy được và làm thành của mình? Đừng lo hãy cùng khotenmien.vn tìm hiểu bài viết này, sẽ hướng dẫn bạn từ a đến z cách chỉnh sửa css trong wordpress.

cách chỉnh sửa css trong wordpress
cách chỉnh sửa css trong wordpress

Hướng dẫn chỉnh sửa css trong wordpress mới nhất

 

Bước 1:

Rà soát tính chất của đối tượng trên trình duyệt. Trong trình duyệt web đang dùng, các bạn nhấn chuột phải vào thị trường ước muốn thay đổi hiển thị rồi click “Kiểm tra” hoặc “nhấn F12”.

cách chỉnh sửa css trong wordpress

Một khi click rà soát, bảng mã gốc WordPress hiển thị chẳng hạn như hình dưới đây:

cách chỉnh sửa css trong wordpress

Lưu ý: khi bạn rê chuột tới đối tượng nào thì mã gốc cũng thay đổi theo. Khung màu xanh bên phải chính là content trong file .css (quy định sắc màu, font chữ…) áp dụng cho phân khúc bạn đang xem, khung đỏ bên trái chính là content trong tệp .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 hoàn thiện font chữ cho đầu bài chẳng hạn như hình ảnh trên. Hãy cùng với mình phân tích kỹ phần CSS của nó kiểu như sau:

cách chỉnh sửa css trong wordpress

Khung màu đỏ: Là tên của phân khúc cần chỉnh sửa. Trong trường hợp này, đối tượng cần chỉnh sửa là tiêu đề (title) của Section đi kèm các tính chất css chẳng hạn như sau:

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

– Letter-spacing: Khoảng chỉ dẫn giữa các ký tự của font chữ

– Text-transform: định hướng font chữ: Đậm, nghiêng, viết hoa, viết thường…

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

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

– Margin: Khoảng phương pháp của phân khúc so với lề

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

Bước 2: Thử refresh giá trị các tính chất trong tệp .css.

Giao diện check tính chất cho phép chúng ta chỉnh sửa và nhìn thấy trước sự cải thiện với các thuộc tính vừa chỉnh sửa.

cách chỉnh sửa css trong wordpress

Chẳng hạn như ảnh trên, mình đang thử chỉnh sửa trị giá cho các tính chất của tittle 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 & cải thiện font-family thành Helvetica. Hiệu quả mình được Font chữ đầu bài bên trên khá là ổn.

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

– Copy tên của thị trường cần chỉnh sửa như ảnh dưới:

cách chỉnh sửa css trong wordpress

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

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

Giao diện search đối tượng trong style.css báo cho bạn có các đối tượng đã được tìm thấy được bôi màu vàng. Bạn chỉnh sửa các chỉ số như lúc trước bạn đã thử làm khi test thuộc tính nhé! Chỉnh sửa xong nhớ “Lưu lại” để ứng dụng refresh. 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ì đã có một bản backup sẵn để khôi phục lại.

cách chỉnh sửa css trong wordpress

Cứ như thế, bạn lần lượt kiểm tra tính chất các thị trường không giống & tiến hành chỉnh sửa theo các bước trên để thay đổi Css cho giao diện nhé! Bởi vì chúng ta vừa mới đụ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,  nhớ:định sửa file nào thì nên backup file đấy để hạn chế trường hợp sửa mà bị lỗi thì có cái ta paste lại.

Thay đổi nội dung Chân trang

Mỗi bố cục và giao diện WordPress khi download  setup sẽ hiển thị mặc định tên Theme  nhà quản lý phân phối theme ở chân trang của bố cục và giao diện như hình dưới đây:

cách chỉnh sửa css trong wordpress

Nếu bạn muốn refresh content ở Chân trang, đủ sức dùng theo các bước sau:

  • Bước 1: sao chép đoạn content ở 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  Paste content vào khung tìm kiếmkết quả tìm kiếm trả về cho bạn kiểu như sau:

cách chỉnh sửa css trong wordpress

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

cách chỉnh sửa css trong wordpress

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

Chỉnh sửa footer

 hiệu quả cuối cùng, mình đang thay đổi được nội dung ở chân trang theo ý mong muốn rồi nhé!

cách chỉnh sửa css trong wordpress

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 bố cục và giao diện cho phép Việt hóa trong Theme Panel. Tuy vậykhông hề toàn bộ tất cả mọi thứ đều được Việt hóa hoàn toàn. Hãy xem những VD dưới đây:

cách chỉnh sửa css trong wordpress
Nút “Read more” trong Feature Section chưa được Việt hóa

 

cách chỉnh sửa css trong wordpress
Nút “Read more” trong Blog Section cũng chưa được Việt hóa

 

Bây giờ, chúng ta sẽ tiến hành Việt hóa các nút nhấn “Read more” trên nhé!

Thực chất quy 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 đặc biệt là phải tìm được chữ đấy nằm ở tệp nào trong Editor để mà sửa.

Mình phân tích kiểu như sau: Các chữ “Read more” này thuộc các Section hiển thị ngoài trang chủ. N thế, mã gốc của nó phải nằm ở các file liên quan đến hiển thị trang chủ. rõ ràng, trong bố cục và giao diện này, có 2 file liên quan đến trang chủ là Index.php & Frontpage.php.

  • Bước 1: Mình vào tìm trong tệp Index.php thì không thấy có cụm từ “Read more” nào, vậy tất nhiên nó phải nằm ở tệp Front page.php rồi.
  • Bước 2: Vào giao diện > Editor, tìm đến tệp tin Front page.php để chỉnh sửa.cách chỉnh sửa css trong wordpress
  • 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 chúng ta thấy có 2 vị trí chứa cụm từ “Read more”, hình ảnh bên dưới chúng ta đang 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ừ đây nhé.

cách chỉnh sửa css trong wordpress

  • Bước 4:Thực hiện các chỉnh sửa. Xóa cụm từ “Read more” & thay vào bằng “”Xem thêm”. Lưu ý: đừng xóa thêm bất cứ ký tự nào trong tệp để hạn chế bị lỗi nhé!
  • Bước 5: Lưu lại để xây dựng hoàn thiệnkết quả là mình đã Việt hóa sự phát triển mấy cái nút bấm này trên trang chủ rồi đó.

cách chỉnh sửa css trong wordpress

Tổng kết

Trên đây chính là cách chỉnh sửa css trong wordpress bằng phương pháp chỉnh sửa trực tiếp  sử dụng những plugin tuyệt vời để chỉnh sửa css của bạn một cách dễ hiểu mà hiệu quả nhất, ngoài ra nếu như bạn còn cách nào khác hãy cho tôi biết ở khung comment bên dưới nhé.

Xem thêm : Khóa ngoại là gì ? Cách tạo khóa ngoại trong phpmyadmin


Thanh Xuân – Tổng hợp , bổ sung 

Cám ơn bạn đã quan tâm đến sản phẩm tại Khotenmien.vn

Chúng tôi sẽ liên hệ bạn ngay nhé!