فراخوانی کد HTML داخل متن (به وسیله ادیتور وردپرس)

Siaavash · 7 خرداد

برای یک سایت داخل مطلب های ارسالی متن به صورت فارسی و انگلیسی همزمان وجود داره و برای این قسمت یک باکس در نظر گرفته شده که در سمت چپ متن یا کلمه انگلیسی و در سمت راست متن یا کلمه فارسی قرار بگیره. (تصویر پیوست).

برای اینکار به صورت زیر عمل شده:

<div class="sample">
  <span class="en">English</span>
  <span class="fa">فارسی</span>
<div>

که CSS این قسمت هم به شکل زیر هست:

.sample {
    width: 93%;
    font-size: 1em;
    margin: 10px auto;
    padding: 5px  10px;
    border: none;
    border-radius: 2px;
    clear: both;
}

span.de{
  float: left
}
.de {
  direction: ltr;
}
.fa {
  direction: rtl;
}

وقتی کاربر بخواد پست بنویسه درگیر نوشتن کد های html می شه.

حالا سوال اینه که آیا راهی وجود داره برای کاربری که به کدهای HTML آشنایی نداره این پروسه رو به صورتی تعریف کرد که درگیر کد های HTML نشه؟

اولین راه حلی که به ذهنم رسید تعریف این کد ها داخل ادیتور وردپرس هست، که کاربر معمولی (نا آشنا با HTML) با استفاده از اون و زدن دکمه (برای مثال) Sample-Box، باکس (کد div به همراه کلاس مربوطه) رو داخل متن قرار بده و بعد از نوشتن متن انگلیسی و فارسی داخل باکس با استفاده از دکمه های En و Fa کد span به همراه کلاس های مربوطه رو به هر کدوم اختصاص بده (شبیه به کاری که در حال حاضر برای Bold و ... در نوشته و یا انتخاب H از طریق Drop-Box تیترها انجام می شه)

آیا راه حل دیگه ای غیر از این وجود داره؟

در صورتی که بهترین راه حل همین راه حل بالاست، به چه طریق می شه این کار رو عملی کرد؟

Mirrajabi · 7 خرداد

می تونید از پلاگین tinymce استفاده کنید.

یک دکمه اضافه کنید ک با کلیک روش drop box باز میشه ک می تونید مقادیر انگلیسی و فارسی وارد کنید.دیگه نیاز نیست کاربر با html آشنایی داشته باشن.

Siaavash · 7 خرداد

در 16 دقیقه قبل، Mirrajabi گفته است :

می تونید از پلاگین tinymce استفاده کنید.

یک دکمه اضافه کنید ک با کلیک روش drop box باز میشه ک می تونید مقادیر انگلیسی و فارسی وارد کنید.دیگه نیاز نیست کاربر با html آشنایی داشته باشن.

دکمه رو چطور به tinymce اضافه کنم؟

چطور می تونم این دکمه (ها) رو به ادیتور فعلی وردپرس اضافه کنم؟

Siaavash · 7 خرداد

در 6 ساعت قبل، Siaavash گفته است :

دکمه رو چطور به tinymce اضافه کنم؟

چطور می تونم این دکمه (ها) رو به ادیتور فعلی وردپرس اضافه کنم؟

روش اضافه کردن دکمه به ادیتور رو پیدا کردم. به صورت زیر عمل کردم:

یک فایل JS با محتویات زیر:

(function() {
    tinymce.PluginManager.add( 'span_class', function( editor, url ) {
        // Add Button to Visual Editor Toolbar
        editor.addButton('span_class', {
            title: 'Insert SPAN Class',
            cmd: 'span_class',
            icon: 'icon dashicons-image-flip-horizontal',
        });
 
        // Add Command when Button Clicked
        editor.addCommand('span_class', function() {
            // Check we have selected some text selected
            var text = editor.selection.getContent({
                'format': 'html'
            });
            if ( text.length === 0 ) {
                alert( 'Please select some text.' );
                return;
            }

            // Ask the user to enter a CSS class
            var result = prompt('Enter the SPAN class');
            if ( !result ) {
                // User cancelled - exit
                return;
            }
            if (result.length === 0) {
                // User didn't enter anything - exit
                return;
            }

            // Insert selected text back into editor, wrapping it in an anchor tag
            editor.execCommand('mceReplaceContent', false, '<span class="' + result + '">' + text + '</span>');
        });

        // Enable/disable the button on the node change event
        editor.onNodeChange.add(function( editor ) {
            // Get selected text, and assume we'll disable our button
            var selection = editor.selection.getContent();
            var disable = true;

            // If we have some text selected, don't disable the button
            if ( selection ) {
                disable = false;
            }

            // Define whether our button should be enabled or disabled
            editor.controlManager.setDisabled( 'span_class', disable );
        });
    });
})();

و یک فایل PHP با محتویات زیر:

<?php
/**
 * Plugin Name: TinyMCE Custom Class Span
 * Plugin URI: http://test.com
 * Version: 1.0
 * Author: Author
 * Author URI: http://test.com
 * Description: TinyMCE Plugin to wrap selected text in a custom CSS class, within the Visual Editor
 * License: GPL2
 */
 
class TinyMCE_Span_Class {
 
    /**
    * Constructor. Called when the plugin is initialised.
    */
    function __construct() {
 
        if ( is_admin() ) {
            add_action( 'init', array( &$this, 'setup_tinymce_plugin' ) );
            add_action( 'admin_enqueue_scripts', array( &$this, 'admin_scripts_css' ) );
            add_action( 'admin_print_footer_scripts', array( &$this, 'admin_footer_scripts' ) );
        }

    }

    /**
    * Check if the current user can edit Posts or Pages, and is using the Visual Editor
    * If so, add some filters so we can register our plugin
    */
    function setup_tinymce_plugin() {
     
        // Check if the logged in WordPress User can edit Posts or Pages
        // If not, don't register our TinyMCE plugin
        if ( ! current_user_can( 'edit_posts' ) && ! current_user_can( 'edit_pages' ) ) {
            return;
        }
     
        // Check if the logged in WordPress User has the Visual Editor enabled
        // If not, don't register our TinyMCE plugin
        if ( get_user_option( 'rich_editing' ) !== 'true' ) {
            return;
        }
     
        // Setup some filters
        add_filter( 'mce_external_plugins', array( &$this, 'add_tinymce_plugin' ) );
        add_filter( 'mce_buttons', array( &$this, 'add_tinymce_toolbar_button' ) );
     
    }

    /**
     * Adds a TinyMCE plugin compatible JS file to the TinyMCE / Visual Editor instance
     *
     * @param array $plugin_array Array of registered TinyMCE Plugins
     * @return array Modified array of registered TinyMCE Plugins
     */
    function add_tinymce_plugin( $plugin_array ) {
     
        $plugin_array['span_class'] = plugin_dir_url( __FILE__ ) . 'tinymce-custom-class.js';
        return $plugin_array;
     
    }

    /**
     * Adds a button to the TinyMCE / Visual Editor which the user can click
     * to insert a custom CSS class.
     *
     * @param array $buttons Array of registered TinyMCE Buttons
     * @return array Modified array of registered TinyMCE Buttons
     */
    function add_tinymce_toolbar_button( $buttons ) {
     
        array_push( $buttons, 'span_class' );
        return $buttons;
     
    }

    /**
    * Enqueues CSS for TinyMCE Dashicons
    */
    function admin_scripts_css() {

        wp_enqueue_style( 'tinymce-custom-class', plugins_url( 'tinymce-custom-class.css', __FILE__ ) );

    }

/**
* Adds the Custom Class button to the Quicktags (Text) toolbar of the content editor
*/
function admin_footer_scripts() {

    // Check the Quicktags script is in use
    if ( ! wp_script_is( 'quicktags' ) ) {
        return;
    }
    ?>
    <script type="text/javascript">
        QTags.addButton( 'span_class', 'Insert Custom Class', insert_span_class );
        function insert_span_class() {
            // Ask the user to enter a CSS class
            var result = prompt('Enter the SPAN class');
            if ( !result ) {
                // User cancelled - exit
                return;
            }
            if (result.length === 0) {
                // User didn't enter anything - exit
                return;
            }

            // Insert
            QTags.insertContent('<span class="' + result +'"></span>');
        }
    </script>
    <?php

}
 
}
 
$tinymce_span_class = new TinyMCE_Span_Class;

که در اصل یک پلاگین هستش!

حالا چند تا مشکل دارم!

1- من می خوام یک دکمه برای اضافه کردن div استفاده کنم و یکی هم برای اضافه کردن span. چطور می تونم این کار رو داخل همین فایل انجام بدم؟

2- با این پلاگین بعد از انتخاب متن مورد نظر و زدن دکمه، یه باکس باز می شه که کلاس مربوطه رو وارد می کنی و متن داخل span با کلاسی که داخل باکس وارد شده قرار می گیره. حالا می خوام به جای باز شدن اون باکس، برای هر کلاس یک دکمه تعریف کنم که با زدن دکمه کلاس مربوطه به متن مورد نظر همراه با تگ span اضافه بشه. برای اینکار باید چطور عمل کنم؟

Siaavash · 8 خرداد

در 19 ساعت قبل، Siaavash گفته است :

روش اضافه کردن دکمه به ادیتور رو پیدا کردم. به صورت زیر عمل کردم:

یک فایل JS با محتویات زیر:


(function() {
    tinymce.PluginManager.add( 'span_class', function( editor, url ) {
        // Add Button to Visual Editor Toolbar
        editor.addButton('span_class', {
            title: 'Insert SPAN Class',
            cmd: 'span_class',
            icon: 'icon dashicons-image-flip-horizontal',
        });
 
        // Add Command when Button Clicked
        editor.addCommand('span_class', function() {
            // Check we have selected some text selected
            var text = editor.selection.getContent({
                'format': 'html'
            });
            if ( text.length === 0 ) {
                alert( 'Please select some text.' );
                return;
            }

            // Ask the user to enter a CSS class
            var result = prompt('Enter the SPAN class');
            if ( !result ) {
                // User cancelled - exit
                return;
            }
            if (result.length === 0) {
                // User didn't enter anything - exit
                return;
            }

            // Insert selected text back into editor, wrapping it in an anchor tag
            editor.execCommand('mceReplaceContent', false, '<span class="' + result + '">' + text + '</span>');
        });

        // Enable/disable the button on the node change event
        editor.onNodeChange.add(function( editor ) {
            // Get selected text, and assume we'll disable our button
            var selection = editor.selection.getContent();
            var disable = true;

            // If we have some text selected, don't disable the button
            if ( selection ) {
                disable = false;
            }

            // Define whether our button should be enabled or disabled
            editor.controlManager.setDisabled( 'span_class', disable );
        });
    });
})();

و یک فایل PHP با محتویات زیر:


<?php
/**
 * Plugin Name: TinyMCE Custom Class Span
 * Plugin URI: http://test.com
 * Version: 1.0
 * Author: Author
 * Author URI: http://test.com
 * Description: TinyMCE Plugin to wrap selected text in a custom CSS class, within the Visual Editor
 * License: GPL2
 */
 
class TinyMCE_Span_Class {
 
    /**
    * Constructor. Called when the plugin is initialised.
    */
    function __construct() {
 
        if ( is_admin() ) {
            add_action( 'init', array( &$this, 'setup_tinymce_plugin' ) );
            add_action( 'admin_enqueue_scripts', array( &$this, 'admin_scripts_css' ) );
            add_action( 'admin_print_footer_scripts', array( &$this, 'admin_footer_scripts' ) );
        }

    }

    /**
    * Check if the current user can edit Posts or Pages, and is using the Visual Editor
    * If so, add some filters so we can register our plugin
    */
    function setup_tinymce_plugin() {
     
        // Check if the logged in WordPress User can edit Posts or Pages
        // If not, don't register our TinyMCE plugin
        if ( ! current_user_can( 'edit_posts' ) && ! current_user_can( 'edit_pages' ) ) {
            return;
        }
     
        // Check if the logged in WordPress User has the Visual Editor enabled
        // If not, don't register our TinyMCE plugin
        if ( get_user_option( 'rich_editing' ) !== 'true' ) {
            return;
        }
     
        // Setup some filters
        add_filter( 'mce_external_plugins', array( &$this, 'add_tinymce_plugin' ) );
        add_filter( 'mce_buttons', array( &$this, 'add_tinymce_toolbar_button' ) );
     
    }

    /**
     * Adds a TinyMCE plugin compatible JS file to the TinyMCE / Visual Editor instance
     *
     * @param array $plugin_array Array of registered TinyMCE Plugins
     * @return array Modified array of registered TinyMCE Plugins
     */
    function add_tinymce_plugin( $plugin_array ) {
     
        $plugin_array['span_class'] = plugin_dir_url( __FILE__ ) . 'tinymce-custom-class.js';
        return $plugin_array;
     
    }

    /**
     * Adds a button to the TinyMCE / Visual Editor which the user can click
     * to insert a custom CSS class.
     *
     * @param array $buttons Array of registered TinyMCE Buttons
     * @return array Modified array of registered TinyMCE Buttons
     */
    function add_tinymce_toolbar_button( $buttons ) {
     
        array_push( $buttons, 'span_class' );
        return $buttons;
     
    }

    /**
    * Enqueues CSS for TinyMCE Dashicons
    */
    function admin_scripts_css() {

        wp_enqueue_style( 'tinymce-custom-class', plugins_url( 'tinymce-custom-class.css', __FILE__ ) );

    }

/**
* Adds the Custom Class button to the Quicktags (Text) toolbar of the content editor
*/
function admin_footer_scripts() {

    // Check the Quicktags script is in use
    if ( ! wp_script_is( 'quicktags' ) ) {
        return;
    }
    ?>
    <script type="text/javascript">
        QTags.addButton( 'span_class', 'Insert Custom Class', insert_span_class );
        function insert_span_class() {
            // Ask the user to enter a CSS class
            var result = prompt('Enter the SPAN class');
            if ( !result ) {
                // User cancelled - exit
                return;
            }
            if (result.length === 0) {
                // User didn't enter anything - exit
                return;
            }

            // Insert
            QTags.insertContent('<span class="' + result +'"></span>');
        }
    </script>
    <?php

}
 
}
 
$tinymce_span_class = new TinyMCE_Span_Class;

که در اصل یک پلاگین هستش!

حالا چند تا مشکل دارم!

1- من می خوام یک دکمه برای اضافه کردن div استفاده کنم و یکی هم برای اضافه کردن span. چطور می تونم این کار رو داخل همین فایل انجام بدم؟

2- با این پلاگین بعد از انتخاب متن مورد نظر و زدن دکمه، یه باکس باز می شه که کلاس مربوطه رو وارد می کنی و متن داخل span با کلاسی که داخل باکس وارد شده قرار می گیره. حالا می خوام به جای باز شدن اون باکس، برای هر کلاس یک دکمه تعریف کنم که با زدن دکمه کلاس مربوطه به متن مورد نظر همراه با تگ span اضافه بشه. برای اینکار باید چطور عمل کنم؟

برای این موارد به چه صورت عمل کنم؟

حسین شفیعیان · 9 خرداد

میتونی خیلی ساده از شرتکد در وردپرس استفاده کنی : http://mrprogrammer.net/آموزش-ساخت-شرت-کد-وردپرس-shortcode/

lord_viper · 9 خرداد

راه راحتش این هست که شما اون باکس مورد نظر

رو تو مکان مورد نظر خودتون تو قالب قرار بدین+کدهای css

<div class="sample">
  <span class="en"><?php echo get_post_meta($post->ID,'__English',true) ?></span>
  <span class="fa"><?php echo get_post_meta($post->ID,'__Parsi',true) ?></span>
<div>

بعد موقع ارسال پست 2 تا کاستوم فیلد(زمینه دلخواه) در نظر بگیرین برای انگلیسی و فارسی و درون اون باکس قرار بدید

برای انگلیسی از نام English__ و برای فارسی از Parsi__ استفاده کنید

Siaavash · 9 خرداد

در 49 دقیقه قبل، lord_viper گفته است :
راه راحتش این هست که شما اون باکس مورد نظر

رو تو مکان مورد نظر خودتون تو قالب قرار بدین+کدهای css
<div class="sample">
  <span class="en"><?php echo get_post_meta($post->ID,'__English',true) ?></span>
  <span class="fa"><?php echo get_post_meta($post->ID,'__Parsi',true) ?></span>
<div>
بعد موقع ارسال پست 2 تا کاستوم فیلد(زمینه دلخواه) در نظر بگیرین برای انگلیسی و فارسی و درون اون باکس قرار بدید

برای انگلیسی از نام English__ و برای فارسی از Parsi__ استفاده کنید

باکس مورد نظر داخل پست های سایت میاد، وداخل هر پست ممکنه چندین بار درجاهای مختلف تکرار بشه! بعید می دونم بشه از این راه استفاده کرد!

برای تعریف دکمه ها به صورتی که گفتم نظری ندارید؟

Siaavash · 9 خرداد

در 3 ساعت قبل، حسین شفیعیان گفته است :

میتونی خیلی ساده از شرتکد در وردپرس استفاده کنی : http://mrprogrammer.net/آموزش-ساخت-شرت-کد-وردپرس-shortcode/

ممنون بابت راهنمایی.

اما همین هم به نظرم برای کاربر ناآشنا، راه حل ساده ای نیست. خصوصا زمانی که چندین کاربر قرار باشه پست ارسال کنند.

lord_viper · 9 خرداد

اگه قراره چند جا تکرار بشه شورت کد گزینه مناسبیه

یا اینکه کدهای css رو تو فایل style.css قالب قرار بدین

و نویسنده ها تو ادیتور از قالب زیر استفاده کنن

<div class="sample">
  <span class="en">English</span>
  <span class="fa">فارسی</span>
<div>

در ضمن تو کد css هم span.de رو به span.en تغییر بدید

Siaavash · 9 خرداد

در 32 دقیقه قبل، lord_viper گفته است :
اگه قراره چند جا تکرار بشه شورت کد گزینه مناسبیه

یا اینکه کدهای css رو تو فایل style.css قالب قرار بدین

و نویسنده ها تو ادیتور از قالب زیر استفاده کنن
<div class="sample">
  <span class="en">English</span>
  <span class="fa">فارسی</span>
<div>
در ضمن تو کد css هم span.de رو به span.en تغییر بدید

در حال حاضر از همین روش استفاده شده، و این کد ها داخل style.css تعریف شده. اما می خوام کاربر درگیر کد های HTML نشه. به همین دلیل (استفاده چندین کاربر ناآشنا) شورت کد هم تقریبا گزینه مناسبی نیست برای این مورد.

یه پلاگین استفاده کردم که یک دکمه به ادیتور اضافه می کنه، که بعد از انتخاب متن مورد نظر، با زدن دکمه، یه باکس باز می شه که کلاس مربوطه رو وارد کنی (.en و .fa) و متن داخل span با همون کلاس قرار می گیره.

حالا می خوام:

1- با زدن دکمه، باکس باز نشه و مثلا با زدن دکمه BOX متن انتخاب شده داخل div با کلاس باکس قرار بگیره. و یا با زدن دکمه EN متن انتخاب شده داخل span با کلاس en قرار بگیره.

2- به جای یک دکمه چند دکمه تعریف کنم داخل همین پلاگین. (در حال حاضر از پلاگین کپی گرفتم و دکمه دوم رو تعریف کردم)

Siaavash · 10 خرداد

؟

Siaavash · 13 خرداد

کسی می تونه تو این مورد راهنمایی کنه؟

Siaavash · 14 خرداد

در در 5/30/2017 at 13:06، Siaavash گفته است :

در حال حاضر از همین روش استفاده شده، و این کد ها داخل style.css تعریف شده. اما می خوام کاربر درگیر کد های HTML نشه. به همین دلیل (استفاده چندین کاربر ناآشنا) شورت کد هم تقریبا گزینه مناسبی نیست برای این مورد.

یه پلاگین استفاده کردم که یک دکمه به ادیتور اضافه می کنه، که بعد از انتخاب متن مورد نظر، با زدن دکمه، یه باکس باز می شه که کلاس مربوطه رو وارد کنی (.en و .fa) و متن داخل span با همون کلاس قرار می گیره.

حالا می خوام:

1- با زدن دکمه، باکس باز نشه و مثلا با زدن دکمه BOX متن انتخاب شده داخل div با کلاس باکس قرار بگیره. و یا با زدن دکمه EN متن انتخاب شده داخل span با کلاس en قرار بگیره.

2- به جای یک دکمه چند دکمه تعریف کنم داخل همین پلاگین. (در حال حاضر از پلاگین کپی گرفتم و دکمه دوم رو تعریف کردم)

خب قسمت 1 رو تونستم حل کنم!

باید از طریق JavaScript اقدام می شد برای مورد 1 و اونم به این صورت که داخل کدهای JS کد زیر:

// Ask the user to enter a CSS class
            var result = prompt('Enter the SPAN class');
            if ( !result ) {
                // User cancelled - exit
                return;
            }

تغییر داده بشه به کد زیر:

// Ask the user to enter a CSS class
            var result = 'box';
            if ( !result ) {
                // User cancelled - exit
                return;
            }

که box کلاسی هست که برای دکمه باکس تعریف شده و بعد از انتخاب متن و زدن دکمه باکس، متن داخل یک span با کلاس box قرار می گیره:

<span class="box">متن انتخابی</span>

behtash007 · 27 خرداد

عالی بود استفاده کردم

ورود

فراخوانی کد HTML داخل متن (به وسیله ادیتور وردپرس)

15 پست در این موضوع قرار دارد

به اشتراک گذاری این پست

لینک به پست

به اشتراک گذاری این پست

لینک به پست

به اشتراک گذاری این پست

لینک به پست

به اشتراک گذاری این پست

لینک به پست

به اشتراک گذاری این پست

لینک به پست

به اشتراک گذاری این پست

لینک به پست

به اشتراک گذاری این پست

لینک به پست

به اشتراک گذاری این پست

لینک به پست

به اشتراک گذاری این پست

لینک به پست

به اشتراک گذاری این پست

لینک به پست

به اشتراک گذاری این پست

لینک به پست

به اشتراک گذاری این پست

لینک به پست

به اشتراک گذاری این پست

لینک به پست

به اشتراک گذاری این پست

لینک به پست

به اشتراک گذاری این پست

لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

ایجاد یک حساب کاربری

ورود به حساب کاربری

مطالب مشابه

فهرست بخش ها

فعالیت ها