Nếu bạn xem kỹ đánh dấu ở trên của các hình ảnh bên trong tiện ích văn bản “Tải xuống ứng dụng”, WordPress đã thêm một lớp có tên là “aligncenter” cho các hình ảnh.
Nhưng, chúng ta đã viết CSS cho lớp này chưa?
"Không chung tôi đa không. ”
Đây là lý do tại sao hình ảnh không được căn giữa. WordPress không tập trung một cách kỳ diệu vào phương tiện mà chúng tôi thêm bằng trình chỉnh sửa WYSIWYG. Nó chỉ thêm các lớp như “aligncenter”. Với tư cách là nhà phát triển chủ đề, việc hỗ trợ các lớp CSS đó bên trong chủ đề của chúng tôi tùy thuộc vào chúng tôi.
Lớp “aligncenter” chỉ là một trong nhiều lớp
Chúng ta có thể khắc phục sự cố này bằng cách viết một số CSS vào lớp “aligncenter”. Nhưng vấn đề không chỉ là về lớp “aligncenter”. Lớp này chỉ là một trong nhiều lớp mà WordPress tạo ra khi chúng ta sử dụng trình soạn thảo WYSIWYG bên trong WordPress.
Các lớp được tạo bởi WordPress này được gọi là “Lớp Trình chỉnh sửa”. Và với tư cách là nhà phát triển chủ đề, trách nhiệm chính của chúng tôi là viết CSS phù hợp cho tất cả các lớp quan trọng được tạo bởi WordPress. Chúng tôi phải làm điều này vì Máy khách/Quản trị viên chỉ sử dụng các tùy chọn căn chỉnh có sẵn bên trong trình chỉnh sửa WYSIWYG và mong muốn chúng hoạt động bình thường
Đây là danh sách các lớp HTML mà chúng ta cần viết CSS cho
- căn giữa
- căn lề trái
- sắp xếp đúng
- thẳng hàng
- phụ đề wp
- wp-caption-text
- wp-mặt cười
- bên trái
- đúng
Danh sách không phải là cuối cùng. Có nhiều. Nhưng đây là những lớp quan trọng nhất mà chúng ta phải hỗ trợ với tư cách là nhà phát triển chủ đề
Để tiết kiệm rất nhiều thời gian quý báu của chúng tôi, Liam Gladdy đã cung cấp một Gist nhỏ gọn chứa các kiểu cho tất cả các lớp nêu trên. Bạn có thể tìm thấy Gist tại đây
https. //ý chính. github. com/lgladdy/10597478
Nó đã được năm tuổi, nhưng nó vẫn có liên quan. Tôi vẫn sử dụng Gist này trong mọi dự án WordPress mà tôi thực hiện.
Ngoài ra, Gist ở trên chứa phiên bản SCSS của các kiểu WYSIWYG của WordPress. Nhưng với mục đích của khóa học này, tôi đã chuyển đổi nó thành CSS đơn giản
cách khắc phục
Mở tệp style.css và thêm CSS sau ngay bên dưới nhận xét với thông tin phác thảo kiểu. Nói chính xác, khi bắt đầu bộ quy tắc CSS tùy chỉnh của chúng tôi
/*------------------------------------------------------------------------------- 1.WordPress WYSIWYG styles -------------------------------------------------------------------------------*/ .alignnone { margin: 5px 20px 20px 0; } .aligncenter, div.aligncenter { display: block; margin: 5px auto 5px auto; } .alignright { float: right; margin: 5px 0 20px 20px; } .alignleft { float: left; margin: 5px 20px 20px 0; } .aligncenter { display: block; margin: 5px auto 5px auto; } @media only screen and (max-width:480px){ .single .alignright,.single .alignleft{ float:none; } } a img.alignright { float: right; margin: 5px 0 20px 20px; } a img.alignnone { margin: 5px 20px 20px 0; } a img.alignleft { float: left; margin: 5px 20px 20px 0; } a img.aligncenter { display: block; margin-left: auto; margin-right: auto; } .wp-caption { background: #fff; border: 1px solid #f0f0f0; max-width: 96%; /* Image does not overflow the content area */ padding: 5px 3px 10px; text-align: center; } .wp-caption.alignnone { margin: 5px 20px 20px 0; } .wp-caption.alignleft { margin: 5px 20px 20px 0; } .wp-caption.alignright { margin: 5px 0 20px 20px; } .wp-caption img { border: 0 none; height: auto; margin: 0; max-width: 98.5%; padding: 0; width: auto; } .wp-caption p.wp-caption-text { font-size: 11px; line-height: 17px; margin: 0; padding: 0 4px 5px; }Đây là phác thảo được cập nhật về Kiểu bên trong tệp style.css của chúng tôi
Dù sao, bây giờ nếu bạn quay lại trình duyệt và làm mới Trang chủ, hình ảnh thực sự sẽ được căn giữa vào khung nhìn
Bây giờ chúng tôi đã khắc phục sự cố thành công, bạn sẽ không bao giờ gọi điện thoại lúc nửa đêm từ khách hàng nói rằng
“Xin chào, xin lỗi vì đã làm phiền. Tôi đang cố căn chỉnh hình ảnh ở bên phải màn hình, nhưng vì lý do nào đó, hình ảnh không hoạt động như mong đợi. ”
Được rồi, nhưng đây không phải là cách phần Footer được thiết kế, phải không?
Chúng tôi vừa thêm các kiểu vào các lớp được tạo bởi WordPress. Nhưng chúng tôi vẫn chưa bắt đầu tạo kiểu cho tiện ích của mình
Vì vậy, trong bài học tiếp theo, chúng ta sẽ hoàn thành việc tạo kiểu cho “Phần chân trang một” cùng với việc tạo kiểu cho các Widget bên trong nó
Bạn nên có kiến thức cơ bản về mã CSS để sử dụng tính năng này. Đây là cách chúng tôi có thể hỗ trợ bạn với CSS
Sử dụng cài đặt khối Nâng cao, bạn có thể thêm một lớp CSS vào khối của mình, cho phép bạn viết CSS tùy chỉnh để tạo kiểu cho khối theo ý muốn
Ví dụ: nếu bạn chỉ muốn căn chỉnh văn bản cho một số khối nhất định, thì bạn có thể thêm một lớp chẳng hạn như my-justify-class vào trường Lớp CSS bổ sung trong phần cài đặt. Sau đó, hãy truy cập trình chỉnh sửa CSS của bạn và viết kiểu cho lớp như vậy
p.my-justify-class { text-align: justify; }
Thêm một lớp CSS bổ sung
Để thêm một lớp CSS bổ sung vào một khối, hãy nhấp vào khối bạn đang chỉnh sửa. Sau đó, kiểm tra cài đặt khối ở bên phải để biết cài đặt Nâng cao
Nếu bạn không thấy cài đặt khối ở bên phải, hãy nhấp vào biểu tượng cài đặt ở góc trên cùng bên phải để mở cài đặt. Biểu tượng này trông giống như một hình vuông với hai cột không bằng nhau
Bạn có thể định nghĩa lớp của mình là
- Một từ duy nhất, chẳng hạn như special
- Thuật ngữ được tạo thành từ nhiều từ với mỗi từ được phân tách bằng dấu gạch ngang, chẳng hạn như special-class
Bạn cũng có thể thêm nhiều lớp vào cùng một khối bằng cách tách mỗi lớp bằng khoảng trắng. Ví dụ. special-class-1 special-class-2
Khi xác định lớp của bạn, hãy cẩn thận không sử dụng lớp có thể đã được xác định trong mã của trang web. Bạn sẽ muốn sử dụng các thuật ngữ duy nhất chưa được sử dụng trong CSS của trang web
📌
Bạn có thể biết rằng khi viết mã CSS, chúng tôi nhắm mục tiêu một lớp bằng cách đặt dấu chấm trước lớp, tôi. e. .page. Tuy nhiên, không đặt dấu chấm trước lớp khi xác định nó trong cài đặt khối dưới dạng Lớp CSS bổ sung, nếu không nó sẽ không hoạt động
Mẹo sử dụng các lớp CSS bổ sung
Nhắm mục tiêu một khối cụ thể trên một trang cụ thểGiả sử bạn muốn thay đổi giao diện của một khối Phương tiện & Văn bản trên trang web của mình, nhưng không ảnh hưởng đến tất cả các khối Văn bản & Phương tiện khác trên trang web của bạn. Trong ví dụ này, chúng tôi định nghĩa lớp special-media-text-block trong cài đặt khối Nâng cao
Sau đó, chúng ta có thể thêm CSS này vào trang web của mình trong phần Tùy chỉnh → CSS bổ sung để tạo cho khối này một màu nền chuyển sắc thú vị
.special-media-text-block { background-image: linear-gradient(to bottom right, red, blue); }
Đây là kết quả
Bạn có thể thay đổi biểu tượng được sử dụng trong danh sách từ đĩa tròn thành hình vuông, hình tròn trống, chữ số La Mã, v.v.
Xác định một lớp chẳng hạn như square-bullet-list-block như vậy
Sau đó, thêm CSS này vào trình chỉnh sửa CSS của bạn
.square-bullet-list-block { list-style-type: square; }
và kết quả sẽ là
Take into account that depending on your theme’s design, you might need to add a class like
Một số lớp được xác định trước trong WordPress và bạn có thể thêm các lớp đó vào khối của mình để có hiệu ứng thú vị
Ví dụ: lớp .special-media-text-block { background-image: linear-gradient(to bottom right, red, blue); } 0 sẽ làm cho chữ cái đầu tiên của khối đoạn văn xuất hiện ở cỡ chữ lớn
Xóa lớp cũng sẽ xóa hiệu ứng chữ hoa đầu dòng
Dưới đây là danh sách một số lớp CSS hiện có khác mà một số khối sẽ hỗ trợ, nhưng hãy nhớ rằng các kiểu chủ đề có thể ghi đè lên các lớp hiện có này. Để có kết quả tốt nhất, hãy sử dụng một trong các Chủ đề được đề xuất