Cách viết mã tùy chỉnh trong bài viết WordPress của bạn

Có nhiều lý do tại sao bạn muốn viết hoặc bao gồm mã bổ sung trong các bài đăng WordPress của bạn. Bạn có thể cần hiển thị quảng cáo, áp dụng kiểu dáng độc đáo cho các phần nhất định trên trang web của bạn hoặc chỉ cần đánh dấu một số văn bản hoặc nội dung để thu hút sự chú ý. Tuy nhiên, bạn có thể thêm mã để đạt được các hiệu ứng hình ảnh khác nhau để cung cấp trải nghiệm người dùng tốt hơn.


Tất cả những điều này và những lý do khác là những lý do hợp lệ, nhưng bất kể bạn đang muốn đạt được điều gì với mã tùy chỉnh, quá trình viết mã có thể bị bẻ khóa hoặc thách thức hoàn toàn! Trong hướng dẫn này, chúng tôi sẽ đề cập đến các lĩnh vực sau:

  • Thêm mã trông giống như mã nhưng không hành xử giống như mã (trong trường hợp bạn đang muốn hiển thị các dòng mã hoặc cải thiện giao diện trang web của mình)
  • Thêm mã được dự định để hành xử như mã, ví dụ: Quảng cáo theo kịch bản như Quảng cáo Google Adsense

Trong hai danh mục này, chúng tôi sẽ nghiên cứu một chút về mã lập trình như HTML, CSS, Javascript và chạm vào quảng cáo và vẻ đẹp của

thùng đựng hàng. Bây giờ, không cần phô trương thêm nữa, chúng ta hãy bắt tay vào công việc và viết một số mã.

Thêm mã trông giống như mã nhưng không hoạt động như mã

Nếu bạn muốn hiển thị mã (có lẽ bạn là nhà thiết kế hoặc nhà phát triển web) mà người dùng của bạn có thể sao chép và dán, thì điều quan trọng là phải làm đúng vì ngay cả một ngắt dòng có thể làm rối mã, do đó tất cả công việc của bạn. Cách mã của bạn sẽ được WordPress diễn giải tùy thuộc vào việc bạn sử dụng trình soạn thảo HTML hay Visual Post. Nhập mã của bạn trực tiếp vào trình soạn thảo trực quan sẽ không có hiệu ứng bạn muốn tạo, vì trình soạn thảo trực quan coi mã là văn bản bình thường, có nghĩa là trình duyệt web sẽ không hiểu mã của bạn là mã Code, mà là văn bản thông thường.

Mặt khác, Trình chỉnh sửa bài HTML sẽ nhận ra bất kỳ đánh dấu HTML hoặc CSS nào bạn sử dụng, nghĩa là chúng sẽ được trình duyệt web giải thích, một điều có thể dẫn đến bố cục lộn xộn và nội dung trông thú vị. Ví dụ, 

trong trình soạn thảo trực quan sẽ được hiểu là văn bản thông thường và kết quả sẽ chỉ là
. Tuy nhiên,
 trong trình soạn thảo HTML sẽ được hiểu là đánh dấu HTML và kết quả sẽ là việc tạo ra một thùng chứa.

Bài tập HTML

Nó thực sự là một bài tập vô ích, nhưng bạn có thể thử nó để có một bức tranh rõ ràng hơn về ý tôi. Chỉ cần mở của bạn Trình chỉnh sửa HTML, kiểu

và lưu nó như một bản nháp. Sau khi bản nháp của bạn được lưu, hãy nhấp vào Xem trước Bài đăng Xem trước để xem trang web xáo trộn. Đừng lo lắng, nó không phải là vĩnh viễn và bạn có thể bỏ qua bản nháp. Bây giờ trở lại kinh doanh.

Nói chung, bạn có thể sử dụng mã theo hai cách. Đầu tiên, bạn có thể sử dụng mã trong một dòng (hoặc đoạn) để làm rõ một điểm về mã của bạn. Thứ hai, bạn có thể viết, tô sáng và đặt mã của bạn thành một khối như thế này:



Viết mã trong WordPress Bài viết Hướng dẫn


...

Để đạt được hiệu quả trên, chúng tôi sử dụng thẻ mã được viết như Mã của chúng tôi đi vào đây . Mũi tên thay thế (<  >) Với dấu ngoặc vuông ([]) tùy thuộc vào trang web WordPress của bạn và trình chỉnh sửa bài đăng bạn đang sử dụng (trực quan hoặc HTML). Mã mà bạn muốn hiển thị phải nằm giữa thẻ mở,   và thẻ đóng, . Ví dụ: để sử dụng mã trong một đoạn:

Mã trong một đoạn

Thẻ mã làm cho văn bản không phải HTML trông giống như mã, nhưng nó không cho trình duyệt web diễn giải đánh dấu HTML hoặc loại bỏ nó khỏi bài đăng. Điều này có nghĩa là trình duyệt vẫn có thể mã hóa đánh dấu HTML của bạn khiến việc hiển thị trở nên khó khăn Thẻ HTML trong mã của bạn. Tuy nhiên, bạn có thể khắc phục vấn đề này bằng cách sử dụng các ký tự mở rộng hoặc các thực thể ký tự để thể hiện < > các ký tự, sẽ đánh lừa mọi trình duyệt. Ví dụ…

Thẻ HTML có thể được hiểu là Đánh dấu HTML

Khoan sẽ tạo ra một container mới (nhờ

) và một tiêu đề (

), sẽ làm rối trang web của bạn. Nhưng nếu bạn sử dụng các thực thể ký tự để thay thế < > mũi tên, bạn sẽ tránh hành vi này và xuất mã của bạn như mong muốn. Do đó, đoạn mã trên sẽ trông như thế này:

Sử dụng các thực thể nhân vật thay thế

Tạo một khối mã nổi bật

Nếu tôi muốn làm nổi bật một khối mã (hoặc thậm chí là văn bản) để có được một cái gì đó như;

Khối mã

Tôi bắt đầu bằng cách đặt mã (hoặc văn bản) vào một thùng chứa như vậy:

Bạn phải làm điều này trong trình soạn thảo HTML

Sau đó, tôi thêm kiểu bằng cách sử dụng CSS trực tiếp (như trong hình trên) hoặc thông qua style.css tìm thấy tập tin trong thư mục chính của bạn.

Phong cách thẻ mã của bạn

Thẻ mã sẽ sử dụng cỡ chữ từ và đặt văn bản trong một phông chữ đơn cách theo mặc định. Bạn có thể thay đổi tất cả mặc dù để mã của bạn trông giống như bạn muốn. Tất cả những gì bạn phải làm là thêm

 mã {cỡ chữ: 1,2em; màu: # 000; trọng lượng phông chữ: bình thường;} 

Cẩu hoặc một cái gì đó tương tự như của bạn style.css. Có nhiều kiểu không giới hạn và mọi thứ đều phụ thuộc vào sở thích cá nhân của bạn, vì vậy, don giữ lại – kiểu cách.

Thêm mã hành vi như mã

Phần này đặc biệt hữu ích nếu bạn muốn hiển thị quảng cáo hoặc các tập lệnh khác, ví dụ: Đoạn mã Javascript trong bài viết của bạn. Trong khi có các plugin, chẳng hạn như Adsense nhanh, Điều đó sẽ giúp bạn quản lý quảng cáo trong bài đăng của mình, bạn có thể quan tâm đến việc cài đặt các tập lệnh độc lập mà bạn có toàn quyền kiểm soát.

Nếu quảng cáo của bạn là một hình ảnh đơn giản và một liên kết, bạn có thể thêm quảng cáo vào bài đăng của mình thông qua tiện ích tải lên. Chỉ cần tải lên hình ảnh và nhập liên kết của bạn (và có lẽ là chú thích) và công việc của bạn đã hoàn thành. Phương pháp này bị giới hạn mặc dù bạn chỉ có thể căn chỉnh quảng cáo của mình sang trái, sang phải hoặc ở giữa – giống như một hình ảnh điển hình. Ngoài ra, bạn có thể tạo một thùng chứa trong bài đăng của mình bằng trình chỉnh sửa HTML.

Thí dụ:


Tạo thùng chứa này chính xác nơi bạn muốn quảng cáo của bạn, có nghĩa là bạn cần phải có bài đăng sẵn sàng trước khi bạn thêm quảng cáo. Khi container đã sẵn sàng, bạn có thể tạo kiểu theo cách bạn muốn. Bạn có thể di chuyển nó xung quanh bằng style.css của mình bằng cách sử dụng Chức vụ bất động sản. Nếu bạn muốn chạy một Quảng cáo Google Adsense trong bài viết của bạn, bạn vẫn có thể sử dụng Adsense nhanh – plugin – hoặc tạo một thùng chứa và đặt mã quảng cáo của bạn như thế này:


Lưu ý 1: Quảng cáo Google dựa trên Javascript và có thể được hiểu bởi tất cả các trình duyệt web chính miễn là người dùng đã bật Javascript trên máy của họ.

Lưu ý 2: Bạn phải chọn đúng kích thước Quảng cáo cho trang web của mình để tránh làm hỏng bài đăng cũng như trang web của bạn.

Nếu bạn muốn thêm một quảng cáo vĩnh viễn sẽ xuất hiện trên tất cả các bài đăng của bạn (bài đăng hiện tại và tương lai) mà không cần thêm bất kỳ công việc nào, bạn sẽ cần chỉnh sửa Mẫu bài duy nhất (đơn.php). Tôi đã đặt quảng cáo 468px x 60px ở đầu tất cả các bài đăng của mình bằng cách thêm mã sau vào đơn.php ngay sau đó < – – END post-entry-meta – ->.


Tất nhiên, bạn phải sử dụng Quảng cáo Google của riêng bạn �� Đây là cách quảng cáo Google Adsense xuất hiện trên blog của tôi:

Viết mã trong WordPress

Để tìm đơn.php, đi đến của bạn Bảng quản trị – >> Giao diện – >> Trình chỉnh sửa – >> single.php. Khi single.php được mở, hãy sử dụng thanh tìm kiếm (Ctrl + F) để xác định vị trí < – – END post-entry-meta – ->.

Bạn có thể để nguyên thùng chứa hoặc tạo kiểu cho nó bằng style.css khi bạn thấy phù hợp. Và nhớ lưu tất cả các thay đổi. Các

container thực sự hữu ích và khi bạn kết hợp nó với CSS và một chút sáng tạo, bạn có thể đạt được rất nhiều với trang web WordPress của mình. Nó có thể giúp bạn đặt bất kỳ mã nào (hoặc bất cứ thứ gì thực sự) ở bất cứ đâu trên trang web của bạn.

Hộp công cụ

Nếu bạn muốn tìm hiểu thêm về cách viết mã tùy chỉnh trong các bài đăng WordPress của mình, xin vui lòng kiểm tra các tài nguyên sau:

Chà, mà nói về nó. Chúng tôi đã quản lý để bao gồm các khu vực chúng tôi vạch ra lúc đầu. Nhưng nếu bạn không hiểu bất kỳ khái niệm nào trong bài đăng này hoặc bạn muốn thêm đề xuất hoặc quan điểm của mình, vui lòng chia sẻ suy nghĩ của bạn trong phần bình luận bên dưới!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map