WordPress span tag

Why would we use the WordPress span tag?

You can style any text using the WordPress span tag. Which will be very interesting to the user and the user will have fun reading the texts. Giving an example will help you to understand better. Writing a text Want to style a text that can style the text by the span it will not affect any other text

Does not use span tags

Hi my name johir I am a web developer

use span tags

Hi my name johir I am a web developer

To use WordPress span tag you need to follow some steps if you use gluten bag text editor (default editor). Then there can see a dot icon on the right site by clicking. A menu bar will appear. There is an option called EDITOR. Below that there are 2 types of edit modes, select for default (Visual editor) if you select the code editor there. You will switch to code editor mode. Now you add span tags to the text.

<span style="color:red;"> web developer</span>

WordPress span tag How much do you need for a website?

The WordPress span tag element does not mean anything by itself, but it can be effective The WordPress span tag element does not mean anything by itself, but it can be effective when used in conjunction with global attributes, such as class, lang or dir. It represents her children. Span tags are essential for a blog post. With the span tag, you can focus the user on the test. The search engine index will not be affected.

The HTML <span> element is a generic inline container for pieces of content, which does 
not inherently represent anything. It is mostly used for grouping and styling bits of 
content.<span> is very much like a <div> element, but <div> is a block-level element 
whereas a <span> is an inline element.

Why do blogs use span tags?

Users read the Span tag to pay attention to the text. WordPress text editor does not have any span tags it takes to be manual. Blogs do not deal with the span tags, but if you want to add, then yield the code below.

Is WordPress span tag too difficult to write?

Click on the 3 dot icon, the menubar will come to the menubar, select Visual Editor. If you use the class editor, then click Visual. The tag that wants to add the span before and behind this code.

<span></span>

What is a span tag?

HTML span tag inline element. It is used to group elements for styling purposes (using class or ID attributes) if no other semantic elements are available. A good way to use it The span is like a div tag. div block-level tag and span inline tag. A span tag is a paired tag which means it contains both open (<) and closed (>) tags and the tag must be closed.

Span tags are used to group inline elements. Span tags do not automatically change any visuals. <span class = “”> Some writing …………. </span>
Features: This tag accepts all worldwide features and event features

Example 1: Zaheer brave, italic, underlined, green font-family = Courier wants to write three times in the new three lines, many HTML tags like each line should be used, and each tag must be followed.

   <font color="009900" size="6">
        <b>
            <u>
                <i>johir</i>
            </u>
        </b>
    </font>
  
    <br>

Example 1: I can reduce the code using the tag, and in the example below, the HTML attributes are applied to the CSS in a span tag.

  <h3>Welcome To bwd</h3>
    <span>Aardvark</span></br>
    <span>Albatross</span></br>
    <span>hatchling</span></br>
span{
color:red;
font-size:32px;
background-color:black;
text-decoration: underline;
font-style: italic;
font-weight: bold;
}

How do I add a span tag?

Open the web page you want to update in your favourite HTML text editor. It could be a program like Adobe Dreamweaver or a simple text editor like Notepad, Notepad ++, TextEdit etc. Find the words in the document that appears in another colour on the page. For this lesson, let’s use a few words that are within the larger paragraph of the text. This text will be included in one pair of tags. Find one of the two characters whose colour you want to edit. Place your cursor in front of the first letter in the word or group of words you want to change your colour. Remember, if you are using a WYSIWYG editor like Waiver, you are currently working on Code View. Let’s wrap the text we want to change the colour with a tag with class attributes. The whole paragraph will look like this:

Find words in color documents on the page.

We used an inline element to give this particular lesson a hook that we can use in CSS. Our next step is to navigate to our external CSS file to add a new rule.

Come to our CSS file:

.Focus-text{
Color: #ffff;
}

This rule will set this inline element to appear in red. If there is a previous style that does black text in the document, the condensed text in this inline style will be differently colourful. Can add more style to this rule, perhaps the text must be made more italic or brave.

Save your page.
Check the page in your favourite web browser to see the action changes.
Please note that in addition to some, web professionals prefer to add or use other elements such as tags. These tags were used specifically for bold and italics, but have been deprecated and replaced. However, tags still work in modern browsers, which is why many web developers use them as inline style hooks. This is not a bad idea, but if you want to avoid any neglected elements, we recommend sticking to the tag for this type of styling requirement.

WordPress Explain 01

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;
}
$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
		});

	});
})();

WordPress Explain 02

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>
          })
        )
      )
    }
  })
})

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');

Related Posts

meter element

meter element

How To Use The Meter Element In HTML?

Preg_match_all-in-php.jpg

Preg_match_all in php

The Basic Concept of the PHP preg_match_all Function The PHP preg_match_all function is a pattern-matching function that matches the text. This function is use to search for…

document.queryselector-in-javascript.jpg

what is document.queryselector in javascript

What is document.querySelector() in Javascript? The javascript document.querySelector() method retrieves. The element with the given tag name or id from within a document. The document.querySelector() method returns…

JQuery hide Method.jpg

JQuery hide Method

What can the JQuery Hide Method Do For You? The JQuery Hide Method is a function that one can use to hide text on a website. It…

Push array in php.jpg

Push array in php

What is a php Push Array? A push array is a PHP data type that can store an arbitrary number of values. The push array is a…

How to use map method in javascript.jpg

How to use map method in javascript

What is the Map Method? The map method is a higher-order function in JavaScript. Who can use it to transform an array into another array by iterating…

This Post Has 2 Comments

Leave a Reply

Your email address will not be published.

Education Template