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ênCSS 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>';
} 8WordPress 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>';
} 3Tấ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() );
} 9Và đây là kết quả của mã này 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ờiTệp CSS và JavaScript bên ngoàiCSS/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ạnKhi 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>';
} 71add_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ênadd_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>';
} 76add_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>';
} 78add_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>';
} 70add_action( 'admin_footer', 'misha_custom_internal_javascript' );
function misha_custom_internal_javascript(){
echo '<script>
jQuery( function( $ ) {
alert( \'hello\' );
} );
</script>';
} 71add_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ướcVui 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>';
} 2Bạ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>';
} 86Bạ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>';
} 7Nhâ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>';
} 793. phụ thuộcBạ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ọngTô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ộcadd_action( 'admin_footer', 'misha_custom_internal_javascript' );
function misha_custom_internal_javascript(){
echo '<script>
jQuery( function( $ ) {
alert( \'hello\' );
} );
</script>';
} 7Vì 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() );
} 234. 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 choTrướ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>';
} 8Hà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ụcHã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() );
} 2dò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ại5. Di chuyển jQuery từ Đầu trang đến Chân trangNế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 hayadd_action( 'wp_enqueue_scripts', 'misha_main_theme_css' );
function misha_main_theme_css() {
wp_enqueue_script( 'misha-css', get_stylesheet_uri() );
} 2Tham 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ày6. Truyền tham số PHP cho JSTrong 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() );
} 5Vậ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() );
} 58add_action( 'admin_footer', 'misha_custom_internal_javascript' );
function misha_custom_internal_javascript(){
echo '<script>
jQuery( function( $ ) {
alert( \'hello\' );
} );
</script>';
} 0Bạ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>';
} 17. Hủy đăng ký tập lệnh và biểu định kiểu bạn không cầnVí 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>';
} 2Bạ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ệp8. 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>';
} 3Trườ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>';
} 4Nế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 Misha RudrastyhChà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”. |