Chuyển đổi Markdown sang HTML trong các Dự án WordPress của bạn

Tìm hiểu cách sử dụng markdown trong các dự án WordPress của bạn. Đính kèm nội dung đánh dấu vào bài đăng dưới dạng trường tùy chỉnh và chuyển đổi nó thành HTML trong giao diện người dùng. Chúng tôi sẽ sử dụng thư viện PHP “Parsedown” mã nguồn mở để thực hiện công việc khó khăn trong việc chuyển đổi markdown sang HTML. Vì vậy… tất cả những gì chúng ta cần làm là nối các dấu chấm bằng cách sử dụng Trường tùy chỉnh nâng cao và một chút PHP trong chủ đề con tùy chỉnh của chúng tôi.

Nguồn Markdown

## Nội dung Đánh dấu

Markdown là một ngôn ngữ đánh dấu nhẹ để tạo văn bản được định dạng bằng trình soạn thảo văn bản thuần túy. [Wikipedia] (https://en.wikipedia.org/wiki/Markdown)

### Fairytale Ipsum

Ngày xửa ngày xưa ... Những đám mây đang kéo đến và cô gái ** đã sẵn sàng cho bất cứ điều gì **. Vào một buổi bình minh rực rỡ và đầy nắng, một đứa trẻ đi dạo trong rừng. Cô gái đang lấy một chiếc bánh cho bà của họ.

### Thêm Máy tạo thạch cao Gobbledygook ...

* [Máy ​​tạo Ipsum cho công ty] (https://flipsum-ipsum.net/ipsum/corporate/)
* [Thơ Gobbledygook] (https://flipsum-ipsum.net/ipsum/jabberwocky/)
* [Ipsim Trích dẫn Phim] (https://flipsum-ipsum.net/ipsum/hollywood/)

Được chuyển đổi sang HTML

### Nội dung đánh dấu
Markdown là một ngôn ngữ đánh dấu nhẹ để tạo văn bản được định dạng bằng trình soạn thảo văn bản thuần túy. Wikipedia

### Fairytale Ipsum
Ngày xửa ngày xưa ... Những đám mây đang kéo đến và cô gái đã sẵn sàng cho bất cứ điều gì. Vào một buổi bình minh rực rỡ và đầy nắng, một đứa trẻ đi dạo trong rừng. Cô gái đang lấy một chiếc bánh cho bà của họ.

### Thêm Máy tạo thạch cao Gobbledygook ...
Máy tạo thạch cao công ty
Thơ Gobbledygook
Trích dẫn phim Ipsim

Nó sẽ hoạt động như thế nào

Chúng tôi sẽ sử dụng Trường tùy chỉnh nâng cao (ACF) để tạo trường (meta bài đăng) mới được đính kèm với các đối tượng “Đăng”. Trường ACF này sẽ là loại "vùng văn bản", vì vậy nó có thể chứa nhiều dòng đánh dấu. Sau đó, chúng tôi sẽ tạo một shortcode để chúng tôi có thể chọn trường đánh dấu của bài đăng và hiển thị nguồn của nó hoặc chuyển đổi nó sang HTML.

Bắt đầu

Trước khi bắt đầu, hãy đảm bảo rằng bạn đang sử dụng một chủ đề con tùy chỉnh trên trang web WordPress của mình, để bạn có thể chỉnh sửa functions.php.

Trong chủ đề con tùy chỉnh của bạn, hãy tạo một tệp mới có tên wpt-markdown.php và tạo một thư mục có tên wpt-markdown . Vào thư mục wpt-markdown và tạo một tệp trống có tên wpt-markdown.css .

Sao chép và dán phần sau vào wpt-markdown.php , hoạt động như một trình giữ chỗ.

/**
 * WP Tutorials Markdown (wptmd)
 *
 * https://wp-tutorials.tech/add-functionality/convert-markdown-to-html-in-your-wordpress-projects/
 *
 */
if (!defined('WPINC')) {
   exit('Do NOT access this file directly.');
}
// Our code will go in here...
// ...
// ...

Tiếp theo, mở functions.php của theme con của bạn và thêm vài dòng sau vào đó.

/**
 * WP Tutorials QR Codes.
 */
require_once 'wpt-markdown.php';

Đó là mã giàn giáo cơ bản của chúng tôi được sắp xếp. Bây giờ hãy tải xuống phiên bản Parsedown mới nhất.

  • Truy cập Parsedown trên GitHub.
  • Đi tới Bản phát hành.
  • Tải xuống tệp zip phát hành hiện tại.
  • Giải nén tệp zip.
  • Sao chép Parsedown.php vào thư mục wpt-markdown .

Tạo Trường ACF

Đảm bảo rằng bạn đã cài đặt plugin “Trường tùy chỉnh nâng cao”. Trong khu vực Quản trị WP, hãy chuyển đến Các trường tùy chỉnh. Nếu bạn chưa có nhóm trường cho meta bài đăng của mình, hãy tạo một nhóm trường ngay bây giờ. Ở đây, chúng tôi đang sử dụng một nhóm trường được gọi là Trường đăng bổ sung - bạn có thể gọi nhóm trường của mình bất cứ thứ gì bạn muốn.

Thêm trường mới vào nhóm trường của bạn…

  • Nhãn: Bất cứ điều gì bạn muốn, ví dụ: “Nội dung đánh dấu”
  • Tên: markdown_content - chúng tôi sẽ đề cập đến điều này từ mã PHP của chúng tôi
  • Loại trường: “Vùng văn bản”
  • Hướng dẫn: Văn bản trợ giúp tùy chọn cho người tạo nội dung
Lưu nhóm trường của bạn, chỉnh sửa Bài đăng trên trang web của bạn và bạn sẽ thấy có một hộp meta mới, nơi bạn có thể nhập nội dung đánh dấu. Nó sẽ ở cuối trang khi bạn chỉnh sửa bài đăng của mình.

Bit PHP chính

Sao chép và dán phần sau vào tệp wpt-markdown.php mà bạn đã tạo trước đó - thay thế hoàn toàn mã giàn giáo đã có trong đó.
/**
 * WP Tutorials Markdown (wptmd)
 *
 * https://wp-tutorials.tech/add-functionality/convert-markdown-to-html-in-your-wordpress-projects/
 *
 */
if (!defined('WPINC')) {
   exit('Do NOT access this file directly.');
}
// This is the name of the custom post meta field, usually defined in ACF.
// If you giv eyour custom post meta field a different name, you'll 'need to
// change it here, too.
const WPTMD_DEFAULT_POST_META_KEY = 'markdown_content';
function wptmd_include_dependencies() {
   global $wptmd_have_deps_been_loaded;
   if (is_null($wptmd_have_deps_been_loaded)) {
      $base_dir = trailingslashit(dirname(__FILE__) . '/wpt-markdown');
      // Parsedown: https://github.com/erusev/parsedown
      // Only load the Parsedown.php file if there isn't already a class
      // called "Parsedown". The class might have been already provided by
      // another plugin.
      if (!class_exists('Parsedown')) {
         require_once $base_dir . 'Parsedown.php';
      }
      $base_url = get_stylesheet_directory_uri() . '/' . pathinfo(__FILE__, PATHINFO_FILENAME) . '/';
      $version = wp_get_theme()->get('Version');
      wp_enqueue_style('wptmd', $base_url . 'wpt-markdown.css', '', $version);
      $wptmd_have_deps_been_loaded = true;
   }
}
function wptmd_get_parser() {
   global $wptmd_parsedown;
   if (is_null($wptmd_parsedown)) {
      $wptmd_parsedown = new Parsedown();
      // You can make the parser more strict, if you're rendering untrusted
      // user input. Just uncomment this...
      // $wptmd_parsedown->setSafeMode(true);
   }
   return $wptmd_parsedown;
}
/**
 * Render the markdown as an HTML string.
 */
function wptmd_do_shortcode($atts) {
   $html = '';
   if (is_admin()) {
      // Don't do anything.
   } elseif (wp_doing_ajax()) {
      // Don't do anything.
   } else {
      // Enqueue our frontend assets.
      wptmd_include_dependencies();
      $args = shortcode_atts(
         array(
            'field_name' => WPTMD_DEFAULT_POST_META_KEY,
            'class' => '',
            'source' => false,
         ),
         $atts
      );
      $post_id = get_the_id();
      $show_source = filter_var($args['source'], FILTER_VALIDATE_BOOLEAN);
      $source = get_post_meta($post_id, $args['field_name'], true);
      $field_name = $args['field_name'];
      if (empty($field_name)) {
         $source = 'No custom field specified.';
      } elseif (empty($source)) {
         $source = sprintf('No markdown found in the %s custom field.', $field_name);
      } else {
         // OK.
      }
      $classes = array('wptmd');
      if (!empty($args['class'])) {
         $classes[] = $args['class'];
      }
      if ($show_source) {
         $classes[] = 'source';
         // Render the markdown source in a 
 element.
         $html .= sprintf(
            '
%s
', esc_attr(implode(' ', $classes)), $source ); } else { $classes[] = 'html'; $parser = wptmd_get_parser(); // Render the markdown source in a
element. $html .= sprintf( '
%s
', esc_attr(implode(' ', $classes)), $parser->text($source) ); } } return $html; } add_shortcode('wpt_markdown', 'wptmd_do_shortcode');
Mã bị phá vỡ khá rõ ràng.

Chúng tôi có hai chức năng hỗ trợ…

  • wptmd_include_dependencies()
  • wptmd_get_parser()

… Và chức năng chính của chúng tôi, hiển thị mã ngắn của chúng tôi:

  • wptmd_do_shortcode()
Lần đầu tiên wptmd_include_dependencies()được gọi, nó xếp hàng đợi tệp CSS frontend của chúng ta và nó yêu cầu (bao gồm) tệp Parsedown.php.

Phân tích logic chính

Các wptmd_do_shortcode()chức năng là khối mã chính của chúng tôi, và nó sẽ được thực sự dễ dàng để làm theo:
  • Kiểm tra xem chúng tôi đã OK để chạy (tức là chúng tôi không ở trong phần quản trị của WordPress)
  • Bao gồm / xếp hàng phụ thuộc
  • Phân tích cú pháp các tham số đầu vào của shortcode
  • Nhận id bài đăng hiện tại
  • Lấy nội dung của trường meta bài đăng của chúng tôi (markdown_content)
  • Nếu nó trống…
    • Đặt đầu ra HTML thành một thông báo chẩn đoán hữu ích
  • Xây dựng một mảng nhỏ các lớp CSS để thêm vào phần tử vùng chứa mà chúng tôi sắp kết xuất
  • Nếu chúng tôi đang hiển thị nguồn Markdown…
    • Đầu ra nguồn được bao bọc trong một phần tử <pre>, với các lớp của chúng tôi
  • khác…
    • Nhận / Tạo một phiên bản của trình phân tích cú pháp Parsedown
    • Gọi Parsedown->text( &source )
    • Bao bọc đầu ra trong một phần tử <div>, với các lớp của chúng tôi
  • Trả lại HTML trở lại WordPress

Các kiểu CSS cơ bản

Chúng tôi chỉ cần một số CSS đơn giản ở đây, để giữ mọi thứ gọn gàng trên giao diện người dùng. Dán phần sau vào wpt-markdown / wpt-markdown.css để bắt đầu.
/**
 * WP Tutorials Markdown frontend.
 */
.wptmd {
   background-color:  white;
   padding:  1rem;
   border-radius: 0.5rem;
   box-shadow: 0 0 1em #44444422;
}
.wptmd.source {
   font-family: "Lucida Console", Courier, monospace;
   white-space: pre-wrap;
}

Kết thúc & Triển khai

Đó là về nó. Chỉnh sửa bài đăng, thêm một số đánh dấu vào trường markdown_content và thêm mã ngắn vào nội dung của bạn. Dễ.

Mở rộng mã

  • Thay vì sử dụng mã ngắn, bạn có thể sửa đổi mã PHP để kết nối bộ lọc the_content của WordPress và tự động hiển thị nội dung đánh dấu trước (hoặc sau) tất cả các bài đăng của bạn.
  • Sử dụng bộ đệm ẩn đối tượng để lưu trữ HTML được hiển thị, vì vậy bạn không phải gọi Parsedown-> text () trên mỗi lần tải trang. Mặc dù vậy, bạn sẽ cần phải tìm một cách tạo khóa bộ đệm đối tượng thanh lịch.