Is there anything wrong with including style
and script
tags inside a template part? The template part which I'm using like something more similar to a vue/react component is working correctly but just wondering if there are any potential hidden issues I may face by using it like this.
For example I have a template part:
<?php
$randomImg = get_field( 'random_ad_img', 'option' );
$randomImgAlt = get_field( 'random_ad_img_alt', 'option' );
$randomUrl = get_field( 'random_ad_url', 'option' );
$randomDelay = get_field( 'random_ad_delay', 'option' );
if($randomImg) { ?>
<style>
.c-random-singleAd {
display: none;
position: fixed;
height: 251px;
width: 325px;
left: 0;
bottom: 0;
}
.c-random-singleAd.isActive {
display: block;
}
</style>
<div class="c-random-singleAd">
<a class="c-random-singleAd__link" href="<?php echo $randomUrl; ?>">
<img class="c-random-singleAd__img" src="<?php echo $randomImg; ?>" alt="<?php echo $randomImgAlt; ?>">
</a>
</div>
<script>
jQuery(document).ready(function($) {
var cookieFooter = jQuery('#catapult-cookie-bar');
var randomAd = jQuery('.c-random-singleAd');
setTimeout(function() {
console.log(offset);
if(cookieFooter.length == 1) {
var offset = cookieFooter.outerHeight(true);
randomAd.css('bottom', offset.toString() + 'px');
} else return;
randomAd.addClass('isActive')
}, 10000);
});
</script>
<?php }
?>
As mentioned earlier this works completely fine and I don't see any weird console errors.