All geek questions in one place

Including jython github plugin in Wordpress

I am trying to enable the plugin from github ( https://github.com/rendro/countdown ) the correct path on my wordpress site.After several hours of research in the code and here on the stack, I still cannot find a way to make it work.

If I use the default method:

1) Add these lines to <head>my file header.php:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="/path/to/jquery.countdown.js"></script>

2) Initializing the plugin with my desired configuration between </head>and <body>in my file header.php, in this case:

<script>

    $(function() {
        var endDate = "November 30, 2015 10:00:00";

            $('.countdown.styled').countdown({
                date: endDate,
                render: function(data) {
                $(this.el).html("<div>" + this.leadingZeros(data.days, 2) + " <span>days</span></div><div>" + this.leadingZeros(data.hours, 2) + " <span>hours</span></div><div>" + this.leadingZeros(data.min, 2) + " <span>minutes</span></div><div>" + this.leadingZeros(data.sec, 2) + " <span>seconds</span></div>");
                }
            });
    });

</script>

3) And then calling the plugin in my html file:

<?php if(is_front_page() ) { ?>

    <div id="cdtoevent" class="countcont">
    <div class="countdown styled"></div>
    </div>

<?php } ?>

It works great!

If, however, I try to do it in the right way

( , wordpress jQuery , , jquery , )?

enqueuing jquery, script functions.php :

wp_enqueue_script('jquery');

function add_cdtoevent() {
        wp_enqueue_script('countdown', get_template_directory_uri() . 'countdown.js', array('jquery'), true );
}

add_action( 'wp_enqueue_scripts', 'add_cdtoevent' );

2) 3) , ! jquery 2) :

jQuery(document).ready(function( $ ) {

    // $ Works! You can test it with next line if you like
    // console.log($);

});

. - , !

, header.php:

<?php if(is_front_page() ) { ?>

     <div id="cdtoevent" class="countcont">
     <div class="countdown styled"></div>
     </div>

<?php } ?>

, footer.php:

<script type="text/javascript">

    $(function() {
        var endDate = "November 14, 2015 10:00:00";

            $('.countdown.styled').countdown({
                date: endDate,
                render: function(data) {
                        $(this.el).html("<div>" + this.leadingZeros(data.days, 2) + " <span>days</span></div><div>" + this.leadingZeros(data.hours, 2) + " <span>hours</span></div><div>" + this.leadingZeros(data.min, 2) + " <span>minutes</span></div><div>" + this.leadingZeros(data.sec, 2) + " <span>seconds</span></div>");
            }
        });
    });

</script>

functions.php:

// Loads JavaScript file with functionality specific to LCQC.

wp_enqueue_script('jquery');

function add_cdtoevent() {
        wp_enqueue_script('countdown', get_template_directory_uri() . 'countdown.js', array('jquery'), true );
}

add_action( 'wp_enqueue_scripts', 'add_cdtoevent' );

jquery (.js)

+4
2

script. : ? , script. - (wp_enqueue_scripts): add_action('wp_enqueue_scripts', 'add_cdtoevent');.

WordPress, . , , , enqueuing jQuery : , , WordPress , .

+1

- !

-, , functions.php.

// Loads JavaScript file with functionality specific to LCQC.

wp_enqueue_script('jquery');

function add_cdtoevent() {
        wp_enqueue_script('countdown', get_template_directory_uri() . 'countdown.js', array('jquery'), true );
}

add_action( 'wp_enqueue_scripts', 'add_cdtoevent' );

, script (- wordpress noConflict()) :

<script type="text/javascript">

jQuery(document).ready(function($) {
    $(function() {
        var endDate = "November 14, 2015 10:00:00";
            $('.countdown.styled').countdown({
                date: endDate,
                render: function(data) {
                        $(this.el).html("<div>" + this.leadingZeros(data.days, 2) + " <span>days</span></div><div>" + this.leadingZeros(data.hours, 2) + " <span>hours</span></div><div>" + this.leadingZeros(data.min, 2) + " <span>minutes</span></div><div>" + this.leadingZeros(data.sec, 2) + " <span>seconds</span></div>");
            }
        });
    });
});

</script>

, , jquery.countdown.js:

jQuery.fn.countdown = function(options) {
  return $.each(this, function(i, el) {
    var $el = $(el);
    if (!$el.data(NAME)) {
      // allow setting the date via the data-date attribute
      if ($el.data(DATA_ATTR)) {
        options.date = $el.data(DATA_ATTR);
      }
      $el.data(NAME, new Countdown(el, options));
    }
  });
};

to:

jQuery(document).ready(function($) {
    jQuery.fn.countdown = function(options) {
      return $.each(this, function(i, el) {
        var $el = $(el);
        if (!$el.data(NAME)) {
          // allow setting the date via the data-date attribute
          if ($el.data(DATA_ATTR)) {
            options.date = $el.data(DATA_ATTR);
          }
          $el.data(NAME, new Countdown(el, options));
        }
      });
    };  
});

!

0

Source: https://habr.com/ru/post/1614473/

More articles: