Widget Popular Posts Samehadaku#2

Setelah sebelum nya saya membagikan cara membuat Widget Popular Post Samehadaku versi blogger, kali ini saya akan membagikan versi WordPress nya. Langsung saja cekidot.

Widget Popular Posts Samehadaku#2
Dagruel

Widget Popular Post Samehadaku untuk WordPress

dalam tutorial kali ini kalian harus menambahkan satu file "php" kedalam folder template kalian.

Pertama buka "cPanel" kemudian "File Manager", didalam "File Manager" cari folder template kalian contoh sparkling (disarankan memakai child theme untuk keamanan) kemudian tambahkan file bernama popular-post-samehadaku.php

Kedua buka Dashboard WordPress kalian dan lihat di "Appereance" > "Theme Editor" seharus nya sudah muncul file yang kalian buat tadi seperti gambar dibawah meski isi nya kosong.

Folder Di WordPress
Dagruel

Sebelum lanjut mengisi file tersebut tempelkan kode di bawah kedalam file function.php

function popular_post_same() {
    $url = urlencode(get_the_permalink());
    $title = urlencode(html_entity_decode(get_the_title(), ENT_COMPAT, 'UTF-8'));
    $media = urlencode(get_the_post_thumbnail_url(get_the_ID(), 'full'));
    include( locate_template('popular-post-samehadaku.php', false, false) );
}

// Ukuran Gambar Popular Post
add_theme_support( 'post-thumbnails' );
  add_image_size( 'popular-dagruel', 150, 210, true ); // 150: lebar gambar, 210: tinggi gambar

// Menampilkan Popular Post Berdasarkan banyak nya view
function viewCount($postID) {
    $countKey = 'post_views_count';
    $count = get_post_meta($postID, $countKey, true);
    if($count==''){
        $count = 0;
        delete_post_meta($postID, $countKey);
        add_post_meta($postID, $countKey, '0');
    }else{
        $count++;
        update_post_meta($postID, $countKey, $count);
    }
}

Jika sudah baru tempelkan kode dibawah kedalam file popular-post-samehadaku.php.

<div class="Dagruel-Slider">
  <div class="Slider-Title">
    <h3>
      Popular Post
      <div class="nav_items_modules">
        <a class="btn prevf">
          <svg style="width:24px;height:24px" viewBox="0 0 24 24">
            <path fill="currentColor" d="M14,7L9,12L14,17V7Z" />
          </svg></a>
        <a class="btn nextf">
          <svg style="width:24px;height:24px" viewBox="0 0 24 24">
            <path fill="currentColor" d="M10,17L15,12L10,7V17Z" />
          </svg>
        </a>
      </div>
    </h3>
  </div>
  <div id="SlideFile" class="load_slider flashit" style="display: block;">Loading.....</div>
  <div class="relat widget-post slidfer SlideFile">
		<?php
      $popular_posts_args = array(
        'posts_per_page' => 5, // 5 jumlah post yang akan ditampilkan
        'meta_key' => 'post_views_count',
        'orderby' => 'meta_value_num',
        'order' => 'DESC'
      );

        $popular_posts_loop = new WP_Query($popular_posts_args);
          while ($popular_posts_loop->have_posts()):
            $popular_posts_loop->the_post();
    ?>
    <div class="AniPost">
      <div class="AniPosx">
        <a class="AniLink" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" alt="<?php the_title(); ?>">
          <div class="content-thumb">
            <div class="ply">
            </div>
              <?php the_post_thumbnail('popular-dagruel'); ?>
            <div class="type TV"> <!--hapus saja jika tidak ingin tampil-->
              <!--Taxonomy bagian type yang biasanya diisi dengan TV, Movie, BD,-->
            </div><!--hapus saja jika tidak ingin tampil-->
            <div class="score"> <!--hapus saja jika tidak ingin tampil-->
              <!--Taxonomy bagian score yang biasanya disi dengan 7.80, 9.12-->
            </div> <!--hapus saja jika tidak ingin tampil-->
          </div>
          <div class="data">
            <div class="title"><?php the_title(); ?></div>
            <div class="type"> <!--hapus saja jika tidak ingin tampil-->
              <!--Taxonomy bagian status yang biasanya disi dengan Completed Ongoing-->
            </div> <!--hapus saja jika tidak ingin tampil-->
          </div>
        </a>
      </div>
    </div>
    <?php endwhile; wp_reset_query(); ?>
  </div>
</div>

Jika kalian ingin menambahkan tampilan "Type", "Score", "Status" seperti gambar dibawah.

tampilan slider samehadaku
Dagruel

Kalian perlu menambahkan custom taxonomy yang dapat kalian cari di google. Untuk tutorial di blog ini nanti.

Jika custom taxonomy sudah ditambahkan maka tempelkan kode dibawah di bagian <!--Taxonomy blablalba--> pada kode diatas.

<?php $terms_as_text = get_the_term_list($post->ID, 'nama_taxonomy');
  if (!empty($terms_as_text)) {
      echo strip_tags($terms_as_text);
  }
?>
Ganti text yang ditandai dengan nama taxonomy kalian buat misal "score", "status", "type".

Langkah selanjutnya tambahkan css berikut kedalam file style.css.

.Dagruel-Slider{margin-bottom:25px;width:100%;background:#fff;border-radius:2px;padding-bottom:0;box-shadow:1px 1px 15px 0 rgba(0,0,0,.06)}.Dagruel-Slider .Slider-Title{border:0;padding:9px 19px;margin-bottom:10px;border-bottom:1px solid #f1f1f1}.Slider-Title h3{float:none;color:#0c70de;font-size:19px;font-weight:500;margin:0}.nav_items_modules{float:right;display:inline-block}a.btn.nextf,a.btn.prevf{padding:0;border:none;color:#222d34;cursor:pointer}a.btn.prevf{border:none!important}a.btn.nextf:hover,a.btn.prevf:hover{color:#0d79e5}.flashit{-webkit-animation:flash linear .5s infinite;animation:flash linear .5s infinite}@-webkit-keyframes flash{0%,to{opacity:1}50%{opacity:.1}}@keyframes flash{0%,to{opacity:1}50%{opacity:.1}}.load_slider{padding:60px;text-align:center;background:#f8f9fb;margin-top:13px;margin-bottom:13px}.relat{overflow:hidden;display:block;position:relative;padding:0 10px;margin:0}.slidfer{margin:0;display:none}.slidfer .AniPost{width:100%}.owl-carousel{display:block!important}.AniPost{float:left;width:20%;position:relative}.AniPost .AniPosx{position:relative;overflow:hidden;margin:10px;transition:all .2s;-webkit-transition:all .2s;-moz-transition:all .2s}a.AniLink{text-decoration:none}.AniPost .AniPosx .content-thumb{padding:140% 0 0;position:relative;overflow:hidden;background:#f1f1f1}.AniPost .AniPosx .content-thumb .ply,.AniPost .AniPosx .content-thumb img{width:100%;height:100%;top:0;position:absolute}.AniPost .AniPosx .content-thumb .ply{z-index:1;background:rgba(0,0,0,.67);visibility:hidden;opacity:0;transition:visibility 0s,opacity .3s linear}.AniPost .AniPosx .content-thumb .ply:before,.score:before{content:'';background-repeat:no-repeat;background-position:center}.AniPost .AniPosx .content-thumb .ply:before{position:absolute;top:0;width:100%;height:100%;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M10,16.5L16,12L10,7.5V16.5Z' fill='%23fff'/%3E%3C/svg%3E")}.AniPost .AniPosx:hover .content-thumb .ply{visibility:visible;opacity:1}.AniPost .AniPosx:hover .content-thumb .ply:before{opacity:15}.AniPost .AniPosx:hover .content-thumb .score,.AniPost .AniPosx:hover .content-thumb .type{display:none}.AniPost .AniPosx .content-thumb .ply svg{color:#fff;font-size:32px;top:44%;position:absolute;left:44%}.AniPost .AniPosx .content-thumb .status{position:absolute;top:13px;left:-22px;line-height:normal;color:#fff;text-transform:uppercase;font-weight:700;z-index:1;padding:2px 18px;font-size:9px;background:#de3b3b;box-shadow:0 2px 2px rgba(0,0,0,.5);-ms-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.AniPost .AniPosx .content-thumb .type{position:absolute;left:0;z-index:1;padding:5px;font-size:11px;font-weight:600;color:#fff;background:#29b6f6;top:7px;text-transform:uppercase}.AniPost .AniPosx .content-thumb .score{position:absolute;right:0;z-index:1;padding:5px;font-size:11px;font-weight:500;bottom:0;background:rgba(0,0,0,.8);color:rgba(255,255,255,.9)}.score:before{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z' fill='%23ffd600'/%3E%3C/svg%3E");display:inline-block;background-size:20px;min-width:20px;min-height:20px;margin-right:2px;vertical-align:middle}.slidfer .AniPost .AniPosx .title{font-size:14px;overflow:hidden;bottom:0;line-height:21px;width:100%;color:#222d34;padding-top:8px;font-weight:500;display:block;text-overflow:ellipsis;white-space:nowrap}.slidfer .AniPost .AniPosx .data{font-size:13px;color:#666;height:auto}.AniPost .AniPosx .data .type{margin-top:3px;color:#757a7d}

Untuk Fungsi Slider nya tempelkan css dan script dibawah kedalam file header.php diatas tag </head>

<link href='https://cdn.statically.io/gh/dagruel/External/main/owl.carousel.min.css' rel='stylesheet'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js'/>

Dua langkah lagi kali ini buka file footer.php dan tempelkan kode dibawah tepat diatas tag </body>

<script>
$(document).ready(function(){$(".SlideFile").owlCarousel({loop:!0,dots:!1,autoplay:!1,pagination:!1,responsive:{0:{items:2,nav:!1},600:{items:4,nav:!1},800:{items:4,nav:!1},1e3:{items:5,nav:!1}}});var e=$(".SlideFile");e.owlCarousel(),$(".nextf").click(function(){e.trigger("next.owl.carousel")}),$(".prevf").click(function(){e.trigger("prev.owl.carousel",[300])})}),$.each(["#SlideFile"],function(e,n){1<=$(n).length&&($("#content").ready(function(){$(n).css("display","none")}),$(".content").load(function(){$(n).css("display","none")}))});
</script>

Waktunya penghabisan, kalian hanya perlu menyalin kode dibawah ini dan tempelkan ditempat yang cocok untuk meletakkan widget tersebut. Klo saya pasti didalam file index.php.

<?php popular_post_same(); ?>

Dan begitulah cara membuat Widget Popular Post seperti Samehadaku di WordPress. Untuk Demo maaf saya tidak dapat menampilkan nya karena saya mencoba ini di LocalHost.

Jika ada yang ingin ditanyakan, berkomentarlah dibawah dengan sopan, sekian dari saya terima kasih.

https://demo.eastheme.com/eastplay/

Comments