מדריך איך להוסיף כפתור בעורך הוורדפרס שלך

 

וורדפרס משתמש בעורך ה TinyMCE כעורך WYSIWYG לפעמים יש צורך להוסיף לעורך כפתור למשל בפלאגין ניתן גם לשלב את העורך באתרים שאינם וורדפרס.

לעוד מידע על העורך והתקנתו אפשר ללחוץ כאן

נוסיף לעורך שיצבע את הטקסט באדום ונסביר בסוף

דבר ראשון צריך ליצור תקיה בתוך התקיה של הפלאגינים plugins ממש כמו פלאגין.

בתוך התקיה ניצור 2 קבצים

1.  ChangOnClick.php

2. index.js

בתוך index.js נדביק את הקוד הבא:

(function() {
    tinymce.create("tinymce.plugins.red_button_plugin", {

        //url argument holds the absolute url of our plugin directory
        init : function(ed, url) {

            //add new button    
            ed.addButton("red", {
                title : "Red color",
                cmd : "red_command",
                image : "https://cdn0.iconfinder.com/data/icons/super-mono-reflection/red/brush_red.png"
            });

            //button functionality.
            ed.addCommand("red_command", function() {
                var selected_text = ed.selection.getContent();
                var return_text = "<span style='color: red'>" + selected_text + "</span>";
                ed.execCommand("mceInsertContent", 0, return_text);
            });

        },

        createControl : function(n, cm) {
            return null;
        },

        getInfo : function() {
            return {
                longname : "Extra Buttons",
                author : "josef Arazi",
                version : "1"
            };
        }
    });

    tinymce.PluginManager.add("red_button_plugin", tinymce.plugins.red_button_plugin);
})();

 

בתוך ChangOnClick.php נדביק את הקוד הבא :

<?php
    /*
    Plugin Name: Chang On click
    Plugin URI: http://support.josnet.com
    Description: This plugin Chang item to another item in post on click
    Author: jos 
    Version: 1
    Author URI: http://support.josnet.com
    */


function enqueue_plugin_scripts($plugin_array)
{
    //enqueue TinyMCE plugin script with its ID.
    $plugin_array["red_button_plugin"] =  plugin_dir_url(__FILE__) . "index.js";
    return $plugin_array;
}

add_filter("mce_external_plugins", "enqueue_plugin_scripts");


function register_buttons_editor($buttons)
{
    //register buttons with their id.
    array_push($buttons, "red");
    return $buttons;
}

add_filter("mce_buttons", "register_buttons_editor");

    
?>

וזהו נוצר לנו הכפתור.

קצת הסברים:

בקובץ index.js אנחנו קובעים למעשה את רוב הדברים

בחלק הזה אנחנו מאתחלים את הכפתור קובעים את התמונה כותרת שתוצג ומין סוג של id שנוכל לפנות אל הכפתור שיבצע פעולה

ed.addButton("red", {
    title : "Red color",
    cmd : "red_command",
    image : "https://cdn0.iconfinder.com/data/icons/super-mono-reflection/red/brush_red.png"
});

 

החלק הבא אחראי על הפעולה של הכפתור במקרה הזה אנחנו עוטפים את הכפתור ב span שמגדיר צבע אדום.

ed.addCommand("red_command", function() {
    var selected_text = ed.selection.getContent();
    var return_text = "<span style='color: red'>" + selected_text + "</span>";
    ed.execCommand("mceInsertContent", 0, return_text);
});

 

וזהו כל השאר זה פחות או יותר הגדרות והכללות ויצירת הפלאגין.