Mã nhúng html

Lưu ý cho người dùng WordPress 5. 0 trở lên. vui lòng xem Câu hỏi thường gặp để biết chi tiết về cách sử dụng plugin này với trình chỉnh sửa khối

Code Embed cho phép bạn nhúng mã (JavaScript và HTML – không thể sử dụng mã này cho mã phía máy chủ, chẳng hạn như PHP) trong một bài đăng mà không bị biên tập viên thay đổi nội dung. Điều này cực kỳ hữu ích để nhúng tập lệnh của bên thứ ba, v.v. Plugin được sử dụng bởi nhiều trang web lớn, bao gồm cả Mozilla

Các tính năng chính bao gồm…

• Thêm HTML hoặc JavaScript vào bài đăng hoặc trang – đặc biệt hữu ích để nhúng video
• Nhúng vào các widget bằng cách sử dụng plugin Widget Logic
• Tính năng nhúng toàn cầu cho phép bạn thiết lập một số mã trong một bài đăng hoặc trang và sau đó truy cập mã đó từ một bài đăng hoặc trang khác
• Sửa đổi từ khóa hoặc số nhận dạng được sử dụng để nhúng mã theo lựa chọn của riêng bạn
• Tìm kiếm mã nhúng thông qua tùy chọn tìm kiếm đơn giản
• Thêm một hậu tố đơn giản vào mã nhúng để chuyển đổi video thành đầu ra đáp ứng
• Nhúng trực tiếp tập lệnh bên ngoài chỉ bằng URL
• Và nhiều, nhiều hơn nữa

Iconography là của Janki Rathod rất tài năng ♥️

👉 Vui lòng truy cập trang Github để biết mã phát triển mới nhất, các cải tiến đã lên kế hoạch và các sự cố đã biết 👈

Bắt đầu

Đây là cách nó dễ sử dụng…

1. Khi bạn đã cài đặt plugin, hãy bắt đầu một bài đăng hoặc trang mới
2. Trong hộp meta Custom Fields nhập tên CODE1 và mã nhúng của bạn làm giá trị. Lưu cái này
3. Trong bài đăng của bạn, hãy thêm {{CODE1}} vào nơi bạn muốn mã nhúng xuất hiện

Và thế là xong – khi bài đăng hoặc trang được xem, {{CODE1}} sẽ được thay thế bằng mã mà bạn đã yêu cầu nhúng

Nếu bạn không thể tìm thấy vị trí của hộp meta Custom Fields trên màn hình chỉnh sửa bài đăng của mình, vui lòng xem phần Câu hỏi thường gặp để biết thêm thông tin

Điều này sẽ giúp bạn bắt đầu – để biết thêm thông tin và các tùy chọn nâng cao, vui lòng xem bên dưới. Ngoài ra, có một hướng dẫn tuyệt vời tại Elftronix mà tôi muốn giới thiệu

Mặc dù plugin này hoạt động cho cả bài đăng và trang để đơn giản nhưng tôi sẽ chỉ đề cập đến bài đăng – lưu ý rằng các trang hoạt động theo cùng một cách

Màn hình tùy chọn

Trong menu quản trị có một tùy chọn cài đặt tên là “Mã nhúng”

Việc nhúng mã được thực hiện thông qua một từ khóa đặc biệt mà bạn phải sử dụng để xác định duy nhất nơi bạn muốn mã xuất hiện. Điều này bao gồm một mã định danh mở (một số ở đầu), một từ khóa và sau đó là một mã định danh đóng. Bạn cũng có thể thêm hậu tố vào cuối từ khóa nếu muốn nhúng nhiều đoạn mã vào cùng một bài viết

Từ màn hình tùy chọn này, bạn có thể chỉ định số nhận dạng ở trên mà bạn muốn sử dụng. Theo mặc định, mã định danh mở và đóng là dấu phần trăm và từ khóa là

{{https://www.example.com/code.html}}<h3>Global Embedding</h3>

Màn hình tùy chọn chỉ khả dụng cho những màn hình có khả năng quản lý tùy chọn trở lên. Tất cả các tùy chọn menu Nhúng mã khác đều có sẵn cho người dùng có khả năng chỉnh sửa bài đăng hoặc cao hơn

nhúng

Để nhúng vào bài đăng, bạn cần tìm hộp meta bên dưới bài đăng có tên “Trường tùy chỉnh”. Nếu điều này bị thiếu, bạn có thể cần phải thêm nó bằng cách nhấp vào tab “Tùy chọn màn hình” ở đầu màn hình bài đăng mới

Bây giờ hãy tạo một trường tùy chỉnh mới với tên từ khóa của bạn – e. g.

{{https://www.example.com/code.html}}<h3>Global Embedding</h3>

Bây giờ, bất cứ nơi nào bạn muốn mã xuất hiện trong bài đăng của mình, chỉ cần đặt mã định danh đầy đủ (ký tự mở đầu, từ khóa và đóng). Ví dụ,

{{https://www.example.com/code.html}}<h3>Global Embedding</h3>

Nếu bạn muốn nhúng nhiều đoạn mã trong một bài đăng, bạn có thể thêm hậu tố vào từ khóa. Vì vậy, chúng tôi có thể thiết lập 2 trường tùy chỉnh có tên là

{{https://www.example.com/code.html}}<h3>Global Embedding</h3>

{{https://www.example.com/code.html}}<h3>Global Embedding</h3>

{{https://www.example.com/code.html}}<h3>Global Embedding</h3>

Đừng quên – thông qua màn hình tùy chọn, bạn có thể thay đổi bất kỳ phần nào của số nhận dạng này theo sở thích của riêng bạn

Nhúng URL

Nếu bạn chỉ định một URL trong bài đăng của mình, được bao quanh bởi lựa chọn số nhận dạng của bạn, thì nội dung của URL sẽ được nhúng trong bài đăng của bạn

Rõ ràng, hãy cẩn thận khi nhúng một URL mà bạn không có quyền kiểm soát, vì URL này có thể được sử dụng để chiếm quyền điều khiển bài đăng của bạn bằng cách chèn mã JavaScript nguy hiểm chẳng hạn

Ví dụ: sử dụng các tùy chọn mặc định, bạn có thể nhúng nội dung của một URL bằng phương pháp sau…

{{http://www.example.com/code.php}}

hoặc

{{https://www.example.com/code.html}}<h3>Global Embedding</h3>

Bạn cũng có thể tạo nhúng toàn cầu - đó là tạo một đoạn mã nhúng và sử dụng nó trong nhiều bài đăng hoặc trang

Để làm điều này, chỉ cần tham chiếu đến một đoạn mã nhúng đã được xác định (nhưng duy nhất) từ một bài đăng hoặc trang khác

Vì vậy, giả sử trong một bài đăng, bạn xác định một trường tùy chỉnh có tên là

{{https://www.example.com/code.html}}<h3>Global Embedding</h3>

Tuy nhiên, hãy nhớ rằng tên mã nhúng phải là duy nhất – bạn không thể xác định nó trong nhiều bài đăng nếu không plugin sẽ không biết bạn đang đề cập đến cái nào (mặc dù nó sẽ báo cáo điều này và liệt kê các bài đăng mà nó

Trong menu quản trị có một menu thanh bên có tên “Công cụ”. Dưới đây là một menu phụ có tên “Tìm kiếm mã”. Sử dụng công cụ này để tìm kiếm các tên nhúng cụ thể và nó sẽ liệt kê tất cả các bài đăng/trang mà chúng được sử dụng cùng với mã cho từng tên.

Nhúng vào Widget

Về bản chất, bạn không thể sử dụng các tiện ích nhúng trong các tiện ích thanh bên. Tuy nhiên, nếu bạn cài đặt plugin Widget Logic thì Code Embed đã được thiết lập để tận dụng điều này và thêm khả năng

• Cài đặt Widget Logic và kích hoạt
• Trong Quản trị, chọn trang Widget từ menu Giao diện. Ở dưới cùng sẽ có một tập hợp các tùy chọn Widget Logic
• Đảm bảo sử dụng bộ lọc 'widget_content' được đánh dấu và nhấn Lưu

Mặc dù bạn không thể thiết lập mã nhúng trong tiện ích nhưng bạn có thể tham chiếu đến tiện ích đó, chẳng hạn bằng cách viết {{CODE1}} vào tiện ích

Chuyển đổi đầu ra đáp ứng

Đầu ra đáp ứng là nơi một phần tử trên trang web tự động thay đổi kích thước tùy thuộc vào kích thước khả dụng hiện tại. Ví dụ: hầu hết các video nhúng sẽ có kích thước cố định. Điều này tốt nếu trang web của bạn cũng có kích thước cố định, tuy nhiên nếu bạn có một trang web phản hồi thì điều này không phù hợp

Mã nhúng cung cấp một hậu tố đơn giản có thể được thêm vào mã nhúng và sẽ chuyển đổi đầu ra thành phản hồi. Điều này hoạt động tốt nhất với video

Để sử dụng, khi thêm mã nhúng vào trang, chỉ cần thêm

{{https://www.example.com/code.html}}<h3>Global Embedding</h3>

{{https://www.example.com/code.html}}<h3>Global Embedding</h3>

{{https://www.example.com/code.html}}<h3>Global Embedding</h3>

Điều này bây giờ sẽ xuất toàn bộ chiều rộng của mã nhúng, nhưng chiều rộng là động và sẽ thay đổi kích thước khi được yêu cầu

Nếu bạn không muốn đầu ra có chiều rộng đầy đủ, bạn có thể chỉ định chiều rộng tối đa bằng cách thêm một

{{https://www.example.com/code.html}}<h3>Global Embedding</h3>

{{https://www.example.com/code.html}}<h3>Global Embedding</h3>

Cần lưu ý rằng đây là một bổ sung thử nghiệm và sẽ không hoạt động trong mọi trường hợp

Nhúng vào đoạn trích

Theo mặc định, mã nhúng sẽ không xuất hiện trong đoạn trích. Tuy nhiên, bạn có thể bật khả năng này thông qua màn hình tùy chọn Code Embed. Nếu bạn làm điều này thì các quy tắc tiêu chuẩn của đoạn trích sẽ vẫn được áp dụng, nhưng bây giờ khi mã nhúng đã được áp dụng – ví dụ: đoạn trích chỉ là văn bản, độ dài cụ thể, v.v.

Đánh giá & đề cập

“Làm việc như một giấc mơ. Tuyệt vời. ” – Anita

“Cảm ơn vì plugin này. Tôi đã thử rất nhiều plugin iframe khác và không có plugin nào phù hợp với tôi. Plugin này hoạt động như một cơ duyên ngay từ LẦN ĐẦU TIÊN. ” – KerryAnn May

Nhúng nội dung – WSD Blogging Server

Tạo ảnh động với PhotoPeach – Cómo hago

Tôi có thể sử dụng plugin này với trình chỉnh sửa khối mới (còn gọi là Gutenberg) / WordPress 5 không. 0 trở lên?

Vâng, bạn có thể. Theo mặc định, các trường tùy chỉnh được ẩn bên trong trình chỉnh sửa khối nhưng có thể được hiển thị

1. Chỉnh sửa bài đăng
2. Nhấp vào nút cài đặt (ba dấu chấm) ở góc trên cùng bên phải
3. Chuyển đến Tùy chọn
4. Bạn sẽ tìm thấy một hộp kiểm để hiển thị hộp meta 'Trường tùy chỉnh'

Mã của tôi không hoạt động

Nếu mã của bạn chứa các ký tự Custom Fields3 thì bạn sẽ thấy rằng nó không có – WordPress tự sửa đổi điều này

Nếu không, nó có thể là mã của bạn chứ không phải plugin này. Cách tốt nhất để xác nhận điều này là xem nguồn của trang và so sánh đầu ra mã với những gì bạn đã nhúng. Nó có khớp không?

Tôi không thể tìm thấy hộp meta Trường tùy chỉnh

'Hộp meta' này không được bổ sung bởi plugin này nhưng được tích hợp vào WordPress. Nếu bạn không thể tìm thấy nó trên màn hình chỉnh sửa bài đăng hoặc trang thì hãy nhấp vào tab 'Tùy chọn màn hình' ở góc trên cùng bên phải. Đảm bảo 'Trường tùy chỉnh' được đánh dấu. Vui lòng xem phần ảnh chụp màn hình để biết hình ảnh về cách nó xuất hiện trên bản cài đặt 'hộp mới' của WordPress

Nếu bạn vẫn không thể tìm thấy thì có thể chủ đề hoặc plugin của bạn đã loại bỏ điều này hoặc có thể có sự cố với cài đặt WordPress của bạn – bạn sẽ cần thử chẩn đoán thông thường để thử và giải quyết vấn đề này, bao gồm yêu cầu trợ giúp trên diễn đàn hỗ trợ WordPress. Sẽ rất cảm kích nếu bạn không đánh giá kém cho tôi trong tình huống này vì, tôi nói, thành phần này không phải là một phần của plugin này, nhưng bằng cách sử dụng nó, giúp plugin này dễ sử dụng và không bị phình to 🙂

Kích thước tối đa của mã nhúng mà tôi có thể lưu trong trường tùy chỉnh là bao nhiêu?

WordPress lưu trữ nội dung trường tùy chỉnh trong bảng MySQL bằng định dạng Custom Fields4. Điều này có thể chứa hơn 4 tỷ ký tự

Điều này có tuân thủ GDPR không?

Đó là, nó không lưu bất kỳ dữ liệu nào có thể mâu thuẫn với việc tuân thủ GDPR (i. e. nó tuân thủ theo thiết kế). Tuy nhiên, nếu bạn sử dụng điều này để nhúng tập lệnh của bên thứ ba, thì những tập lệnh đó có thể không được nhúng và bạn sẽ cần trao đổi với nhà cung cấp để biết thêm chi tiết

Ảnh chụp màn hình

• 
  Hộp meta trường tùy chỉnh có trường Nhúng mã được thiết lập để hiển thị một số mã nhúng YouTube
• 
  Ví dụ mã nhúng trong một bài viết
• 
  Video kết quả từ mã ví dụ trước
• 
  Màn hình tùy chọn
• 
  Màn hình tìm kiếm, hiển thị kết quả tìm kiếm
• 
  Hộp meta Trường tùy chỉnh và công tắc màn hình - cả hai đều được đánh dấu màu đỏ

Cài đặt

Mã Nhúng có thể được tìm thấy và cài đặt thông qua menu Plugin trong quản trị WordPress (Plugin -> Thêm mới). Ngoài ra, nó có thể được tải xuống từ WordPress. org và cài đặt thủ công…

1. Tải toàn bộ thư mục Custom Fields5 lên thư mục Custom Fields6 của bạn
2. Kích hoạt plugin thông qua menu ‘Plugin’ trong quản trị WordPress

thì đấy. Nó đã sẵn sàng để đi

Nhận xét

Cộng tác viên & Nhà phát triển

“Code Embed” là phần mềm mã nguồn mở. Những người sau đây đã đóng góp cho plugin này

• David Artiss

“Code Embed” đã được dịch sang 7 ngôn ngữ. Cảm ơn sự đóng góp của các dịch giả

Làm cách nào để chèn mã trong HTML?

Làm cách nào để nhúng HTML vào JavaScript?

Nhúng mã có nghĩa là gì?