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

jQuery-Show-Method.jpg

jQuery Show Method

What is the jQuery Show Method and How Does it Work? The jQuery Show Method is a common way to animate DOM elements. It can be use…

Ajax-insert.jpg

Ajax insert

Introduction to Ajax insert and what it is. Ajax is a programming technique that allows web browsers to fetch data from the server without having to reload…

JQuery-hasclass-multiple.jpg

JQuery hasclass multiple

What is jQuery hasClass() Method? The jQuery hasClass() method is a JavaScript function. That allows you to check whether the specified CSS class exists on an element….

jQuery-slideup-function.jpg

jQuery slideup function

Common Mistakes When Using jQuery SlideUp Function The jQuery SlideUp function is use to animate the sliding up of an element. This article will provide you with…

Event-delegation-jquery.jpg

Event delegation jquery

What Is jquery Event Delegation and How Does It Work? Event delegation is a jQuery plugin that lets. You assign event handlers to elements in the page…

jQuery-Is-Method.jpg

jQuery Is Method

What is the jQuery Is Method? The is a method in jQuery is use to determine if a DOM element matches a selector or not. It’s use…

This Post Has 2 Comments

Leave a Reply

Your email address will not be published.