Code có thể giúp bạn thiết lập giao diện, nội dung cho website của mình. Vậy làm code có khó không? Làm thế nào để chèn code vào wordpress. Nếu bạn đang xây dựng website wordpress, nhất định không thể bỏ qua các cách chèn code vào WordPress dễ dàng [2024] mà compamarketing sẽ tổng hợp trong bài viết hôm nay. Cùng theo dõi để tham khảo nhé!
Tại sao bạn cần thêm code vào trang web của mình?
Nếu bạn nghĩ về nó như thế này, việc chèn mã vào trang web của bạn giống như có một camera trong nhà hoặc cửa hàng của bạn. Khi chúng tôi cần theo dõi hoặc làm điều gì đó bởi bên thứ ba, chúng tôi phải cài đặt mã của họ trên trang web.
Cài đặt mã Google Analytics trên trang web của bạn để xem thống kê số lượng người truy cập vào trang web của bạn ngay hôm nay. Hoặc đăng ký để kiếm tiền với Google AdSense, tiếp thị lại bằng Google Ads hoặc Facebook Ads, hoặc theo dõi bản đồ nhiệt trang web với Hotjar.
Mục đích của các ứng dụng này là giúp bạn kiểm soát cách quảng cáo được hiển thị trên trang web của bạn.
Chèn code vào trang web ở đâu?
Thông thường đối với các dịch vụ của bên thứ 3 chúng ta sẽ chèn đoạn mã (CSS, Javascript) ở phần đầu trang (header) hoặc chân trang (footer).
Nếu bạn đang tìm kiếm một trình quản lý quảng cáo WordPress cho phép quảng cáo trên các trang, bạn nên xem plugin trình quản lý quảng cáo WordPress (bạn có thể sử dụng plugin này nếu bạn muốn có quảng cáo trên các trang). Nếu bạn muốn hiển thị quảng cáo trên thanh bên, bạn có thể sử dụng tiện ích con.
Để chèn mã HTML cho widget , hãy chọn Custom HTML trong Apprearance > Widgets nhé.
Trong bài, bạn chuyển từ Visual –> Text để chèn code.
Nếu bạn chỉnh sửa bằng Gutenberg, hãy nhấp vào 3 dấu chấm của block đó và chọn Èdit as HTML nhé!
Lưu ý:
Bản thân WordPress là một CMS. Nó có nghĩa là nó không được viết bằng bất kỳ ngôn ngữ lập trình nào. Bạn có thể sử dụng mã HTML và mã CSS để tạo kiểu cho trang web, nhưng bạn không thể viết trực tiếp bằng ngôn ngữ lập trình. Dưới đây là ba cách nhanh chóng và dễ dàng để chèn mã vào mã nguồn WordPress.
3 cách để chèn mã vào trang web.
1 . Chèn mã với theme
Đây là cách phổ biến nhất và dễ dàng nhất để người mới thêm mã vào trang web của họ. Đi tới Tùy chọn chủ đề hoặc Công cụ tùy chỉnh để xem có mã mà bạn có thể chèn vào đầu trang và chân trang hay không.
Ví dụ: nếu tôi đang sử dụng Thrive Themes, sẽ có một mục chèn mã vào trang web như sau:
Ưu điểm:
- Nhanh chóng, đơn giản
- Không cần cài đặt thêm plugin
- Cập nhật chủ đề mà không làm mất mã
Nhược điểm: Không phải tất cả các chủ đề đều được hỗ trợ
2 . Chèn code vào trang web bằng plugin.
Đầu tiên, bạn cần cài đặt và kích hoạt plugin Insert Headers and Footers.
Sau đó, đi tới Settings > Insert Headers and Footers > và dán mã vào khung.
Tùy theo yêu cầu của bạn, bạn sẽ dán vào một trong 3 khung Print Scripts sau:
- Header: mã sẽ được chèn vào tiêu đề giữa cặp <head> và </head>
- Body: mã sẽ được chèn ngay sau thẻ mở <body>
- Footer: mã sẽ được chèn vào chân trang, ngay trước thẻ đóng </body>
Sau đó, bạn bấm Save để lưu lại.
Ưu điểm:
- Không cần biết mã
- Cập nhật không bị mất
Nhược điểm: Phải cài đặt một plugin bổ sung. Nếu bạn cài quá nhiều plugin sẽ ảnh hưởng đến tốc độ trang web.
Lưu ý: Đừng nhầm giữa tệp header.php với thẻ <head>! header.php là tên tệp và thẻ <head> là phần đầu của tệp header.php.
Tương tự, cặp thẻ <body>… </body> là phần thân của tệp.
Các cặp thẻ này có thẻ mở (không có dấu / ở trước) và thẻ đóng (có dấu / ở trước).
Ví dụ: <head> là nơi thẻ head bắt đầu và </head> là nơi thẻ head kết thúc.
![Các cách chèn code vào WordPress dễ dàng [2024]](https://compamarketing.com/wp-content/uploads/2024/04/chen-code-vao-wordpress.png)
3. Cách khác khi sử dụng plugin để chèn code
Bước 1: Tạo thư mục và tệp trên máy tính của bạn
Tên bạn chọn nhưng không được có dấu và làm theo mẫu bên dưới:
Bước 2: Dán mã plugin cơ bản vào tệp PHP
Mở tệp PHP bạn đã tạo ở Bước 1 và dán đoạn mã sau vào bên trong tệp đó:
<?php /* Plugin Name: NameHero Custom Code Plugin Mo ta: Dat ma tuy chinh vao trong WordPress */
Đây là mã làm nền tảng cho plugin. Sau khi cài đặt, “Plugin name / Tên plugin” sẽ xuất hiện trong danh sách plugin của bạn.
Bước 3: Nén thư mục với các tệp bên trong nó
WordPress chỉ cho phép chúng tôi tải lên (upload) các tệp ở định dạng “zip”. Vì vậy, bạn cần nhấp chuột phải vào thư mục, đi tới “Send to” và chọn “Compressed (zipped) Folder)” như hình dưới đây:
Thao tác này sẽ tạo một tệp zip để bạn chuẩn bị tải lên WordPress.
Bước 4: Cài đặt plugin qua tệp zip
Bạn vào bảng điều khiển WordPress và nhấp vào “Plugins> Add New” như hình bên dưới:
Cuối cùng, nhấp vào nút “Cài đặt” ở trên cùng. Thao tác này sẽ cài đặt plugin và cho phép bạn sử dụng nó ngay lập tức!
Bước này sẽ giúp bạn cài đặt plugin. Sau khi quá trình hoàn tất, bạn có thể kích hoạt nó như hình dưới đây:
Bây giờ plugin sẽ xuất hiện trong danh sách các plugin đã cài đặt của bạn.
Bước 5: Thêm mã tùy chỉnh vào plugin đã tải lên
Đã đến lúc thêm mã của bạn vào plugin!
Dọn dẹp mã
Sao chép bất kỳ mã PHP nào vào một trình soạn thảo văn bản và đảm bảo rằng nó bắt đầu bằng những thứ sau:
<?php
Hoặc kết thúc bằng:
?>
Xóa những nhận xét này khi bạn thêm mã vào mẫu của mình và đảm bảo mã không bắt đầu bằng
Chỉnh sửa plugin và chèn mã
Tiếp theo, đi tới bảng điều khiển WordPress và điều hướng đến “Plugin> Editor” như hình dưới đây:
Trong màn hình tiếp theo, chọn plugin tùy chỉnh mà chúng tôi đã tải lên trước đó từ menu thả xuống ở trên cùng bên phải như được hiển thị ở đây và nhấn “Chọn”.
Plugin này cho phép chúng tôi thêm mã tùy chỉnh vào plugin. Dán mã (sạch) mà bạn đã nhận được ở bước trước vào một trình soạn thảo văn bản như được hiển thị bên dưới
Nhấp vào “Cập nhật tệp” khi bạn đã hoàn tất việc thêm mã tùy chỉnh vào WordPress. Bây giờ trang web của bạn sẽ được bảo vệ và mã tùy chỉnh sẽ vẫn như cũ ngay cả khi bạn thay đổi chủ đề. Đừng lo lắng nếu mã của bạn không đúng – chỉ cần cập nhật tệp và các thay đổi của bạn sẽ diễn ra an toàn!
4 . Chèn code vào tệp header hoặc footer.
Đây là cách mà tôi KHÔNG khuyến khích nhưng bạn vẫn có thể làm được nếu muốn.
Đi tới Appearance > Theme Editor hoặc vào cPanel > File Manager > public_html > theme của bạn > file header.php. Chèn mã trước thẻ đóng </head> và lưu.
Điều này có thể được thực hiện đối với một số theme hiếm khi được cập nhật, chẳng hạn như Theme Junky…
Ưu điểm: Thể hiện là coder
Khuyết điểm:
- Nếu bạn chèn sai code, trang web sẽ ngừng chạy
- Update theme là mất code và phải cài lại
Lưu ý: Bạn có thể sao chép tệp header.php sang theme con để nó không bị ghi đè khi cập nhật theme.
![Các cách chèn code vào WordPress dễ dàng [2024]](https://compamarketing.com/wp-content/uploads/2024/04/chen-code-vao-wordpress-1.webp)
5. Cách thêm mã HTML trong WordPress
1. Chèn Code HTML vào Widget
Để chèn mã html vào widget cũng khá đơn giản bạn chỉ cần vào Dashboard> Appearance> Customize> Widgets và tìm đến nơi muốn chèn ví dụ mình muốn chèn mã nhúng trang facebook vào footer thì làm sau đây:
Vào Dashboard > Appearance > Customize > Widgets > Footer 3 thêm tiện ích “Text” và dán toàn bộ nội dung mã vào ô bên dưới.
Tương tự Dashboard > Appearance > Customize > Widgets > Primary Sidebar với thanh Sidebar
Làm tương tự cho các phần khác…
2. Chèn mã HTML vào các bài đăng hoặc trang WordPress
Bạn có thể chèn mã HTML vào bài viết hoặc trang bằng cách vào trang hoặc bài viết mà bạn muốn chèn và chuyển sang chế độ “văn bản” ở góc phải màn hình. Sau đó, sao chép toàn bộ mã HTML mong muốn từ trang web này, dán vào bài đăng hoặc trình chỉnh sửa trang của bạn và lưu.
Đi tới Dashboard > Posts > Add new
như bức ảnh dưới đây.
3. Chèn mã PHP vào trang WordPress
Nếu bạn muốn thêm nội dung động vào các bài đăng WordPress, bạn sẽ muốn sử dụng một plugin có tên là PHP Execution. Plugin này cho phép người dùng thêm mã PHP sẽ được thực thi khi bài đăng được hiển thị.
Chức năng chính của PHP Execution
- PHP là một trong những ngôn ngữ lập trình phổ biến nhất để phát triển trang web. WYSIWYG Editor của WordPress cho phép bạn viết mã php mà không cần phải hiểu bất kỳ cú pháp đặc biệt nào. Nó là một plugin tích hợp giúp bạn dễ dàng viết mã nội dòng với văn bản và hình ảnh của bạn.
Việc cài đặt và kích hoạt PHP Execution cũng khá đơn giản vì nó hoàn toàn miễn phí.
4. Chèn mã PHP vào Text Widget trong WordPress
Trong WordPress, để thêm Text Widget, bạn chỉ cần sao chép mã bên dưới và dán nó vào tệp functions.php trong chủ đề con của bạn. Sau đó, bạn sẽ cần đi tới menu Cài đặt và đảm bảo rằng bạn đã bật Hỗ trợ tiện ích con văn bản.
/* Support PHP code on Text Widget
add_filter(‘widget_text’,’execute_php’,100);
function execute_php($html){
if(strpos($html,”<“.”?php”)!==false){
ob_start();
eval(“?”.”>”.$html);
$html=ob_get_contents();
ob_end_clean();
}
return $html;
}
Tiếp theo hoặc vào Appearance> Widgets tạo một Text Widget và dán mã PHP của bạn vào đó, thoát ra và xem kết quả.
Tại sao bạn không nên sử dụng functions.php để bổ sung mã cho WordPress?
Sử dụng functions.php để chèn mã vào WordPress tiềm ẩn nguy cơ vì một số lý do sau đây.
Đầu tiên, giao diện website của bạn có thể thay đổi (bao gồm đổi theme khác và cập nhật theme cũ). Và khi nó thay đổi, file functions.php cũng thay đổi theo. Điều đó có nghĩa là bạn sẽ phải chuyển toàn bộ mã của mình sang file functions.php của theme mới. Đây là bước bổ sung chẳng có gì tiện lợi, và tệ hơn là bạn có thể quên không làm.
Lý do thứ hai nghiêm trọng hơn nhiều. Lỗi trong functions.php sẽ làm sập website của bạn. Nguyên nhân là vì chính bản thân giao diện bị hỏng. Một lỗi cú pháp đơn giản nào đó sẽ làm hỏng website của bạn, và đó là điều cực kỳ nguy hiểm
Vì lý do này, tôi thích sử dụng plugin tùy chỉnh để thêm mã. Và bài viết này sẽ chỉ cho bạn thấy cách làm nó.
Bước 1: Tạo một thư mục và file trên máy tính của bạn
Tên tùy bạn chọn nhưng nên không có dấu, và theo mẫu như bên dưới:
Bước 2: Paste mã plugin căn bản vào trong file PHP
Mở file PHP bạn tạo trong Bước 1, và paste đoạn mã sau vào trong nó:
<?php /* Plugin Name: NameHero Custom Code Plugin Mo ta: Dat ma tuy chinh vao trong WordPress */
Đây là đoạn mã làm khung sườn của plugin. Sau khi cài đặt, “Plugin Name / Tên Plugin” sẽ xuất hiện trong danh sách plugin của bạn.
Bước 3: Nén thư mục cùng với file bên trong nó
WordPress chỉ cho phép chúng ta tải lên (upload) file có định dạng “zip”. Do vậy bạn cần chuột phải vào thư mục, chuyển đến “Send to”, và chọn “Compressed (zipped) Folder” như dưới đây:
Điều này sẽ tạo ra file zip để bạn chuẩn bị tải lên WordPress.
Bước 4: Cài đặt plugin thông qua file zip
Bạn vào WordPress dashboard, và click “Plugins > Add New” như hình dưới đây:
Sau đó bạn click vào “Upload Plugin” ở trên đầu. Nó sẽ mở ra một phần mới cho phép bạn lựa chọn file từ máy tính của bạn. Click vào nút đó, rồi lựa chọn file và chọn “Install Now”:
Thao tác này sẽ làm nhiệm vụ tải plugin lên và cài đặt nó. Khi quá trình này hoàn thành, chúng ta chỉ việc kích hoạt plugin như hình dưới đây:
Giờ plugin sẽ xuất hiện trong danh sách các plugin đã cài đặt của bạn.
Bước 5: Thêm mã tùy chỉnh vào Plugin vừa tải lên
Đã đến lúc bạn thêm mã của mình vào plugin!
Dọn dẹp mã
Giả sử bạn copy được ở đâu đó một số mã PHP cần đưa vào trong WordPress. Điều đầu tiên bạn nên làm là kiểm tra xem nó có bắt đầu bằng:
<?php
Hoặc kết thúc với:
?>
Nếu câu trả lời là “có” với cả hai, bạn cần loại bỏ chúng. Đảm bảo chắc chắn đoạn mã cần thêm vào không bắt đầu bằng <?php, hoặc kết thúc bằng ?> là điều rất quan trọng.
Chỉnh sửa plugin và chèn mã
Tiếp theo, bạn vào WordPress dashboard và điều hướng đến “Plugin > Editor” như hình bên dưới đây:
Trong màn hình kế tiếp, bạn chọn plugin tùy chỉnh mà chúng ta up lên lúc nãy từ menu xổ ở phía trên cùng bên tay phải như được hiển thị ở đây và nhấn “Select”:
Điều này cho phép chúng ta bổ sung mã vào plugin. Paste đoạn mã (đã dọn dẹp) mà bạn có ở bước trước vào text editor như hình bên dưới:
Sau đó, click vào “Update File” và bạn đã thành công rồi đó! Bạn đã hoàn thành việc thêm mã tùy chỉnh vào WordPress theo cách vừa mềm dẻo vừa an toàn. Đoạn mã vẫn được duy trì cho dù bạn có đổi sang giao diện khác, và nó không làm sập trang web của bạn nếu chẳng may đoạn mã đó có lỗi!
Lời kết
Như vậy là mình vừa hướng dẫn cách chèn code vào website WordPress theo 3 cách đơn giản. Nếu các bạn có ý kiến nào khác hãy đễ lại bên dưới nhé. Chúc các bạn thành công !
Trên đây là các cách chèn code vào WordPress dễ dàng [2024]. Hy vọng với những thông tin mà Compamarketing vừa mang đến, bạn có thể chèn code một cách dễ dàng vào wordpress, giúp quá trình sử dụng website wordpress trở nên hiệu quả hơn. Nếu có bất kì thắc mắc gì, hãy để lại comment bên dưới để được giải đáp nhé! Chúc các bạn thành công.