Thêm button bên cạnh add media để thêm shortcode vào editor

20/01/2022 04:14 516

Thêm button bên cạnh add media để thêm shortcode vào editor, vâng khi thêm xong anh chị sẽ thêm được button như hình bên dưới

Ngay sau đây là cách làm:

Table of Contents

1. Video hướng dẫn

2. Code

Lưu ý code dùng trong class nha quý anh chị, anh chị copy về và xem video để biết cách chỉnh sửa nhé

add_action('media_buttons',array($this,'media_button'));
add_action('admin_footer',array($this,'media_button_popup'));
add_action('admin_footer',array($this,'add_shortcode_to_editor'));
function media_button(){
		_e("
		<a href=\"#TB_inline?width=480&inlineId=editorpreviewhtml_shortcode_popup&width=640&height=513\" class=\"button thickbox\" id=\"editorpreviewhtml_shortcode_popup_button\" title=\"Preview Html\">Preview Html</a>");
	}
//Generate inline content for the popup window when the "my shortcode" button is clicked
function media_button_popup(){
	$args = array( 
			'post_type' => 'editorhtml',
			'posts_per_page' => -1,
			'post_status' => 'publish',
			'orderby' => 'ID',
    		'order'   => 'DESC'
		);
	$posts=get_posts($args);	
	?>
  <div id="editorpreviewhtml_shortcode_popup" style="display:none;">
    <!--".wrap" class div is needed to make thickbox content look good-->
    <div class="wrap">
      <div>
        <h2>Insert short code preview html</h2>
        <div class="editorpreviewhtml_shortcode_add">
        <select id="editorpreviewhtml_shortcode">
        	<?php if($posts): foreach($posts as $post): ?>
            <option value='[html_preview id="<?php echo $post->ID; ?>"]'><?php echo $post->post_title; ?></option>
            <?php endforeach; endif; ?>
        </select>
          <button class="button-primary" id="editorpreviewhtml_insert_trigger">Insert short code</button>
        </div>
      </div>
    </div>
  </div>
<?php
}
//javascript code needed to make shortcode appear in TinyMCE edtor
function add_shortcode_to_editor(){?>
<script>
jQuery('#editorpreviewhtml_insert_trigger').on('click',function(){
  var shortcode = jQuery('#editorpreviewhtml_shortcode').val();
 // Send the shortcode to the editor
	window.send_to_editor( shortcode);
  //close the thickbox after adding shortcode to editor
  self.parent.tb_remove();
});
</script>
<?php
}

add_action('media_buttons',array($this,'media_button'));

add_action('admin_footer',array($this,'media_button_popup'));

add_action('admin_footer',array($this,'add_shortcode_to_editor'));

function media_button(){

_e("

<a href=\"#TB_inline?width=480&inlineId=editorpreviewhtml_shortcode_popup&width=640&height=513\" class=\"button thickbox\" id=\"editorpreviewhtml_shortcode_popup_button\" title=\"Preview Html\">Preview Html</a>");

}

//Generate inline content for the popup window when the "my shortcode" button is clicked

function media_button_popup(){

$args = array(

'post_type' => 'editorhtml',

'posts_per_page' => -1,

'post_status' => 'publish',

'orderby' => 'ID',

'order' => 'DESC'

);

$posts=get_posts($args);

<div>

<h2>Insert short code preview html</h2>

<?php if($posts): foreach($posts as $post): ?>

<option value='[html_preview id="<?php echo $post->ID; ?>"]'><?php echo $post->post_title; ?></option>

<?php endforeach; endif; ?>

</select>

<button class="button-primary" id="editorpreviewhtml_insert_trigger">Insert short code</button>

</div>

<?php

}

//javascript code needed to make shortcode appear in TinyMCE edtor

function add_shortcode_to_editor(){?>

jQuery('#editorpreviewhtml_insert_trigger').on('click',function(){

var shortcode = jQuery('#editorpreviewhtml_shortcode').val();

// Send the shortcode to the editor

window.send_to_editor( shortcode);

//close the thickbox after adding shortcode to editor

self.parent.tb_remove();

});

</script>

<?php

}

Các bài viết khác có thể hữu ích với bạn

5/5 (1 Đánh giá)

Gửi Phản Hồi

0 Bình Luận

có thể bạn cần xem:

Disable animation trong revolution slider [ 20/09/2022 08:07 ]
Cách tạo button printer một element bằng javascript [ 19/09/2022 12:56 ]
Code sử dụng vue js, quasar, axios, sweetalert2 trong tác vụ quản lý danh sách [ 19/07/2022 10:26 ]
Hướng dẫn lấy botToken và chatId của bot telegram [ 13/06/2022 13:54 ]
Tạo thanh bar bottom mobile trong theme wordpress [ 07/06/2022 10:00 ]
Fix acf not save iframe [ 23/04/2022 07:44 ]
Rewrite lại url cho page template wordpress [ 21/04/2022 02:11 ]
Tối ưu hóa cron trong wordpress để website chạy nhanh hơn [ 09/04/2022 03:30 ]
Function tạo rating star sử dụng dashicon từ wordpress [ 03/04/2022 03:02 ]
Thêm editor cho mô tả category wordpress (add editor description for category wordpress) [ 01/04/2022 02:02 ]

Thêm button bên cạnh add media để thêm shortcode vào editor

1. Video hướng dẫn

2. Code

có thể bạn cần xem:

Đăng ký nhận bài viết mới

Hướng dẫn thiết kế theme

Thiết kế theme wordpress phần 8

Thiết kế theme wordpress phần 7

Thiết kế theme wordpress phần 6

Thiết kế theme wordpress phần 5

Thiết kế theme wordpress-phần 4

Các functions thường dùng

Function xử lý upload to media wordpress

Function get ip address

Thay thế file_get_contents

Code tích hợp acf vào theme và plugin

Một số function thường dùng khi làm theme wordpress (some functions popular for work do theme worpdress)