Chuyển đổi HTML thành mã ngắn

Xin chào, tôi đang cố gắng nhúng một trình phát nhạc từ trang web cấp phép âm nhạc của tôi [Youlicense] vào một trang trên trang web wordpress của tôi. Không giống như soundcloud và các trình phát nhạc khác, Youlicense chỉ cung cấp mã nhúng html [mà trình soạn thảo văn bản WP của tôi sẽ không nhận ra]. Có cách nào để chuyển đổi mã này thành mã ngắn WP không?

Cảm ơn nhiều

Blog tôi cần trợ giúp là. [chỉ hiển thị cho người dùng đã đăng nhập]

14 Tháng Năm, 2014 lúc 5. 37 giờ chiều

galois

Thành viên

chỉ cung cấp mã nhúng html [mà trình soạn thảo văn bản WP của tôi sẽ không nhận ra]

Sao chép mã ở đây, giữa các thẻ mã

15 Tháng Năm, 2014 tại 1. 40 giờ chiều

michaelshawbond

Thành viên

Áp phích gốc

mmm, điều đó vẫn không hoạt động. Tôi nghĩ rằng tôi cần một số loại mã ngắn. Bất kỳ cách nào để chuyển đổi html sang shortcode?

Mã ngắn WordPress là một tính năng mạnh mẽ để làm những thứ thú vị với ít nỗ lực. Bạn có thể làm khá nhiều thứ với chúng. Với mã ngắn, việc nhúng các yếu tố tương tác hoặc tạo bố cục trang phức tạp dễ dàng như chèn một dòng mã

Nếu bạn muốn thêm một bộ sưu tập, bạn chỉ cần nhập mã sau

[gallery ids="47 ,86, 92, 64, 48, 75, 89, 80" columns="4" size="medium"]

Thao tác này sẽ xuất ra một thư viện có ID hình ảnh được đề cập. Nó sẽ có 4 cột và kích thước tối đa của chúng sẽ là 'trung bình' [theo định nghĩa của WordPress]

Không cần bất kỳ mã HTML xấu xí nào

' . esc_attr[ $a['label'] ] . '

'; return $output; }

Ồ, có rất nhiều thứ để giải nén ở đây. Tôi sẽ giải thích từng dòng một để bạn có thể hiểu nó hoạt động như thế nào

      • Chúng tôi đã đề cập đến hàm add_shortcode[] và cách thức hoạt động của nó trong phần trước
      • shortcode_atts[] là một chức năng WordPress kết hợp các thuộc tính mã ngắn của người dùng với các thuộc tính đã biết. Nó điền vào các giá trị mặc định khi cần [bạn cũng có thể tự đặt giá trị này]. Kết quả sẽ là một mảng chứa mọi khóa từ các thuộc tính đã biết, được hợp nhất với các giá trị từ các thuộc tính mã ngắn do người dùng xác định
      • Bên trong hàm xử lý mã ngắn, chúng tôi xác định một biến [$a] và gán nó cho mảng được trả về bởi shortcode_atts[]. Chúng tôi gán cho các thuộc tính giá trị mặc định của chúng bằng cú pháp. 'thuộc tính' => 'giá trị mặc định'. Ví dụ, trong đoạn mã trên, chúng tôi đang đặt giá trị mặc định của nhãn thuộc tính thành Nút với cú pháp ‘nhãn’ => ‘Nút’
      • Chúng ta có thể trích xuất các giá trị cho từng khóa thuộc tính bằng cú pháp PHP cho mảng. $a[‘thuộc tính’]
      • The $output variable stores the HTML code of the button element [ tag with ‘button’ class]. It’s the string that’s finally returned by the function.

Nếu bạn muốn đặt liên kết mặc định làm URL trang chủ của trang web, bạn có thể sử dụng chức năng home_url[] của WordPress

Hãy thử sử dụng shortcode nguyên trạng, không có thuộc tính nào được xác định và xem kết quả xuất ra là gì

Tôi đang thêm mã ngắn vào tiện ích văn bản thanh bên để kiểm tra nó

Nếu bạn đang thắc mắc dấu ngoặc vuông kép dùng để làm gì [[[cta_button]]], thì chúng được gọi là. Chúng giúp bạn xuất bất kỳ mã ngắn đã đăng ký nào trong trang web của bạn dưới dạng văn bản thông thường, như trong hình bên dưới

Đầu ra của mã ngắn Nút CTA cho thấy nó hoạt động hoàn hảo như mong đợi
Đầu ra HTML của Nút CTA không có thuộc tính.

Người dùng có thể tùy chỉnh kích thước và màu sắc của nút bằng shortcode. Chúng tôi đã đặt các giá trị mặc định của chúng trong hàm xử lý, nhưng chúng tôi cần đăng ký và đưa biểu định kiểu vào danh sách các tài nguyên có sẵn. Biểu định kiểu này phải có tất cả các lớp được xác định trong mã ngắn

Bạn cũng có thể đặt các lớp này trong biểu định kiểu chung của chủ đề, nhưng bạn nên tải chúng riêng biệt. Điều này đảm bảo rằng ngay cả khi bạn thay đổi hoặc cập nhật chủ đề WordPress của mình, các lớp này vẫn sẽ tải cùng với mã ngắn

________số 8_______

Hàm salcodes_enqueue_scripts[] xác định biến toàn cục $post, sau đó xác nhận hai điều kiện thông qua

      • là một[]. kiểm tra xem $post có phải là một thể hiện của đối tượng WP_Post không. Nó đề cập đến tất cả các loại bài đăng trong WordPress
      • has_shortcode[]. kiểm tra xem nội dung bài đăng có chứa mã ngắn [cta_button] hay không

Nếu cả hai điều kiện đều đúng, hàm sẽ đăng ký và liệt kê kiểu. biểu định kiểu css có trong thư mục CSS. Hàm plugin_dir_url[$file] giúp dễ dàng lấy URL của thư mục plugin

Tôi sẽ không hiển thị cho bạn mã CSS ở đây, nhưng bạn có thể tìm thấy nó trong mã nguồn được liên kết ở cuối phần này

Cuối cùng, hãy kiểm tra mã ngắn [cta_button] bằng cách thêm nó vào nội dung bài đăng

Lưu ý các thuộc tính liên kết, màu sắc, kích thước và nhãn tùy chỉnh

Hình ảnh bên dưới cho thấy Nút CTA trông như thế nào trên giao diện người dùng

Nút CTA hiện có URL, màu sắc, kích thước và nhãn mới

Bây giờ bạn đã học cách xác định các thuộc tính tùy chỉnh và bao gồm các kiểu, bạn có thể thêm nhiều chức năng khác vào mã ngắn Nút CTA của mình. Chẳng hạn, bạn có thể cung cấp cho người dùng của mình tùy chọn để thêm hoạt ảnh, hiệu ứng di chuột và nhiều kiểu nút khác

ví dụ 3. Mã ngắn Sử dụng nội dung $

Đối với ví dụ cuối cùng của chúng tôi, hãy tạo một mã ngắn kèm theo có tên [được đóng hộp] để xuất bất kỳ nội dung nào giữa các thẻ của nó trong một hộp có tiêu đề đầy màu sắc

Hãy bắt đầu bằng cách đăng ký mã ngắn và xác định chức năng xử lý của nó

/**
 * [boxed] returns the HTML code for a content box with colored titles.
 * @return string HTML code for boxed content
*/

add_shortcode[ 'boxed', 'salcodes_boxed' ];

function salcodes_boxed[ $atts, $content = null, $tag = '' ] {
 $a = shortcode_atts[ array[
 'title' => 'Title',
 'title_color' => 'white',
 'color' => 'blue',
 ], $atts ];
 
 $output = '
'.'

' . esc_attr[ $a['title'] ] . '

'.'

' . esc_attr[ $content ] . '

'.'
'; return $output; }
      • nội dung $ = null. điều này đăng ký mã ngắn dưới dạng một loại kèm theo. Bạn có thể sử dụng biến $content bên trong hàm xử lý của mình để thay đổi đầu ra theo ý muốn
      • thẻ $ =”. điều này xác định biến $tag của shortcode. Nó không cần thiết trong ví dụ này, nhưng đó là một cách tốt để đưa nó vào

Trong ví dụ này, chúng tôi sửa đổi nội dung bằng các kiểu CSS nội tuyến

Các kiểu cho bất kỳ lớp nào được sử dụng bên trong mã ngắn đều được đăng ký và đưa vào hàng đợi như chúng tôi đã làm trong ví dụ về mã ngắn trước đó

Nhưng có hai mã ngắn sử dụng cùng một biểu định kiểu có nghĩa là bạn phải tải nó nếu một trong hai mã được sử dụng. Vì vậy, hãy cập nhật hàm salcodes_enqueue_scripts[]

0
      • $has_shortcode. một biến do người dùng xác định để kiểm tra xem một trong hai mã ngắn có tồn tại trên trang/bài đăng hay không. Các. [Toán tử OR] biến điều đó thành có thể

Bây giờ, hãy lấy mã ngắn [được đóng hộp] của chúng tôi để quay

Thêm mã ngắn được đóng hộp cùng với tiêu đề, title_color và thuộc tính màu

Ảnh chụp màn hình bên dưới hiển thị đầu ra chúng tôi nhận được

Rốt cuộc, một chiếc hộp đẹp không khó để có được

Bây giờ bạn đã học được cách tạo mã ngắn của riêng mình, bạn có thể nghĩ ra [hộp] và tạo cho chúng ý tưởng của riêng bạn. Đừng quên chia sẻ sáng tạo của bạn với chúng tôi

Nếu muốn, bạn có thể tải xuống mã nguồn Shortcode Plugin từ đây

Mã ngắn WordPress. Ưu vs Nhược điểm

Ưu điểm

      • Mã ngắn đơn giản hóa việc bổ sung các tính năng phức tạp trong các trang web WordPress. Bạn có thể thêm hầu hết mọi thứ bằng cách nhập một dòng mã
      • Mã ngắn tự động hóa quy trình phát triển. Chúng loại bỏ nhu cầu viết các tập lệnh phức tạp mỗi khi bạn muốn chèn một tính năng nhất định
      • Mã ngắn thân thiện với người dùng hơn so với việc thêm mã HTML hoặc tập lệnh PHP
      • Mã ngắn có thể được gói bên trong plugin. Ngay cả khi bạn cập nhật WordPress hoặc thay đổi/cập nhật chủ đề của mình, các mã ngắn sẽ vẫn hợp lệ và tiếp tục hoạt động như trước đây
      • Gói mã ngắn bên trong plugin giúp chúng dễ sử dụng trên nhiều trang web WordPress. Nếu bạn là nhà phát triển xử lý nhiều trang web, thì việc chuẩn bị sẵn sàng tất cả các mã ngắn tùy chỉnh của bạn là cứu cánh
      • Vì các mã ngắn cũng chấp nhận các thuộc tính nên người dùng có thể sửa đổi cách hoạt động của cùng một mã ngắn bằng cách thay đổi các tùy chọn thuộc tính của nó

Nhược điểm

      • Mã ngắn không trực quan để sử dụng cho người dùng cuối, đặc biệt nếu nhiều mã ngắn được sử dụng trên một trang. Trong những trường hợp như vậy, chúng phù hợp hơn cho các nhà phát triển
      • Thật khó để biết shortcode làm gì chỉ bằng cách nhìn vào nó. Nhóm cốt lõi của WordPress đã khéo léo đặt tên cho chúng là “mã nhúng thịt bí ẩn” vì lý do chính xác này
      • Mã ngắn đi kèm với chủ đề sẽ ngừng hoạt động nếu bạn thay đổi chủ đề của mình
      • Mã ngắn không rõ ràng về cú pháp của chúng. Ví dụ: một số trong số chúng hỗ trợ đóng tùy chọn, vì vậy bạn có thể sử dụng chúng dưới dạng tự đóng hoặc kèm theo hoặc thậm chí cả hai nếu chúng được lồng vào nhau. Bạn có thể đoán làm thế nào nó có thể trở nên siêu khó hiểu siêu nhanh
      • Mã ngắn có thể phá vỡ HTML do các thẻ xung đột hoặc các vấn đề về khả năng tương tác. Không bao giờ là một cảnh tượng tốt khi nhìn thấy chúng trên giao diện người dùng của bất kỳ trang web nào
      • Mã ngắn thêm một tải bổ sung trên máy chủ của bạn. Khi số lượng mã ngắn trên trang/bài đăng của bạn tăng lên, tải này cũng vậy. Quá nhiều mã ngắn có thể khiến trang web của bạn bị thu thập dữ liệu [e. g. đầu ra của hầu hết các trình tạo trang]

Mã ngắn và Khối Gutenberg

Việc giới thiệu Gutenberg đã làm giảm mức độ mong muốn của mã ngắn. Giờ đây, người dùng có thể thêm các khối trực tiếp từ giao diện trình chỉnh sửa, thay vì xử lý các đánh dấu mã ngắn, bất kể nó đơn giản đến đâu

Và nếu bạn muốn thêm mã ngắn, Gutenberg thậm chí còn đi kèm với một khối chuyên dụng để thêm mã ngắn. Khối là Mã ngắn mới

“Nếu bạn có thể làm điều đó với một mã ngắn, thì bạn có thể làm điều đó dưới dạng một khối. ” —

Điều đó giải thích tại sao tất cả các mã ngắn phổ biến đang được chuyển thành khối. Nhiều nhà phát triển WordPress đã chuyển sang làm cho các sản phẩm và dịch vụ của họ hoạt động độc quyền với trình chỉnh sửa khối [Gutenberg]

Nhưng điều đó không có nghĩa đó là ngày tận thế của mã ngắn. Nhóm cốt lõi của WordPress đã hứa hẹn nhiều cải tiến cho trình chỉnh sửa khối mà bạn có thể thấy trong Twenty Twenty, nhưng cho đến lúc đó, các mã ngắn vẫn ở đây

Bạn nói ít hơn, làm được nhiều hơn? . Tìm hiểu chúng là gì và cách tạo của riêng bạn với hướng dẫn chuyên sâu này. Cuộc sống quá ngắn để không sử dụng mã ngắn〚〛💪Nhấp để Tweet

Tóm lược

Thêm chức năng phức tạp ở bất cứ đâu vào trang web WordPress của bạn thật dễ dàng với mã ngắn. Chúng cung cấp cho người dùng các thẻ dễ nhập để có thể sử dụng mà không phải lo lắng về việc sử dụng các mã phức tạp

Mặc dù có thể không có lối tắt nào trong cuộc sống, nhưng chắc chắn có rất nhiều mã ngắn để sử dụng trong WordPress. Mục yêu thích của tôi là Shortcodes Ultimate và Shortcodes của Angie Makes

Và nếu bạn không thể tìm thấy cái bạn đang tìm kiếm, bạn có thể tự tạo một cái

Bạn thậm chí có thể sử dụng phím tắt để tạo mã ngắn tùy chỉnh của mình bằng cách sử dụng plugin Shortcoder. Nó chăm sóc tất cả các yếu tố cần thiết cho bạn. Và hãy nhớ. cuộc sống ngắn ngủi, hãy sử dụng mã ngắn

Nhận tất cả các ứng dụng, cơ sở dữ liệu và trang web WordPress của bạn trực tuyến và dưới một mái nhà. Nền tảng đám mây hiệu suất cao, đầy đủ tính năng của chúng tôi bao gồm

  • Dễ dàng thiết lập và quản lý trong bảng điều khiển MyKinsta
  • Hỗ trợ chuyên gia 24/7
  • Mạng và phần cứng Google Cloud Platform tốt nhất, được cung cấp bởi Kubernetes để có khả năng mở rộng tối đa
  • Tích hợp Cloudflare cấp doanh nghiệp cho tốc độ và bảo mật
  • Tiếp cận đối tượng toàn cầu với tối đa 35 trung tâm dữ liệu và hơn 275 PoP trên toàn thế giới

Hãy tự kiểm tra với $20 trong tháng đầu tiên của Lưu trữ ứng dụng hoặc Lưu trữ cơ sở dữ liệu. Khám phá kế hoạch của chúng tôi hoặc nói chuyện với bộ phận bán hàng để tìm thấy sự phù hợp nhất của bạn

Làm cách nào để chuyển đổi HTML thành shortcode?

Tạo mã ngắn dễ dàng .
Đặt tên cho shortcode
Dán HTML/JavaScript/CSS dưới dạng nội dung mã ngắn
Tiết kiệm
Bây giờ hãy chèn mã ngắn [sc name="my_shortcode"] vào bài đăng/trang của bạn
thì đấy. Bạn đã nhận được HTML/Javascript/CSS trong bài đăng của mình

Mã ngắn HTML là gì?

Tóm lại, mã ngắn cho phép chúng tôi thêm HTML động và đánh dấu khác trực tiếp vào bài đăng hoặc trang nơi người dùng muốn chúng xuất hiện, trong khi vẫn cho phép người chỉnh sửa cập nhật trang< . Ví dụ [bên trái bên dưới] hiển thị một trang có các tính năng tương tác trên đó. Các nút và đàn accordion được thêm động bằng mã ngắn. . The example [left below] shows a page with interactive features on it. The buttons and an accordion are dynamically added by shortcode.

WordPress có mẫu mã ngắn không?

Hàm do_shortcode của WordPress giúp bạn dễ dàng thêm mã ngắn trực tiếp vào tệp mẫu của chủ đề. Tất cả những gì bạn cần làm là đưa mã ngắn vào bên trong hàm do_shortcode và lặp lại hàm ở vị trí mẫu mà bạn muốn mã ngắn xuất hiện .

Add_shortcode trong WordPress là gì?

Hàm add_shortcode được dùng để đăng ký trình xử lý mã ngắn . Phải mất hai tham số. tên mã ngắn [chuỗi được sử dụng trong nội dung bài đăng] và tên hàm gọi lại. Ba tham số được truyền cho chức năng gọi lại shortcode. Bạn có thể chọn sử dụng bất kỳ số nào trong số chúng, kể cả không có cái nào.

Chủ Đề