[DevOps] WP 플러그인/테마

Title *

Options

Secret

Author *

Password *

Content

<hr style="border-top: dotted 1px;" />Parent Title : Re(0): 플러그인 코드 작성방법 (AI) Author : 박창희(한국) Created Date : 24-10-11 17:31 / Last Updated Date : 24-10-11 18:55 <hr style="border-top: dotted 1px;" />2024-10-11(금) 플러그인에서 Javascript / PHP 간에 기본 데이터 교환 흐름도

1) wp-content/plugins/my-tinymce-button-plugin.php로 부터 작성
2) wp-content/plugins/js/my-tinymce-button-script.js에 javascript 코드는 작성하고
서버 쪽 값이 필요할 경우, ajax를 통해서 함수 또는 파일에 값 작성
3) wp-content/themes/function.php에 해당함수를 넣거나, theme 별도 파일에&nbsp;
만들어서 new_function.php 파일을 만들어서 function을 생성한 후&nbsp;
응답결과 가져오기.&nbsp;

[[전체 모식도 예시 : 플러그인 이름 - my-tinymce-button-plugin.php 라고 가정시]]
Source:http://fdcs.delphizon.com/wp-content/uploads/2024/10/플러그인_테마_데이터구성도.xlsx
<img class="alignnone wp-image-3112 size-large" src="http://fdcs.delphizon.com/wp-content/uploads/2024/10/image-6-1024x811.png" alt="" width="1024" height="811" />

&nbsp;

<hr />

<div class="mwai-reply mwai-user">
<div class="mwai-name-text">Question : wordpress make plugin add tinymce button and call function.php function and response</div>
</div>
<div>

Sure, I'd be happy to help you with that! To create a WordPress plugin that adds a TinyMCE button and calls a function in your&nbsp;<code>functions.php</code>&nbsp;file, you'll need to follow these steps:
<ol start="1">
 	<li>Create a new folder in the&nbsp;<code>wp-content/plugins/</code>&nbsp;directory of your WordPress installation. Name it something relevant to your plugin, for example,&nbsp;<code>my-tinymce-button-plugin</code>.</li>
 	<li>Inside the plugin folder, create a PHP file (e.g.,&nbsp;<code>my-tinymce-button-plugin.php</code>) and add the necessary plugin header information at the top of the file:</li>
</ol>
<pre><code class="lang-php hljs language-php">&lt;?php 
/*
Plugin Name: My TinyMCE Button Plugin 
Description: Adds a custom TinyMCE button to the editor.
Version: 1.0 
Author: Your Name 
*/

// Plugin code will go here</code></pre>
<ol start="3">
 	<li>Add the code to enqueue your JavaScript file with the TinyMCE button functionality. You can do this by hooking into the&nbsp;<code>admin_enqueue_scripts</code>&nbsp;action in WordPress:</li>
</ol>
<pre><code class="lang-php hljs language-php">function my_enqueue_tinymce_button_script() {
 wp_enqueue_script('my-tinymce-button-script', plugin_dir_url(__FILE__) . 'js/my-tinymce-button-script.js', array('jquery'), null, true);
}
add_action('admin_enqueue_scripts', 'my_enqueue_tinymce_button_script');</code></pre>
<ol start="4">
 	<li>Now create the JavaScript file (<code>my-tinymce-button-script.js</code>) inside a&nbsp;<code>js</code>&nbsp;folder in your plugin directory. This file should contain the code to add your custom TinyMCE button:</li>
</ol>
<pre><code class="lang-javascript hljs language-javascript">(function() {
 tinymce.PluginManager.add('my_tinymce_button', function(editor, url) {
 editor.addButton('my_tinymce_button', {
 text: 'My Button',
 icon: false,
 onclick: function() {
 // Call the function in functions.php 
 // You can use ajax to send a request to your server and get the response 
 jQuery.post(ajaxurl, {
 action: 'my_custom_tinymce_button_action'
 }, function(response) {
 alert('Response: ' + response);
 });
 }
 });
 });
})();</code></pre>
<ol start="5">
 	<li>In your&nbsp;<code>functions.php</code>&nbsp;file, create the function that will be called when the TinyMCE button is clicked:</li>
</ol>
<pre><code class="lang-php hljs language-php">function my_custom_tinymce_button_action() {
 // Your custom functionality here 
 echo 'Response from the custom function!';
 wp_die();
}
add_action('wp_ajax_my_custom_tinymce_button_action', 'my_custom_tinymce_button_action');</code><code class="lang-javascript hljs language-javascript"></code></pre>
That's it! You now have a WordPress plugin that adds a custom TinyMCE button and calls a function in your&nbsp;<code>functions.php</code> file with a response. Let me know if you need further assistance or clarification!

</div>

Parent Title : 플러그인 코드 작성방법 (AI)
Author : changhee1220
Created Date : 23-08-26 22:31 / Last Updated Date : 23-08-26 22:31

&nbsp;

Photos

KBoard Add Media

Thumbnail

WP Search

Back