AYO! Diskusi Toko Online

DiskusiTokoOnline.com adalah media sharing semua hal tentang Toko Online. Silahkan mendaftar atau login terlebih dahulu untuk mulai berdiskusi.

Login dengan:
Home » Diskusi CMS » Wordpress
Diskusi Toko Online #6 hadir kembali di Malang. Dengan tema “JAGO COPYWRITING, JAGO CLOSING, BANYAK UANG MASUK REKENING”. Kunjungi link untuk mendaftar sekarang: http://bit.ly/distokon6
Laporkan segala bentuk penyimpangan forum, untuk segera ditindak lanjuti. Dengan mention @admin
Optimasi Website WordPress Anda dengan Turbolinks dan Pace.js
  • Kecepatan website merupakan faktor utama dan yang paling kritis untuk terus menerus diawasi. Apalagi website Anda berhubungan dengan penjualan, satu detik semakin lambat loading website Anda, bisa jadi mengurangi revenue atau penghasilan Anda. Nah ada satu tools yang mampu mempercepat website Anda, namanya adalah Turbolinks dan Pace.js. Turbolinks sebenarnya hanya ada pada Ruby On Rails yang memang tujuan utamanya adalah mempercepat loading antar satu halaman ke halaman lain. Kemudian Pace.js adalah tools tambahan yang berguna untuk menginformasikan website sedang dimuat. Berikut ini cara untuk mengintegrasikan kedua hal tersebut pada website Anda. 

    Install plugin Turbolinks for WordPress

    Pertama kali yang harus Anda install adalah plugin bernama Turbolinks for WordPress. Caranya cukup sederhana, masuk ke halaman Plugins -> Add New. Lalu masukkan Turbolinks for WordPress pada search box. Kemudian akan ada plugin wp-turbolinks, install dan aktifkan plugin tersebut.

    Install plugin WP Pace

    Pace ini akan digunakan untuk loading interface. Sehingga ketika turbolinks melakukan request, maka pace akan mempercantik website Anda sehingga terlihat sedang melakukan loading page. Caranya sama, masuk ke halaman Plugins -> Add New. Lalu masukkan WP Pace pada search box. Cari plugin yang bernama WP Pace (biasanya muncul pada halaman pertama paling atas), kemudian install dan aktifkan plugin tersebut.

    Edit Plugin WP Pace

    Next, kita rubah sedikit plugin WP Pace, sehingga ketika turbolinks melakukan loading halaman lain, WP Pace secara otomatis trigger dan menampilkan loading. Masuk ke halaman Plugins -> Installed Plugins. Kemudian edit Plugin WP Pace. Anda akan ditujukan pada halaman Plugin Editor. Di sebelah kanan akan ada daftar file dengan header Plugin Files. Pilih file dengan pathname wp-pace/methods/pace_sitewide.php. Kode file tersebut akan terlihat seperti ini.

    <?php
    if ( ! defined( ‘ABSPATH’ ) ) exit; // Exit if accessed directly
    $options = get_option(‘pace_options’);
    if( !isset($pace_sitewide) && is_array($options) && array_key_exists(‘pace_sitewide’, $options) ){ $pace_sitewide = $options['pace_sitewide']; }
    if( isset($pace_sitewide) && $pace_sitewide == 1){

    wp_enqueue_script( ‘pace’ , plugins_url(‘../js/pace.js’, __FILE__) );
    $pace_dropdown = $options['pace_dropdown'];

    //dont know a better or simpler way to output this
    $pace_color = $options['pace-color'];
    if ( is_user_logged_in() ) { $loggedin = ‘.pace .pace-progress {margin-top: 32px}’; }else{ $loggedin = ”; }
    echo ‘<style>.pace .pace-progress, .pace .pace-activity{background:’. $pace_color .’ !important}’. $loggedin .’</style>’;
    if($pace_dropdown === ‘one’){
    wp_register_style( ‘minimal’, plugins_url(‘../themes/minimal.css’, __FILE__) );
    wp_enqueue_style( ‘minimal’ );
    }

    if($pace_dropdown === ‘two’){
    wp_register_style( ‘flash’, plugins_url(‘../themes/flash.css’, __FILE__) );
    wp_enqueue_style( ‘flash’ );
    }

    if($pace_dropdown === ‘three’){
    wp_register_style( ‘barbershop’, plugins_url(‘../themes/barbershop.css’, __FILE__) );
    wp_enqueue_style( ‘barbershop’ );
    }

    if($pace_dropdown === ‘four’){
    wp_register_style( ‘macosx’, plugins_url(‘../themes/macosx.css’, __FILE__) );
    wp_enqueue_style( ‘macosx’ );
    }

    if($pace_dropdown === ‘five’){
    wp_register_style( ‘fill-left’, plugins_url(‘../themes/fill-left.css’, __FILE__) );
    wp_enqueue_style( ‘fill-left’ );
    }

    if($pace_dropdown === ‘six’){
    wp_register_style( ‘flat-top’, plugins_url(‘../themes/flat-top.css’, __FILE__) );
    wp_enqueue_style( ‘flat-top’ );
    }

    if($pace_dropdown === ‘seven’){
    wp_register_style( ‘cornerindicator’, plugins_url(‘../themes/cornerindicator.css’, __FILE__) );
    wp_enqueue_style( ‘cornerindicator’ );
    }

    if($pace_dropdown === ‘eight’){
    wp_register_style( ‘bounce’, plugins_url(‘../themes/bounce.css’, __FILE__) );
    wp_enqueue_style( ‘bounce’ );
    }

    if($pace_dropdown === ‘nine’){
    wp_register_style( ‘bigcounter’, plugins_url(‘../themes/bigcounter.css’, __FILE__) );
    wp_enqueue_style( ‘bigcounter’ );
    }

    if($pace_dropdown === ‘ten’){
    wp_register_style( ‘centercircle’, plugins_url(‘../themes/centercircle.css’, __FILE__) );
    wp_enqueue_style( ‘centercircle’ );
    }

    }

    Ubah kode tersebut menjadi seperti ini.

    <?php
    if ( ! defined( ‘ABSPATH’ ) ) exit; // Exit if accessed directly
    $options = get_option(‘pace_options’);
    function pace_loader_attributes( $url )
    {
    $optimize = array (
    ‘http://{hostanda}/wp-content/plugins/wp-pace/methods/../js/pace.js?ver=3.8.1′
    );

    if ( in_array( $url, $optimize ) )
    { // this will be optimized
    return “$url’ data-pace-options=’{ \”restartOnPushState\”: true, \”restartOnRequestAfter\”: true }”;
    }

    return $url;
    }
    add_filter( ‘clean_url’, ‘pace_loader_attributes’, 11, 1 );
    if( !isset($pace_sitewide) && is_array($options) && array_key_exists(‘pace_sitewide’, $options) ){ $pace_sitewide = $options['pace_sitewide']; }
    if( isset($pace_sitewide) && $pace_sitewide == 1){

    wp_enqueue_script( ‘pace’ , plugins_url(‘../js/pace.js’, __FILE__));
    $pace_dropdown = $options['pace_dropdown'];

    //dont know a better or simpler way to output this
    $pace_color = $options['pace-color'];
    if ( is_user_logged_in() ) { $loggedin = ”; }else{ $loggedin = ”; }
    echo ‘<style>.pace .pace-progress, .pace .pace-activity{background:’. $pace_color .’ !important}’. $loggedin .’</style>’;
    if($pace_dropdown === ‘one’){
    wp_register_style( ‘minimal’, plugins_url(‘../themes/minimal.css’, __FILE__) );
    wp_enqueue_style( ‘minimal’ );
    }

    if($pace_dropdown === ‘two’){
    wp_register_style( ‘flash’, plugins_url(‘../themes/flash.css’, __FILE__) );
    wp_enqueue_style( ‘flash’ );
    }

    if($pace_dropdown === ‘three’){
    wp_register_style( ‘barbershop’, plugins_url(‘../themes/barbershop.css’, __FILE__) );
    wp_enqueue_style( ‘barbershop’ );
    }

    if($pace_dropdown === ‘four’){
    wp_register_style( ‘macosx’, plugins_url(‘../themes/macosx.css’, __FILE__) );
    wp_enqueue_style( ‘macosx’ );
    }

    if($pace_dropdown === ‘five’){
    wp_register_style( ‘fill-left’, plugins_url(‘../themes/fill-left.css’, __FILE__) );
    wp_enqueue_style( ‘fill-left’ );
    }

    if($pace_dropdown === ‘six’){
    wp_register_style( ‘flat-top’, plugins_url(‘../themes/flat-top.css’, __FILE__) );
    wp_enqueue_style( ‘flat-top’ );
    }

    if($pace_dropdown === ‘seven’){
    wp_register_style( ‘cornerindicator’, plugins_url(‘../themes/cornerindicator.css’, __FILE__) );
    wp_enqueue_style( ‘cornerindicator’ );
    }

    if($pace_dropdown === ‘eight’){
    wp_register_style( ‘bounce’, plugins_url(‘../themes/bounce.css’, __FILE__) );
    wp_enqueue_style( ‘bounce’ );
    }

    if($pace_dropdown === ‘nine’){
    wp_register_style( ‘bigcounter’, plugins_url(‘../themes/bigcounter.css’, __FILE__) );
    wp_enqueue_style( ‘bigcounter’ );
    }

    if($pace_dropdown === ‘ten’){
    wp_register_style( ‘centercircle’, plugins_url(‘../themes/centercircle.css’, __FILE__) );
    wp_enqueue_style( ‘centercircle’ );
    }

    }

    Ubah {hostanda} sesuai dengan host atau domain Anda, misalkan saja diskusitokoonline.com. Selamat mencoba dan semoga bermanfaat. :)