Jak dodać plugin Disqus do WordPress bez użycia wtyczki?

Disqus jest popularnym narzędziem, dzięki któremu możemy rozszerzyć funkcjonalność strony o rozbudowany system komentarzy. Jest to zdecydowanie bardziej rozbudowana wersja niż opcja standardowa wbudowana w platformę WordPress.

Poradnik dotyczyć będzie dodania Disqus bez wtyczki dzięki czemu będziemy mieli większa kontrolę nad tym gdzie skrypt będzie ładowany oraz zyskamy funkcjonalność lazy load, która znacząco wpłynie na szybkość ładowania strony. Waga skryptów ładowanych przez Disqus to około 4 MB!

Finalny efekt można sprawdzić tutaj

Dodanie HTML

W pierwszej kolejności musimy dodać HTML w którym będziemy osadzać skrypty. Najczęściej będzie to dolna części strony. Ja wybrałem osadzenie w pliku comments.php

<?php if (comments_open()) :?>
<div  class="disqus" id="disqus_thread"></div>
<?php endif; // comments_open ?>

Skrypt disqusloader, który wspiera lazy load

Używamy biblioteki, którą można pobrać tutaj, a funkcja którą dodamy skrypt to standardowo wp_enqueue_script.

 wp_enqueue_script( 'disqus-lazy', get_template_directory_uri() . '/js/dist/jquery.disqusloader.js', array('jquery'), ' ', true );

Inicjalizacja skryptu

Skrypt musimy dodać w kodzie strony, ponieważ komentarze nie będa ładowane na każdej stronie – tylko w określonych miejscach (warunek is_single() ). Druga sprawa to potrzebujemy pobrać ID postu, a do tego potrzebujemy PHP. ID posta będziemy pobierać za pomocą get_post_meta. Dodając skrypt do footera posiłkujemy sie akcją “wp_footer”.

Script URL będzie do adres url, który wygeneruje Disqus po zarejestrowaniu tam konta. Można znaleźć adres w ustawieniach.

/* Lazy Load Disqus Plugin */

function disqus_lazy_load(){ 

if (is_single()) { ?>
<script>
var options =
{
  scriptUrl: '//username.disqus.com/embed.js',
  /*
    @type: string (url)
    @default: none
    @required
    URL of Disqus' executive JS file. The value is memorized on the first function call
    and ignored otherwise because Disqus allows only one instance per page at the time.
  */

  laziness: 1,
  /*
    @type: int (>=0)
    @default: 1
    Sets the laziness of loading the widget: (viewport height) * laziness . For example:
    0 - widget load starts when at the least a tiny part of it gets in the viewport;
    1 - widget load starts when the distance between the widget zone and the viewport is no more than the height of the viewport;
    2 - 2x viewports, etc.
  */

  throttle: 250,
  /*
    @type: int (milliseconds)
    @default: 250
    Defines how often the plugin should make calculations during the
    processes such as resize of a browser's window or viewport scroll.
    250 = 4 times in a second.
  */

  /*
    @type: function
    @default: none
    Disqus-native options. Check Disqus' manual for more information.
  */
    <?php
    $disqus = get_post_meta($post->ID, 'dis_ident_field', true);
    //if isset & not blank else use $post->ID
    $disqus_id = (!empty($disqus)) ? $disqus : get_the_ID(); 
    ?>
  disqusConfig: function()
  {
    this.page.title       = '<?php esc_html( the_title() ); ?>';
    this.page.url         = '<?php echo get_permalink(); ?>';
    this.page.identifier  = '<?php echo $disqus_id; ?>';
  }
};

// jQuery
$.disqusLoader( '.disqus', options );
</script>

<?php
}};
add_action('wp_footer', 'disqus_lazy_load', 99);