Danh sách lớp CSS WordPress

Question

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.

Nội dung chính Show

Lớp “aligncenter” chỉ là một trong nhiều lớp
cách khắc phục
Các lớp CSS trong WordPress là gì?
Các lớp trong WordPress là gì?
Làm cách nào để thêm lớp tùy chỉnh trong CSS?

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

(Các) Lớp CSS bổ sung có thể được thêm vào trong phần Nâng cao của cài đặt khối

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

Mỗi khối có một cài đặt Nâng cao nơi bạn có thể thêm (các) lớp CSS bổ sung

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ả

Thay đổi biểu tượng dấu đầu dòng trong danh sách

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

Thêm một lớp tùy chỉnh vào khối Danh sách

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à

Một khối danh sách với các dấu đầu dòng vuông

Take into account that depending on your theme’s design, you might need to add a class like

to the CSS above to target the correct class.

Tận dụng các lớp CSS tùy chỉnh hiện có

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

Chữ cái đầu tiên lớn vì thuộc lớp

.special-media-text-block {
  background-image: linear-gradient(to bottom right, red, blue);
}

0

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

Các lớp CSS trong WordPress là gì?

Một lớp CSS là thuộc tính được sử dụng để xác định một nhóm phần tử HTML nhằm áp dụng kiểu dáng và định dạng duy nhất cho các phần tử đó bằng CSS . Hãy xem một ví dụ về cách các lớp CSS hoạt động.

Các lớp trong WordPress là gì?

Các lớp được dùng để áp dụng các kiểu giống nhau cho nhiều phần tử . Tất cả các kiểu được đặt cho lớp sẽ được áp dụng cho tất cả các phần tử được gán cho lớp đó. Để thêm một lớp vào một thành phần, hãy nhấp vào Chọn bộ chọn. hoặc ID của phần tử hiện đang hoạt động, sau đó nhập tên lớp và nhấp vào Thêm lớp.

Làm cách nào để thêm lớp tùy chỉnh trong CSS?

Để thêm tên lớp CSS tùy chỉnh cho một trong hai tùy chọn, hãy mở trình tạo biểu mẫu và đi tới Cài đặt » Chung. Từ đây, hãy chuyển đến phần Nâng cao và bạn sẽ có thể thấy các trường dành cho Lớp CSS biểu mẫu và Lớp CSS nút gửi . Nếu bạn muốn thêm nhiều tên lớp, chỉ cần tách từng tên bằng dấu cách.

programming css