web-dev-qa-db-fra.com

Modification de l’en-tête toutes les minutes/secondes

J'essaie de changer l'image d'en-tête toutes les "n" secondes/minutes. J'ai examiné plusieurs solutions sur le Web et utilise actuellement le fragment de code PHP disponible ci-dessous à l'adresse http://ma.tt/scripts/randomimage/ :

Cela ne change toujours que l'image sur une page à recharger pas toutes les minutes. J'ai aussi vu le post sur:

Comment faire pivoter l'image d'en-tête par jour?

Cependant, je ne sais pas comment l'adapter pour faire ce que je veux.

Pourriez-vous s'il vous plaît me donner quelques conseils sur la façon de s'y prendre car je suis très novice en PHP.

De plus, cela serait-il mieux fait en JavaScript de PHP?

Merci d'avance.

theme-developmentimagesheader-image
1
navanitachora

Pour répondre à votre question, à mon avis, il serait préférable d'utiliser JavaScript. jQuery peut être un excellent outil pour le faire. Je suggérerais d'installer le jQuery Cycle Plugin. dans votre thème. Vous pouvez toujours charger les images dans votre thème avec PHP, mais si vous souhaitez modifier l'image sans avoir à recharger la page, utilisez de préférence JavaScript.

Quelque chose comme ça: Ajoutez jQuery et jQuery Cycle en ajoutant ce code à votre functions.php

    <?php
function my_scripts_method() {
    wp_enqueue_script('jquery');
    wp_register_script( 'jcycle', 'http://ajax.aspnetcdn.com/ajax/jquery.cycle/2.99/jquery.cycle.all.min.js'); //register the Microsoft cdn copy of jcycle this could also be your local copy
    wp_enqueue_script('jcycle');
  }    

add_action('wp_enqueue_scripts', 'my_scripts_method'); //
?>

Voir le script wp de mise en file d'attente et Microsoft CDN pour jCycle plus d'informations.

Ajoutez ensuite ceci à votre header.php

<head>
<script type="text/javascript">
jQuery(document).ready(function($) {
    $('#header').cycle({
        fx: 'fade', //your effect
                random: 1, //make it random
                timeout: 5000 // change header every 5 seconds

    });
});
</script>
</head>
<body>
    <div id="Header">
        <img src="beach1.jpg" width="200" height="200" />
        <img src="beach2.jpg" width="200" height="200" />
        <img src="beach3.jpg" width="200" height="200" />
    </div>
</body>

Il existe d'autres plug-ins jQuery/JavaScript pour les diaporamas/cycles mais je pense que cela vous permettra de rester sur la bonne voie.

0
Brooke.