MEMBUAT TRENDING DI WORDPRESS TANPA PLUGIN
jasa pembuatan website di jakarta selatan - Bagaimana caranya buat trending dari tulisan seperti yang terlihat di header dari situs (blog) centerklik ini? yang memakai wordpress, sesungguhnya banya plugins yang ada tapi kesempatan ini saya juga akan coba membuatnya tanpa ada plugins, atau seperti bebrapa situs berita seperti biasanya.
Buat script untuk Function terlebih dulu seperti berikut ini dan tempatkan di fungtion. php template wordpress yang kamu pakai, script berikut ini dipakai untuk memotong title :
1
2
3
4
5
6
7
8
9
10
11
| /*----------------------------------------*//* Post Title Pendek/*----------------------------------------*/function mts_short_title($after = '', $length){ $mytitle = get_the_title(); if ( strlen($mytitle) > $length ){ $mytitle = substr($mytitle,0,$length); echo $mytitle . $after; } else { echo $mytitle; } |
Kemudian berikan script berikut ini di header saya menempatkan code berikut ini di bawah body bila di theme twenty fourteen, bila di template saya ini saya tempatkan di header. php
1
2
3
4
5
6
7
8
9
10
11
| <div class="trending-articles"> <ul> <li class="firstlink"><?php _e('Trending','nama_template_anda'); ?>:</li> <?php $i = 1; $my_query = new wp_query( 'cat='.'&posts_per_page=4&ignore_sticky_posts=1' ); ?> <?php if ($my_query->have_posts()) : while ($my_query->have_posts()) : $my_query->the_post(); ?> <li class="trending <?php if($i % 4 == 0){echo 'last';} ?>"> <a href="<?php the_permalink() ?>" title="<?php the_title(); ?>" rel="bookmark"><?php mts_short_title('...', 24); ?></a> </li> <?php $i++; endwhile; endif;?> </ul> </div> |
untuk membuat cantik penampilan berikan code css berikut ini atau kamu berikan sendiri code CSS sesuai sama desain kamu sendiri untuk template kamu.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| .trending-articles { background: #2a2a2a; border-bottom: 1px solid #000; float: left; width: 100%; position: relative; z-index: 100;}.trending-articles ul { list-style: none }.trending-articles li { border-right: 1px solid #7D7D7D; color: #fff; float: left; font-size: 12px; font-weight: 400; line-height: 1.2em; margin: 10px 0 9px; padding: 0 13px; text-transform: none;}.trending-articles li.firstlink { border: none; padding-left: 20px;}.trending-articles li.last { border: none }.trending-articles li a { color: #00c0ad; display: block;}.trending-articles li a:hover { color: #fff } |
tersebut disini tutorial untuk buat trending simpel pada wordpress tanpa ada plugin. selamat coba, apabila ada pertanyaan silakan tinggalkan komentar.
0 komentar:
Posting Komentar