Thêm CSS và JS tùy chỉnh trong WordPress

Trời ạ, tôi hiểu rằng đây là loại hướng dẫn dành cho người mới bắt đầu nhưng trong tất cả các hướng dẫn khác của tôi, tôi thường nói về việc bao gồm cả JavaScript và CSS, vì vậy kể từ bây giờ tôi có thể cung cấp cho bạn một liên kết đến hướng dẫn này. Và thành thật mà nói, tôi không tìm thấy bất kỳ hướng dẫn hay và mới nào về chủ đề này

Trước khi chúng tôi tiếp tục hướng dẫn, tôi muốn bạn biết rằng bạn không bao giờ được thêm CSS và JS bên ngoài trực tiếp vào các tệp mẫu WordPress như

add_action( 'admin_footer', 'misha_custom_internal_javascript' );
 
function misha_custom_internal_javascript(){
 
	echo '<script>
		jQuery( function( $ ) {
			alert( \'hello\' );
		} );
	</script>';
 
}
5,
add_action( 'admin_footer', 'misha_custom_internal_javascript' );
 
function misha_custom_internal_javascript(){
 
	echo '<script>
		jQuery( function( $ ) {
			alert( \'hello\' );
		} );
	</script>';
 
}
6, v.v. Trong một số trường hợp, bạn có thể thêm một số mã nội bộ vào đó bằng cách sử dụng thẻ
add_action( 'admin_footer', 'misha_custom_internal_javascript' );
 
function misha_custom_internal_javascript(){
 
	echo '<script>
		jQuery( function( $ ) {
			alert( \'hello\' );
		} );
	</script>';
 
}
7 và
add_action( 'admin_footer', 'misha_custom_internal_javascript' );
 
function misha_custom_internal_javascript(){
 
	echo '<script>
		jQuery( function( $ ) {
			alert( \'hello\' );
		} );
	</script>';
 
}
8, nhưng cũng không nên

CSS và JavaScript nội bộ

Để bạn hiểu rõ hơn – CSS nội bộ nằm giữa thẻ

add_action( 'admin_footer', 'misha_custom_internal_javascript' );
 
function misha_custom_internal_javascript(){
 
	echo '<script>
		jQuery( function( $ ) {
			alert( \'hello\' );
		} );
	</script>';
 
}
7 trực tiếp trong HTML và JS nội bộ nằm giữa thẻ
add_action( 'admin_footer', 'misha_custom_internal_javascript' );
 
function misha_custom_internal_javascript(){
 
	echo '<script>
		jQuery( function( $ ) {
			alert( \'hello\' );
		} );
	</script>';
 
}
8

WordPress có 4 hook hành động có thể hữu ích cho CSS và JavaScript nội bộ

  • add_action( 'wp_enqueue_scripts', 'misha_main_theme_css' );
    function misha_main_theme_css() {
    	wp_enqueue_script( 'misha-css', get_stylesheet_uri() );
    	
    }
    1 – sử dụng hook này, bạn có thể thêm CSS/JS nội bộ hoặc bất kỳ thứ gì bạn muốn trước thẻ đóng
    add_action( 'wp_enqueue_scripts', 'misha_main_theme_css' );
    function misha_main_theme_css() {
    	wp_enqueue_script( 'misha-css', get_stylesheet_uri() );
    	
    }
    2,
  • add_action( 'wp_enqueue_scripts', 'misha_main_theme_css' );
    function misha_main_theme_css() {
    	wp_enqueue_script( 'misha-css', get_stylesheet_uri() );
    	
    }
    3 – tương tự nhưng chỉ dành cho bảng điều khiển quản trị viên WordPress,
  • add_action( 'wp_enqueue_scripts', 'misha_main_theme_css' );
    function misha_main_theme_css() {
    	wp_enqueue_script( 'misha-css', get_stylesheet_uri() );
    	
    }
    4 – bạn có thể thêm nội dung nào đó trước thẻ đóng
    add_action( 'wp_enqueue_scripts', 'misha_main_theme_css' );
    function misha_main_theme_css() {
    	wp_enqueue_script( 'misha-css', get_stylesheet_uri() );
    	
    }
    5,
  • add_action( 'wp_enqueue_scripts', 'misha_main_theme_css' );
    function misha_main_theme_css() {
    	wp_enqueue_script( 'misha-css', get_stylesheet_uri() );
    	
    }
    6 – tương tự nhưng chỉ dành cho bảng điều khiển quản trị viên WordPress;

1. Thêm CSS tùy chỉnh vào Bảng điều khiển quản trị viên WordPress bằng móc hành động add_action( 'wp_enqueue_scripts', 'misha_main_theme_css' ); function misha_main_theme_css() { wp_enqueue_script( 'misha-css', get_stylesheet_uri() ); }3

Để tôi chỉ cho bạn một ví dụ nhanh

add_action( 'admin_footer', 'misha_custom_internal_javascript' );
 
function misha_custom_internal_javascript(){
 
	echo '<script>
		jQuery( function( $ ) {
			alert( \'hello\' );
		} );
	</script>';
 
}
3

Tất nhiên

add_action( 'wp_enqueue_scripts', 'misha_main_theme_css' );
function misha_main_theme_css() {
	wp_enqueue_script( 'misha-css', get_stylesheet_uri() );
	
}
8 không cần thiết ở đây, thay vào đó bạn có thể sử dụng mở và đóng các thẻ
add_action( 'wp_enqueue_scripts', 'misha_main_theme_css' );
function misha_main_theme_css() {
	wp_enqueue_script( 'misha-css', get_stylesheet_uri() );
	
}
9

Và đây là kết quả của mã này

Thêm CSS và JS tùy chỉnh trong WordPress

2. Thêm một số JavaScript tùy chỉnh vào Bảng điều khiển quản trị viên WordPress với sự trợ giúp của add_action( 'wp_enqueue_scripts', 'misha_main_theme_css' ); function misha_main_theme_css() { wp_enqueue_script( 'misha-css', get_stylesheet_uri() ); }6

Điều đáng nói ngay từ đầu là không cần thiết chỉ sử dụng

add_action( 'wp_enqueue_scripts', 'misha_main_theme_css' );
function misha_main_theme_css() {
	wp_enqueue_script( 'misha-css', get_stylesheet_uri() );
	
}
3 (hoặc
add_action( 'wp_enqueue_scripts', 'misha_main_theme_css' );
function misha_main_theme_css() {
	wp_enqueue_script( 'misha-css', get_stylesheet_uri() );
	
}
1) cho CSS và
add_action( 'wp_enqueue_scripts', 'misha_main_theme_css' );
function misha_main_theme_css() {
	wp_enqueue_script( 'misha-css', get_stylesheet_uri() );
	
}
6 (hoặc chỉ
add_action( 'wp_enqueue_scripts', 'misha_main_theme_css' );
function misha_main_theme_css() {
	wp_enqueue_script( 'misha-css', get_stylesheet_uri() );
	
}
4 cho JavaScript)

Mã này rất giống với ví dụ trước, thay đổi duy nhất là chúng tôi sử dụng JavaScript thay vì CSS

add_action( 'admin_footer', 'misha_custom_internal_javascript' );
 
function misha_custom_internal_javascript(){
 
	echo '<script>
		jQuery( function( $ ) {
			alert( \'hello\' );
		} );
	</script>';
 
}

Nhân tiện, các thuộc tính

add_action( 'admin_footer', 'misha_custom_internal_javascript' );
 
function misha_custom_internal_javascript(){
 
	echo '<script>
		jQuery( function( $ ) {
			alert( \'hello\' );
		} );
	</script>';
 
}
25 cho thẻ
add_action( 'admin_footer', 'misha_custom_internal_javascript' );
 
function misha_custom_internal_javascript(){
 
	echo '<script>
		jQuery( function( $ ) {
			alert( \'hello\' );
		} );
	</script>';
 
}
7 và
add_action( 'admin_footer', 'misha_custom_internal_javascript' );
 
function misha_custom_internal_javascript(){
 
	echo '<script>
		jQuery( function( $ ) {
			alert( \'hello\' );
		} );
	</script>';
 
}
27 cho thẻ
add_action( 'admin_footer', 'misha_custom_internal_javascript' );
 
function misha_custom_internal_javascript(){
 
	echo '<script>
		jQuery( function( $ ) {
			alert( \'hello\' );
		} );
	</script>';
 
}
8 đã lỗi thời

Tệp CSS và JavaScript bên ngoài

CSS/JS bên ngoài là khi có tệp

add_action( 'admin_footer', 'misha_custom_internal_javascript' );
 
function misha_custom_internal_javascript(){
 
	echo '<script>
		jQuery( function( $ ) {
			alert( \'hello\' );
		} );
	</script>';
 
}
29 hoặc
add_action( 'admin_footer', 'misha_custom_internal_javascript' );
 
function misha_custom_internal_javascript(){
 
	echo '<script>
		jQuery( function( $ ) {
			alert( \'hello\' );
		} );
	</script>';
 
}
70 và tệp đó không nhất thiết phải có trên miền của bạn

Khi bạn phải bao gồm một số tệp CSS hoặc JavaScript bên ngoài, bạn phải luôn sử dụng các hook hành động này

  • add_action( 'admin_footer', 'misha_custom_internal_javascript' );
     
    function misha_custom_internal_javascript(){
     
    	echo '<script>
    		jQuery( function( $ ) {
    			alert( \'hello\' );
    		} );
    	</script>';
     
    }
    71
  • add_action( 'admin_footer', 'misha_custom_internal_javascript' );
     
    function misha_custom_internal_javascript(){
     
    	echo '<script>
    		jQuery( function( $ ) {
    			alert( \'hello\' );
    		} );
    	</script>';
     
    }
    72 – dành cho bảng điều khiển quản trị viên WordPress

Nhưng điều này không phải là tất cả. Bạn không thể chỉ in các thẻ

add_action( 'admin_footer', 'misha_custom_internal_javascript' );
 
function misha_custom_internal_javascript(){
 
	echo '<script>
		jQuery( function( $ ) {
			alert( \'hello\' );
		} );
	</script>';
 
}
8 hoặc
add_action( 'admin_footer', 'misha_custom_internal_javascript' );
 
function misha_custom_internal_javascript(){
 
	echo '<script>
		jQuery( function( $ ) {
			alert( \'hello\' );
		} );
	</script>';
 
}
74 bên trong các móc này, bạn phải sử dụng các chức năng đặc biệt, đây là danh sách mà cá nhân tôi sử dụng khá thường xuyên

  • add_action( 'admin_footer', 'misha_custom_internal_javascript' );
     
    function misha_custom_internal_javascript(){
     
    	echo '<script>
    		jQuery( function( $ ) {
    			alert( \'hello\' );
    		} );
    	</script>';
     
    }
    75 /
    add_action( 'admin_footer', 'misha_custom_internal_javascript' );
     
    function misha_custom_internal_javascript(){
     
    	echo '<script>
    		jQuery( function( $ ) {
    			alert( \'hello\' );
    		} );
    	</script>';
     
    }
    76
  • add_action( 'admin_footer', 'misha_custom_internal_javascript' );
     
    function misha_custom_internal_javascript(){
     
    	echo '<script>
    		jQuery( function( $ ) {
    			alert( \'hello\' );
    		} );
    	</script>';
     
    }
    77 /
    add_action( 'admin_footer', 'misha_custom_internal_javascript' );
     
    function misha_custom_internal_javascript(){
     
    	echo '<script>
    		jQuery( function( $ ) {
    			alert( \'hello\' );
    		} );
    	</script>';
     
    }
    78
  • add_action( 'admin_footer', 'misha_custom_internal_javascript' );
     
    function misha_custom_internal_javascript(){
     
    	echo '<script>
    		jQuery( function( $ ) {
    			alert( \'hello\' );
    		} );
    	</script>';
     
    }
    79 /
    add_action( 'admin_footer', 'misha_custom_internal_javascript' );
     
    function misha_custom_internal_javascript(){
     
    	echo '<script>
    		jQuery( function( $ ) {
    			alert( \'hello\' );
    		} );
    	</script>';
     
    }
    70
  • add_action( 'admin_footer', 'misha_custom_internal_javascript' );
     
    function misha_custom_internal_javascript(){
     
    	echo '<script>
    		jQuery( function( $ ) {
    			alert( \'hello\' );
    		} );
    	</script>';
     
    }
    71
  • add_action( 'admin_footer', 'misha_custom_internal_javascript' );
     
    function misha_custom_internal_javascript(){
     
    	echo '<script>
    		jQuery( function( $ ) {
    			alert( \'hello\' );
    		} );
    	</script>';
     
    }
    72

Có nhiều chức năng hơn. Nhưng sử dụng các chức năng này thường là quá đủ. Tôi sẽ chỉ cho bạn cách đối phó với chúng trong các ví dụ bên dưới

Nhưng làm thế nào các tệp được thêm vào các mẫu HTML của một chủ đề?

1. Bao gồm phong cách chủ đề chính. css

Đơn giản như thế này

add_action( 'wp_enqueue_scripts', 'misha_main_theme_css' );
function misha_main_theme_css() {
	wp_enqueue_script( 'misha-css', get_stylesheet_uri() );
	
}

Trên thực tế, có 3 cách để bạn có thể lấy url của

add_action( 'admin_footer', 'misha_custom_internal_javascript' );
 
function misha_custom_internal_javascript(){
 
	echo '<script>
		jQuery( function( $ ) {
			alert( \'hello\' );
		} );
	</script>';
 
}
77 của một chủ đề

  • add_action( 'admin_footer', 'misha_custom_internal_javascript' );
     
    function misha_custom_internal_javascript(){
     
    	echo '<script>
    		jQuery( function( $ ) {
    			alert( \'hello\' );
    		} );
    	</script>';
     
    }
    78,
  • add_action( 'admin_footer', 'misha_custom_internal_javascript' );
     
    function misha_custom_internal_javascript(){
     
    	echo '<script>
    		jQuery( function( $ ) {
    			alert( \'hello\' );
    		} );
    	</script>';
     
    }
    79,
  • add_action( 'admin_footer', 'misha_custom_internal_javascript' );
     
    function misha_custom_internal_javascript(){
     
    	echo '<script>
    		jQuery( function( $ ) {
    			alert( \'hello\' );
    		} );
    	</script>';
     
    }
    80 – cái này hơi khác một chút, nếu bạn định sử dụng nó trong một chủ đề Con, nó sẽ trả về URL tệp
    add_action( 'admin_footer', 'misha_custom_internal_javascript' );
     
    function misha_custom_internal_javascript(){
     
    	echo '<script>
    		jQuery( function( $ ) {
    			alert( \'hello\' );
    		} );
    	</script>';
     
    }
    77 của một Chủ đề gốc

Ok, nhưng tham số đầu tiên mà tôi đặt là

add_action( 'admin_footer', 'misha_custom_internal_javascript' );
 
function misha_custom_internal_javascript(){
 
	echo '<script>
		jQuery( function( $ ) {
			alert( \'hello\' );
		} );
	</script>';
 
}
82 là gì?

Tham số thứ hai cũng có thể chứa URL đầy đủ của tệp trên miền khác, chẳng hạn như Google Fonts

2. Sử dụng tập lệnh đã đăng ký trước

Vui lòng mở thư mục

add_action( 'admin_footer', 'misha_custom_internal_javascript' );
 
function misha_custom_internal_javascript(){
 
	echo '<script>
		jQuery( function( $ ) {
			alert( \'hello\' );
		} );
	</script>';
 
}
85. Bạn có thấy, rất nhiều tập tin ở đó. Bạn cũng có thể tìm thấy jQuery ở đó và một số plugin JS quen thuộc. Tất cả những điều đó có nghĩa là gì?

Điều đó có nghĩa là hầu hết các tập lệnh đã được đăng ký và nếu bạn định sử dụng chúng, bạn có thể thực hiện theo cách này

add_action( 'admin_footer', 'misha_custom_internal_javascript' );
 
function misha_custom_internal_javascript(){
 
	echo '<script>
		jQuery( function( $ ) {
			alert( \'hello\' );
		} );
	</script>';
 
}
2

Bạn có thể tìm thấy danh sách đầy đủ các tập lệnh đăng ký trước trong tài liệu chính thức của WordPress hoặc trong

add_action( 'admin_footer', 'misha_custom_internal_javascript' );
 
function misha_custom_internal_javascript(){
 
	echo '<script>
		jQuery( function( $ ) {
			alert( \'hello\' );
		} );
	</script>';
 
}
86

Bạn cũng có thể đăng ký trước các tập lệnh và kiểu của riêng mình, chẳng hạn như trong một số chủ đề hoặc plugin, bạn có thể tìm thấy cách triển khai này

add_action( 'admin_footer', 'misha_custom_internal_javascript' );
 
function misha_custom_internal_javascript(){
 
	echo '<script>
		jQuery( function( $ ) {
			alert( \'hello\' );
		} );
	</script>';
 
}
7

Nhân tiện, hàm

add_action( 'admin_footer', 'misha_custom_internal_javascript' );
 
function misha_custom_internal_javascript(){
 
	echo '<script>
		jQuery( function( $ ) {
			alert( \'hello\' );
		} );
	</script>';
 
}
75 có cùng tham số như
add_action( 'admin_footer', 'misha_custom_internal_javascript' );
 
function misha_custom_internal_javascript(){
 
	echo '<script>
		jQuery( function( $ ) {
			alert( \'hello\' );
		} );
	</script>';
 
}
79

3. phụ thuộc

Bạn có biết rằng thứ tự của các phong cách và đặc biệt là các tập lệnh rất quan trọng không? . Vì vậy, nếu bạn đang sử dụng thư viện jQuery, bạn phải bao gồm các tệp

add_action( 'admin_footer', 'misha_custom_internal_javascript' );
 
function misha_custom_internal_javascript(){
 
	echo '<script>
		jQuery( function( $ ) {
			alert( \'hello\' );
		} );
	</script>';
 
}
29 của mình sau nó. Đôi khi thứ tự của các tệp CSS cũng quan trọng

Tôi muốn làm rõ rằng nếu bạn đang sử dụng hook duy nhất

add_action( 'admin_footer', 'misha_custom_internal_javascript' );
 
function misha_custom_internal_javascript(){
 
	echo '<script>
		jQuery( function( $ ) {
			alert( \'hello\' );
		} );
	</script>';
 
}
71 và tất cả các tập lệnh được liệt kê ở đó, thì bạn có thể bỏ qua tham số phụ thuộc. Nhưng nếu bạn tạo một plugin tùy chỉnh và plugin này yêu cầu thư viện jQuery thì đó là điều bắt buộc

add_action( 'admin_footer', 'misha_custom_internal_javascript' );
 
function misha_custom_internal_javascript(){
 
	echo '<script>
		jQuery( function( $ ) {
			alert( \'hello\' );
		} );
	</script>';
 
}
7

Vì vậy, không quan trọng mức độ ưu tiên của hook và bạn sẽ sử dụng mã này trong tệp nào của plugin hoặc chủ đề – trong mọi trường hợp,

add_action( 'wp_enqueue_scripts', 'misha_main_theme_css' );
function misha_main_theme_css() {
	wp_enqueue_script( 'misha-css', get_stylesheet_uri() );
	
}
21 sẽ chỉ được thêm vào tài liệu HTML sau
add_action( 'wp_enqueue_scripts', 'misha_main_theme_css' );
function misha_main_theme_css() {
	wp_enqueue_script( 'misha-css', get_stylesheet_uri() );
	
}
22 và
add_action( 'wp_enqueue_scripts', 'misha_main_theme_css' );
function misha_main_theme_css() {
	wp_enqueue_script( 'misha-css', get_stylesheet_uri() );
	
}
23

4. Ngăn không cho các tệp CSS và JavaScript được lưu vào bộ đệm

Đây là tham số thứ 4 của

add_action( 'admin_footer', 'misha_custom_internal_javascript' );
 
function misha_custom_internal_javascript(){
 
	echo '<script>
		jQuery( function( $ ) {
			alert( \'hello\' );
		} );
	</script>';
 
}
75,
add_action( 'admin_footer', 'misha_custom_internal_javascript' );
 
function misha_custom_internal_javascript(){
 
	echo '<script>
		jQuery( function( $ ) {
			alert( \'hello\' );
		} );
	</script>';
 
}
76,
add_action( 'admin_footer', 'misha_custom_internal_javascript' );
 
function misha_custom_internal_javascript(){
 
	echo '<script>
		jQuery( function( $ ) {
			alert( \'hello\' );
		} );
	</script>';
 
}
79,
add_action( 'admin_footer', 'misha_custom_internal_javascript' );
 
function misha_custom_internal_javascript(){
 
	echo '<script>
		jQuery( function( $ ) {
			alert( \'hello\' );
		} );
	</script>';
 
}
70 dành cho

Trước đây, tôi đã sử dụng chức năng

add_action( 'wp_enqueue_scripts', 'misha_main_theme_css' );
function misha_main_theme_css() {
	wp_enqueue_script( 'misha-css', get_stylesheet_uri() );
	
}
28 ở đó, nó cho phép ngăn hoàn toàn các tệp được lưu vào bộ đệm. Nhưng không phải tốt hơn là chỉ làm mới bộ đệm nếu các tệp đã được thay đổi sao?

Đây là cách

add_action( 'admin_footer', 'misha_custom_internal_javascript' );
 
function misha_custom_internal_javascript(){
 
	echo '<script>
		jQuery( function( $ ) {
			alert( \'hello\' );
		} );
	</script>';
 
}
8

Hàm PHP

add_action( 'wp_enqueue_scripts', 'misha_main_theme_css' );
function misha_main_theme_css() {
	wp_enqueue_script( 'misha-css', get_stylesheet_uri() );
	
}
29 khá thú vị, bởi vì bạn phải chuyển đường dẫn máy chủ tuyệt đối tới nó, điều này có thể dễ dàng thực hiện với
add_action( 'wp_enqueue_scripts', 'misha_main_theme_css' );
function misha_main_theme_css() {
	wp_enqueue_script( 'misha-css', get_stylesheet_uri() );
	
}
20, điều này làm tăng thêm một lớp phức tạp ở đây, vì đường dẫn được trả về bởi
add_action( 'wp_enqueue_scripts', 'misha_main_theme_css' );
function misha_main_theme_css() {
	wp_enqueue_script( 'misha-css', get_stylesheet_uri() );
	
}
20 có liên quan đến tệp chứa nó . Trong ví dụ này, tệp
add_action( 'admin_footer', 'misha_custom_internal_javascript' );
 
function misha_custom_internal_javascript(){
 
	echo '<script>
		jQuery( function( $ ) {
			alert( \'hello\' );
		} );
	</script>';
 
}
77 phải nằm trong cùng thư mục

Hãy cùng xem một ví dụ khác về plugin tùy chỉnh. Chúng tôi có một tệp plugin

add_action( 'wp_enqueue_scripts', 'misha_main_theme_css' );
function misha_main_theme_css() {
	wp_enqueue_script( 'misha-css', get_stylesheet_uri() );
	
}
23, thư mục
add_action( 'wp_enqueue_scripts', 'misha_main_theme_css' );
function misha_main_theme_css() {
	wp_enqueue_script( 'misha-css', get_stylesheet_uri() );
	
}
24 và
add_action( 'wp_enqueue_scripts', 'misha_main_theme_css' );
function misha_main_theme_css() {
	wp_enqueue_script( 'misha-css', get_stylesheet_uri() );
	
}
25 trong đó

add_action( 'wp_enqueue_scripts', 'misha_main_theme_css' );
function misha_main_theme_css() {
	wp_enqueue_script( 'misha-css', get_stylesheet_uri() );
	
}
2

dòng dưới cùng

Chúng tôi có hai cách tiếp cận để ngăn không cho các tệp CSS và JavaScript đi kèm bị lưu vào bộ nhớ cache mãi mãi

  • add_action( 'wp_enqueue_scripts', 'misha_main_theme_css' );
    function misha_main_theme_css() {
    	wp_enqueue_script( 'misha-css', get_stylesheet_uri() );
    	
    }
    28 – trả về thời gian hiện tại tính bằng giây kể từ năm 1970. Vì vậy, mỗi giây nó có một giá trị khác nhau,
  • add_action( 'wp_enqueue_scripts', 'misha_main_theme_css' );
    function misha_main_theme_css() {
    	wp_enqueue_script( 'misha-css', get_stylesheet_uri() );
    	
    }
    29 – trả về thời gian tính bằng giây khi tệp này được sửa đổi lần cuối

Chúng ta có thể đặt tham số này thành

add_action( 'wp_enqueue_scripts', 'misha_main_theme_css' );
function misha_main_theme_css() {
	wp_enqueue_script( 'misha-css', get_stylesheet_uri() );
	
}
28 để loại bỏ hoàn toàn chuỗi truy vấn vì mặc định nó hiển thị phiên bản cài đặt WordPress hiện tại

5. Di chuyển jQuery từ Đầu trang đến Chân trang

Nếu bạn đã từng quét trang web của mình bằng Google PageSpeed, bạn sẽ biết rằng Google luôn khuyến nghị di chuyển tất cả các tệp JavaScript và thậm chí cả tệp CSS của bạn đến chân trang của trang web, trước thẻ đóng

add_action( 'wp_enqueue_scripts', 'misha_main_theme_css' );
function misha_main_theme_css() {
	wp_enqueue_script( 'misha-css', get_stylesheet_uri() );
	
}
5. Theo kinh nghiệm của tôi, tôi có thể nói rằng đó không phải là vấn đề lớn đối với hiệu suất trang web. Nhưng đôi khi di chuyển jQuery và tệp
add_action( 'admin_footer', 'misha_custom_internal_javascript' );
 
function misha_custom_internal_javascript(){
 
	echo '<script>
		jQuery( function( $ ) {
			alert( \'hello\' );
		} );
	</script>';
 
}
29 nặng tùy chỉnh của bạn đến chân trang web có thể là một ý tưởng hay

add_action( 'wp_enqueue_scripts', 'misha_main_theme_css' );
function misha_main_theme_css() {
	wp_enqueue_script( 'misha-css', get_stylesheet_uri() );
	
}
2

Tham số trên dòng 11 cho phép bạn kiểm soát nơi bạn sẽ hiển thị tập lệnh – trong tiêu đề trang web – ________ 851 (mặc định) hoặc chân trang – ________ 852. Hàm

add_action( 'admin_footer', 'misha_custom_internal_javascript' );
 
function misha_custom_internal_javascript(){
 
	echo '<script>
		jQuery( function( $ ) {
			alert( \'hello\' );
		} );
	</script>';
 
}
76 và
add_action( 'admin_footer', 'misha_custom_internal_javascript' );
 
function misha_custom_internal_javascript(){
 
	echo '<script>
		jQuery( function( $ ) {
			alert( \'hello\' );
		} );
	</script>';
 
}
70 không có tham số này

6. Truyền tham số PHP cho JS

Trong phần này của hướng dẫn, tôi muốn nói chủ yếu về chức năng

add_action( 'admin_footer', 'misha_custom_internal_javascript' );
 
function misha_custom_internal_javascript(){
 
	echo '<script>
		jQuery( function( $ ) {
			alert( \'hello\' );
		} );
	</script>';
 
}
71 nhưng bạn có thể sử dụng cho mục đích này
add_action( 'admin_footer', 'misha_custom_internal_javascript' );
 
function misha_custom_internal_javascript(){
 
	echo '<script>
		jQuery( function( $ ) {
			alert( \'hello\' );
		} );
	</script>';
 
}
72 hoàn toàn mới đã xuất hiện trong WP 4. 5

Ý tưởng chính là đôi khi bạn phải chuyển một số giá trị được tạo động vào mã JavaScript của mình mà không tạo thêm lệnh gọi AJAX hoặc sử dụng JS nội bộ. Bạn cũng có thể đoán từ tên hàm “localize script” rằng nó được tạo ra để dịch các chuỗi trong JavaScript. Không nói nhiều nữa, hãy xem các ví dụ

add_action( 'wp_enqueue_scripts', 'misha_main_theme_css' );
function misha_main_theme_css() {
	wp_enqueue_script( 'misha-css', get_stylesheet_uri() );
	
}
5

Vậy hàm

add_action( 'admin_footer', 'misha_custom_internal_javascript' );
 
function misha_custom_internal_javascript(){
 
	echo '<script>
		jQuery( function( $ ) {
			alert( \'hello\' );
		} );
	</script>';
 
}
71 có 3 tham số

  • add_action( 'wp_enqueue_scripts', 'misha_main_theme_css' );
    function misha_main_theme_css() {
    	wp_enqueue_script( 'misha-css', get_stylesheet_uri() );
    	
    }
    58 – tham số đầu tiên là phần xử lý của tập lệnh sẽ sử dụng các tham số,
  • add_action( 'wp_enqueue_scripts', 'misha_main_theme_css' );
    function misha_main_theme_css() {
    	wp_enqueue_script( 'misha-css', get_stylesheet_uri() );
    	
    }
    59 – đó là biến JavaScript (đối tượng) sẽ chứa dữ liệu của chúng ta
  • Và tham số thứ ba là mảng với dữ liệu

Kết quả là hàm sẽ in nội dung như thế này trước javascript bên ngoài của bạn

add_action( 'wp_enqueue_scripts', 'misha_main_theme_css' );
function misha_main_theme_css() {
	wp_enqueue_script( 'misha-css', get_stylesheet_uri() );
	
}
58

add_action( 'admin_footer', 'misha_custom_internal_javascript' );
 
function misha_custom_internal_javascript(){
 
	echo '<script>
		jQuery( function( $ ) {
			alert( \'hello\' );
		} );
	</script>';
 
}
0

Bạn có thể sử dụng bất kỳ tham số nào theo cách này

add_action( 'admin_footer', 'misha_custom_internal_javascript' );
 
function misha_custom_internal_javascript(){
 
	echo '<script>
		jQuery( function( $ ) {
			alert( \'hello\' );
		} );
	</script>';
 
}
1

7. Hủy đăng ký tập lệnh và biểu định kiểu bạn không cần

Ví dụ điển hình ở đây là plugin Contact Form 7 có thêm biểu định kiểu của riêng nó trên trang web của bạn. Trong một số trường hợp, bạn có thể không cần đến nó, vì vậy hãy để tôi chỉ cho bạn cách tắt nó một cách dễ dàng

add_action( 'admin_footer', 'misha_custom_internal_javascript' );
 
function misha_custom_internal_javascript(){
 
	echo '<script>
		jQuery( function( $ ) {
			alert( \'hello\' );
		} );
	</script>';
 
}
2

Bạn có thể thắc mắc – làm sao tôi đoán được phần xử lý của tệp css, đó là

add_action( 'admin_footer', 'misha_custom_internal_javascript' );
 
function misha_custom_internal_javascript(){
 
	echo '<script>
		jQuery( function( $ ) {
			alert( \'hello\' );
		} );
	</script>';
 
}
01 trên dòng 4. Trên thực tế, nó rất dễ lấy, chỉ cần mở mã nguồn của trang của bạn trong trình duyệt, tìm tập lệnh hoặc biểu định kiểu mà bạn muốn xóa và xem thuộc tính thẻ
add_action( 'admin_footer', 'misha_custom_internal_javascript' );
 
function misha_custom_internal_javascript(){
 
	echo '<script>
		jQuery( function( $ ) {
			alert( \'hello\' );
		} );
	</script>';
 
}
02 của nó. Trong ví dụ này là
add_action( 'admin_footer', 'misha_custom_internal_javascript' );
 
function misha_custom_internal_javascript(){
 
	echo '<script>
		jQuery( function( $ ) {
			alert( \'hello\' );
		} );
	</script>';
 
}
03, nói cách khác là
add_action( 'admin_footer', 'misha_custom_internal_javascript' );
 
function misha_custom_internal_javascript(){
 
	echo '<script>
		jQuery( function( $ ) {
			alert( \'hello\' );
		} );
	</script>';
 
}
04. Nhưng mà. thẻ tập lệnh không có thuộc tính
add_action( 'admin_footer', 'misha_custom_internal_javascript' );
 
function misha_custom_internal_javascript(){
 
	echo '<script>
		jQuery( function( $ ) {
			alert( \'hello\' );
		} );
	</script>';
 
}
02. Cái này bạn tự tìm hiểu nhé. Tôi khuyên bạn nên thực hiện tìm kiếm trong các tệp

8. Cách thêm tập lệnh vào các trang cụ thể

Sử dụng các thẻ có điều kiện là OK. Danh sách các thẻ bạn có thể tìm thấy ở đây, trong tài liệu chính thức của WordPress

add_action( 'admin_footer', 'misha_custom_internal_javascript' );
 
function misha_custom_internal_javascript(){
 
	echo '<script>
		jQuery( function( $ ) {
			alert( \'hello\' );
		} );
	</script>';
 
}
3

Trường hợp với tập lệnh quản trị thì khác, bởi vì hook hành động

add_action( 'admin_footer', 'misha_custom_internal_javascript' );
 
function misha_custom_internal_javascript(){
 
	echo '<script>
		jQuery( function( $ ) {
			alert( \'hello\' );
		} );
	</script>';
 
}
72 chấp nhận tham số
add_action( 'admin_footer', 'misha_custom_internal_javascript' );
 
function misha_custom_internal_javascript(){
 
	echo '<script>
		jQuery( function( $ ) {
			alert( \'hello\' );
		} );
	</script>';
 
}
07 là mã định danh của trang quản trị

add_action( 'admin_footer', 'misha_custom_internal_javascript' );
 
function misha_custom_internal_javascript(){
 
	echo '<script>
		jQuery( function( $ ) {
			alert( \'hello\' );
		} );
	</script>';
 
}
4

Nếu bạn muốn kiểm tra xem

add_action( 'admin_footer', 'misha_custom_internal_javascript' );
 
function misha_custom_internal_javascript(){
 
	echo '<script>
		jQuery( function( $ ) {
			alert( \'hello\' );
		} );
	</script>';
 
}
07 của một trang quản trị nào đó là gì, bạn chỉ cần
add_action( 'admin_footer', 'misha_custom_internal_javascript' );
 
function misha_custom_internal_javascript(){
 
	echo '<script>
		jQuery( function( $ ) {
			alert( \'hello\' );
		} );
	</script>';
 
}
09 trực tiếp từ hook khi bạn đang ở trang đó

Đó là tất cả cho hướng dẫn cơ bản này 🙌 Nếu bạn có bất kỳ câu hỏi nào, vui lòng bình luận bên dưới

# WordPress

Thêm CSS và JS tùy chỉnh trong WordPress

Misha Rudrastyh

Chào các bạn và chào mừng đến với trang web của tôi. Trong hơn 10 năm, tôi đã cố gắng hết sức để chia sẻ miễn phí với bạn một số hướng dẫn và mẹo tuyệt vời về WordPress

Làm cách nào để thêm HTML CSS và JavaScript vào WordPress?

Vào Giao diện -> Tùy chỉnh. Trong tùy biến, có tùy chọn 'CSS bổ sung'. Nhấp vào đó và thêm tất cả CSS bạn cần rồi lưu lại . Đây là cách dễ nhất để thêm CSS tùy chỉnh vào chủ đề của bạn.

Tôi có thể thêm JavaScript tùy chỉnh vào WordPress không?

Để thêm JavaScript tùy chỉnh vào trang web WordPress của bạn bằng cách sử dụng các hàm và hook, bạn cần chèn mã của mình vào các hàm của chủ đề con của bạn. tệp php . Bây giờ bạn đã tạo chủ đề con của mình, bạn có thể kích hoạt nó bằng cách đi tới Giao diện → Trình chỉnh sửa tệp chủ đề từ bảng điều khiển WordPress của bạn.

Bạn có thể thêm HTML và CSS tùy chỉnh cho WordPress không?

Ngoài ra, bạn có thể thêm kiểu CSS từ Trình tùy chỉnh WordPress . Đây là các bước cho việc này. Từ bảng điều khiển WordPress đến Giao diện-> Tùy chỉnh. Từ Cài đặt chung chọn “CSS bổ sung”.