Creating Span Tags without HTML Editor

  • Is there any way to apply a span tag to a word or phrase in WordPress without having to use the HTML editor? This would be helpful in highlighting words or phrases (not entire paragraphs) as a particular style class.

    My writing often includes a number of foreign language words in languages such as Hebrew, Russian, Greek, and Arabic. The default font for these languages is often different from the main site font and often unattractive. I have remedied this by creating classes (.russian .greek .hebrew. .arabic) and through span tags can assign a class to a particular word or phrase in order to ensure that it displays in the correct font.

    However, this process is tedious, especially if there are a number of individual words interspersed throughout a paragraph.

    Is there any way to use a markup, or is there any available plugin that would allow me to assign a class to a string without having to write the paragraph first, open the HTML editor and add a series of span tags?

    I have tried using CSS and unicode ranges to automatically render particular languages in particular fonts but have had no luck in getting it to work.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

  • In your theme’s functions.php

    /* custom button from: https://www.wpexplorer.com/wordpress-tinymce-tweaks/ */
function my_add_mce_button() {
	if ( !current_user_can( 'edit_posts' ) && !current_user_can( 'edit_pages' ) ) {
		return;
	}
	if ( 'true' == get_user_option( 'rich_editing' ) ) {
		add_filter( 'mce_external_plugins', 'my_add_tinymce_plugin' );
		add_filter( 'mce_buttons', 'my_register_mce_button' );
	}
}
add_action('admin_head', 'my_add_mce_button');
function my_add_tinymce_plugin( $plugin_array ) {
	$plugin_array['lang_select'] = get_stylesheet_directory_uri() .'/js/tiny_123qaz.js';
	return $plugin_array;
}
function my_register_mce_button( $buttons ) {
	array_push( $buttons, 'lang_select' );
	return $buttons;
}

    NOTE: $plugin_array['lang_select'] = get_stylesheet_directory_uri() .'/js/tiny_123qaz.js';

    Make sure the path to your JS file is correct.

    then on your theme add the JS file. Mine is called tiny_123qaz.js

    /* from: https://gist.github.com/carlodaniele/7ffcd63b33c01d4284b52ad0866a4045 */
(function() {
	var languages = ['Arabic', 'Greek', 'Hebrew', 'Russian'];
	
	tinymce.PluginManager.add( 'lang_select', function( editor ){
		
		var items = [];

		tinymce.each( languages, function( languageName ){
			items.push({
				text: languageName,
				onclick: function(){
					var content = tinyMCE.activeEditor.selection.getContent();
					editor.insertContent( '<span class="' + languageName.toLowerCase() + '">' + content + '</span>' );
				}
			});
		});

		editor.addButton( 'lang_select', {
			type: 'menubutton',
			text: 'Languages',
			menu: items
		});

	});
})();

    That solution given will only affect the Classic editor and Classic block.
    The block editor also has a Rich Text API, but the interface is different.

    @joyously you are correct.

    @revschaef

    Here’s one for Gutenberg.

    language_123qaz.js

    const { createElement, Fragment } = window.wp.element
const { registerFormatType, toggleFormat } = window.wp.richText
const { RichTextToolbarButton, RichTextShortcut } = window.wp.editor;
[
  {
    name: 'arabic',
    title: ' Arabic',
    lang: 'arabic',
	icon: 'format-chat',
  },
  {
    name: 'greek',
    title: ' Greek',
    lang: 'Greek',
	icon: 'format-chat',
  },
   {
    name: 'hebrew',
    title: ' Hebrew',
    lang: 'hebrew',
	icon: 'format-chat',
  },
   {
    name: 'russian',
    title: ' Russian',
    lang: 'russian',
	icon: 'format-chat',
  }
].forEach(({ name, title, lang, icon}) => {
  const type = <code>advanced/${name}</code>

  registerFormatType(type, {
    title,
    tagName: 'span',
    className: lang,
    edit ({ isActive, value, onChange }) {
      const onToggle = () => onChange(toggleFormat(value, { type }))

      return (
        createElement(Fragment, null,
          createElement(RichTextToolbarButton, {
            title,
			icon: icon,
            onClick: onToggle,
            isActive,
            className: <code>toolbar-button-with-text toolbar-button__advanced-${name}</code>
          })
        )
      )
    }
  })
})

    Note the space at the beginning of the Name I couldn’t figure out how to sort them not alphabetically so I added a space to make the sort together.

    in your functions.php

    function language_123qaz(){
    wp_enqueue_script(
        'language_123qaz',
        plugins_url('language_123qaz.js'),
        array('wp-blocks', 'wp-i18n', 'wp-element', 'wp-components', 'wp-editor'),
		'1.0', true
        //filemtime(plugin_dir_path( __FILE__ ).'language_123qaz.js')	
    );
}
add_action('enqueue_block_editor_assets', 'language_123qaz');

    Might not be the best way but it works (for me).

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Creating Span Tags without HTML Editor’ is closed to new replies.