Noscript not working as it should in wordpress site

This is what I've done in my custom functions mu-plugin:

function jsdisabled() {
print 'noscript

div style=margin:auto; display:table; text-align:center
div style=margin:auto; display:table; width:70%
h1Title/h1
h2Some text.
/h2
p
img src=/noscriptimage.jpg/
/p
/div
/div
/noscript';
}
add_action('wp_head', 'jsdisabled', 0);

This code adds noscript tags to wordpress header, but when I test the page with browser javascript disabled, what happens is that the noscript message and image will show, but the entire page content will show too, in other words, noscript is supposed to hide all the website's content and show only a message to visitors telling them to enable javascript.

You can verify it here: https://lucrebem.com.br/emp-digital/blog-de-nicho

Topic mu-plugins functions php html Wordpress javascript

Category Web

1
answered at

That's not how <noscript> tags work, and if they did your usage is incorrect.

The <noscript> tag defines an alternate content to be displayed to users that have disabled scripts in their browser or have a browser that doesn't support script.

The <noscript> element can be used in both <head> and <body>. When used inside <head>, the <noscript> element could only contain <link>, <style>, and <meta> elements.

The contents of a noscript tag only show if javascript is disabled, that's it. Additionally, you can't put images and paragraphs in the <head> tag, even inside a <noscript>.

If you want to hide your site and display a message if the user has disabled javascript, it's not enough to use a <noscript> tag, you need to apply CSS to hide the site, and you need to put your message noscript inside the <body> tag.

Further reading:

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.