คุณสามารถเพิ่มปลั๊กอินที่กำหนดเองไปยัง WordPress และตัวแก้ไขภาพ TinyMCE แหล่งที่มาของการติดตามเป็นตัวอย่างที่ใช้งานได้ง่ายและเพิ่มสตริงก่อนและหลังรหัสย่อทั้งหมด
การใช้
รหัสย่อจะค้นหาผ่าน regex ที่เกี่ยวข้องหากคุณต้องการรหัสย่อที่แตกต่างกันและเครื่องหมายที่แตกต่างกัน สคริปต์เพิ่มเนื้อหาที่กำหนดเองไปยังรหัสย่อที่นี่<b>FB-TESTก่อนและหลังแท็กปิดและเนื้อหา นอกจากนี้คุณยังสามารถใช้มาร์กอัป css คลาสเพื่อสร้างทัศนวิสัย PostProcessที่สำคัญก็คือว่าคุณลบเนื้อหานี้ในการบันทึกการโพสต์ไล่ออกในสคริปต์บน restoreShortcodesนี่เรียกใช้สคริปต์และลบเนื้อหาที่กำหนดเองผ่านฟังก์ชั่น
แต่ปัจจุบันนี้ง่ายอาจไม่ถูกต้องสำหรับแต่ละความต้องการ บางทีคุณควรเก็บรหัสย่อไว้ใน init และคืนค่าด้วยตัวแปรที่เก็บไว้นี้
ภาพหน้าจอ
ดูภาพหน้าจอเป็นตัวอย่างเพื่อทำความเข้าใจกับผลลัพธ์
แหล่ง
ซอร์สต้องการโครงสร้างไดเร็กทอรีนี้เพื่อใช้:
-- shortcode-replace
|--php file
|--assets
|-- js
|-- js file
ในตอนแรกไฟล์ php ขนาดเล็กซึ่งรวมถึงซอร์สเป็นปลั๊กอินในสภาพแวดล้อม wp shortcode-replaceทิ้งไว้ในไดเรกทอรีหลักของปลั๊กอิน
<?php # -*- coding: utf-8 -*-
/**
* Plugin Name: Shortcode Replace
* Plugin URI:
* Description:
* Version: 0.0.1
* Text Domain:
* Domain Path: /languages
* License: MIT
* License URI:
*/
namespace FbShortcodeReplace;
if ( ! function_exists( 'add_action' ) ) {
exit();
}
if ( ! is_admin() ) {
return;
}
add_action( 'admin_enqueue_scripts', __NAMESPACE__ . '\initialize' );
function initialize( $page ) {
if ( 'post.php' === $page ) {
add_filter( 'mce_external_plugins', __NAMESPACE__ . '\add_tinymce_plugin' );
}
}
function add_tinymce_plugin( $plugins ) {
if ( ! is_array( $plugins ) ) {
$plugins = array();
}
$suffix = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '.dev' : '';
$url = plugins_url( '/assets/js/fb_shortcode_replace.js', __FILE__ );
$plugins = array_merge( $plugins, array( 'fb_shortcode_replace' => $url ) );
return $plugins;
}
ไฟล์ php นี้โหลดจาวาสคริปต์เป็นปลั๊กอินในโปรแกรมแก้ไขภาพ ปลั๊กอินจะโหลดเฉพาะในหน้าผู้ดูแลระบบหน้าเว็บเฉพาะกับสตริงpost.php- if ( 'post.php' === $page ) {ดู
แหล่งที่มาต่อไปนี้เป็นไฟล์ javascript, fb_shortcode_replace.jsชื่อ ทิ้งไว้ในไดเรกทอรีassets/js/ภายในไดเรกทอรีปลั๊กอินของปลั๊กอินนี้
tinymce.PluginManager.add( 'fb_shortcode_replace', function( editor ) {
var shortcode = /\[.+\]/g;
var additional_before = '<b>FB-TEST';
var additional_after = 'FB-TEST</b>';
function ifShortcode( content ) {
return content.search( /\[.+\]/ ) !== -1;
}
function replaceShortcodes( content ) {
return content.replace( shortcode, function( match ) {
return html( match );
} );
}
function restoreShortcodes( content ) {
content = content.replace( additional_before, '' );
content = content.replace( additional_after, '' );
return content;
}
function html( data ) {
console.log( data );
return additional_before + data + additional_after;
}
editor.on( 'BeforeSetContent', function( event ) {
// No shortcodes in content, return.
if ( ! ifShortcode( event.content ) ) {
return;
}
event.content = replaceShortcodes( event.content );
} );
editor.on( 'PostProcess', function( event ) {
if ( event.get ) {
event.content = restoreShortcodes( event.content );
}
} );
} );
เป็นประโยชน์
คำใบ้เพิ่มเติม
ปลั๊กอินRaphแปลงโค้ดย่อใน html เพื่อดูและทำให้เข้าใจผลลัพธ์ได้ง่ายขึ้น อาจเป็นประโยชน์ในบริบทนี้
<code>หรือ<pre>แท็กจะเป็น simpiler แน่นอน