Code hay cho wordpress

Trong quá trình xây dựng và phát triển Website, để tích hợp các công cụ như Google Analytics, Google Search Console, Google Adsense, Pixel Facebook… bạn cần chèn vào Website các đoạn mã tương ứng. Tùy thuộc vào yêu cầu của từng loại mà bạn sẽ chèn vào thẻ hoặc trước thẻ .

Trong bài viết này mình sẽ hướng dẫn các bạn 3 cách chèn code vào Website WordPress cực đơn giản

Nội dung bài viết

  • 1. Sử dụng plugin Insert Headers and Footers
  • 2. Chèn code trực tiếp vào Theme
  • 3. Chèn trực tiếp vào mã nguồn
  • 4. Kết luận

1. Sử dụng plugin Insert Headers and Footers

bước 1. Tải và kích hoạt plugin Chèn Đầu trang và Chân trang

Code hay cho wordpress

bước 2. Truy cập Cài đặt => Insert Headers and Footers.  

Giao diện sử dụng hiện ra khá đơn giản bao gồm 2 phần

  • Script ở Header: Hỗ trợ chèn code vào thẻ
  • Script ở Footer. Hỗ trợ chèn mã vào trước thẻ

Code hay cho wordpress

Việc cài đặt bằng Plugin rất nhanh chóng, thuận lợi và đơn giản. Tuy nhiên điều đó dẫn đến việc Website của bạn bị chậm đi, chính vì vậy mà những người thiết kế ra Website chuyên nghiệp cực hạn chen plugin

2. Chèn code trực tiếp vào Theme

Để khắc phục việc phải thêm một Plugin vào WordPress, rất nhiều Theme hiện nay đã hỗ trợ chức năng chèn code vào thẻ và trước thẻ cho người dùng.

Mình đang sử dụng theme Impreza và nó cũng được tích hợp cho công việc này. Truy cập Impreza => Theme Option => Custom Code

You can you quan tâm. Theme Impreza – Theme siêu tùy biến, phù hợp với mọi loại Website

Code hay cho wordpress

3. Chèn trực tiếp vào mã nguồn

Nếu không muốn cài đặt Plugin hoặc Theme đang sử dụng không hỗ trợ. Bạn có thể chèn mã trực tiếp vào mã nguồn của WordPress. Tuy nhiên, mình không khuyến khích làm theo cách này vì nó dễ gây ra lỗi cho người dùng và mỗi khi cập nhật Theme lên phiên bản mới bạn phải chuẩn bị hànhĺàn hành

Có 2 cách đặt tiêu đề chèn mã vào mã nguồn của Trang web WordPress

bộ đệm 1. Chèn trực tiếp trên giao diện WordPress

Truy cập Giao diện => Edit => select footer file. php hoặc tiêu đề. php

Code hay cho wordpress

bộ đệm 2. Chèn mã nguồn trên Hosting

Truy cập Hosting bạn đang dùng => File Manager => public_html => wp-content => themes => select Theme bạn đang dùng => file footer. php hoặc tiêu đề. php

Code hay cho wordpress

4. Kết luận

Nếu Theme bạn đang sử dụng có chức năng chèn code vào Website WordPress thì hãy ưu tiên sử dụng, nó thường nằm trong phần Theme Option. Còn nếu không hãy cài đặt các Plugin chuyên dụng như Insert Headers and Footers

WordPress là nền tảng dễ sử dụng mà bạn không cần chạm vào bất kỳ dòng mã nào. Nhưng nếu biết cách chỉnh sửa mã WordPress thì còn tốt hơn nữa, vì bạn sẽ kiểm tra mã nguồn này chặt chẽ hơn. Bạn cũng có thể giải quyết sự cố hoặc thực hiện tùy chỉnh nâng cao để cải thiện trang WordPress

Bài viết này sẽ hướng dẫn lý do tại sao nên sửa mã WordPress và hướng dẫn nó

nội dung

  1. Tại sao cần phải biết cách sửa mã WordPress?
  2. Sửa mã WordPress
    1. Cách chỉnh sửa mã HTML trong WordPress
    2. Cách chỉnh sửa CSS và PHP trong WordPress
    3. Sử dụng Theme Editor để sửa mã WordPress
    4. Cách chỉnh sửa code WordPress qua FTP
  3. Lời kết

Tại sao cần phải biết cách sửa mã WordPress?

WordPress là một nền tảng cực kỳ trực quan và thân thiện với người dùng. Có nhiều cách để tùy chỉnh và thay đổi trang web của bạn mà không cần chạm vào bất kỳ dòng mã nào nhờ chủ đề và plugin

Về mặt kỹ thuật, bạn không cần phải truy cập vào bất kỳ tệp hoặc mã nào của trang web để nó hoạt động đầy đủ. WordPress Dashboard, plugin và theme đều giúp việc điều chỉnh và cá nhân hóa trang web của bạn trở nên nhanh chóng và dễ dàng

Tuy nhiên, đôi khi bạn có thể muốn phát triển khai thác nhiều quyền kiểm tra giám sát hơn và thực hiện các tùy chọn nâng cao. Có thể thay đổi bạn đang muốn thực hiện không phải là một tùy chọn với chủ đề hoặc plugin

Một khả năng khác là trang web của bạn gặp sự cố hoặc gặp một số lỗi khác khiến bạn không thể truy cập Bảng điều khiển quản trị. Bạn có thể cần phải chỉnh sửa mã trong WordPress của mình để giải quyết sự cố

Trong những trường hợp như vậy, sẽ rất hữu ích nếu bạn biết cách chỉnh sửa mã trong WordPress. Cũng như cách truy cập và sửa đổi mã nguồn khác một cách an toàn và hiệu quả. Bao gồm PHP, CSS và Javascript. Nói một cách đơn giản, học một số vị trí mã hóa cơ bản WordPress để bạn kiểm tra và linh hoạt trong công việc thiết kế, quản lý và duy trì WordPress

>> Xem thêm. Code web là gì?

Sửa mã WordPress

Sẽ có nhiều cách để sửa code WordPress. Sau đây chúng tôi sẽ liệt kê hướng dẫn mã chỉnh sửa WordPress đơn giản

Cách chỉnh sửa mã HTML trong WordPress

Lưu ý rằng việc sửa mã WordPress có thể mang lại một số rủi ro. Người chỉnh sửa HTML tương đối an toàn với các kỹ thuật khác mà chúng ta sẽ tham khảo ý kiến ​​​​trong bài viết này, nhưng vẫn nên tiến hành cẩn thận và tƺcẻc

Chỉnh sửa mã HTML trong WordPress với Classic Editor

Nếu bạn muốn thêm hoặc chỉnh sửa HTML trong WordPress của trang hoặc bài đăng WordPress, bạn thực sự không cần truy cập mã nguồn của trang web của mình. Trong Classic Editor, tất cả những gì bạn phải làm là chuyển từ Visual Editor sang Text Editor. Điều này sẽ hiển thị hoạt động của HTML

Code hay cho wordpress
Hướng dẫn cách sửa mã HTML đã sửa trong bài viết

Từ Trình soạn thảo văn bản, bạn có thể truy cập, thay đổi và cập nhật HTML trên bất kỳ trang hoặc bài đăng nào chỉ bằng một cú nhấp chuột. Bạn có thể xem các thay đổi của mình bất kỳ lúc nào bằng cách chuyển về Visual editor. Khi hoàn tất, hãy lưu lại bài đăng hoặc trang của bạn

Chỉnh sửa code HTML WordPress với Block Editor

Nếu bạn đang sử dụng Block Editor (Gutenberg), việc chuyển từ Visual Editor sang Text Editor cần thêm một vài bước. Tuy nhiên, bạn cũng có nhiều tùy chọn có sẵn để sửa mã WordPress của mình. Bao gồm việc thực hiện các thay đổi đối với toàn bộ trang hoặc bài đăng đối với các khối riêng lẻ

Để chỉnh sửa mã sửa đổi WordPress của toàn bộ trang hoặc bài đăng, hãy nhấp vào ba dấu chấm dọc nằm ở góc trên cùng bên phải, sau đó chọn Trình chỉnh sửa mã

Code hay cho wordpress
Chuyển sang trình chỉnh sửa mã khi sử dụng Trình chỉnh sửa khối

Thao tác này sẽ mở WordPress HTML Editor. To move from Visual Editor sang Text Editor at a tool block. Hãy nhấp vào ba chấm dọc trên thanh công cụ khối, sau đó chọn Chỉnh sửa dưới dạng HTML

Code hay cho wordpress
Chỉnh sửa HTML đã sửa trong từng khối

Một cách khác để thêm HTML vào trang hoặc bài đăng là sử dụng khối HTML tùy chỉnh

Code hay cho wordpress
Cách khác, bạn có thể thao tác như trên màn hình

Bạn có thể viết mã HTML của mình trực tiếp vào trong khối, sau đó nhấp vào Xem trước trước khi xem mã sẽ trông như thế nào trên giao diện người dùng

Code hay cho wordpress
Viết code trực tiếp

Khi hoàn tất, hãy lưu các thay đổi vào bài đăng hoặc trang của bạn

>> Xem thêm. Quy ước mã là gì?

Chỉnh sửa HTML trang chủ trong WordPress

Trong một số chủ đề, trang chủ hoạt động như một trang cá nhân của riêng nó. Do đó, thông qua mã sửa đổi mã WordPress của nó giống như đã được mô tả ở trên. Chỉ cần chọn trang có liên quan từ danh sách trong bảng điều khiển của bạn

Code hay cho wordpress
Chỉnh sửa HTML trang chủ

Bạn cũng có thể nhấp vào Chỉnh sửa trang trong thanh quản trị từ trang chủ của mình để truy cập Classic hoặc Block Editor

Code hay cho wordpress
Chỉnh sửa trực tiếp trên thanh Admin Wordpress

NếU Cả HAI TUY CHọN đÓ ềU KHÔNG HOạT ỘNG ỨNG DỤNG Sử dụng CODE WORDPRESS TRRên trang chủ của bạn, bạn có thể đang sử dụng page Builder hoặc Theme với trình soạn thảo trang chủ được tích hợp sẵn. Nếu đúng như vậy, bạn có thể tham khảo tài liệu về công cụ liên quan

Chỉnh sửa HTML WordPress đã sửa với Widget

Cuối cùng, bạn có thể muốn thêm HTML vào thanh bên hoặc chân trang WordPress của mình. Nhiều chủ đề WordPress cũng sử dụng tiện ích để kiểm tra nội dung trên trang chủ của trang web

Bạn có thể thực hiện việc điều chỉnh trang chủ, đầu trang và chân trang thông qua Tiện ích HTML tùy chỉnh tiện ích này

Code hay cho wordpress
Chỉnh sửa Widget mạnh HTML

Chỉ cần dẫn hướng đến “Giao diện > Tiện ích“, thêm tiện ích Tiện ích HTML tùy chỉnh vào thanh bên hoặc chân trang và chỉnh sửa nó theo ý muốn của bạn. Nhấn vào nút Lưu để xuất bản nó trên trang của bạn

Cách chỉnh sửa CSS và PHP trong WordPress

Quá trình chỉnh sửa CSS trong WordPress của bạn khá giống với quá trình sửa đổi JavaScript. Có ba phương pháp bạn có thể sửa mã WordPress của mình như vậy

  • Chỉnh sửa tệp CSS đã chỉnh sửa của bạn trong Trình chỉnh sửa chủ đề
  • Sử dụng CSS Editor được tích hợp sẵn của chủ đề trong WordPress Customizer
  • Plugin CSS bang

Phương pháp nào phù hợp nhất với bạn sẽ dựa vào mức độ chỉnh sửa mà bạn định thực hiện cũng như tần suất bạn định thực hiện thay đổi

Chỉnh sửa CSS thông qua Trình chỉnh sửa chủ đề

Tất cả các tệp CSS được sử dụng cho chủ đề của trang web WordPress có thể được tìm thấy trong Trình chỉnh sửa chủ đề (Giao diện> Trình chỉnh sửa chủ đề). Trong danh sách bên phải, hãy tìm các tệp kết thúc bằng phần mở rộng. css

Code hay cho wordpress
Chỉnh sửa CSS qua Trình chỉnh sửa chủ đề

Bạn có thể thực hiện các thay đổi mong muốn của mình trong trình chỉnh sửa. Khi bạn hoàn tất, hãy nhấp vào Cập nhật tệp để lưu các thay đổi của bạn

Chỉnh sửa CSS với WordPress Tùy chỉnh

Ngoài WordPress Theme Editor, bạn cũng có thể sửa code WordPress của mình bằng WordPress Customizer. Để truy cập nó, hãy điều hướng đến “Giao diện > Tùy chỉnh” từ Bảng điều khiển WordPress

Code hay cho wordpress
Truy cập vào “Giao diện > Tùy chỉnh”

Tiếp theo, nhấp vào CSS bổ sung ở cuối bảng bên trái

Code hay cho wordpress
Chọn CSS bổ sung

Một trình chỉnh sửa mã sẽ được mở ra nơi bạn có thể thêm các tùy chọn chỉnh sửa CSS vào đây

Code hay cho wordpress
Thêm css tùy chỉnh vào đây

Như bạn đã thấy, trình soạn thảo này khá nhỏ và chủ yếu dành phần cho các sửa đổi nhỏ thay vì viết lại toàn bộ phong cách của trang web của bạn. Việc thực hiện các thay đổi quy định lớn của Trình chỉnh sửa chủ đề hoặc sử dụng plugin sẽ dễ dàng hơn

Khi hoàn tất việc thêm CSS vào Customizer, hãy nhấp vào nút Xuất bản để lưu các thay đổi của bạn

Sử dụng plugin CSS Hero

CSS Hero là một công cụ trực quan cho phép bạn chỉnh sửa các khía cạnh thiết kế và phong cách trang web của mình mà không cần chỉnh sửa các chủ đề tệp

Code hay cho wordpress
Sử dụng plugin Hero CSS

Đây là một WordPress Theme editor cho phép bạn lưu trữ ảnh chụp nhanh các thay đổi của mình, bao gồm các phiên bản khác nhau và đưa chúng vào hoạt động. Nó tạo ra một CSS bổ sung đi kèm với chủ đề của bạn. Do đó, bạn sẽ không cần phải lo lắng về việc gây ra bất kỳ thiệt hại nào bằng cách chỉnh sửa tệp CSS trực tiếp của mình.

Các tính năng của CSS Hero bao gồm

  • Các đoạn văn được tạo sẵn, có thể chỉnh sửa
  • Tích hợp và hỗ trợ Google Font và TypeKit
  • Trình soạn thảo trực quan cho phép xem trước các thay đổi khi thực hiện chúng

Sử dụng Theme Editor để sửa mã WordPress

Trong trường hợp khác, WordPress cung cấp trình chỉnh sửa thích hợp cho phép bạn chỉnh sửa chủ đề tệp trực tuyến đã chỉnh sửa của mình. Trong Theme Editor, bạn có thể truy cập PHP, CSS, JavaScript và tất cả các tệp liên quan để sửa mã WordPress của mình

Nếu trang web WordPress của bạn vẫn đang hoạt động, bạn có thể tìm thấy mã nguồn của trang web của mình trong “Giao diện > Trình chỉnh sửa chủ đề”

Code hay cho wordpress
Vào phần theme editor

Trong khu vực chỉnh sửa này, bạn có thể thực hiện bất kỳ thay đổi nào mà bạn thấy phù hợp với thiết kế và cấu trúc mìme của bạn

Code hay cho wordpress

Nếu bạn đã cài đặt nhiều chủ đề, bạn có thể chuyển đổi chủ đề ở góc trên bên phải của Trình chỉnh sửa

Code hay cho wordpress
Chủ đề lựa chọn bạn cần chỉnh sửa

Để chọn chủ đề tệp cụ thể cho việc chỉnh sửa mã WordPress, bạn có thể chọn từ danh sách ở bên phải của Trình chỉnh sửa

Code hay cho wordpress
Chọn tệp cần chỉnh sửa có sẵn trên giao diện

Các tệp có sẵn ở đây tùy thuộc vào chủ đề của bạn, nhưng tối thiểu bạn nên xem

  • Phong cách. css. Đây là stylesheet của bạn, chứa nhiều tính năng liên quan đến thiết kế, chẳng hạn như phông chữ và bảng mã màu của chủ đề của bạn
  • chức năng. php. File function of themebao gồm mã PHP sửa đổi các tính năng mặc định của WordPress

Sau khi chỉnh sửa code WordPress của mình trong Theme Editor xong, bạn nhớ lưu lại các thay đổi của mình. Chỉ cần nhấp vào nút Cập nhật tệp ở cuối màn hình để thực hiện công việc đó

WordPress sẽ ngăn bạn lưu các thay đổi nếu thấy có lỗi trong mã. Đây là một phần của những gì làm cho công việc chỉnh sửa mã WordPress bằng Trình chỉnh sửa chủ đề trở nên an toàn hơn so với mã sửa đổi WordPress thông qua FTP (chúng ta sẽ thảo luận luận hận)

Cách chỉnh sửa code WordPress qua FTP

Như bạn có thể nhớ lại ở phần trước, việc sử dụng Theme Editor để sửa mã WordPress là một phương pháp để truy cập và thay đổi mã giao dịch web. Cách khác là sử dụng ứng dụng khách FTP có thời hạn như FileZilla. Các loại công cụ này cho phép bạn kết nối với máy chủ của trang web để truy cập các tệp được lưu trữ ở đó

Cách tiếp cận này liên quan đến việc thực hiện các bộ thay đổi cục bộ với tệp của bạn. Sau đó tải lại các file đã chỉnh sửa code WordPress lên môi trường lưu trữ

Dưới đây là bốn bước để sửa mã WordPress qua FTP

bước 1. Định vị trí hoặc tạo thông tin đăng nhập FTP của bạn

Trước tiên, để kết nối với máy chủ của bạn qua FTP, bạn cần thông báo đăng nhập FTP, bao gồm tên người dùng, mật khẩu và tên máy chủ. Bạn sẽ có thể tìm thấy chúng được liệt kê trong tài khoản lưu trữ của mình

Nếu không, bạn có thể tạo tên người dùng và mật khẩu của mình trong cPanel trong “Tệp > Tài khoản FTP“

Code hay cho wordpress
Vào Tài khoản FTP

Nhấn vào biểu tượng này, sau đó chọn Thêm tài khoản FTP

Code hay cho wordpress
Thêm tài khoản FTP vào giao diện

Trên Thêm tài khoản FTP, hãy hoàn thành các bước sau

  1. Add the format number sắt duy nhất cho tên người dùng FTP của bạn. Tên người dùng FTP là mã định danh duy nhất@tên miền chính. com, vì vậy hãy sao chép/dán nó vào một vị trí an toàn
  2. Tạo mật khẩu mạnh. Chúng tôi khuyên bạn nên sử dụng trình tạo mật khẩu đạt xếp hạng mạnh 100/100. Đây sẽ là mật khẩu FTP của bạn
  3. Đối với Thư mục, hãy luôn sử dụng public_html
  4. Hạn ngạch của bạn luôn là Không giới hạn

Lướt vào Tạo tài khoản FTP và bạn đã hoàn tất. Nếu gặp sự cố khi tạo thông tin đăng nhập FTP, bạn có thể muốn Google “[nhà cung cấp dịch vụ lưu trữ của bạn] FTP”. Thông thường, điều này sẽ cung cấp ít nhất một số hướng dẫn hữu ích

bước 2. Tải xuống một FTP Client chẳng hạn như FileZilla

Code hay cho wordpress
Tải fileZilla

Đây là giải pháp FTP miễn phí cho phép bạn truyền tệp qua lại giữa máy tính và máy chủ của trang web. Tuy nhiên, có những FTP Client khác, vì vậy hãy sử dụng phần mềm phù hợp với nhu cầu của bạn

Bước 3. Đăng nhập vào môi trường web hosting thông qua FileZilla

Sau khi hoàn tất tải xuống FileZilla, hãy mở nó và nhập tên máy chủ FTP, tên người dùng và mật khẩu

Code hay cho wordpress
Nhập FTP

Nếu cPanel của bạn liệt kê một địa chỉ IP, bạn có thể sử dụng nó để làm máy chủ lưu trữ. Sau khi bạn nhập các thông tin đăng nhập này, hãy nhấp vào nút Quickconnect

Code hay cho wordpress

Nó sẽ kết nối với máy chủ trong vài giây

bước 4. Bắt đầu sửa mã WordPress của bạn

Sau khi đăng nhập, bạn có quyền truy cập vào tệp nguồn WordPress để chỉnh sửa HTML, CSS, PHP và JS đã chỉnh sửa khi bạn thấy phù hợp. Chỉ cần nhấp chuột phải vào bất kỳ tệp nào và chọn Xem/Chỉnh sửa

Code hay cho wordpress
Chỉnh sửa HTML, CSS,…

Khi bạn đã sửa mã WordPress của mình xong, hãy lưu tệp. Sau đó FileZilla sẽ tự động tải lên thay phiên bản cũ

Đăng ký Hosting Giá Rẻ ngay

Lời kết

Trên đây là các cách chỉnh sửa code WordPress cơ bản, để bạn có thể nắm bắt và biết cách duy trì, tùy chỉnh hay khắc phục trên website mìhở. Chúc các bạn thành công

Code hay cho wordpress

Chia sẻ bài viết

đánh gia

5/5 - (2 bình chọn)

Code hay cho wordpress

nguyễn thanh trường

Conconnection with mình qua

Code hay cho wordpress

Mình là Trường - hiện đang phụ trách một số mảng trong chiến lược Marketing của Vietnix và đặc biệt là SEO. Ngoài ra, mình còn thích sử dụng WordPress để xây dựng trang web trong nhiều năm qua. Mình mong muốn có thể sử dụng trải nghiệm thực tế khi làm việc tại Vietnix để thu lại những chia sẻ hữu ích cho các bạn

Code hay cho wordpress

Đăng ký nhận tin

Để không bỏ sót bất kỳ tin tức hoặc chương trình khuyến mãi từ Vietnix

E-mail

Đăng ký

Bài viết liên quân

Code hay cho wordpress

WordPress

Gutenberg là gì?

Code hay cho wordpress

WordPress

Thanh bên là gì?

Code hay cho wordpress

WordPress

11 plugin WordPress Affiliate tốt nhất hiện nay

Code hay cho wordpress

WordPress

Cách thêm plugin hotline WordPress trong WordPress

Code hay cho wordpress

WordPress

So sánh sự khác biệt giữa WordPress. com và WordPress. tổ chức

Code hay cho wordpress

WordPress

Hướng dẫn thiết kế web WordPress chuyên nghiệp từ A-Z

bình luận

Theo doi

thông tin của

Code hay cho wordpress

nhãn mác

{} [+]

Mứt*

E-mail*

nhãn mác

{} [+]

Mứt*

E-mail*

1 Nhận xét

The best

Mới nhất Được bỏ qua nhiều phiếu nhất

Nội tuyến phản hồi

Xem tất cả các bình luận

Code hay cho wordpress

khách

phanhuyennhi890@gmail. com

1 năm trước

mình làm web bằng wordpess rồi. muốn sửa tên thẻ div đã có sẵn trong theme flatsome đc ko ạ. nếu được anh chị chỉ giúp em đc ko ạ