README

Tinymce 和 Quicktag 按钮用于输出短代码。与 CMB2 兼容。

查看 "Cool Shortcode" 示例插件，该插件演示了如何使用 WDS-Shortcodes、CMB2 和此库。

待办事项

测试所有 CMB2 字段类型

示例用法

<?php
// Include the library
require_once( 'Shortcode_Button/shortcode-button.php' );

function init_my_shortcode_button() {

	// the button slug should be your shortcodes name.
	// The same value you would use in `add_shortcode`
	// Only numbers, letters and underscores are allowed.
	$button_slug = 'shortcode_name';

	// Set up the button data that will be passed to the javascript files
	$js_button_data = array(
		// Actual quicktag button text (on the text edit tab)
		'qt_button_text' => __( 'Shortcode Button', 'shortcode-button' ),
		// Tinymce button hover tooltip (on the html edit tab)
		'button_tooltip' => __( 'Shortcode Button', 'shortcode-button' ),
		// Tinymce button icon. Use a dashicon class or a 20x20 image url
		'icon'           => 'dashicons-admin-appearance',

		// Optional parameters
		'author'         => 'Justin Sternberg',
		'authorurl'      => 'http://dsgnwrks.pro',
		'infourl'        => 'https://github.com/jtsternberg/Shortcode_Button',
		'version'        => '1.0.0',
		'include_close'  => true, // Will wrap your selection in the shortcode
		'mceView'        => true, // Live preview of shortcode in editor. YMMV.

		// Use your own textdomain
		'l10ncancel'     => __( 'Cancel', 'shortcode-button' ),
		'l10ninsert'     => __( 'Insert Shortcode', 'shortcode-button' ),

		// Optional modal settings override
		// 'dialogClass' => 'wp-dialog',
		// 'modalHeight' => 'auto',
		// 'width'       => 500,
	);

	// Optional additional parameters
	$additional_args = array(
		// Can be a callback or metabox config array
		'cmb_metabox_config'   => 'shortcode_button_cmb_config',
		// Set the conditions of the shortcode buttons
		'conditional_callback' => 'shortcode_button_only_pages',

		// Use if you are not using CMB2 to generate the form fields
		// 'form_display_callback' => '',
	);

	$button = new Shortcode_Button( $button_slug, $js_button_data, $additional_args );
}
// This hook, with this priority ensures the Shortcode_Button library is loaded.
add_action( 'shortcode_button_load', 'init_my_shortcode_button', ( SHORTCODE_BUTTONS_LOADED + 1 ) );

/**
 * Return CMB2 config array
 *
 * @param  array  $button_data Array of button data
 *
 * @return array               CMB2 config array
 */
function shortcode_button_cmb_config( $button_data ) {

	return array(
		'id'     => 'shortcode_'. $button_data['slug'],
		'fields' => array(
			array(
				'name'    => __( 'Test Text Small', 'shortcode-button' ),
				'desc'    => __( 'field description (optional)', 'shortcode-button' ),
				'default' => __( 'default shortcode param value', 'shortcode-button' ),
				'id'      => 'shortcode_param',
				'type'    => 'text_small',
			),
		),
		// keep this w/ a key of 'options-page' and use the button slug as the value
		'show_on' => array( 'key' => 'options-page', 'value' => $button_data['slug'] ),
	);

}

/**
 * Callback dictates that shortcode button will only display if we're on a 'page' edit screen
 *
 * @return bool Expects a boolean value
 */
function shortcode_button_only_pages() {
	if ( ! is_admin() || ! function_exists( 'get_current_screen' ) ) {
		return false;
	}

	$current_screen = get_current_screen();

	if ( ! isset( $current_screen->parent_base ) || $current_screen->parent_base != 'edit' ) {
		return false;
	}

	if ( ! isset( $current_screen->post_type ) || $current_screen->post_type != 'page' ) {
		return false;
	}

	// Ok, guess we're on a 'page' edit screen
	return true;
}

屏幕截图

按钮悬停

点击按钮并打开模态窗口

提交表单插入带有参数的短代码

文本选项卡快速标签按钮（操作相同）

变更日志

1.0.7
- 引入 Shortcode_Button_MCE 对象以正确处理/解析ajax的MCE视图，并将该对象作为附加属性添加到 'shortcode_button_parse_mce_view_before_send' 和 "shortcode_button_parse_mce_view_before_send_{$button_slug}" 过滤器。 (#17)
- 使 text_medium 和 text_small CMB2 字段正常工作。修复 #20。
- 更一致的复选框字段样式。归功于 @JiveDig，#19（以及 #18）。
1.0.6
- 移除短代码模态wysiwyg编辑器中的自定义递归QTags按钮。归功于 (@nonsensecreativity)[https://github.com/nonsensecreativity]，(#14)[#14]。
1.0.5
- 修复编辑带有自闭合标签和内容的短代码时内容显示错误。
- 修复编辑短代码时单选按钮 'checked' 值的显示。
- 修复编辑短代码时多选复选框 'selected' 值的显示。
- 修复编辑短代码时选择框 'selected' 值的显示。
1.0.4
- 在使用 MCE 视图和编辑短代码时，请确保“文件”字段类型输入已被填充。
- 编辑包含内容的片段时，规范化内容以解决 tinymce 自动段落问题。
1.0.3
- 手动隐藏模态框以确保在 CSS 加载前已隐藏。防止内容闪烁。
1.0.2
- 修复损坏的加载器。需要钩入 WordPress 钩子，并使用第一个可用的 ('muplugins_loaded'、'plugins_loaded'、'after_setup_theme') 来触发包含动作。
1.0.1
- 使用修改后的 JSON 字符串（需要在您的短代码中转换）处理属性值的可重复组（或任何数组值）。
1.0.0
- 添加冲突解决加载器（如 CMB2），以确保只加载 Shortcode_Button 的一个版本，并且始终加载最新版本。
- 使用 WordPress 核心代码 wp.shortcode() JavaScript API。
- 如果设置，则更好地处理使用 CMB2 默认值填充编辑模态框。
- 当 'mceView' 启用时，大量修复
  - 在编辑模态框中添加 wysiwyg 编辑器以处理短代码的包装（'include_close'）
  - 更好地处理使用正在编辑的短代码的内容填充编辑模态框。
  - MCE 视图中更好的短代码渲染。效果可能会有所不同。
0.2.3
- 修复模态框打开时的焦点问题。（#9）
- 修复模态框打开时的高度/滚动问题。
0.2.2
- 在关闭模态框时从 CMB2 file 字段类型中删除隐藏的图像 ID。
0.2.1
- 启用 tinymce 视图，尽管每个短代码的实现都需要手动操作。可以使用 "shortcode_button_parse_mce_view_before_send" 和 "shortcode_button_parse_mce_view_before_send_$slug" 来修改在返回到视图之前显示的短代码。
- 添加了 JavaScript 事件，'shortcode_button:jquery_init_complete'、'shortcode_button:buttons_init_complete'、'shortcode_button:populate' 和 'shortcode_button:button_init_complete_'+ buttonSlug。
0.2.0
- 删除了导致一些难以捉摸的错误的 jQuery-UI 对话框依赖项。
- 启用非模态按钮，通过 mce 按钮简单插入短代码。
- 将类名重命名为更合理的 Shortcode_Button。
- 添加了 JavaScript 事件，'shortcode_button:clear'、'shortcode_button:open' 和 'shortcode_button:close'。
0.1.2
- 为自闭合短代码添加 'include_close' 参数。这也允许用短代码包装选择的内容。
- 添加了一种方法，使 "{$button_slug}_shortcode_fields" 过滤器可以将要添加到短代码内部的内容传递出去。
- 添加 shortcode_button_js_url 过滤器，以防 JS 资产未正确排队。
- 在较早的优先级下将模态框添加到页脚，以确保脚本可以正确排队。
- 添加了注册不打开模态框的短代码按钮的能力（没有字段或以编程方式添加）
- 添加了 JavaScript 事件，'shortcode_button:click' 和 'shortcode_button:insert'。
- 更好地处理嵌套字段键（例如）。
- 添加了新钩子，"shortcode_button_before_modal_{$button_slug}"，在输出模态框标记之前添加（用于条件排队等）。
0.1.1
- 为对话框模态框的类、高度和宽度添加覆盖选项。
- CMB2 字段更好的样式。
0.1.0
- 你好，世界！

jtsternberg / shortcode-button

维护者

详情

README

待办事项

示例用法

屏幕截图

变更日志