Sao chép và dán các đoạn Code vào trong các file theme WordPress khá là dễ dàng cho người dùng đã có kinh nghiệm, nhưng nó cực kỳ khó đối với người mới bắt đầu. Do không quen với cách viết code , người mới bắt đầu dễ dàng mắc một lỗi làm sập trang web của họ. Trong hướng dẫn từng bước này, chúng tôi sẽ chỉ cho bạn cách sao chép và dán đoạn “Code Snippets” từ web vào WordPress.
Code snippets là những đoạn code có thể được chèn trực tiếp vào các file theme. Đôi khi chúng mang một chức năng đầy đủ hoặc chỉ đơn giản là thay đổi một chức năng hiện có.
Tại sao cần thêm Code Snippets vào trang web WordPress của bạn?
WordPress là công cụ làm websites tốt nhất trên thế giới do tính linh hoạt mà nó cung cấp. Thật dễ dàng để thêm các tính năng và chức năng mới vào trang web WordPress của bạn.
Tại các trang web cung cấp tài nguyên liên quan đến WordPress, như trang cunghocwp.com thường chia sẻ mẹo và thủ thuật mà bạn có thể dùng để cải thiện trang web. Bạn có thể tìm thấy các plugin hỗ trợ điều này tốt hơn so với việc thêm code snippet tùy chỉnh vào trong website, nhưng đôi khi một đoạn code đơn giản lại hiệu quả hơn nhiều so với trình tự dùng một plugin phức tạp.
Một số đoạn Code Snippets rất tiện dụng và có thể giúp bạn sửa nhiều lỗi WordPress phổ biến, cải thiện bảo mật WordPress và thậm chí thêm các tính năng mới vào trang web của bạn.
Hãy cùng tìm hiểu làm cách nào để thêm Code Snippets một cách an toàn vào WordPress bằng cách đọc bài viết dưới đây.
Hướng dẫn dành cho người mới bắt đầu để thêm Code Snippets vào WordPress
Cách tốt nhất để thêm Code Snippets trong WordPress
Điều đầu tiên bạn phải làm trên mỗi trang web WordPress là cài đặt một plugin sao lưu WordPress (plugin backup WordPress). Điều này giữ cho trang web WordPress của bạn luôn an toàn và bạn hoàn toàn có thể khôi phục nó từ bản sao lưu trong trường hợp có sự cố xảy ra.
Đôi khi bạn có thể tìm thấy hướng dẫn để thêm Code Snippets trong các file index.php, single.php, header.php… của theme templates. Các đoạn Code Snippets này chỉ hữu ích trong các theme cụ thể đó. Vì vậy, bạn sẽ cần phải thêm chúng trực tiếp vào file theme của mình hoặc tạo chủ đề con (child-theme).
Tuy nhiên, hầu hết các đoạn code snippets này được thêm vào file theme functions.php của WordPress. Mặc dù các bài hướng dẫn có thể khuyên bạn nên thêm nó vào file functions.php trong theme nhưng có một cách khác tốt hơn là thêm code vào file functions.php.
Hãy cùng xem một số cách bạn có thể thêm các đoạn code snippets vào bên trong một trang web WordPress.
1. Sử dụng The Code Snippets WordPress Plugin
Đây là phương pháp an toàn nhất và được khuyên dùng nhất cho người mới bắt đầu. Code Snippets là một plugin WordPress cho phép bạn dễ dàng thêm và quản lý các đoạn code Snippets tùy chỉnh trên trang web của mình.
Nó đi kèm với một “công tắc an toàn” có tác dụng ngay lập tức hủy đoạn code nếu nó gây ra lỗi. Điều này bảo vệ bạn khỏi việc bị mất quyền truy cập vào trang web của bạn sau khi thêm một đoạn code snippet tùy chỉnh.
Để biết được hướng dẫn chi tiết, hãy xem hướng dẫn của chúng tôi về cách dễ dàng thêm đoạn code snippet trong WordPress.
Lưu ý: Phương pháp dùng Plugin Code Snippets rất hữu ích khi cần thêm code snippet vào trong file functions. Nếu bạn được yêu cầu thêm một đoạn code trong các file theme khác, thì phương pháp này có thể không dùng được.
2. Tạo theme con (child theme) để lưu code tùy chỉnh (Custom Code)
Cách thực hiện thứ hai là tạo ra một theme con. Sử dụng theme con sẽ giữ nguyên các thay đổi của bạn khi bạn cập nhật theme của mình. Theme con cũng sẽ cho phép bạn thêm code vào các file theme khác nếu cần mà không phải lo lắng về việc hoàn tác các thay đổi của bạn.
Để biết thêm chi tiết, hãy xem hướng dẫn của chúng tôi về cách tạo theme con trong WordPress.
Lưu ý: Phương pháp này cũng sẽ hoạt động đối với các đoạn code snippet cần được thêm vào trong các theme templates khác.
3. Sử dụng Plugin Site-Specific để thực hiện các code tùy chỉnh
* Plugin dành riêng cho trang (Site-Specific Plugin) là một plugin tạo nơi để bạn add các đoạn code snippets bạn tìm thấy trên mạng để thực hiện thêm các chức năng cho site mà không cần phụ thuộc vào theme.
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 mà bạn có thể tạo riêng cho mình dùng trên web tự lưu trữ và sử dụng nó để lưu tất cả code tùy chỉnh của bạn.
Ưu điểm của phương pháp này là code tùy chỉnh của bạn không phụ thuộc vào theme của bạn và nó sẽ vẫn hoạt động ngay cả khi bạn thay đổi theme. Nó cũng không bị ảnh hưởng khi bạn cập nhật bản wordpress mới.
Xem hướng dẫn của chúng tôi về cách tạo plugin Site-Specific để biết hướng dẫn chi tiết.
Lưu ý: Phương pháp này chỉ áp dụng cho các đoạn code cần được thêm vào trong file functions .
4. Thêm code trực tiếp vào file functions
Bạn có thể thêm các đoạn code vào trực tiếp file functions.php của theme. Tuy nhiên, cách này vẫn có một số nhược điểm.
- Những thay đổi của bạn sẽ bị xóa khi bạn cập nhật mới theme WordPress của mình.
- Code của bạn sẽ chỉ hoạt động nếu bạn đang sử dụng theme cụ thể đó.
Hãy chọn ra 1 cách sao chép, dán đoạn code đúng cách và phù hợp với bạn nhằm tránh phá hỏng trang web của mình.
Vậy làm cách nào để chỉnh sửa File trong WordPress?
Có nhiều cách khác nhau để chỉnh sửa file trong WordPress, điều này tùy thuộc vào phương pháp bạn chọn để thêm đoạn code snippets tùy chỉnh vào trong trang web của mình.
1. Thêm Custom Code bằng cách dùng Code Snippets Plugin
Nếu bạn đang sử dụng plugin Code Snippets thì bạn có thể dễ dàng thêm đoạn code từ khu vực Admin WordPress. Chỉ cần vào phần Snippets » Add New để thêm code tùy chỉnh của bạn.
2. Thêm code tùy chỉnh bằng cách dùng Plugin Site-Sprecific (Site-Specific WordPress Plugin)
Nếu bạn đang thêm code tùy chỉnh bằng cách dùng Plugin Site-Specific thì bạn có thể sử dụng plugin editor được WordPress tích hợp sẵn để thêm custom code.
Đầu tiên, chọn plugin dành riêng cho trang web của bạn từ menu thả xuống có nhãn ‘Select plugin to edit’. Trình chỉnh sửa plugin (plugin editor) sẽ tải file plugin của bạn lên và bạn sẽ có thể thêm các đoạn code snippets vào bên trong đó.
Khi bạn đã hoàn tất, nhấp vào nút ‘Update File’ để lưu các thay đổi của bạn. Nếu có gì đó bị thiếu trong code của bạn hoặc nó có khả năng làm hỏng trang web của bạn, thì trình plugin editor sẽ tự động hoàn tác (undo) các thay đổi của bạn.
Một phương pháp khác để thêm code tùy chỉnh khi dùng một Site-Specific WordPress Plugin là sử dụng FTP. Chỉ cần vào plugin folder bằng ứng dụng Client FTP của bạn. Nhấp chuột phải vào file plugin và sau đó chọn (View/Edit file).
3. Thêm code tùy chỉnh vào file functions.php hoặc các templates theme khác
Nếu bạn đang tìm cách thêm các đoạn code snipets vào file functions.php của theme thì bạn có thể thêm code snipets trực tiếp bằng cách vào Appearance » Editor. Bạn có thể chọn file mà bạn cần thêm code từ cột bên phải.
Các hướng dẫn từ nơi cung cấp đoạn code snippets sẽ cho bạn biết nơi dán code ở chỗ nào trong file. Nhưng nếu họ không có hướng dẫn, thì bạn cần thêm code snippets vào vị trí dưới cùng của file.
Một cách khác tốt hơn là sử dụng FTP để thêm code tùy chỉnh trong các file theme. Chỉ cần kết nối FTP client của bạn tới website, tìm đường dẫn đến / 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 text editor.
Khắc phục sự cố lỗi PHP khi thêm code tùy chỉnh
Có một số lỗi phổ biến mà người mới bắt đầu mắc phải khi thêm đoạn code snippets tùy chỉnh vào trang web của họ. Hãy cùng chúng tôi xem xét một số lỗi và làm thế nào để tránh chúng
1. Sử dụng không chính xác các Begin Tags và End Tags PHP
WordPress được viết chủ yếu bằng ngôn ngữ lập trình PHP, PHP có cú pháp cụ thể để cho hosting của bạn hiểu rằng đoạn code sau cần được xử lý bằng PHP. Đây là một đoạn code PHP điển hình sẽ có cấu trúc cụ thể như sau:
// PHP Begin Tag
<?php
// Rest of the code goes here
// PHP End Tag
?>Tất cả code PHP của bạn cần nằm trong các Tag <? Php and?>.
End tag trở nên quan trọng hơn trong các file chuyển đổi qua lại trong HTML. Hầu hết các file theme WordPress sử dụng tag PHP cùng với HTML.
Bạn cần đảm bảo rằng nếu bạn đang dán code của mình tại vị trí giữa begin Tags và End Tags thì bạn cần thêm code của mình mà không cần thẻ begin tag.
<?php
// Some pre-existing code
// your custom code
?> Nếu bạn đang dán code của mình bên ngoài hoặc sau end tag PHP, thì bạn cũng cần thêm PHP begin tag.
<?php
// Some pre-existing code
?>
// Your custom code snippet
<?php
?>Gần 90% tất cả các lỗi là do vị trí không đúng của end và start tag PHP. Học thêm về code sẽ giúp bạn hiểu liệu bạn có cần thêm end và start tag PHP trong đoạn code 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ẻ kết thúc PHP end tag. Điều này có nghĩa là bạn có thể thêm code của mình vào cuối file mà không cần quan tâm đến PHP start tag hoặc PHP end tag.
<?php
// Lots of code in your theme's functions file
//
//
// Your custom code
function custom_loginlogo() {
echo '<style type="text/css">
h1 a {background-image: url('.get_bloginfo('template_directory').'/images/login_logo.png) !important; }
</style>';
}
add_action('login_head', 'custom_loginlogo');Hãy nhớ rằ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 các end tag và start tag. Họ có thể chỉ cần cung cấp cho bạn một đoạn code mà không có các tag đó.
function custom_loginlogo() {
echo '<style type="text/css">
h1 a {background-image: url('.get_bloginfo('template_directory').'/images/login_logo.png) !important; }
</style>';
}
add_action('login_head', 'custom_loginlogo');Vì thường người hướng dẫn không biết nơi bạn sẽ thêm đoạn code này, nên họ đã bỏ qua các end và start tag PHP. Nên khi bạn thêm một đoạn code như vậy vào các file theme, bạn cần đảm bảo rằng nó nằm trong các tags PHP (PHP start and end tags).
2. Lỗi thêm Code (nesting code) sai cách
PHP có một cú pháp cụ thể cho các hàm, logic có điều kiện và các 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 hàm bắt đầu và khi nào hàm kết thúc.
Ví dụ, đây là một hàm PHP đơn giản:
<?php
function wpbeginner_tutorial() {
echo "Hello World!";
}
?>Bây giờ nếu bạn muốn thêm một đoạn code snippet không liên quan gì đến hàm (function) này, thì bạn sẽ cần đặt nó bên ngoài hàm này như sau:
// Pre-existing code in your theme file
<?php
function wpbeginner_tutorial() {
echo "Hello World!";
}
// Your custom code
function custom_loginlogo() {
echo '<style type="text/css">
h1 a {background-image: url('.get_bloginfo('template_directory').'/images/login_logo.png) !important; }
</style>';
}
?>Nếu bạn quên dấu ngoặc nhọn bắt đầu hoặc kết thúc, thì điều này sẽ phá vỡ cấu trúc code và bạn sẽ có một trang bị lỗi.
Hiểu lỗi PHP trong WordPress
Lỗi do thêm code tùy chỉnh trong WordPress thường sẽ có 1 thông báo lỗi chi tiết. Hầu hết trong số chúng là lỗi cú pháp(syntax error), lỗi phân tích cú pháp (parse errors) hoặc lỗi nghiêm trọng (fatal errors ) vì các ký tự không mong muốn.
Tuy nhiên những lỗi này sẽ hiển thị số dòng trong code của bạn gây ra lỗi.
Sau đó, bạn có thể đi đến dòng chính xác được báo bên trên, để xem lại code nào sai và tìm ra những gì bạn đã sai. Với phần này, chúng tôi khuyên bạn nên sử dụng text editor chuyên dụng để để chỉnh sửa code vì text editor phù hợp có thể hiện số dòng và tô sáng cú pháp có thể giúp bạn khắc phục sự cố dễ dàng.
Phải làm gì khi trang web WordPress của bạn không truy cập được?
Trước hết là cần bạn bình tĩnh xử lý vấn đề. Chỉ cần kết nối đến web bằng ứng dụng Client FTP hoặc bằng File Manager trong cPanel. Tiếp theo, xác định vị trí file gây ra lỗi khi bạn thêm code và chỉnh sửa nó.
Bạn có thể thử và khắc phục các lỗi được liệt kê bên trên với đoạn code snippet mà bạn đã thêm vào. Nếu bạn không thể khắc phục những sự cố xảy ra, thì hãy xóa đoạn code đó và lưu lại các thay đổi của bạn.
Trang web của bạn sẽ trở lại bình thường một lần nữa. Nếu nó vẫn vẫn hiển thị lỗi, hãy tải xuống một bản sao lưu của theme WordPress và cài đặt lại theme.
Tải file từ máy tính của bạn lên vị trí file mà mà bạn đã chỉnh sửa, sau đó upload và giải nén để nó ghi đè lên file cũ.
Để biết thêm cách giải quyết các vấn đề này, hãy xem hướng dẫn của chúng tôi về phần lớn các lỗi phổ biến của WordPress và cách khắc phục chúng. Nếu điều đó không giúp ích thì hãy làm theo hướng dẫn xử lý sự cố WordPress của chúng tôi để thực hiện chẩn đoán từng bước.
Chúng tôi hy vọng bài viết này đã giúp bạn tìm hiểu cách dán đoạn code từ web vào WordPress. Cần một số đoạn code mà bạn có thể thử trên trang web của bạn? Xem danh sách các thủ thuật cực kỳ hữu ích của chúng tôi dành cho file functions trong WordPress.
Nếu bạn thích bài viết này, thì vui lòng đăng ký Kênh YouTube của chúng tôi để xem video hướng dẫn. Bạn cũng có thể tìm thấy chúng tôi trên Twitter và Facebook.