Làm cách nào để liệt kê một kiểu và tập lệnh trong WordPress?

Không có CSS, bạn có rất ít lựa chọn để tạo kiểu cho trang web của mình. Và nếu không có CSS ​​thích hợp bên trong WordPress, bạn có thể khiến người dùng chủ đề của bạn rất khó tùy chỉnh kiểu dáng của chủ đề

Trong hướng dẫn này, chúng ta sẽ xem xét cách phù hợp để đưa CSS vào hàng đợi trong WordPress bằng 

1

Trong bài đăng này, bạn sẽ tìm hiểu cách phù hợp để tải toàn bộ biểu định kiểu CSS vào chủ đề của mình. Nếu bạn chỉ muốn thêm một số CSS vào trang web WordPress của mình mà không cần mã hóa, hãy xem bài đăng của chúng tôi về Cách thêm CSS tùy chỉnh vào trang web WordPress của bạn

• 
  
  

  Cách thêm CSS tùy chỉnh vào trang web WordPress của bạn

  
  
  

  Anna Monus

  18 Th02 2020

Cách sai để tải CSS trong WordPress

Trong những năm qua, WordPress đã phát triển mã của mình để làm cho nó ngày càng linh hoạt hơn và việc đưa CSS và JavaScript vào hàng đợi là một bước đi theo hướng đó. Những thói quen xấu của chúng tôi vẫn tồn tại trong một thời gian, mặc dù. Mặc dù biết rằng WordPress đã giới thiệu CSS và JavaScript enqueueing, chúng tôi vẫn tiếp tục thêm mã này vào tiêu đề của mình. tệp php

1

2

Hoặc chúng tôi đã thêm mã bên dưới vào các chức năng của mình. php, nghĩ rằng nó tốt hơn

1

<?php

2

3

function add_stylesheet_to_head() {

4

1

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

Trong các trường hợp trên, WordPress không thể xác định xem các tệp CSS có được tải trong trang hay không. Đó có thể là một sai lầm khủng khiếp

Nếu một plugin khác sử dụng cùng một tệp CSS, nó sẽ không thể kiểm tra xem tệp CSS đã được đưa vào trang chưa. Sau đó, plugin tải cùng một tệp lần thứ hai, dẫn đến mã trùng lặp

May mắn thay, WordPress có một giải pháp khá dễ dàng cho những vấn đề như thế này. đăng ký và enqueueing stylesheets

Cách đúng để tải CSS trong WordPress

Như chúng tôi đã nói trước đó, WordPress đã phát triển rất nhiều trong những năm qua và chúng tôi phải suy nghĩ về từng người dùng WordPress trên thế giới

Ngoài chúng, chúng tôi cũng phải tính đến hàng nghìn plugin WordPress. Nhưng đừng để những con số lớn này làm bạn sợ. WordPress có những hàm khá hữu ích để chúng ta load CSS style vào WordPress đúng cách

Chúng ta hãy có một cái nhìn

Đăng ký tệp CSS

Nếu định tải các biểu định kiểu CSS, trước tiên bạn nên đăng ký chúng bằng hàm 

1

1

2

2

3

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

• 1

  07 (chuỗi, bắt buộc) là tên duy nhất cho biểu định kiểu của bạn. Các chức năng khác sẽ sử dụng "tay cầm" này để xếp hàng và in biểu định kiểu của bạn

• 1

  08 (chuỗi, bắt buộc) đề cập đến URL của biểu định kiểu. Bạn có thể sử dụng các hàm như 

  1

  09 để lấy các tệp kiểu bên trong thư mục của chủ đề. Đừng bao giờ nghĩ về việc mã hóa nó

• 1

  10 (mảng, tùy chọn) xử lý tên cho các kiểu phụ thuộc. Nếu biểu định kiểu của bạn không hoạt động nếu thiếu một số tệp kiểu khác, hãy sử dụng tham số này để đặt "phụ thuộc"

• 1

  11 (chuỗi hoặc boolean, tùy chọn) là số phiên bản. Bạn có thể sử dụng số phiên bản của chủ đề hoặc tạo một số nếu muốn. Nếu bạn không muốn sử dụng số phiên bản, hãy đặt nó thành

  1

  12. Nó mặc định là 

  1

  13, điều này làm cho WordPress thêm số phiên bản của riêng mình

• 1

  14 (chuỗi, tùy chọn) là các loại phương tiện CSS như "màn hình", "cầm tay" hoặc "bản in". Nếu bạn không chắc chắn mình cần sử dụng cái này, đừng sử dụng nó. Nó mặc định là "tất cả"

Đây là một ví dụ về hàm

1

1

<?php

2

3

2

4

1

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

1

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

1

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

1

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

1

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

<?php

<?php

<?php

<?php

<?php

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

Đăng ký kiểu là loại "tùy chọn" trong WordPress. Nếu bạn cho rằng kiểu của mình sẽ không được sử dụng bởi bất kỳ plugin nào hoặc bạn sẽ không sử dụng bất kỳ mã nào để tải lại kiểu đó, thì bạn có thể tự do đưa kiểu vào hàng đợi mà không cần đăng ký kiểu đó. Xem cách nó được thực hiện dưới đây

Enqueueing các tập tin CSS

Sau khi đăng ký tệp kiểu, chúng tôi cần "xếp hàng" tệp đó để sẵn sàng tải trong phần 

1

Chúng tôi thực hiện việc này với hàm 

1

1

<?php

2

<?php

3

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

Các tham số hoàn toàn giống với hàm 

1

Nhưng như chúng tôi đã nói rằng hàm

1

1

1

<?php

2

3

2

4

2

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

3

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

3

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

3

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

3

<?php

3

<?php

function add_stylesheet_to_head() {

<?php

function add_stylesheet_to_head() {

function add_stylesheet_to_head() {

<?php

function add_stylesheet_to_head() {

function add_stylesheet_to_head() {

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

Hãy nhớ rằng nếu một plugin cần tìm biểu định kiểu của bạn hoặc bạn định tải nó vào các phần khác nhau trong chủ đề của mình, bạn chắc chắn nên đăng ký nó trước

Đang tải các kiểu vào trang web của chúng tôi

Chúng ta không thể chỉ sử dụng hàm 

1

• 1

  22 để tải các tập lệnh và kiểu ở mặt trước của trang web của chúng tôi

• 1

  23 để tải tập lệnh và kiểu trong các trang của bảng quản trị của chúng tôi

• 1

  24 để tải tập lệnh và kiểu trong trang đăng nhập WordPress

Dưới đây là các ví dụ cho ba hành động này

1

<?php

2

3

4

4

4

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

4

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

1

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

1

<?php

1

<?php

1

<?php

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

function add_stylesheet_to_head() {

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

function add_stylesheet_to_head() {

function add_stylesheet_to_head() {

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

Một số chức năng bổ sung

Có một số chức năng rất hữu ích về CSS trong WordPress. Chúng cho phép chúng tôi in các kiểu nội tuyến, kiểm tra trạng thái hàng đợi của các tệp kiểu của chúng tôi, thêm siêu dữ liệu cho các tệp kiểu của chúng tôi và hủy đăng ký các kiểu

Chúng ta hãy có một cái nhìn

Thêm kiểu nội tuyến động. 125

Nếu chủ đề của bạn có các tùy chọn để tùy chỉnh kiểu dáng của chủ đề, thì bạn có thể sử dụng kiểu dáng nội tuyến để in chúng bằng hàm 

1

1

<?php

2

3

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

4

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

<?php

<?php

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

Nhanh chóng và dễ dàng. Hãy nhớ rằng, mặc dù. Bạn phải sử dụng cùng một tên xử lý với biểu định kiểu mà bạn muốn thêm kiểu nội tuyến sau

Kiểm tra trạng thái Enqueue của Stylesheet. 127

Trong một số trường hợp, chúng tôi có thể cần thông tin về trạng thái của kiểu. Nó đã được đăng ký chưa, nó đã được xếp vào hàng đợi chưa, nó đã được in hay đang chờ được in chưa?

1

<?php

2

3

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

4

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

<?php

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

<?php

<?php

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

function add_stylesheet_to_head() {

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

function add_stylesheet_to_head() {

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

function add_stylesheet_to_head() {

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

Thêm siêu dữ liệu vào biểu định kiểu. 129

Đây là một chức năng tuyệt vời có tên là 

1

Kiểm tra nó ra

1

<?php

2

3

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

4

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

<?php

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

<?php

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

<?php

function add_stylesheet_to_head() {

2

function add_stylesheet_to_head() {

2

function add_stylesheet_to_head() {

2

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

2

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

2

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

2

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

2

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

2

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

2

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

2

2

2

2

2

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

Tuyệt vời, phải không?

Nếu tôi không nhầm, đây là hướng dẫn đầu tiên được viết về chức năng nhỏ bé nhưng hữu ích này

Hủy đăng ký tệp kiểu với ____031

Nếu bạn cần "hủy đăng ký" biểu định kiểu (ví dụ: để đăng ký lại biểu định kiểu với phiên bản đã sửa đổi), bạn có thể thực hiện việc đó với 

1

Hãy xem một ví dụ

1

<?php

2

3

2

4

2

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

2

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

2

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

2

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

2

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

2

<?php

2

<?php

2

<?php

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

function add_stylesheet_to_head() {

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

function add_stylesheet_to_head() {

function add_stylesheet_to_head() {

2

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

Mặc dù không bắt buộc nhưng bạn phải luôn đăng ký lại một kiểu khác nếu bạn hủy đăng ký một kiểu—bạn có thể làm hỏng thứ gì đó nếu không

Ngoài ra còn có một chức năng tương tự được gọi là

1

Chỉ tải CSS trên các trang cụ thể

WordPress dựa vào nhiều plugin để thêm các loại chức năng khác nhau vào trang web. CSS và JavaScript mà các plugin đó cần thường được yêu cầu trên các trang cụ thể. Điều này có nghĩa là việc tải cùng một CSS không sử dụng trên mỗi trang sẽ dẫn đến sự phình to không cần thiết

Trong phần này, chúng ta sẽ tìm hiểu cách chỉ tải CSS vào WordPress trên những trang thực sự cần thiết

Trong đoạn mã sau, chúng tôi đăng ký tập lệnh và kiểu cho Biểu đồ. js khi hook

1

1

Hàm 

1

1

<?php

2

Đang tải CSS ở Footer

Một cách khác để cải thiện tốc độ tải trang cho người dùng là chỉ tải CSS quan trọng ở phần đầu và tải mọi thứ khác ở phần chân trang

Tham số cuối cùng trong hàm

1

1

1

1

1

<?php

2

3

2

4

2

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

2

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

1

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

Kết thúc mọi thứ

Xin chúc mừng, bây giờ bạn đã biết mọi thứ về việc bao gồm CSS trong WordPress một cách chính xác. Hy vọng bạn thích hướng dẫn

Bạn có mẹo hay kinh nghiệm nào muốn chia sẻ không? . Và nếu bạn thích bài viết này, đừng quên chia sẻ nó với bạn bè của bạn

Nếu bạn muốn tìm hiểu cách thêm CSS vào trang web WordPress của mình mà không cần mã hóa, hãy xem bài đăng của chúng tôi về Cách thêm CSS tùy chỉnh vào trang web WordPress của bạn

• 
  
  

  Cách thêm CSS tùy chỉnh vào trang web WordPress của bạn

  
  
  

  Anna Monus

  18 Th02 2020

Ngoài ra, nếu bạn đang thực hiện các thay đổi đối với chủ đề của bên thứ ba, thì bạn nên tạo một chủ đề con và chỉnh sửa ở đó. Bên cạnh việc thêm trực tiếp các quy tắc CSS tùy chỉnh vào chủ đề WordPress của bạn, bạn cũng có thể đưa các tệp CSS bên ngoài vào hàng đợi một cách an toàn với sự trợ giúp của một chủ đề con

• 
  
  

  Cách tạo chủ đề con WordPress

  
  
  

  Rachel McCollin

  23 Tháng năm 2019

Các chủ đề WordPress tốt nhất trên ThemeForest

Mặc dù bạn có thể làm được nhiều việc với các chủ đề miễn phí, nhưng nếu bạn đang tạo các trang web WordPress chuyên nghiệp, cuối cùng bạn sẽ muốn khám phá các chủ đề trả phí. Bạn có thể khám phá hàng nghìn chủ đề WordPress tốt nhất từng được tạo trên ThemeForest. Những chủ đề WordPress chất lượng cao này sẽ cải thiện trải nghiệm trang web của bạn cho bạn và khách truy cập của bạn.  

Dưới đây là một số chủ đề WordPress bán chạy nhất và sắp ra mắt có sẵn trên ThemeForest cho năm 2021