Penggunan loop pada wordpress adalah untuk menampilkan sebuah atau beberapa posting pada blog kita dengan keinginan kita bagaiman kita ingin menampilkan
posting didalam blog kita mesin utama dari wordpress adalah database yang kemudian dipanggil dengan menggunakan Loop Wordpress dan kemudian diteruskan dengan berbagai jenis tempelate Tag kemudian disatukan dengan PHP, HTML dan CSS, Serta Javacripts jika dibutuhkan. Lalu bagaimana struktur dari loop wordpress tersebut, Struktur Standard Loop yaitu

How to made your blog become friendly with the visitor with give information was clearing including attribute on the <a> element, Here I gave few methods how put on tooltip in your blog, that really easy With used sweetTitles javascripts and addEvent javascripts And one file sweetTitles css. The first matter that must be do download sweet title.zip pack include sweetTitles.css addEvent.js and sweetTitles.js and unpack on your computer. Upload sweetTitles.css addEvent.js and sweetTitles.js in to theme wordpress directory that you are use. Now to make script this useful was with edited your theme. Be opened header.php with the notepad editor then input code below :

<style type="text/css" media="screen">
<!-- @import url( <?php bloginfo('stylesheet_directory'); ?>/sweetTitles.css ); -->
</style>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/addEvent.js"></script>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/sweetTitles.js"></script>

Be finish now you can see Tooltip very sweet on the <a> element title. To make your tooltip work better please input title parameters on your <a> element blog. For example see below :

<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?> Post By <?php the_author() ?>"><?php the_title(); ?></a>
<!-- or -->
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a>

You can see Tooltip on my Blog, very sweet title now you just download Sweet Titles javascripts from Dustin Diaz and followed the step above. Good Luck Bro :gh

Menampilkan iklan pada post pertama, dalam tulisan ini aku ingin sharing trik bagaimana menampilkan iklan hanya pada post pertama diantara loop, memang banyak plugin yang memberikan kemudahan bagi kita untuk melakukannya, namun bagaiman kalo kita ingin menampilkan iklan pada post pertama dengan cara manual, yah dengan cara mengedit theme yang kita gunakan.

Langkah pertama buka file index.php atau home.php dengan menggunakan editor kesukaan Anda lalu cari loop berikut :

<?php if(have_posts()) : ?>

Ganti dengan loop berikut ini :

<?php $i = 1; ?>
<?php if(have_posts()) : ?>

Langkah selanjutnya Anda temukan loop berikut :

<?php endwhile; ?>

Ganti dengan loop beikut :

<?php $i++; ?>
<?php endwhile; ?>

Langkah terakhir adalah meletakan kode berikut diantara tag bisa diatas post dibawah judul ataupun dibawah post :

<?php if ($i == 1) { ?>  //MASUKAN KODE IKLAN ANDA DISINI <?php } ?>

contoh :

<?php the_excerpt('Read the rest of this entry &raquo;'); ?>
<?php if ($i == 1) { ?>  //MASUKAN KODE IKLAN ANDA DISINI <?php } ?>

Trik ini bisa Anda improvisasi dengan menambahkan class css anda juga dapat menempatkan iklan tidak hanya pada post pertaman namun bisa anda rubah hanya dengan mengganti $i == 1 terserah Anda.

Kadang banyak orang bingung bagaimana memasang plugin tersebut setelah kita instal tapi tidak muncul pada blog kita dibawah ini adalah sedikit gambaran untuk memasang plugin wp-pagenumber namun untuk struktur theme berbeda untuk masing-masing theme namun yang jelas untuk memasukan kode pada plugin ini cukup mudah hanya meletakan diantara loop yang bener pada wordpress theme. Pada theme yang telah aku buat untuk menampilkan plugin ini biar berkerja maksimal aku telah melakukan setting kode nya namun untuk anda yang tidak tahau bagaimana meletakan kode pada wp-page number silahkan anda baca posting ini.
Untuk loop dasar adalah berikut :

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
 
    <!--Menampilkan isi post--> 
 
<?php endwhile;?>
 
     <!--Apakah yang ingin kita tampilkan sesudah post untuk berapa banyaknya post yang ingin ditampilkan anda bisa setup pada menu setting/reading-->
 
<?php else : ?>
 
    <!--Jika post tidak tampil disini kita bisa menampilkan search,categori,post terakhir dsbnya--> 
 
<?php endif; ?>

Untuk memasang plugin wp-pagenumber sangat mudah buka dengan notepade++ atau editor lainya file archive.php, index.php/home.php, dan search.php lalu cari loop berikut :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
 
    <!--Menampilkan isi post--> 
 
<?php endwhile;?>
 
    <!--Disini kita memasukan atau mereplace kode 'next_posts_link()' and 'previous_posts_link()' dengan kode berikut-->
<?php if(function_exists('wp_page_numbers')) { wp_page_numbers(); } // setting untuk pluigi wp-pagenumber?>	
 
<?php else : ?>
 
    <!--Jika post tidak tampil disini kita bisa menampilkan search,categori,post terakhir dsbnya--> 
 
<?php endif; ?>

Seperti itu kira-kira untuk memasang plugin wp-pagenumber mudah-mudahan posting ini dapat membantu Mas Bambang.

Banyak cara untuk mengembangkan tampilan situs blog dengan script wordpress salah satu nya kita bisa membuat template sendiri caranya sangat mudah yang perlu diketahui adalah tag-tag yang ada dalam HTML serta sedikit source dari theme asli yang kita pakai. Untuk membuat template sendiri kita hanya meletakan perintah berikut pada awal code script yang akan kita buat.

1
2
3
4
5

<?php
/*
Template Name: mytemplate //nama template yang akan kita buat
*/
?>

Lalu memanggil header

1

<?php get_header(); ?>

Sidebar dan footer

1
2

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Kita bisa membuat template kita dengan kreatif kita serta source dari beberapa sites yang bisa kita improvisasi Seperti pada Link ini disini saya menggunakan template terpisah dengan index dan page yang ada dalam theme yang digunakan tapi tidak merubah struktur tampilan theme seperti header,content,sidebar dan footer. Kita juga bisa menyisipkan script seperti javascript dan sebaginya itu lah keunggulan wordpress.org yang terinstal pada hosting sendiri. Ada yang tertarik buat template senrdiri ?.

Membuat menu vertikal dengan css banyak contoh yang bisa kita ambil untuk membuat sebuah navigasi menu seperti pada sidebar dalam situs ini untuk kode css saya melihat pada dynamic drive disitus tersebut banyak sekali contoh kode css yang sangat bagus dan mungkin bergunak untuk kita kembangkan pada wordpress dengan basis php tinggal sedikit melakukan perubahan pada tag yang sourcenya bisa anda lihat dalam wordpress.org disini saya coba berbagi sedikit pengatahuan saya serta cara untuk mengedit sebuah menu pada situs wordpress, sebagaiman wajarnya manusia kadang kita melakukan kesalahan jika ada yang salah mohon dikoreksi pintu sangat terbuka dihati saya untuk mendapatkan koreksi dari anda,disini saya menggunakan Css Menu Arrow Bullet dengan sedikit edit pada kode php serta css dan sentuhan dua backgroud yang saya dapatkan juga dari dynamic drive jadi sebenarnya ini seperti terjemahan yang sudah dibahas dalam situs tersebut cuma saya menambahkan tag php pada penempatan kode htmlnya yang tentu saja sangat berguna untuk kita dalam pengembangan selanjutnya tanpa harus mengedit lagi template jika kita menambahkan suatu link semoga artikel ini memberikan gambaran bagaimana mengedit menu navigasi(khusunya vertikal menu), selamat mencoba.
contoh menu :

• Menggunakan dua buah gambar sebagai background :

• Css Kode:

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

<;style type="text/css">;
 
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
 
.arrowlistmenu{
width: 180px; /*width of menu*/
}
 
.arrowlistmenu .headerbar{
font: bold 14px Arial;
color: white;
background: black url(media/titlebar.png) repeat-x center left;
margin-bottom: 10px; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 4px 0 4px 10px; /*header text is indented 10px*/
}
 
.arrowlistmenu ul{
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/
}
 
.arrowlistmenu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}
 
.arrowlistmenu ul li a{
color: #A70303;
background: url(media/arrowbullet.png) no-repeat center left; /*custom bullet list image*/
display: block;
padding: 2px 0;
padding-left: 19px; /*link text is indented 19px*/
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid #dadada;
font-size: 90%;
}
 
.arrowlistmenu ul li a:visited{
color: #A70303;
}
 
.arrowlistmenu ul li a:hover{ /*hover state CSS*/
color: #A70303;
background-color: #F3F3F3;
}
<;/style>;

• Php Kode :

1
2
3
4
5
6
7
8
9
10
11
12

<div class="arrowlistmenu">
 
<h3 class="headerbar">My Favorite</h3>
<ul>
		<li><?php get_linksbyname('Favorite Link', '<li>', '</li>', '<br />', FALSE, 'name', TRUE); ?></a></li>
</ul>
<h3 class="headerbar">Tools</h3>
<ul>
<?php get_linksbyname('Tools', '<li>', '</li>', '<br />', FALSE, 'name', TRUE); ?>
</ul>
 
</div>

1. Save dua buah gambar tersebut lalu buat sebuah folder dengan nama media dalam directori theme anda.
2. save css kode dengan nama arrowbullet.css lalu upload ke directori theme anda Lalu tambahkan pada header.php :

   1	<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/arrowbullet.css" type="text/css" media="screen" />

3. Untuk menggunakan php kode edit pada bagian sidebar.php untuk tag link get linkbyname sesuaikan dengan nama kategori blogroll anda untuk menampilkan link yang anda inginkan.

Source From Dynamic Drive