Hướng dẫn wordpress child theme add js - chủ đề con wordpress thêm js

Bạn nên thực hiện tập lệnh trong các chức năng của chủ đề con.php. Ví dụ: nếu tên của tệp JS là Custom.js và nếu bạn đặt nó trong thư mục JS trong chủ đề con của bạn, thì trong Function.php bạn nên thêm

function my_custom_scripts() {
    wp_enqueue_script( 'custom-js', get_stylesheet_directory_uri() . '/js/custom.js', array( 'jquery' ),'',true );
}
add_action( 'wp_enqueue_scripts', 'my_custom_scripts' );

Tại đây get_stylesheet_directory_uri() sẽ trả về thư mục của chủ đề con bạn, sau đó array( 'jquery' ) sẽ làm cho JS tải của bạn sau khi jQuery, nếu tập lệnh của bạn yêu cầu JS thì bạn nên sử dụng điều này khác mà bạn có thể xóa hoặc bạn có thể thêm tập lệnh phụ thuộc vào đây, thì tham số cuối cùng là True, là để làm cho JS của bạn tải ở chân trang.

Nếu bạn muốn nâng cao chức năng của trang web WordPress của mình, bạn sẽ cần thêm JavaScript vào trang web của mình cho dù bạn đang sử dụng & NBSP; Thư viện bên thứ ba hoặc tập lệnh tùy chỉnh. & NBSP;

Dựa trên mục tiêu và kiến ​​thức mã hóa của bạn, bạn có thể chọn từ một vài kỹ thuật để thêm JavaScript tùy chỉnh vào WordPress, từ sử dụng các plugin đến gắn các tập lệnh tùy chỉnh vào các hook hành động khác nhau. & NBSP;

Trong hướng dẫn này, chúng tôi sẽ xem xét từng phương pháp, xem cách chúng hoạt động và giải thích khi nào bạn nên sử dụng phương pháp nào.

Thêm JavaScript tùy chỉnh vào WordPress

Mặc dù bạn có thể sử dụng tùy chỉnh tích hợp của WordPress để thêm CSS tùy chỉnh vào chủ đề của mình, bạn không thể làm điều tương tự với JavaScript. Để thêm JavaScript tùy chỉnh vào trang web WordPress của bạn, bạn cần & nbsp; sử dụng plugin hoặc chỉnh sửa tệp & nbsp; function.php của chủ đề (con) của bạn. Chúng tôi sẽ xem xét cả hai tùy chọn một cách chi tiết, nhưng đây là một bản tóm tắt ngắn.functions.php file. We will have a look at both options in detail, but here's a short summary.

1. Bạn có thể sử dụng các loại plugin khác nhau để thêm JavaScript tùy chỉnh vào WordPress: & NBSP;

• Plugin để chỉnh sửa các mẫu tiêu đề và chân trang
• các plugin để thêm mã JS tùy chỉnh vào WordPress
• Các plugin dành riêng cho kịch bản để thêm và định cấu hình các tập lệnh của bên thứ ba như Google Analytics hoặc AdSense

2. Hoặc bạn có thể sử dụng các hàm và móc WordPress trong & nbsp; function.php & nbsp; file:functions.php file:

• The & nbsp; ________ 9 & nbsp; và & nbsp;
• The & nbsp; ________ 11 & nbsp;, & nbsp;
• & nbsp; ________ 14 & nbsp; chức năng WordPress

Một điều bạn không bao giờ nên làm

Mặc dù cách dễ nhất để thêm tập lệnh tùy chỉnh vào trang web & nbsp; WordPress của bạn là bằng cách bỏ thẻ ____ 15 & nbsp; trực tiếp vào tệp & nbsp của bạn; Điều này là do WordPress có một chuỗi tải cụ thể nên được tôn trọng trong mọi trường hợp. & NBSP;header.php or footer.php template file, you should never do so. This is because WordPress has a specific loading sequence that should be respected under any circumstances. 

Nếu bạn chèn JavaScript tùy chỉnh trực tiếp vào tiêu đề hoặc mẫu chân trang, nó có thể gây ra xung đột với chủ đề của bạn và các plugin NBSP; chạy trên trang web của bạn hoặc Core WordPress. Thay vào đó, bạn nên sử dụng một trong các kỹ thuật chi tiết trong bài viết này. & NBSP;

Vì vậy, không bao giờ thêm một dòng như & nbsp; sau dòng & nbsp; vào tệp & nbsp của bạn;header.php or footer.php file (even if you could technically do it):

<script src="https://example.com/wp-content/themes/your-theme/js/script.js"></script>

1. Sử dụng plugin để thêm JavaScript tùy chỉnh vào WordPress & NBSP; Use a Plugin to Add Custom JavaScript to WordPress 

Sử dụng plugin là phương pháp được đề xuất khi bạn:

• không muốn chỉnh sửa trực tiếp các tệp nguồn
• Muốn thêm JavaScript độc lập với chủ đề mà bạn có thể giữ ngay cả khi bạn quyết định chuyển sang một chủ đề mới

Bạn có thể sử dụng các loại plugin khác nhau để thêm JavaScript tùy chỉnh vào trang web WordPress của mình.

1.1. Plugin để chỉnh sửa tiêu đề.php và footer.phpheader.php and footer.php

Tùy chọn đầu tiên là & nbsp; sử dụng một plugin cho phép bạn & nbsp; chỉnh sửa các tệp mẫu tiêu đề và chân trang & nbsp; của chủ đề WordPress của bạn. Nếu bạn muốn thêm & nbsp; tập lệnh tải & nbsp; trước nội dung trang, chẳng hạn như phân tích và theo dõi tập lệnh, bạn cần chỉnh sửa & nbsp; mẫu tiêu đề, trong khi & nbsp; Thông thường, khi tập lệnh của bạn sửa đổi một phần tử được hiển thị trên trang của bạn, chẳng hạn như tập lệnh thư viện hình ảnh, nó sẽ được đặt vào chân trang.

Chèn tiêu đề và chân trang & nbsp; là một ví dụ tốt về một plugin cho phép bạn chỉnh sửa các mẫu tiêu đề và chân trang. Nó & nbsp; có một giao diện người dùng đơn giản chỉ với hai khu vực văn bản, một cho tiêu đề và một cho các tập lệnh chân trang. Nó thêm các tập lệnh của bạn vào các móc hành động wp_head hoặc ____10. & NBSP;

Bạn có thể chèn bất kỳ loại tập lệnh nào vào hai trường đầu vào. Bạn cần & nbsp; kèm theo các tập lệnh của bạn với thẻ

<script src="https://example.com/wp-content/themes/your-theme/js/script.js"></script>

<script src="https://example.com/wp-content/themes/your-theme/js/script.js"></script>

1.2. Các plugin để thêm JavaScript & NBSP tùy chỉnh;

Một tùy chọn khác là & nbsp; chọn một plugin cho phép bạn thêm JavaScript tùy chỉnh vào trang web WordPress của bạn. Các plugin này rất giống với các plugin chỉnh sửa tiêu đề và chân trang, và hầu hết chúng cũng sử dụng & nbsp; ____ 9 & nbsp; và & nbsp; Tuy nhiên, họ thường cung cấp cho bạn nhiều tùy chọn cấu hình hơn.

Chẳng hạn, & nbsp; CSS và JS & NBSP; plugin tùy chỉnh đơn giản cho phép bạn xác định permalink cho các tệp javascript tùy chỉnh của bạn, lưu chúng vào & nbsp; wp-intent/ thư mục, quản lý tập lệnh của bạn dưới dạng loại bài đăng tùy chỉnh. Nếu bạn muốn thêm nhiều tệp JavaScript tùy chỉnh vào trang web WordPress của mình và giữ chúng được tổ chức, bạn sẽ thấy loại plugin này rất hữu ích.wp-content/ folder, manage your scripts as a custom post type, and more. If you want to add multiple custom JavaScript files to your WordPress site and keep them organized, you will find this type of plugin very useful.

1.3. Các plugin dành riêng cho kịch bản

Cuối cùng, nếu bạn chỉ muốn thêm một tập lệnh của bên thứ ba vào trang web của mình, bạn cũng có thể kiểm tra xem nó có plugin tích hợp cho WordPress không. Người tạo ra các thư viện JavaScript của bên thứ ba phổ biến thường xuất bản một plugin miễn phí trong repo wordpress.org để bạn có thể dễ dàng thêm công cụ của họ vào trang web của mình. Ưu điểm lớn nhất của loại plugin này là nó thường sẽ đi kèm với các tùy chọn cấu hình tích hợp cho thư viện JavaScript cụ thể đó.

Ví dụ: plugin GA Google Analytics phổ biến cho phép bạn thêm Google Analytics vào trang web của mình ngay từ khu vực Quản trị WordPress. Nó đi kèm với các tính năng tích hợp dành riêng cho tập lệnh Google Analytics, chẳng hạn như phân bổ liên kết nâng cao, ẩn danh IP, đối tượng Trình theo dõi tùy chỉnh và các đối tượng khác.

2. Chỉnh sửa tệp chức năng của chủ đề con bạn.php Edit Your Child Theme's functions.php File

Bên cạnh việc dựa vào các plugin, bạn cũng có thể sử dụng các chức năng và móc hành động tích hợp của WordPress để thêm JavaScript tùy chỉnh vào trang web của bạn. Trong trường hợp này, bạn cần chỉnh sửa tệp & nbsp; function.php của mình & nbsp; và tải các tập lệnh theo cách thủ công lên máy chủ của bạn. Mã tùy chỉnh. Bạn có thể tải lên các tập lệnh tùy chỉnh & nbsp; vào thư mục gốc của chủ đề con bạn hoặc, nếu bạn có nhiều tập lệnh, bạn có thể tạo thư mục A & nbsp; scripts & nbsp; cho chúng.functions.php file and upload the scripts manually to your server. It's also advisable to create a child theme for your customizations so that you can securely update the parent theme without losing the custom code. You can upload your custom scripts to your child theme's root folder or, if you have more than one script, you can create a scripts folder for them.

Bạn cần thêm mã PHP enqueues hoặc in ra JavaScript & nbsp tùy chỉnh của bạn vào tệp function.php của con bạn. Bạn có thể chỉnh sửa tệp này trong Trình chỉnh sửa mã của mình và tải phiên bản cập nhật theo cách thủ công lên máy chủ của bạn hoặc chỉnh sửa nó thông qua Trình chỉnh sửa chủ đề> Trình chỉnh sửa chủ đề & nbsp; menu của khu vực quản trị WordPress của bạn (xem ảnh chụp màn hình bên dưới).functions.php file. You can either edit this file in your code editor and upload the updated version manually to your server, or edit it via the Appearance > Theme Editor menu of your WordPress admin area (see the screenshot below).

2.1. Enqueue tập lệnh tùy chỉnh của bạn với hàm <script src="https://example.com/wp-content/themes/your-theme/js/script.js"></script>4

Cẩm nang chủ đề WordPress khuyến nghị chức năng & nbsp; ____ 14 & nbsp; để thêm các tập lệnh tùy chỉnh vào trang web của bạn. Chức năng tích hợp này & nbsp; tôn trọng chuỗi tải của WordPress và các tập lệnh tùy chỉnh của bạn theo thứ tự thích hợp, vì vậy chúng sẽ không mâu thuẫn với các tập lệnh khác được tải bởi & nbsp; lõi WordPress và các plugin chạy trên trang web của bạn.

Với

<script src="https://example.com/wp-content/themes/your-theme/js/script.js"></script>

/* Custom script with no dependencies, enqueued in the header */
add_action('wp_enqueue_scripts', 'tutsplus_enqueue_custom_js');
function tutsplus_enqueue_custom_js() {
    wp_enqueue_script('custom', get_stylesheet_directory_uri().'/scripts/custom.js');
}

Nếu bạn muốn thêm tập lệnh của mình vào tiêu đề, bạn chỉ cần xác định một tay cầm tùy chỉnh (

/* Custom script with no dependencies, enqueued in the header */
add_action('wp_enqueue_scripts', 'tutsplus_enqueue_custom_js');
function tutsplus_enqueue_custom_js() {
    wp_enqueue_script('custom', get_stylesheet_directory_uri().'/scripts/custom.js');
}

/* Custom script with no dependencies, enqueued in the header */
add_action('wp_enqueue_scripts', 'tutsplus_enqueue_custom_js');
function tutsplus_enqueue_custom_js() {
    wp_enqueue_script('custom', get_stylesheet_directory_uri().'/scripts/custom.js');
}

/* Custom script with no dependencies, enqueued in the header */
add_action('wp_enqueue_scripts', 'tutsplus_enqueue_custom_js');
function tutsplus_enqueue_custom_js() {
    wp_enqueue_script('custom', get_stylesheet_directory_uri().'/scripts/custom.js');
}

<script src="https://example.com/wp-content/themes/your-theme/js/script.js"></script>

/* Custom script with no dependencies, enqueued in the header */
add_action('wp_enqueue_scripts', 'tutsplus_enqueue_custom_js');
function tutsplus_enqueue_custom_js() {
    wp_enqueue_script('custom', get_stylesheet_directory_uri().'/scripts/custom.js');
}

Coi chừng mặc dù & nbsp; ________ 14 & nbsp; chức năng WordPress tích hợp và & nbsp; ________ 11 & nbsp; Hook hành động có cùng tên, chúng là & nbsp; những thứ khác nhau.

Bên cạnh các tập lệnh giới thiệu cho tiêu đề, bạn cũng có thể sử dụng chức năng & nbsp; ____ 14 & nbsp; để thêm JavaScript tùy chỉnh vào mẫu chân trang. Tuy nhiên, trong trường hợp này, bạn cũng cần xác định tất cả các tham số tùy chọn, tương ứng: & nbsp;

1. Các phụ thuộc: ________ 34 & nbsp; vì chúng ta không có sự phụ thuộc nào bây giờ
2. Phiên bản của tập lệnh: ________ 35 & nbsp; vì chúng tôi không muốn thêm & nbsp; số phiên bản
3. Cho dù đây là dành cho tiêu đề hay mẫu chân trang: ____ 36 & nbsp; Khi chúng tôi chuyển sang mẫu chân trang, đó là tùy chọn không mặc định

/* Custom script with no dependencies, enqueued in the footer */
add_action('wp_enqueue_scripts', 'tutsplus_enqueue_custom_js');
function tutsplus_enqueue_custom_js() {
    wp_enqueue_script('custom', get_stylesheet_directory_uri().'/scripts/custom.js', 
    array(), false, true);
}

Nếu tập lệnh tùy chỉnh của bạn có các phụ thuộc, bạn cần thêm chúng vào & nbsp; tham số ________ 34 & nbsp; của hàm

<script src="https://example.com/wp-content/themes/your-theme/js/script.js"></script>

/* Custom script with no dependencies, enqueued in the footer */
add_action('wp_enqueue_scripts', 'tutsplus_enqueue_custom_js');
function tutsplus_enqueue_custom_js() {
    wp_enqueue_script('custom', get_stylesheet_directory_uri().'/scripts/custom.js', 
    array(), false, true);
}

<script src="https://example.com/wp-content/themes/your-theme/js/script.js"></script>

/* Custom script with no dependencies, enqueued in the footer */
add_action('wp_enqueue_scripts', 'tutsplus_enqueue_custom_js');
function tutsplus_enqueue_custom_js() {
    wp_enqueue_script('custom', get_stylesheet_directory_uri().'/scripts/custom.js', 
    array(), false, true);
}

/* Custom script with jQuery as a dependency, enqueued in the footer */
add_action('wp_enqueue_scripts', 'tutsplus_enqueue_custom_js');
function tutsplus_enqueue_custom_js() {
    wp_enqueue_script('custom', get_stylesheet_directory_uri().'/scripts/custom.js', 
    array('jquery'), false, true);
}

Nếu bạn có một phụ thuộc không được WordPress đăng ký, bạn cần đăng ký và Enqueue với chức năng

<script src="https://example.com/wp-content/themes/your-theme/js/script.js"></script>

Nếu bạn muốn chạy tập lệnh của mình trong khu vực quản trị thay vì mặt trước của trang web của bạn, bạn cần sử dụng & nbsp; Hook hành động ____ 12 & nbsp; thay vì ________ 11 & nbsp; trong hàm

/* Custom script with no dependencies, enqueued in the header */
add_action('wp_enqueue_scripts', 'tutsplus_enqueue_custom_js');
function tutsplus_enqueue_custom_js() {
    wp_enqueue_script('custom', get_stylesheet_directory_uri().'/scripts/custom.js');
}

2.2. In ra & nbsp; tập lệnh nội tuyến của bạn bằng các móc hành động wp_head hoặc <script src="https://example.com/wp-content/themes/your-theme/js/script.js"></script>0

Mặc dù tài liệu WordPress & nbsp; khuyến nghị sử dụng hàm

<script src="https://example.com/wp-content/themes/your-theme/js/script.js"></script>

Đây là cách bạn có thể sử dụng móc hành động wp_head để in ra tập lệnh nội tuyến trong mẫu tiêu đề:

<?php
/* Inline script printed out in the header */
add_action('wp_head', 'tutsplus_add_script_wp_head');
function tutsplus_add_script_wp_head() {
    ?>
        <script>
            console.log("I'm an inline script tag added to the header.");
        </script>
    <?php
}

Và đây là cách bạn có thể sử dụng móc hành động

<script src="https://example.com/wp-content/themes/your-theme/js/script.js"></script>

<?php
/* Inline script printed out in the footer */
add_action('wp_footer', 'tutsplus_add_script_wp_footer');
function tutsplus_add_script_wp_footer() {
    ?>
        <script>
            console.log("I'm an inline script tag added to the footer.");
        </script>
    <?php
}

Vì wp_head và

<script src="https://example.com/wp-content/themes/your-theme/js/script.js"></script>

<?php
/* Inline script printed out in the header */
add_action('wp_head', 'tutsplus_add_script_wp_head');
function tutsplus_add_script_wp_head() {
    ?>
        <script>
            console.log("I'm an inline script tag added to the header.");
        </script>
    <?php
}

<?php
/* Inline script printed out in the header */
add_action('wp_head', 'tutsplus_add_script_wp_head');
function tutsplus_add_script_wp_head() {
    ?>
        <script>
            console.log("I'm an inline script tag added to the header.");
        </script>
    <?php
}

/* Custom script with no dependencies, enqueued in the header */
add_action('wp_enqueue_scripts', 'tutsplus_enqueue_custom_js');
function tutsplus_enqueue_custom_js() {
    wp_enqueue_script('custom', get_stylesheet_directory_uri().'/scripts/custom.js');
}

<?php
/* Inline script printed out in the header */
add_action('wp_head', 'tutsplus_add_script_wp_head');
function tutsplus_add_script_wp_head() {
    ?>
        <script>
            console.log("I'm an inline script tag added to the header.");
        </script>
    <?php
}

<?php
/* Inline script printed out in the header */
add_action('wp_head', 'tutsplus_add_script_wp_head');
function tutsplus_add_script_wp_head() {
    ?>
        <script>
            console.log("I'm an inline script tag added to the header.");
        </script>
    <?php
}

Lưu ý rằng các plugin đã nói ở trên (chèn tiêu đề và chân trang và CSS và JS tùy chỉnh đơn giản) sử dụng wp_head và

<script src="https://example.com/wp-content/themes/your-theme/js/script.js"></script>

<script src="https://example.com/wp-content/themes/your-theme/js/script.js"></script>

<script src="https://example.com/wp-content/themes/your-theme/js/script.js"></script>

Gói lên

Bạn có thể thêm JavaScript tùy chỉnh vào trang web WordPress của mình bằng cách sử dụng plugin hoặc bằng cách chỉnh sửa tập tin chủ đề hoặc nbsp; function.php của chủ đề hoặc nbsp;functions.php file. 

Sử dụng plugin là kỹ thuật được đề xuất nếu bạn không muốn chỉnh sửa các tệp nguồn của mình, vì các plugin này đảm bảo rằng các tập lệnh tùy chỉnh của bạn tải theo đúng thứ tự. Việc giới thiệu các tập lệnh của bạn trong tệp & nbsp; function.php cho phép bạn buộc các tập lệnh tùy chỉnh của bạn với chủ đề của bạn và giữ mọi thứ theo thứ tự mà không phải thêm plugin khác vào trang web WordPress của bạn.functions.php file manually allows you to tie your custom scripts to your theme and keep everything in order without having to add another plugin to your WordPress site.

Các chủ đề và plugin WordPress tốt nhất trên Chợ Envato

Khám phá hàng ngàn chủ đề WordPress tốt nhất từng được tạo trên các plugin WordPress và hàng đầu WordPress trên Codecanyon. Mua các chủ đề và plugin WordPress chất lượng cao này, và 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. & NBSP;

Dưới đây là một vài trong số các chủ đề và plugin WordPress bán chạy nhất và sắp tới có sẵn cho năm 2020.

Làm cách nào để thêm JavaScript vào một chủ đề con trong WordPress?

Bạn có thể thêm JS vào WordPress không?

Làm cách nào để thêm tệp JS vào WordPress?

Làm cách nào để tạo một chủ đề con tùy chỉnh trong WordPress?