Inline style/script
The JS & CSS code are inserted directly into the page through tags
<style <script (not src attr) called inline.You can modify it's content before it execute on the browser. Use the hook
hpp_inline_script hpp_inline_style as bellow:/**
* edit script tag in head,footer,footer-data,get_option..
*@param $js
*/
add_filter('hpp_inline_script', function($js) {
//in footer
if(strpos($js, '_HWIO.extra_assets=')!==false) {
$js = str_replace('})(jQuery);;','})(null);;', $js);
$js = str_replace('_HWIO.readyjs(function()','_HWIO.readyjs(function($)', $js);
}
//remove `_HWIO.readyjs`
if(strpos($js, 'function tdBlock')!==false) {
$js = str_replace('_HWIO.readyjs(function(){','', substr($js,0, strlen($js)-2));
}
//other
if(strpos($js,'_HWIO.readyjs')===false) $js = str_replace('timer_metaslider_12()', '_HWIO.readyjs(timer_metaslider_12)', $js);
//facebook
if(strpos($js, 'fbq(')!==false && strpos($js, '},"fbq")')===false) {
$js = (substr($js,-3)=='});'? substr($js,0,-3): substr($js,0,-2)). '},"fbq")';
}
return $js;
});
/**
*@param $css
*/
add_filter('hpp_inline_style', function($css){
return $css;
});
Each of JS file allow you to add inline JS by the function
wp_add_inline_script , these inline code from all JS files will group into single <script tag & placed at the bottom of the page. You can also modify each inline code like this://script data
add_filter('hpp_inline_script_part', function($js, $handle){
if($handle=='wp-util') $js = str_replace('find', 'replace', $js);
return $js;
}, 10, 2);
Almost Inline scripts depend on other library such as jquery so to work without issue these inline code will be fired only after all JS files have complete execution. Hence they need to delay a few milliseconds, and you can see it nested in the event
_HWIO.readyjs 
delay js
However, if your website has some variables that need to be shared for other scripts to use, So you will have to open global for that variable. There are 2 ways to do this: create global variables with
window. using the filter hpp_inline_script OR remove the event _HWIO.readyjs Method 1: using the filter to replace string from
var something= towindow.something=Method 2: removing the wrap event 'readyjs' , by adding blacklist text that found in <script tag you want to remove this event.
add_filter('hpp_allow_readyjs', function($ok, $js){
if(hpp_in_str($js, ['new PerformanceObserver',]) ) return false;
return $ok;
}, 10, 2);
By default, entire inline scripts is run after document ready, if you want to specific which inline code should run only after the user interacts on the web (ex: scroll, mouse move, click..) so see bellow example.
add_filter('hpp_delay_it_script', function($v, $js){
$find = [
'www.googletagmanager.com','connect.facebook.net','www.google-analytics.com','bing.com','new Ya.Metrika',
'googlesyndication','adsbygoogle',"fbq('set'",'fbq("set"',"fbq('init'","fbq('track'",'gtag(',
];
if(hpp_in_str($js, $find)) return true;
return $v;
},10, 2);
With above snippet, help you create the readyjs event has form of:
_HWIO.readyjs(null,function(){}); In the case of creating inline JS using the function
wp_add_inline_script but for the purpose of using as template. That mean to change the attribute of the tag <script from text/javascript to other type, see bellow example:<script type='text/javascript' id='wpp-js'>
{"key1":"value 1"}
</script>
---------> change to
<script type='application/json' id='wpp-json'>
{"key1":"value 1"}
</script>
The following code will help you customize the <script tag.
$params = [
"key1"=> "value 1"
];
wp_enqueue_script('wpp-js');
wp_add_inline_script('wpp-js', json_encode($params), 'before');
//edit
function convert_inline_js_into_json($tag, $handle, $src) {
if ( 'wpp-js' === $handle ) {
// id attribute found, replace it
if ( false !== strpos($tag, 'wpp-js-js-before') ) {
$tag = str_replace('wpp-js-js-before', 'wpp-json', $tag);
} // id attribute missing, let's add it
else {
$pos = strpos($tag, '>');
$tag = substr_replace($tag, ' id="wpp-json">', $pos, 1);
}
// type attribute found, replace it
if ( false !== strpos($tag, 'type') ) {
$pos = strpos($tag, 'text/javascript');
if ( false !== $pos )
$tag = substr_replace($tag, 'application/json', $pos, strlen('text/javascript'));
} // type attribute missing, let's add it
else {
$pos = strpos($tag, '>');
$tag = substr_replace($tag, ' type="application/json">', $pos, 1);
}
}
return $tag;
}
add_filter('script_loader_tag', 'convert_inline_js_into_json', 10, 3);
So if you face this situation you must not exclude this inline script and not use it as javascript code. We need to keep the <script tag, to do this you use the filter
hpp_allow_inline_data as bellow:add_filter('hpp_allow_inline_data', function($ok, $handle, $key){
//handle script to ignore
if($handle=='wpp-js' ) return false;
return $ok;
}, 10, 3);
Last modified 1yr ago