¿Cómo puedo agregar el código php de WordPress en JavaScript?
⏰ 3 minutos de lectura
Jamdev
Tengo el siguiente código javascript:
$(window).scroll(function() {
if($(this).scrollTop() > 50) /*height in pixels when the navbar becomes non opaque*/
{
$('.navbar-default').addClass('sticky');
$('.navbar-brand img').attr('src','assets/images/logo.png'); //change src
} else {
$('.navbar-default').removeClass('sticky');
$('.navbar-brand img').attr('src','assets/images/logo__footer.png')
}
});
¿Es posible insertar un código php personalizado de wp?
<?php the_custom_logo(); ?>
En lugar de este atributo estático
.attr('src','assets/images/logo.png');
Muchas gracias de antemano.
¿Este javascript se creó como parte de un script php o está en un .js archivo que vincula a la página
– RiggsFolly
18 de octubre de 2018 a las 8:36
@RiggsFolly Oye, es parte del archivo js
– Jamdev
18 de octubre de 2018 a las 8:37
Entonces creo que la respuesta es no, no directamente.
– RiggsFolly
18 de octubre de 2018 a las 8:38
Debe establecer la variable en la plantilla:
<script>
var logoImage = <?php the_custom_logo(); ?>;
var logoImageFooter = <?php the_custom_logo()?> //here footer logo
</script>
y luego, en su archivo js, úselo
$(window).scroll(function() {
if($(this).scrollTop() > 50) /*height in pixels when the navbar becomes non opaque*/
{
$('.navbar-default').addClass('sticky');
$('.navbar-brand img').attr('src',logoImage); //change src
} else {
$('.navbar-default').removeClass('sticky');
$('.navbar-brand img').attr('src',logoImageFooter)
}
});
Hola @vasyl-zhuryk, muchas gracias. ¿Podría, por favor, decirme en qué plantilla exacta tengo que establecer la variable?
– Jamdev
18 de octubre de 2018 a las 8:49
@Jamdev Ahora, no tengo un servidor de wordpress y no puedo ver el archivo. Pero puedes encontrarlo por ti mismo. html en su módulo, que se está cargando con su archivo js
– Vasyl Zhuryk
18 oct 2018 a las 10:24
¡Muy apreciado!
– Jamdev
18 oct 2018 a las 11:22
Su código Js:
$(window).scroll(function() {
if($(this).scrollTop() > 50) /*height in pixels when the navbar becomes non opaque*/
{
$('.navbar-default').addClass('sticky');
$('.navbar-brand img').attr('src','custom_logo.png'); //change src
} else {
$('.navbar-default').removeClass('sticky');
$('.navbar-brand img').attr('src','logo_footer.png')
}
});
Código HTML:
<?php $customLogo= 'custom_logo'; ?>
<?php $footerLogo= 'footer_logo'; ?>
<html>
<body>
<script type="text/javascript">
// notice the quotes around the ?php tag
var customLogo="<?php echo $customLogo; ?>";
var footerLogo="<?php echo $footLogo; ?>";
alert(customLogo);
alert(footerLogo);
</script>
</body>
</html>
SI necesita jquery con entrada de código php, entonces wp_localize_script() función. Más información
var logoImage = <?php the_custom_logo(); ?>;
var logoImageFooter = <?php the_custom_logo()?> //here footer logo
// Register the script
wp_register_script( 'some_handle', 'path/to/myscript.js' );
// Localize the script with new data
$translation_array = array(
'logo_image' => the_custom_logo(),
'logo_image_footer' => the_custom_logo()'
);
wp_localize_script( 'some_handle', 'object_name', $translation_array );
// Enqueued script with localized data.
wp_enqueue_script( 'some_handle' );
Puede acceder a las variables en JavaScript de la siguiente manera:
Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos.
Configurar y más información
¿Este javascript se creó como parte de un script php o está en un
.js
archivo que vincula a la página– RiggsFolly
18 de octubre de 2018 a las 8:36
@RiggsFolly Oye, es parte del archivo js
– Jamdev
18 de octubre de 2018 a las 8:37
Entonces creo que la respuesta es no, no directamente.
– RiggsFolly
18 de octubre de 2018 a las 8:38