¿Cómo puedo agregar el código php de WordPress en JavaScript?

3 minutos de lectura

avatar de usuario
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:

    <script>
        alert( object_name.logo_image);
        alert( object_name.logo_image_footer);
    </script> 


 $('.navbar-brand img').attr('src',object_name.logo_image); //change src

¿Ha sido útil esta solución?

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
Privacidad