Hướng dẫn thêm JavaScript trong WordPress

Bạn có muốn thêm JavaScript vào bài viết hoặc trang trong WordPress? Trong quá trình làm việc với WordPress, sẽ có lúc bạn muốn thêm mã JavaScript vào website hoặc một trang cụ thể nào đó. Theo mặc định WordPress không cho phép bạn thêm trực tiếp mã JavaScript. Trong bài viết này tôi sẽ chia sẽ cách thêm mã JavaScript vào bài viết hoặc trang một cách dễ dàng.

JavaScript là gì?

JavaScript là một ngôn ngữ lập trình không thực thi trên máy chủ nhưng thực thi trên trình duyệt của người dùng. Nó cho phép các lập trình viên thực hiện những điều tuyệt vời nhưng không làm chậm website của bạn.

Nếu bạn muốn nhúng một trình chơi video, thêm một máy tính, hoặc các dịch vụ của bên thứ ba bạn thường được hướng dẫn là copy vào paste các đoạn mã JavaScript vào website của mình.

Một đoạn mã JavaScript sẽ trông như ví dụ bên dưới

script type=”text/javascript”>
// Some JavaScript code
</script>
<!– Another Example: –!>
<script type=”text/javascript” src=”/path/to/some-script.js”></script>

Nếu bạn thêm một đoạn mã JavaScript trực tiếp vào bài viết, nó sẽ bị xóa bởi WordPress khi bạn lưu lại nội dung bài viết của mình.

Nhưng đừng quá lo lắng, chúng ta có cách để thêm mã JavaScript vào các bài viết, trang theo nhu cầu sử dụng của mình. Bạn đã sẵn sàng chưa? Chúng ta hãy cùng tìm hiểu cách thêm mã JavaScript vào WordPress một cách dễ hiểu nhất.

Cách 1. Sử dụng tính năng Insert Header và Footer để thêm mã JavaScript

Đôi khi bạn sẽ được yêu cầu copy và paste đoạn mã JavaScript vào website của bạn để thêm công cụ của bên thứ ba. Các đoạn script này thường được chèn vào phần Header hoặc Footer tức là nằm trước thẻ </body> của website. Với cách này mã sẽ được hiển thị mỗi lần xem trang.

Ví dụ: Mã Google Analytics sẽ hiển thị trên mỗi trang để theo dõi khách truy cập trên trang của bạn.

Bạn có thể thêm các mã tương tự như thế vào Header (header.php) hoặc Footer (footer.php) trong WordPress Theme. Tuy nhiên các đoạn mã này sẽ bị mất đi nếu bạn cập nhật phiên bản mới của WordPress Theme.

Vì thế tôi khuyên bạn nên sử dụng plugin để tải các mã JavaScript trên website của mình.

Trước tiên bạn cần cài đặt và kích hoạt plugin có tên là  Insert Headers and Footers. Nếu bạn là người mới, chưa biết cách cài đặt và kích hoạt plugin, hãy đọc lại bài viết Hướng dẫn cài đặt và quản lý plugin trong WordPress.

Sau khi kích hoạt, bạn cần truy cập vào trang Settings » Insert Headers and Footers. Bạn sẽ nhìn thấy hai hộp văn bản. Một hộp dùng để chứa mã Script cho Header, một hộp cho Footer.

insert headers and footers

Giờ bạn có thể dán đoạn mã mà mình đã sao chép vào một trong hai hộp (hoặc cả hai) sau đó nhấn nút Save để lưu lại.

Plugin Insert Headers and Footers sẽ tự động tải đoạn code bạn đã thêm trên các trang của website.

Cách 2. Dùng code để thêm JavaScript một cách thủ công

Với cách này, bạn cần thêm code vào các tập tin WordPress của mình.

Đầu tiên, chúng ta cùng tìm hiểu cách thêm code vào Header của website. Để làm được điều đó bạn cần thêm đoạn code bên dưới vào tập tin functions.php của WordPress Theme.

function hook_javascript() {
?>
<script>
// your javscript code goes
</script>
<?php
add_action(‘wp_head’, ‘hook_javascript’);

Thêm JavaSript vào bài viết hoặc trang cụ thể trong WordPress

Giả sử bạn chỉ muốn thêm mã JavaSript vào một bài viết cụ thể nào đó. Để làm điều đó, bạn cần thêm logic điều kiện vào đoạn mã. Chúng ta hãy cùng tìm hiểu ví dụ sau:

function hook_javascript() {
if (is_single (’16’)) {
?>
<script type=”text/javascript”>
// your javscript code goes here
</script>
<?php
}
add_action(‘wp_head’, ‘hook_javascript’);

Nếu để ý kỹ đoạn mã trên, bạn sẽ thấy rằng tôi đã để mã JavaScript vào trong câu lệnh điều kiện. Nếu bài viết có ID là 16 thì chèn đoạn JavaScript vào. Bạn có thể thay ID 16 bằng số ID của bài viết mà mình muốn chèn mã JavaScript.

Đoạn code này sẽ vẫn hoạt động đối với bất kỳ loại nội dung nào trừ các trang. Chúng ta hãy cùng xem xét một ví dụ khác trừ trường hợp này ra sẽ kiểm tra ID của một trang cụ thể trước khi thêm mã JavaScript vào phần đầu của trang.

function hook_javascript() {
if (is_page (’10’)) {
?>
<script type=”text/javascript”>
// your javscript code goes here
</script>
<?php
}
add_action(‘wp_head’, ‘hook_javascript’);

Sử dụng is_page để thay thế cho is_single nhằm kiểm tra ID của trang.

Chúng ta cũng có thể sử dụng đoạn code tương tự, sau đó thực hiện một số chỉnh sửa nhỏ để thêm mã JavaScript và chân trang. Bạn có thể tham khảo ví dụ bên dưới:

function hook_javascript_footer() {
?>
<script>
// your javscript code goes
</script>
<?php
}
add_action(‘wp_footer’, ‘hook_javascript_footer’);

Thay vì sử dụng wp_header để thêm mã JavaScript, chúng ta sử dụng wp_footer để thêm mã JavaScript vào chân trang. Bạn cũng có thể sử dụng thẻ có điều kiện để thêm Javascript vào các bài viết hoặc trang cụ thể.

Cách 3. Sử dụng plugin để thêm mã JavaScript vào bài viết hoặc trang

Với cách này bạn có thể thêm mã JavaScript vào bất kỳ vị trí nào trong bài viết hoạt trang. Bạn có thể chọn vị trí mà mình muốn nhúng mã JavaScript.

Đầu tiên bạn cần cài đặt và kích hoạt plugin  Code Embed.

Sau khi kích hoạt, bạn cần truy cập vào bài viết hoặc trang mà mình muốn chèn mã JavaScript. Trên trang chỉnh sửa bài viết, nhấp vào nút Screen Options sau đó kích chọn hộp kiểm Custom Fields.

check custom fields

Giờ bạn hãy lăn chuột xuống bên dưới trình chỉnh sửa bài viết bạn sẽ nhìn thấy khung nhập liệu Custom Fields. Tại đây bạn cần nhấp vào liên kết Enter New.

add new custom fields

Trường Name và Value của Custom Fields sẽ xuất hiện. Bạn cần đặt tên cho Custom Fields với tiền tố CODE (Ví dụ: CODEmyjscode). Và sau đó dán đoạn code JavaScript vào trường Value.

them custom field

Đừng quên nhấp vào nút Add Custom Field để lưu lại Custom Fields mới của bạn.

Giờ bạn có thể sử dụng Custom Fields này để nhúng mã JavaScript vào bất cứ nơi nào trong bài viết hoặc trang của mình. Chỉ cần thêm mã nhúng này vào nội dung bài viết là được: {{CODEmyjscode}}

Giờ bạn có thể lưu lại bài viết hoặc trang của mình và xem thử nó hoạt động ra sao. Bạn cũng có thể xem mã JavaScript bằng cách sử dụng Inspect Tool hoặc xem mã nguồn của trang.

Các phương pháp này chủ yếu dành riêng cho người mới và chủ sở hữu của blog/website. Nếu bạn đang học phát triển WordPress Theme hoặc plugin, bạn sẽ cần sử dụng JavaScript và Stylesheet cho các dự án của mình.

Tôi hy vọng bài viết này sẽ giúp bạn biết cách thêm JavaScript trong WordPress.

Nếu bạn thấy thích bài viết, đừng quên Like và Share.

Hẹn gặp lại bạn trong bài viết tiếp theo./.

Đăng ký nhận bài viết mới nhất

Hãy đăng ký nhận tin để nhận được những nội dung thú vị và tuyệt vời!

Để lại bình luận