Hướng dẫn dán Code Snippets từ Web vào WordPress

Tại CunghocWP, chúng tôi thường publish các bài hướng dẫn yêu cầu người dùng thêm các code snippet (đoạn mã) vào WordPress. Đối với những người dùng có kinh nghiệm, việc copy và dán code trong các file theme WordPress khá dễ dàng. Nhưng đối với người dùng mới, thao tác này có vẻ khó khăn. Do không quen với việc viết code, người mới bắt đầu có thể mắc sai lầm khiến trang web của họ bị sập. Trong bài viết này, CunghocWP sẽ hướng dẫn bạn bạn cách copy và dán các code snippets từ web vào WordPress.

Tại sao cần thêm các Code Snippet vào trang web WordPress?

WordPress là trình dựng trang web tốt nhất trên thế giới bởi tính linh hoạt mà nền tảng này mang lại. Bạn có thể thêm các tính năng và chức năng mới vào trang web WordPress của mình một cách dễ dàng.

Các trang web tài nguyên WordPress như CunghocWP chia sẻ các mẹo và thủ thuật giúp bạn cải thiện trang web của mình. Mặc dù việc thêm các code snippet tùy chỉnh vào trang web là tùy chọn và bạn thường có thể tìm thấy các plugin để để làm việc này nhưng đôi khi một snippet đơn giản lại hiệu quả hơn.

Một số code snippet có thể rất tiện dụng trong việc sửa nhiều lỗi WordPress phổ biến, cải thiện bảo mật WordPress và thêm các tính năng mới vào trang web.

Bây giờ hãy cùng tìm hiểu cách thêm các code snippets vào trang web WordPress một cách an toàn.

Đâu là cách tốt nhất để thêm Code Snippets vào WordPress?

Điều đầu tiên bạn cần phải làm trên mọi trang web WordPress là cài đặt một plugin sao lưu WordPress. Thao tác này sẽ giúp trang web WordPress của bạn an toàn và luôn có thể khôi phục lại trang web từ bản sao lưu trong trường hợp có bất kỳ sự cố nào.

Bạn có thể tìm thấy hướng dẫn để thêm các code snippets trong các template theme WordPress như index.php, single.php, header.php, vv… Các code snippet này chỉ hữu ích trong các template cụ thể đó. Do vậy, bạn sẽ phải thêm trực tiếp vào file theme hoặc tạo child theme.

Tuy nhiên, hầu hết các code snippet tùy chỉnh đều được thêm vào file functions.php của theme WordPress. Mặc dù hướng dẫn khuyên bạn nên thêm vào file functions.php của theme, nhưng có một giải pháp thay thế tốt hơn nhiều hoạt động giống như một file chức năng.

Hãy cùng xem một số cách bạn có thể thêm các code snippet tùy chỉnh trong WordPress.

1. Sử dụng Plugin Code Snippets WordPress

Đây là phương pháp an toàn nhất và được đề xuất cho tất cả người dùng mới. Bạn có thể sử dụng plugin Code Snippets để thêm và quản lý các code snippet trên trang web của mình.

Plugin đi kèm với một công tắc an toàn sẽ hủy kích hoạt code snippet ngay lập tức nếu nó gây ra lỗi. Điều này giúp bạn giữ quyền truy cập vào trang web của mình khi thêm code snippet tùy chỉnh.

Để biết thêm chi tiết, hãy xem hướng dẫn của CunghocWP về cách thêm các code snippet tùy chỉnh trong WordPress.

Lưu ý: Phương pháp code snippets rất hữu ích cho các snippet cần được thêm vào file chức năng. Nếu bạn được yêu cầu thêm code snippet trong các file theme khác thì phương pháp này sẽ không hoạt động.

2. Tạo một child theme để lưu code tùy chỉnh

Cách tiếp cận thứ hai là tạo một child theme để giữ nguyên các thay đổi khi bạn cập nhật theme của mình. Ngoài ra, bạn cũng có thể thêm code vào các file theme khác nếu cần mà không phải lo lắng việc cập nhật sẽ hoàn tất các thay đổi của mình.

Để biết thêm chi tiết, hãy xem hướng dẫn của CunghocWP để biết cách tạo child theme trong WordPress.

Lưu ý: Phương pháp này cũng hoạt động đối với các code snippet cần được thêm vào các template theme khác.

3. Sử dụng plugin Site-Specific với code tùy chỉnh

Một tùy chọn linh hoạt khác là sử dụng plugin WordPress site-specific. Đây là một plugin tùy chỉnh có thể tạo cho trang web riêng và sử dụng để lưu tất cả code tùy chỉnh.

Ưu điểm của phương pháp này là code của bạn không phụ thuộc vào theme nên vẫn hoạt động ngay cả khi bạn thay đổi theme. Ngoài ra code cũng không bị ảnh hưởng bởi bất kỳ bản cập nhật WordPress nào trên trang web của bạn.

Bạn có thể xem hướng dẫn của CunghocWP về cách tạo một plugin site-specific.

Lưu ý: Phương pháp này chỉ áp dụng cho các code snippet cần được thêm vào file chức năng.

4. Thêm code trực tiếp vào file chức năng

Bạn có thể thêm các code snippet vào file functions.php của theme. Tuy nhiên, có một số nhược điểm.

• Các thay đổi sẽ bị xóa khi bạn cập nhật theme WordPress
• Code chỉ hoạt động nếu bạn đang sử dụng theme cụ thể đó

Bây giờ hãy cùng tìm hiểu cách sao chép và dán các code snippet đúng cách và tránh làm hỏng trang web của bạn.

Làm thế nào để chỉnh sửa file WordPress?

Có nhiều cách chỉnh sửa file WordPress khác nhau tùy thuộc vào phương pháp bạn chọn để thêm các code snippet tùy chỉnh trên trang web của mình.

1. Thêm code tùy chỉnh trong Plugin Code Snippets

Nếu bạn đang sử dụng plugin Code Snippets thì có thể thêm các code snippet từ khu vực quản trị WordPress. Chỉ cần truy cập vào Snippets » Add New để thêm code tùy chỉnh của bạn.

2. Bổ sung code tùy chỉnh trong Plugin Site-Specific WordPress

Nếu đang thêm code tùy chỉnh vào plugin site-specific, bạn có thể sử dụng trình chỉnh sửa plugin WordPress tích hợp để thêm code tùy chỉnh.

Trước tiên, bạn cần chọn plugin site-specific từ menu thả xuống có nhãn ‘Select plugin to edit’. Trình chỉnh sửa sẽ tải file plugin và bạn có thể thêm các code snippet vào đó.

Sau khi hoàn tất, bạn nhấp vào nút ‘Update File’ để lưu các thay đổi.

Nếu thiếu điều gì đó trong code hoặc nó có khả năng làm hỏng trang web của bạn, trình chỉnh sửa plugin sẽ tự động hoàn tác các thay đổi.

Một phương pháp khác để thêm code tùy chỉnh trong plugin site-specific là sử dụng FTP.

Di chuyển đến folder plugin bằng ứng dụng FTP client. Nhấp chuột phải vào file plugin và chọn View/Edit file.

3. Thêm code tùy chỉnh vào functions.php hoặc các template theme khác

Nếu bạn đang thêm các code snippet vào file functions.php của theme hoặc bất kỳ template nào khác thì có thể thêm code trực tiếp bằng cách truy cập vào Appearance » Editor, chọn file cần thêm code từ cột bên phải.

Các hướng dẫn bạn đang làm theo sẽ cho bạn biết nơi để dán code. Nếu không có hướng dẫn, bạn cần thêm code ở cuối file.

Một cách thay thế tốt hơn là sử dụng FTP để thêm code tùy chỉnh trong các file theme. Bạn cần kết nối ứng dụng FTP với trang web của mình, truy cập vào /wp-content/themes/your-theme-folder/ và nhấp chuột phải vào file cần chỉnh sửa.

Chọn tùy chọn View/Edit file để mở file trong trình soạn thảo văn bản.

Khắc phục sự cố lỗi PHP khi thêm code tùy chỉnh

Người dùng mới hay mắc phải một số lỗi phổ biến khi thêm các code snippet tùy chỉnh vào trang web của họ. Hãy cùng xem một số lỗi và cách khắc phục.

1. Sử dụng sai thẻ bắt đầu và thẻ kết thúc PHP

WordPress được viết chủ yếu bằng ngôn ngữ lập trình PHP có một cú pháp cụ thể cho máy chủ của bạn biết rằng đoạn code sau cần được PHP xử lý. Một code snippet PHP điển hình trông như sau:

1. // PHP Begin Tag
2. <?php
4. // Rest of the code goes here
6. // PHP End Tag
7. ?>

Tất cả code PHP phải ở bên trong thẻ <?phpvà ?>.

Thẻ kết thúc PHP trở nên quan trọng hơn trong các file chuyển đổi và file forth trong HTML. Hầu hết các file theme WordPress đều sử dụng thẻ PHP cùng với HTML.

Nếu bạn đang dán code tại vị trí mà thẻ bắt đầu PHP chưa được đóng thì cần phải thêm code mà không có thẻ PHP bắt đầu.

1. <?php
2. // Some pre-existing code
4. // your custom code
6. ?>

Nếu bạn đang dán code tùy chỉnh bên ngoài hoặc sau thẻ kết thúc PHP thì phải thêm thẻ bắt đầu PHP.

1. <?php
2. // Some pre-existing code
3. ?>
5. // Your custom code snippet
6. <?php
8. ?>

Gần 90% tất cả các lỗi là do vị trí của thẻ kết thúc hoặc thẻ bắt đầu PHP không chính xác. Việc nghiên cứu code sẽ cho bạn biết có cần thêm thẻ bắt đầu hoặc thẻ kết thúc PHP vào code snippet tùy chỉnh của mình hay không.

Nhiều file theme WordPress, đặc biệt là file functions.php có thể không có thẻ cuối PHP. Do đó bạn có thể thêm code ở cuối file mà không cần thẻ bắt đầu hoặc thẻ kết thúc.

1. <?php
2. // Lots of code in your theme’s functions file
3. //
4. //
5. // Your custom code
6. function custom_loginlogo() {
7. echo '<style type="text/css">
8. h1 a {background-image: url('.get_bloginfo('template_directory').'/images/login_logo.png) !important; }
9. </style>’;
10. }
11. add_action('login_head', 'custom_loginlogo');

Hãy nhớ rằng những người viết hướng dẫn đôi khi có thể cho rằng bạn đã biết cách sử dụng thẻ bắt đầu và thẻ kết thúc PHP. Họ có thể chỉ hiển thị cho bạn một code snippet không có các thẻ đó.

1. function custom_loginlogo() {
2. echo '<style type="text/css">
3. h1 a {background-image: url('.get_bloginfo('template_directory').'/images/login_logo.png) !important; }
4. </style>’;
5. }
6. add_action('login_head', 'custom_loginlogo');

Vì người viết hướng dẫn không biết bạn sẽ thêm code này vào đâu nên họ đã bỏ qua thẻ kết thúc và thẻ bắt đầu PHP. Bây giờ khi thêm một code snippet như vậy vào các file theme, bạn cần đảm bảo rằng code snippet đó nằm bên trong các thẻ PHP.

2. Lỗi Incorrect Nesting

PHP có cú pháp cụ thể cho các hàm, logic có điều kiện và vòng lặp. Cú pháp này phụ thuộc vào dấu ngoặc nhọn cho biết khi nào một hàm bắt đầu và khi nào kết thúc.

Ví dụ, đây là một hàm PHP đơn giản:

1. <?php
2. function wpbeginner_tutorial() {
3. echo "Hello World!";
4. }
5. ?>

Nếu bạn muốn thêm một code snippet tùy chỉnh không liên quan gì đến hàm này thì phải đặt code snippet đó bên ngoài hàm này như sau:

1. // Pre-existing code in your theme file
2. <?php
3. function wpbeginner_tutorial() {
4. echo "Hello World!";
5. }
6. // Your custom code
7. function custom_loginlogo() {
8. echo '<style type="text/css">
9. h1 a {background-image: url('.get_bloginfo('template_directory').'/images/login_logo.png) !important; }
10. </style>’;
11. }
12. ?>

Nếu bạn bỏ dấu ngoặc nhọn bắt đầu hoặc kết thúc thì sẽ làm hỏng code và trang bị lỗi.

Hiểu lỗi PHP trong WordPress

Các lỗi do thêm code tùy chỉnh trong WordPress thường dẫn đến thông báo lỗi chi tiết. Hầu hết đều là lỗi cú pháp, lỗi phân tích cú pháp hoặc lỗi fatal error do các ký tự không mong muốn.

Tuy nhiên những lỗi này cũng cho bạn biết dòng nào trong đoạn code gây ra lỗi.

Dựa vào đó, bạn có thể tìm ra dòng bị lỗi để xem code và biết mình thiếu nhữn gì. CunghocWP khuyên bạn nên sử dụng trình soạn thảo văn bản thích hợp để chỉnh sửa code bởi các trình soạn thảo có số dòng và đánh dấu cú pháp dễ bao quát hơn.

Phải làm gì khi trang web WordPress của bạn không thể truy cập được?

Trước hết đừng hoảng sợ. Chỉ cần kết nối với trang web bằng ứng dụng FTP client hoặc ứng dụng File Manager trong cPanel. Tiếp theo, tìm file bạn đã thêm code gây ra lỗi và chỉnh sửa.

Bạn có thể thử và khắc phục sự cố với code snippet. Nếu bạn không thể khắc phục những vấn đề đó, hãy xóa code và lưu các thay đổi.

Trang web của bạn sẽ trở lại bình thường. Nếu vẫn hiển thị một số lỗi thì bạn hãy download bản sao mới của theme WordPress và giải nén file zip trên máy tính.

Upload file bạn đã thực hiện các thay đổi từ máy tính lên trang web để ghi đè lên file cũ.

Để biết thêm cách giải quyết những vấn đề này, bạn có thể tham khảo thêm bài viết của CunghocWP về các lỗi WordPress phổ biến nhất và cách khắc phục. Nếu điều đó không hữu ích, hãy làm theo hướng dẫn khắc phục sự cố WordPress của chúng tôi để thực hiện chẩn đoán từng bước.

CunghocWP hi vọng bài viết này sẽ giúp bạn học cách dán các code snippet từ web vào WordPress. Nếu bạn cần một số code snippet để dán thử trên trang web của mình thì có thể đọc thêm danh sách các thủ thuật cực kỳ hữu ích của chúng tôi dành cho file chức năng WordPress .

Nếu thích bài viết này, hãy theo dõi YouTube Channel để xem thêm các video hướng dẫn về WordPress. Bạn cũng có thể tìm kiếm chúng tôi trên Twitter hoặc Facebook.