desarrollo una web en base wordpress y necesito pasar una variable PHP en mi main.js, es decir, en mi archivo footer.php la fracción de código es 100% funcional, pero no solo uso ID's o clases, si no que tambien uso arrays de ACF con grupos de texto eh imagenes y me gustaria que esto estuviera funcional en mi main.js. Os expongo el ejemplo.
<?php $gruppe = get_field('gruppe', 'options'); ?>
<section class="headInhalt">
<div class="bkImage">
<img id="headBK" src="<?php echo $headBild['sizes']['large']; ?>" alt="<?php echo $headBild['alt']; ?>"/>
</div>
<?php if ($gruppe): ?>
<div class="inhalt">
<?php foreach ($gruppe as $group):
$inhalt = $group['content'];
?>
<div id="<?php echo $inhalt['id']; ?>" class="objekt">
<img src="<?php echo $inhalt['bild']['url'] ?>"
alt="<?php echo $inhalt['bild']['alt'] ?>">
</div>
<?php $box = $inhalt['box']; ?>
<div class="contentTheobjekt">
<div class="columns">
<div class="column is-3 thecolumn">
<div class="close">
<p>X</p>
</div>
<div class="columns">
<div class="column is-full">
<div class="thecolumncontent">
<div class="title">
<?php echo $box['titel'] ?>
</div>
<div class="content">
<?php echo $box['content']; ?>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<?php
$bild = $inhalt['background-image']['sizes']['large'];
?>
<script>
$(document).ready(function () {
$('.thecolumn').toggle();
var clicked = false;
$('.objekt').click(function () {
event.preventDefault();
if (!clicked) {
$('#headBK').attr('src', '<?php echo $bild; ?>').fadeIn("slow");
$('.thecolumn').toggle("slide");
clicked = true;
} else {
$('#headBK').attr('src', '<?php echo $headBild['sizes']['large']; ?>');
$('.thecolumn').toggle("slide");
clicked = false;
}
});
/**Block close**/
$('.close p').click(function () {
$('#headBK').attr('src', '<?php echo $headBild['sizes']['large']; ?>');
$('.thecolumn').toggle("slide");
})
});
</script>
<?php endforeach; ?>
</div>
<?php endif; ?>
</section>
Esto es exactamente como esta montado, y lo que quiero es que esto:
<script>
$(document).ready(function () {
$('.thecolumn').toggle();
var clicked = false;
$('.objekt').click(function () {
event.preventDefault();
if (!clicked) {
$('#headBK').attr('src', '<?php echo $bild; ?>').fadeIn("slow");
$('.thecolumn').toggle("slide");
clicked = true;
} else {
$('#headBK').attr('src', '<?php echo $headBild['sizes']['large']; ?>');
$('.thecolumn').toggle("slide");
clicked = false;
}
});
/**Block close**/
$('.close p').click(function () {
$('#headBK').attr('src', '<?php echo $headBild['sizes']['large']; ?>');
$('.thecolumn').toggle("slide");
})
});
</script>
Pase a funcionar en main.js, no es por nada en concreto, es por ser ordenado y tener todas las reglas en sus respectivos archivos. Gracias y un saludo