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 và 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.
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”.
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:
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:
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.
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ác bạn vào giao diện – Sửa (Editor) và tìm lựa chọn file style.css (ver.xxxx).
– bấm tổ hợp phím Ctrl+F và 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ứ 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, và 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 và setup sẽ hiển thị mặc định tên Theme và 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:
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 và Paste content vào khung tìm kiếm. kết quả tìm kiếm trả về cho bạn kiểu như sau:
- 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é!
Bỏ hết đoạn được tô khung màu xanh & sửa lại content theo ý bạn nhé!
Và 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é!
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ậy, khô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:
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ủ. Như 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.
- 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é.
- 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ện. kế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 đó.
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 và 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