Cách thêm lớp CSS vào mã PHP

Hướng dẫn này dành cho các nhà phát triển WordPress. Nếu bạn không thoải mái với CSS/HTML/PHP, chúng tôi khuyên bạn không nên loay hoay với mã


Nếu bạn muốn giới thiệu một thay đổi không thể thực hiện được bằng cách sử dụng bảng tùy chọn chủ đề, bạn có 3 cách để sửa đổi mã chủ đề


1] Sử dụng vùng Custom CSS trong bảng tùy chọn VamTam

Đây là cách ưa thích nếu bạn chỉ cần thực hiện một vài thay đổi nhỏ.  


VamTam > Cài đặt chung > Khu vực CSS tùy chỉnh



Nếu bạn muốn thêm một lớp hoặc ID cụ thể cho bất kỳ phần tử nào, bạn có thể thực hiện việc này bằng cách trước tiên gói phần tử đó vào một Cột, sau đó thêm lớp/ID đã chọn của bạn vào các tùy chọn cột tương ứng


Trong trường hợp ID, bạn cần nhập một chuỗi chữ và số không có khoảng trắng. Trong trường hợp tùy chọn Lớp, bạn cần nhập danh sách các lớp được phân tách bằng dấu cách không có dấu chấm [tương tự như cách bạn sẽ sử dụng thuộc tính lớp của HTML]. Nếu bạn đã nhập my-column-class làm lớp của cột, thì bạn có thể sử dụng bộ chọn CSS sau cho cột này


my-column-class


2] Tạo chủ đề con

Điều này được khuyến nghị nếu bạn muốn xây dựng CSS của mình trên CSS của chúng tôi, nhưng không muốn sử dụng Khu vực CSS tùy chỉnh trong các tùy chọn chủ đề


Bất kỳ tệp nào bạn thêm vào chủ đề con sẽ ghi đè lên cùng một tệp trong chủ đề gốc.  

Trong hầu hết các trường hợp, tốt nhất bạn nên tạo một bản sao của các tệp mẫu mà bạn muốn thay đổi từ chủ đề gốc, sau đó thực hiện các sửa đổi của bạn đối với các tệp đã sao chép, giữ nguyên các tệp gốc. Ví dụ: nếu bạn muốn thay đổi mã tiêu đề của chủ đề gốc. php, bạn sẽ sao chép tệp vào thư mục chủ đề con của mình và tùy chỉnh nó ở đó

Nếu tệp bạn muốn sửa đổi nằm trong thư mục con, bạn phải tạo thư mục con này trong chủ đề con và đặt tệp vào trong

Ví dụ. Bạn đang tùy chỉnh mục. php. Trong chủ đề gốc, nó nằm ở /templates/sermons/item. php - vì vậy bạn phải tạo trong chủ đề con

1. thư mục con "mẫu"

2. thư mục con "sermons" trong /templates

3. thêm mục. php trong thư mục con /templates/sermons


Bạn có thể tìm thấy một chủ đề con mẫu tại đây. http. //vamtam. com/con-themes/

Tài liệu chính thức của WordPress giải thích rất rõ về chủ đề này. http. // codex. báo chí. org/Child_Themes


3] Modifying the *.less files in  wpv_theme/assets/css

Phương pháp này khó sử dụng nhất và nó sẽ làm phức tạp các bản cập nhật trong tương lai. Nếu bạn cần thực hiện các thay đổi quan trọng đối với CSS, bạn có thể chỉnh sửa các tệp này. Khi bạn đã thực hiện các thay đổi cần thiết, bạn phải nhấp vào "Lưu thay đổi" trong các tùy chọn chủ đề để biên dịch mã LESS thành CSS. Xem tài liệu LESSPHP để biết chi tiết về trình biên dịch LESS mà chúng tôi sử dụng. http. // láo. mạng/lessphp/tài liệu/


Xin lưu ý rằng bạn phải luôn có một bản sao mã tùy chỉnh của mình vì đôi khi bạn có thể đặt lại nhầm các tùy chọn chủ đề về mặc định và mất tất cả css tùy chỉnh của mình

Để 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]

Trong hướng dẫn này, hãy tìm hiểu cách sử dụng CSS trong PHP echo để thêm phong cách cho nội dung văn bản. Câu trả lời ngắn gọn là. sử dụng thuộc tính style và thêm CSS vào nó trong dấu nháy đơn [‘ ‘]

Hãy cùng tìm hiểu với các ví dụ dưới đây để đưa CSS vào PHP echo

Mục lục

Cách sử dụng CSS trong PHP Echo với Thuộc tính kiểu

Bạn có thể sử dụng thẻ

bên trong câu lệnh PHP echo để thêm nội dung văn bản. Trong thẻ này, bạn phải thêm thuộc tính style trong đó bạn có thể đề cập đến CSS như bên dưới

Ví dụ

PHP

1

2

3

đầu ra

Đây là một văn bản trong PHP echo

Trước tiên, bạn phải thêm bao nhiêu CSS tùy thích vào một lớp CSS. Ví dụ trên đã thêm 4 thuộc tính CSS trong một lớp để tạo kiểu cho nội dung văn bản

Sử dụng dấu ngoặc kép và thoát bằng dấu gạch chéo ngược

Ngoài tất cả các phương pháp trên, bạn có thể thêm lớp CSS trong câu lệnh PHP echo bằng cách sử dụng dấu ngoặc kép. Sau đó, bạn phải thoát khỏi dấu ngoặc kép bằng ký hiệu dấu gạch chéo [\] như trong ví dụ bên dưới

Ví dụ

PHP

1

2

3

4

5

6

7

8

9

10

.mycssquote{

màu. xanh dương;

    đường viền. 1px màu đặc màu đỏ;

    phần đệm. 5px;

}

Chủ Đề