PHP thay đổi lớp CSS

Khi mọi người được hỏi về các tính năng mà họ muốn CSS, "các biến" dường như luôn xuất hiện. Đây có phải là một ý tưởng tốt hay không vẫn là điều mà cá nhân tôi chưa quyết định, nhưng tôi nghiêng về phía có. Bất kể, sử dụng PHP, việc sử dụng các biến trong CSS rất dễ dàng. Đây chắc chắn không phải là một thủ thuật mới, nhưng tôi chưa bao giờ đề cập cụ thể về nó nên tôi nghĩ mình nên

Phong cách. php

Thay vì sử dụng. phần mở rộng tệp css, sử dụng. php

loại nội dung

Ở đầu phong cách mới của bạn. tệp php đặt loại Nội dung trở lại CSS

Thiết lập các biến

Bây giờ bạn có thể thiết lập các biến cho bất cứ thứ gì bạn thích

sử dụng các biến

Bên dưới tất cả những thứ PHP đó, bạn chỉ có thể bắt đầu viết CSS thông thường, chỉ bạn mới có thể trộn một số PHP để tạo ra các biến đó

#header {
   background: url("/images/header-bg.png") no-repeat;
}
a {
  color: ;
}

...

ul#main-nav li a {
  color: ;
}

Mở rộng sức mạnh / Ý tưởng khác

• Trong khi bạn đang ở đó, cũng có thể nén CSS bằng PHP
• Về mặt lý thuyết, bạn có thể lấy tác nhân người dùng và cố gắng thực hiện CSS dành riêng cho trình duyệt, nhưng điều đó có rất nhiều vấn đề và không được khuyến nghị
• Kéo ngày/giờ và có thể thay đổi một số nội dung trên trang web của bạn cho các mùa hoặc thời gian khác nhau trong ngày
• Tạo một số ngẫu nhiên, kiểm tra kết quả, sử dụng nó để đặt hình nền ngẫu nhiên trên tiêu đề của bạn

Không làm việc?

Tôi đã thực hiện một trang thử nghiệm hoàn toàn tĩnh và nó hoạt động tốt, sau đó tôi đã thử kỹ thuật tương tự này trong một trang web WordPress và không có con xúc xắc nào. Giải pháp cho tôi là để lại tệp có tên style. css và sử dụng. htaccess để phân tích nó dưới dạng PHP. Chỉ cần chắc chắn rằng mã này là trong. htaccess (chỉ dành cho máy chủ Apache) ở cùng cấp thư mục với tệp CSS. Sau đó, chỉ cần sử dụng PHP bên trong nó như bất kỳ tệp PHP nào khác

Để chọn các phần tử với một lớp cụ thể, hãy viết dấu chấm (. ) ký tự, theo sau là tên của lớp

Bạn cũng có thể chỉ định rằng chỉ các phần tử HTML cụ thể mới bị ảnh hưởng bởi một lớp. Để làm điều này, hãy bắt đầu với tên phần tử, sau đó viết dấu chấm (. ), theo sau là tên của lớp (xem Ví dụ 1 bên dưới)

Trước khi chúng ta bắt đầu, trước tiên tôi phải làm rõ rằng phần lớn CSS không nên được tạo riêng bằng PHP. Mặc dù bạn chắc chắn có thể tạo tất cả CSS cho trang web của mình bằng PHP, nhưng điều đó không hiệu quả hoặc không khôn ngoan.

CSS đã phát triển thành một ngôn ngữ sôi động, đặc biệt là với sự gia tăng gần đây của các bộ tiền xử lý như SASS và LESS

Bạn nên tạo hầu hết thiết kế của mình bằng SASS hoặc chỉ CSS thô và chỉ để lại PHP cho những thứ mà người dùng có thể tự thay đổi

Hiểu về lớp PHP CSS

Trước tiên, hãy bắt đầu dự án bằng cách tải xuống PHP CSS Class mà tôi đã tạo cho hướng dẫn này

Tải xuống lớp CSS

Lớp CSS PHP là cách tốt nhất để xử lý việc này vì thực tế là một khi chúng ta có thông tin được lưu trữ trong đối tượng thì chúng ta sẽ dễ dàng thao tác lặp đi lặp lại thông tin đó. Lớp cũng cung cấp cho chúng tôi các phương thức cho phép chúng tôi thực hiện mọi việc một cách thống nhất và hiệu quả. Chỉ cần nhớ rằng chúng ta sẽ viết CSS bằng PHP, vì vậy nó sẽ trông giống PHP hơn. Hãy thiết lập nó

require_once 'path_to_library/class-php-css.php';

use CarlosRios\PHP_CSS;

$css = new PHP_CSS;

Đặt Bộ chọn HTML DOM

Lớp PHP CSS cho phép chúng ta dễ dàng thiết lập và thay đổi các bộ chọn sao cho tại bất kỳ thời điểm nào, chúng ta đang làm việc với một bộ chọn riêng lẻ hoặc một tập hợp các bộ chọn. Chúng tôi đặt bộ chọn giống như cách chúng tôi làm trong CSS như vậy

$css->set_selector( '#content' ); // Sets #content as the selector to add properties to

$css->set_selector( '#content, #wrapper, body' ); // Sets multiple selectors

Thay đổi bộ chọn

Khi chúng tôi đã đặt bộ chọn, chúng tôi có thể bắt đầu thêm quy tắc cho chúng, nhưng trước khi làm điều đó, tôi muốn chỉ ra rằng nếu bạn muốn thay đổi bộ chọn sau khi nó được đặt, bạn có thể sử dụng < . change_selector()  method or the set_selector()  method once again.

$css->change_selector( '#something-different' );

Thêm thuộc tính CSS vào bộ chọn

Khi chúng tôi có bộ chọn, chúng tôi có thể bắt đầu thêm thuộc tính cho nó. Các thuộc tính là bất kỳ thuộc tính css hợp lệ nào được ghép nối với một giá trị (đó là nơi lớp PHP CSS thực sự tỏa sáng). Trước tiên, hãy thiết lập một số biến và sau đó đặt lại bộ chọn

// Set some variables
$background_color_value = '#FFF';
$background_image_url = 'http://imageurl.com/image.png';
$text_color_value = '#222';
$display_value = 'block';

// Set a selector
$css->set_selector( '#header' );

Để thêm một thuộc tính, chúng tôi sử dụng phương thức add_property()   yêu cầu hai đối số. Đầu tiên là loại thuộc tính và thứ hai là giá trị.

Để thêm nhiều thuộc tính, bạn có thể sử dụng phương thức add_properties()   chỉ yêu cầu một mảng làm đối số.

// Add multiple properties at once
$css->add_properties( array(
	'color' => $text_color_value,
	'background-image' => $background_image_url,
	'display' => $display_value,
) );

Bây giờ chúng tôi đã đặt nhiều thuộc tính cho bộ chọn '#header', đầu ra css của chúng tôi sẽ như sau

#header{
	background-color:#FFF;
	background-image:url('http://imageurl.com/image.png');
	color:#222;
	display:#block;
}

Xử lý thuộc tính lớp giả

Việc thêm các thuộc tính vào các lớp giả hoặc trạng thái của bộ chọn được tích hợp sẵn vào lớp PHP CSS. Khi chúng ta thêm các lớp giả vào các trạng thái của bộ chọn, lớp PHP CSS sẽ tự động lưu trữ tất cả các quy tắc được tạo trước đó và thêm các thuộc tính mới vào bộ chọn với trạng thái được thêm vào nó

$css->set_selector( '#header' );
$css->add_selector_state( ':hover' );

Sau đó, chúng ta có thể tiếp tục thêm thuộc tính

$css->add_property( 'border-color', '#222' );

Cái nào sẽ xuất ra

#header:hover{
	border-color: #222;
}

Thêm nhiều lớp giả vào một bộ chọn

Chúng ta cũng có thể thêm nhiều lớp giả vào bộ chọn bằng cách sử dụng phương thức add_selector_states()   yêu cầu một mảng làm đối số duy nhất của nó. Sử dụng phương pháp này sẽ tạo đầu ra của bộ chọn css cho từng trạng thái mà bạn chỉ định.

$css->set_selector( '#content' ); // Sets #content as the selector to add properties to

$css->set_selector( '#content, #wrapper, body' ); // Sets multiple selectors

Đầu ra sau đó sẽ như sau

$css->set_selector( '#content' ); // Sets #content as the selector to add properties to

$css->set_selector( '#content, #wrapper, body' ); // Sets multiple selectors

Loại bỏ các lớp giả

Sau đó, chúng tôi có thể hoàn nguyên bộ chọn về trạng thái ban đầu mà không có bất kỳ lớp giả nào bằng cách sử dụng phương thức reset_selector_states()   và sau đó tiếp tục thêm .

$css->set_selector( '#content' ); // Sets #content as the selector to add properties to

$css->set_selector( '#content, #wrapper, body' ); // Sets multiple selectors

Xuất CSS của chúng tôi

Sau khi chúng tôi đã tạo tất cả css của mình, chúng tôi có thể sử dụng phương thức PHP CSS class'  css_output() để hiển thị tất cả . Xin lưu ý rằng lớp này không nhằm mục đích tạo ra nhiều mã css, do đó, hiện tại lớp CSS PHP sẽ chỉ xuất ra css được rút gọn.

$css->set_selector( '#content' ); // Sets #content as the selector to add properties to

$css->set_selector( '#content, #wrapper, body' ); // Sets multiple selectors

Kế hoạch phát triển trong tương lai

Với tất cả những gì đã nói, lớp này được tạo ra không còn nhiều điều nữa, nhưng tôi sẽ tiếp tục thêm các quy tắc đặc biệt vào lớp này khi tôi cần chúng. Tôi khuyến khích bạn rẽ nhánh lớp PHP CSS trên github và gửi một số yêu cầu kéo theo cách của tôi để tôi có thể tiếp tục thêm vào đó. Nếu không, hãy theo dõi hướng dẫn tiếp theo, nơi tôi sẽ chỉ cho bạn cách bạn có thể tích hợp lớp này vào chủ đề hoặc plugin WordPress tiếp theo của mình

Làm cách nào để thay đổi CSS bằng PHP?