cómo agregar este script jquery en el sitio web de wordpress

0

Me gustó este script de cuenta regresiva de http://www.jqueryscript.net/time-clock/Modern-Circular-jQuery-Countdown-Timer-Plugin-Final-Countdown.html y quiero usar este en mi sitio web de wordpress, leí algunos tutoriales sobre cómo poner cualquier script en wordpress pero no pude entender exactamente porque soy un novato, ¿pueden ayudarme a hacer esto paso a paso?

ahora mostraré las instrucciones del autor del script para usar este script en una página html normal. Quiero seguir estos pasos también, pero en wordpress.

  1. Incluya los archivos javascript necesarios al final de la página.

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js">     
    </script> 
    <script type="text/javascript" src="js/kinetic.js"></script> 
    <script type="text/javascript" src="../jquery.final-countdown.js"></script> 
    
  2. Incluya el CSS de bootstrap 3 requerido en el encabezado de la página.

    <link rel="stylesheet"          
     href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    
  3. Cree un temporizador de cuenta regresiva usando la estructura html como esta:

    <div class="countdown-container container">
    <div class="clock row">
    
    <!-- days --> 
    <div class="clock-item clock-days countdown-time-value col-sm-6 col-md-3">
    <div class="wrap">
    <div class="inner">
    <div id="canvas_days" class="clock-canvas"></div>
    <div class="text">
    <p class="val">0</p>
    <p class="type-days type-time">DAYS</p>
    </div>
    </div>
    </div>
    </div>
    
    <!-- hours --> 
    
    <div class="clock-item clock-hours countdown-time-value col-sm-6 col-md-3">
    <div class="wrap">
    <div class="inner">
    <div id="canvas_hours" class="clock-canvas"></div>
    <div class="text">
    <p class="val">0</p>
    <p class="type-hours type-time">HOURS</p>
    </div>
    </div>
    </div>
    </div>
    
    <!-- minutes --> 
    <div class="clock-item clock-minutes countdown-time-value col-sm-6 col-md-3">
    <div class="wrap">
    <div class="inner">
    <div id="canvas_minutes" class="clock-canvas"></div>
    <div class="text">
    <p class="val">0</p>
    <p class="type-minutes type-time">MINUTES</p>
    </div>
    </div>
    </div>
    </div>
    
    <!-- seconds --> 
    <div class="clock-item clock-seconds countdown-time-value col-sm-6 col-md-3">
    <div class="wrap">
    <div class="inner">
    <div id="canvas_seconds" class="clock-canvas"></div>
    <div class="text">
    <p class="val">0</p>
    <p class="type-seconds type-time">SECONDS</p>
    </div>
    </div>
    </div>
    </div>
    </div>
    
    </div>
    
    1. Agregue el siguiente fragmento de CSS a su archivo CSS.

      html, body {altura: 100%; } html {imagen de fondo: url ('../ img / sample.jpg'); posición de fondo: centro centro; repetición de fondo: no repetición; tamaño de fondo: cubierta; } cuerpo {color de fondo: rgba (44,62,80, 0.6); imagen de fondo: url ('../ img / pattern.png'); posición de fondo: centro; background-repeat: repetir; familia de fuentes: 'Raleway', 'Arial', sans-serif; } .countdown-container {posición: relativa; arriba: 50%; -webkit-transform: translateY (-50%); -moz-transform: translateY (-50%); transformar: translateY (-50%); } .clock-item .inner {altura: 0px; fondo acolchado: 100%; posición: relativa; ancho: 100%; } .clock-canvas {color de fondo: rgba (255, 255, 255, .1); radio de borde: 50%; altura: 0px; fondo acolchado: 100%; } .text {color: #fff; tamaño de fuente: 30px; font-weight: negrita; margen superior: -50px;posición: absoluta; arriba: 50%; alineación de texto: centro; sombra de texto: 1px 1px 1px rgba (0, 0, 0, 1); ancho: 100%; } .text .val {tamaño de fuente: 50px; } .text .type-time {tamaño de fuente: 20px; } @media (ancho mínimo: 768 px) y (ancho máximo: 991 px) {.clock-item {margin-bottom: 30px; }} @media (ancho máximo: 767px) {.clock-item {margin: 0px 30px 30px 30px; }}

  4. Inicialice el temporizador de cuenta regresiva y establezca la hora de inicio, la hora de finalización y la hora actual en el javascript.

     <script type="text/javascript">
     $('.countdown').final_countdown({
     start: '1362139200',
     end: '1388461320',
     now: '1387461319'
      });
     </script>
    
  5. Todas las opciones predeterminadas.

    $(document).ready(function() {
    $('.countdown').final_countdown({
    start: '1362139200',
    end: '1388461320',
    now: '1387461319',
    selectors: {
    value_seconds: '.clock-seconds .val',
    canvas_seconds: 'canvas_seconds',
    value_minutes: '.clock-minutes .val',
    canvas_minutes: 'canvas_minutes',
    value_hours: '.clock-hours .val',
    canvas_hours: 'canvas_hours',
    value_days: '.clock-days .val',
    canvas_days: 'canvas_days'
      },
     seconds: {
       borderColor: '#7995D5',
       borderWidth: '6'
     },
      minutes: {
      borderColor: '#ACC742',
      borderWidth: '6'
     },
     hours: {
       borderColor: '#ECEFCB',
       borderWidth: '6'
      },
      days: {
      borderColor: '#FF9900',
      borderWidth: '6'
    }}, function() {
    // Finish callback
    });
    });
    
3
  • estas recibiendo un error? o ? no está del todo claro cuál es su problema. devlin carnate 2 nov 15 a las 15:50
  • no, quiero poner este script y trabajar en wordpressBeltagy 2/11/15 a las 15:54
  • ¿Con qué parte estás teniendo problemas? ha enumerado los pasos, pero no está claro cuál es su problema. devlin carnate 2/11/15 a las 16:12
0

Para agregar archivos Javascript y CSS dentro de Wordpress, necesita usar wp_register_scripty wp_register_stylefunciones dentro de su archivo de tema functions.php .

Así que traduzcamos cada paso:

Include the necessary javascript files at the end of the page.

No es necesario que incluya jquery, ya que Wordpress ya lo incluye. Descargue kinetic.js y jquery.final-countdown.js , y agréguelos a su carpeta de temas en un directorio js .

Luego, en su functions.php agregue lo siguiente:

add_action('wp_enqueue_scripts', 'my_enqueue_scripts');
function my_enqueue_scripts() {
    wp_enqueue_script('kinetic', get_stylesheet_directory_uri() . '/js/kinetic.js', array('jquery'), '', true);
    wp_enqueue_script('countdown', get_stylesheet_directory_uri() . '/js/jquery.final-countdown.js', array('jquery'), '', true);
}

Include the required bootstrap 3 CSS in the head of the page.

En la misma función, agregue la siguiente línea:

wp_enqueue_style('bootstrap_css', '//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css');

Create a countdown timer using the html structure like this

Vea dónde desea incluirlo. Si desea esto en todas las páginas dentro del encabezado, agregue esto dentro del header.php en su carpeta de temas.

Add the following CSS snippet to your CSS file.

Simplemente agregue el código dentro de su hoja de estilo real.

Initialize the countdown timer and set the start time, end time and current time in the javascript.

Puede hacer esto en su propio archivo js. Agregue un archivo countdown.js en su carpeta js y colóquelo como antes:

wp_enqueue_script('countdown_script', get_stylesheet_directory_uri() . '/js/countdown.js', array('jquery'), '', true);

Y en su archivo countdown.js :

jQuery(document).ready(function($) {
    $('.countdown').final_countdown({
        start: '1362139200',
        end: '1388461320',
        now: '1387461319'
    });
});

De esa forma evitará cualquier conflicto.

9
  • realmente muchas gracias, pero hice todo lo que me pediste que hiciera, pero recibí el error en countdown.js, el error es: Uncaught TypeError: No se puede leer la propiedad 'lista' de indefinida (función anónima) @ cuenta regresiva .js? ver = 4.3.1: 1Beltagy 3 de noviembre de 2015 a las 12:41
  • Además, ¿qué pasa con el número 6 "Todas las opciones predeterminadas"? ¿Qué puedo hacerBeltagy 3 de noviembre de 2015 a las 12:43
  • Es solo un ejemplo de las opciones disponibles. Usa lo que necesites. vard 3/11/15 a las 13:13
  • Y para su error, cometí un error en countdown.js, vea la respuesta actualizada. vard 3 de noviembre de 2015 a las 13:14
  • realmente lamento molestarlo, pero realmente soy un novato y necesito ayuda y usted es el único que me respondió, por favor perdóneme por molestarlo, pero por favor ayúdeme, al menos dime por qué la dosis de cuenta regresiva no funciona después de que hice todo pasos que me pediste !!! , Muchas gracias muchoBeltagy 3 de noviembre de 2015 a las 13:36