MetaNews ID Membuat Theme Wordpress dengan Framework Responsive

Membuat Theme Wordpress dengan

Framework Responsive
Contents
Apa itu Responsive Design? ............................................................................................................. 2
Membuat Responsive Wordpress Theme dengan Bootstrap ...................................................... 2
1.

Memulai ...................................................................................................................................... 2

2.

Tambahkan folder wpbootstrap

3.

Buat File index.php dalam folder wpbootstrap...................................................... 3

4.

Copy source code dari halaman sample hero ........................................................ 3

5.

Buat File style.css di dalam folder wpbootstrap ............................................... 3

6.

Buat gambar sebagai screenshot theme ....................................................................... 3

7.

Cek di wp-admin ..................................................................................................................... 4

8.

Mengubah File-file Bootstrap menjadi template Wordpress ............................. 5

10.

Mengatur ulang link di file css dan javascript .............................................................................. 7

11.

Membuat Homepage Wordpress ............................................................................................... 12

12.

Menambahkan Kontent dan Navigasi .............................................................................. 15

NAVIGASI .................................................................................................................................. 15

13.

Membuat template untuk Halaman, Post dan daftar Post .................................. 16

dalam folder theme wordpress ....................... 2

a.

Membuat template untuk halaman .............................................................................. 16

b.

Template Sidebar ............................................................................................................. 17

c.

Template Daftar Post (Post Listing) ................................................................... 17

d.

Template Single Post .................................................................................................... 19

14.

Finishing Theme ................................................................................................................... 20

a.

Update Header.................................................................................................................... 20

iv.

Menambahkan Widget di Sidebar .............................................................................................. 21

MetaNews ID Membuat Theme Wordpress dengan Framework Responsive

Apa itu Responsive Design?
Responsive Design intinya membuat halaman sebuah website fluid dan bias
menyesuaikan dengan browser bahkan dengan media yang digunakan, misalnya HP,
android dan sebagainya. (entah nanti ada apa lagi)

Membuat Responsive Wordpress Theme dengan Bootstrap

Bootstrap adalah framework Responsive untuk membuat Website dan aplikasi.
Kita akan memanfaatkannya untuk membuat Theme Wordpress.
Dengan Bootstrap kita tidak usah membuat Theme Wordpress dari Nol.
Tutorial kali ini akan mengambil contoh dari halaman Theme Hero dari
Bootstrap
Kita akan membuat sebuah theme dengan halaman-halaman sebagai berikut :

Homepage dengan desain custom

Halaman About
Halaman Contact
Sebuah section dengan komentar
Sidebar yang bias diisi dengan widget wordpress

1. Memulai
Sebelum kita mulai, beberapa hal ini harus dilakukan :
Install Wordpress
Download dan Unzip Bootstrap
Install Plugin WP Test Drive (install plugin ini jika kita tidak ingin
pengunjung melihat Theme Wordpress saat sedang kita buat)

2. Tambahkan folder wpbootstrap

dalam folder theme wordpress

Tambahkan folder wpbootstrap atau namakan dengan nama apa saja terserah
kita.
Struktur Wordpress nya akan seperti ini

MetaNews ID Membuat Theme Wordpress dengan Framework Responsive

Folder bootstrap berisi file hasil unzip dari Bootstrap :

css
img
js

3. Buat File index.php dalam folder wpbootstrap

4. Copy source code dari halaman sample hero
Copy source code dari halaman sample hero dan paste ke dalam file
index.php
Source code

5. Buat File style.css di dalam folder wpbootstrap

Wordpress membutuhkan file css dengan nama style.css jadi jangan namakan
dengan nama lain. Dalam file style.css tersebut masukkan komentar berikut
ini :
/*
Theme Name: WP Bootstrap
Theme URI: http://teamtreehouse.com/wordpress-bootstrap-themetutorial
Description: A demo theme built to accompany the Treehouse blog
post <a href="http://teamtreehouse.com/wordpress-bootstrap-themetutorial">How to Build a WordPress Theme with Bootstrap</a>.
Author: Zac Gordon
Author URI: http://teamtreehouse.com/
Version: 1.0
Tags: responsive, white, bootstrap
License: Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0)
License URI: http://creativecommons.org/licenses/by-sa/3.0/
This simple theme was built using the example Bootstrap theme
"Basic marketing site" found on the Bootstrap web site
http://twitter.github.com/bootstrap/examples/hero.html
*/

6. Buat gambar sebagai screenshot theme

Buat gambar dengan ukuran 300 x 225 px dan namakan screenshot.png. Contoh
gambarnya seperti di bawah ini :

MetaNews ID Membuat Theme Wordpress dengan Framework Responsive

7. Cek di wp-admin
Sekarang Log in ke wp-admin. Dan klik appearance-theme. Theme baru sudah
ada di sana.

Klik activate dan cek tampilan wordpress baru

MetaNews ID Membuat Theme Wordpress dengan Framework Responsive

Belum ada kode CSS nya.

8. Mengubah File-file Bootstrap menjadi template Wordpress

Umumnya template Wordpress akan terdiri dari file-file berikut ini :
- index.php
- style.css
- header.php
- footer.php
- sidebar.php
Bisa lebih banyak lagi, tetapi kita akan membuat template yang terdiri
atas file-file tersebut saja.
Yang akan kita lakukan adalah mengambil isi HTML dan dimasukan ke dalam
header setiap halaman dan juga di bagian footer halaman.
Masukkan source code untuk file-file di atas
Header source code
Index source code
Footer source code
Sidebar.php masih kosong.

MetaNews ID Membuat Theme Wordpress dengan Framework Responsive

9. Menyisipkan tag header dan Footer dalam index.php
Tag
get_header(), dan
get_footer()
Dua tag tersebut ada dalam function wordpress dan akan menyisipkan header
dan footer di bagian atas dan bawah halaman. Dua tag tersebut akan
bekerja karena kita menamai file-file tersebut dengan header.php dan
footer.php. Tag tersebut tidak akan bekerja jika kita menamai kedua file
tersebut dengan misalnya my_header.php dan my_footer.php
Jadi sekarang index.php akan seperti ini :
<?php get_header(); ?>
<!-- Main hero unit for a primary marketing message or call
to action -->
<div class="hero-unit">
<h1>Hello, world!</h1>
<p>This is a template for a simple marketing or
informational website. It includes a large callout called the hero
unit and three supporting pieces of content. Use it as a starting
point to create something more unique.</p>
<p><a class="btn btn-primary btn-large">Learn more
&raquo;</a></p>
</div>
<!-- Example row of columns -->
<div class="row">
<div class="span4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus.
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
nibh, ut fermentum massa justo sit amet risus. Etiam porta sem
malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">View details &raquo;</a></p>
</div>
<div class="span4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus.
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
nibh, ut fermentum massa justo sit amet risus. Etiam porta sem
malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">View details &raquo;</a></p>
</div>
<div class="span4">

MetaNews ID Membuat Theme Wordpress dengan Framework Responsive

<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac
facilisis in, egestas eget quam. Vestibulum id ligula porta felis
euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor
mauris condimentum nibh, ut fermentum massa justo sit amet
risus.</p>
<p><a class="btn" href="#">View details &raquo;</a></p>
</div>
</div>
<?php get_footer(); ?>

10. Mengatur ulang link di file css dan javascript

Buka header.php dan temukan kode link css seperti di bawah ini
<!-- Le styles -->
<link href="../assets/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
</style>
<link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">

Ganti dengan :
<!-- Le styles -->
<link href="<?php bloginfo('stylesheet_url');?>" rel="stylesheet">
Dalam file style.css tambahkan kode berikut ini :
@import url('bootstrap/css/bootstrap.css');
@import url('bootstrap/css/bootstrap-responsive.css');
body {
padding-top: 60px;
padding-bottom: 40px;
}
Yang baru saja kita lakukan adalah menggunakan tag khusus Wordpress untuk
me-link-an secara otomatis ke CSS Bootstrap ke setiap halaman. Kita akan
melihat function bloginfo() dalam tutorial ini beberapa kali digunakan.
Tampilan blog wordpress kita akan terlihat seperti ini :

MetaNews ID Membuat Theme Wordpress dengan Framework Responsive

Sudah jauh lebih bagus bukan?

Dan sebelum kita melangkah ke file footer.php ada sebuah tag lagi yang
harus kita ketahui. Function wp_head() adalah hook penting yang
memungkinkan para developer plugin bias menambahkan css atau javascript
ke dalam theme kita.
Jika kita tidak menyisipkan tag tersebut maka kemungkinan beberapa plugin
tidak akan berfungsi dengan baik.
Kita juga akan membersihkan beberapa tags yang tidak berguna di
header.php sehingga kodenya akan terlihat seperti ini :
<head>
<meta charset="utf-8">
<title>Bootstrap, from Twitter</title>
<meta name="viewport" content="width=device-width, initialscale=1.0">
<!-- Le styles -->
<link href="<?php bloginfo('stylesheet_url');?>"
rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>

MetaNews ID Membuat Theme Wordpress dengan Framework Responsive

<script
src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<?php wp_enqueue_script("jquery"); ?>
<?php wp_head(); ?>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" datatarget=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="<?php echo site_url(); ?>"><?php
bloginfo('name'); ?></a>
<div class="nav-collapse collapse">
<ul class="nav">
<?php wp_list_pages(array('title_li' => '', 'exclude'
=> 4)); ?>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container">
Kemudian di footer.php. dalam file sample yang kita download ada banyak
banyak javascript yang mubazir, kita bersihkan dan tampilannya akan
seperti ini :
<hr>
<footer>
<p> Company 2012</p>
</footer>

MetaNews ID Membuat Theme Wordpress dengan Framework Responsive

</div> <!-- /container -->
<!-- Le javascript
================================================== -->
<script src="../assets/js/jquery.js"></script>
<script src="../assets/js/bootstrap.js"></script>
</body>
</html>
Kemudian kita tambahkan tag wp_footer(). Tambahkan tag tersebut tepat
sebelum </body>.
Setelah update berarti footer.php anda akan terlihat seperti ini :
<hr>
<footer>
<p> Company 2012</p>
</footer>
</div> <!-- /container -->
<?php wp_footer(); ?>
</body>
</html>
Kemudian tambahkanJavascript sehingga Wordpress akan me-loading
Javascript. Yaitu dengan menambahkan function wp_enqueue_script().
Pertama kita akan menggunakannya agar Wordpress meload JQuery pada wp
_head(). Buka file header.php dan tambahkan function diatas sehingga akan
terlihat seperti ini :
<?php wp_enqueue_script("jquery"); ?>
<?php wp_head(); ?>
Ingat!! Function wp_head() adalah function yang akan digunakan oleh
plugin dan theme gunakan untuk menambahkan CSS dan Javascript pada
header.php.
Untuk melakukan ini kita harus membuat sebuah file functions.php dan
meload Javascript dari sana.
Buat file function functions.php di folder yang sama dengan header.php

MetaNews ID Membuat Theme Wordpress dengan Framework Responsive

Dan tambahkan kode berikut ini :

<?php
function wpbootstrap_scripts_with_jquery()
{
// Register the script like this for a theme:
wp_register_script( 'custom-script',
get_template_directory_uri() . '/bootstrap/js/bootstrap.js', array(
'jquery' ) );
// For either a plugin or a theme, you can then enqueue the
script:
wp_enqueue_script( 'custom-script' );
}
add_action( 'wp_enqueue_scripts', 'wpbootstrap_scripts_with_jquery'
);
?>
Untuk menguji apakah ini bekerja atau tidak, buka website dan minimize
sehingga mirip dengan tampilan dalam HP atau android kemudian menu akan
berubah menjadi sebuah ikon yang bias diklik menjadi dropdown menu.
Seperti terlihat di bawah ini :

MetaNews ID Membuat Theme Wordpress dengan Framework Responsive

11. Membuat Homepage Wordpress

Sampai disini kita telah mempunyai sebuah template static. Kita akan
membuat sebuah template yang dinamis dengan membuat sebuah halaman
homepage dan menampilkannya dalam halaman Wordpress dan menggantikan
halaman HTML yang sekarang kita punyai.
Untuk melakukan ini pada halaman admin Wordpress, klik pages, klik new
dan buatlah sebuah halaman dengan judul Home dan klik HTML atau text.
Copy kode yang terdapat di index.php dan paste kan di halaman Home tadi.
Seluruh kode dalam index.php harus dicopy semua termasuk headed an footer
include :
<?php get_header(); ?>
<?php get_footer(); ?>

MetaNews ID Membuat Theme Wordpress dengan Framework Responsive

Agar isi halaman Homepage yang tadi kita buat dalam halaman admin dapat
kembali ke template wordpress secara dinamis kita membutuhkan sebuh
function yang paling popular dalam wordpress yaitu Loop.
Loop seperti artinya adalah pengulangan, loop wordpress juga akan
mengulang dalam seluruh halaman dan post wordpress berbagai informasi
seperti judul, isi, tanggal, pengarang dan juga komentar yang berkaitan.
Kode loop dasar seperti ini :
<?php if(have_posts()) : while(have_posts()) : the_post(); ?>
<?php endwhile; else: ?>
<p><?php _e(Sorry, no posts matched your criteria);
?></p>
<?php endif; ?>
Halaman index.php yang sudah disisipi loop akan Nampak seperti ini:
<?php get_header(); ?>
<?php if(have_posts()): while(have_posts()) : the_post(); ?>
<?php endwhile; else: ?>
<p><?php _e(Sorry, no posts matched your criteria);
?></p>
<?php endif; ?>
<?php get_footer(); ?>
Dan sekarang kita akan menambahkan judul dan content halaman. Kode untuk
judul : the_title() dan kode untuk content the_content(). Tambahkan kode
tersebut ke dalam index.php sehingga kode index.php akan kelihatan
seperti ini :
<?php get_header(); ?>
<?php if(have_posts()): while(have_posts()) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<?php the_content(); ?>
<?php endwhile; else: ?>
<p><?php _e(Sorry, no posts matched your criteria);?></p>
<?php endif; ?>
<?php get_footer(); ?>
Sekarang kita test hasilnya, namun sebelumnya ubah dahulu setting
Wordpress. Dalam admin area klik Setting Reading Front page displays
Ubah dari Your Latest Posts menjadi a static page dan pilih dalam
Front page halaman Home.

MetaNews ID Membuat Theme Wordpress dengan Framework Responsive

Klik Save Changes dan kemudian coba refresh halaman Wordpress kita.
Kita juga bias membuat file front-page.php sebagai Home page. Save as
index.php dan beri nama front-page.php. Hapus the_title() karena kita
tidak ingin judul Home Nampak disana.
Kode dalam front-page.php seperti ini:
<?php get_header(); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<?php the_content(); ?>

<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
<?php get_footer(); ?>
Edit content dalam halaman Home
Hapus button yang berada di bawah heading <h2>
Sekarang coba buka website wordpress kita.
Tampilannya sekarang harusnya seperti di bawah ini :

MetaNews ID Membuat Theme Wordpress dengan Framework Responsive

12.

Menambahkan Kontent dan Navigasi

Tambahkan halaman About, Contact, News melalui admin area. Isi

dengan apa saja.
NAVIGASI
Kita akan mengubah navigasi (menu) static menjadi menu dinamis yang
akan secara otomatis menampilkan halaman yang kita tampilkan melalui
admin area.
Dalam header.php cari unordered list(ul) dengan class na dan hapus list
itemnya.
Kemudian ganti dengan kode list page Wordpress wp_list_pages()
<ul class=nav>
<?php wp_list_pages(array(title_li=>)); ?>
</ul>
Buka kembali website Wordpress, dan kita akan melihat halaman-halaman
yang kita buat Nampak di menu navigasi Wordpress.
Kita telah punya menu navigasi yang telah bekerja dengan baik.
Tetapi Karen markup navigasi dari Wordpress sedikit berbeda dengan
Bootstrap, maka kita akan mengubah sedikit dari class untuk menu yang
sedang aktif.
Dalam folder theme Bootstrap buka bootstrap > css dan buka file
bootstrap.css, carilah kode di bawah ini:

MetaNews ID Membuat Theme Wordpress dengan Framework Responsive

.navbar-inverse .nav .active > a,
.navbar-inverse .nav .active > a:hover,
.navbar-inverse .nav .active > a:focus,
Dan tambahkan di bawahnya kode di bawah ini :
.navbar-inverse .nav .current-page_item a,
.navbar-inverse .nav .current-page_item a:hover,
.navbar-inverse .nav .current-page_item a:focus,
.navbar-inverse .nav .current-page_parent a,
.navbar-inverse .nav .current-page_parent a:hover,
.navbar-inverse .nav .current-page_parent a:focus,

13. Membuat template untuk Halaman, Post dan daftar Post

a. Membuat template untuk halaman
Buka file index.php dan save as dengan nama page.php. File ini akan
menjadi template untuk setiap halaman yang kita buat.
Yang pertama harus diubah adalah kata Sorry, no posts matched your
criteria. Dengan misalnya Sorry, halaman yang anda tuju tidak ada.
Kemudian kita akan membuat halaman menjadi 2 kolom dengan menggunakan
markup dari bootstrap. Tambahkan div dengan class row, span8 dan
span4 dari bootstrap. Span8 akan kita gunakan untuk content halaman,
dan span4 untuk sidebar.
Isi kode keseluruhan dari page.php menjadi seperti di bawah ini :

<?php get_header(); ?>

<div class=row>
<div class=span8>
<?php if(have_posts()) : while (have_posts()) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<?php the_content(); ?>
<?php endwhile; else:?>
<p><?php _e(Maaf, halaman yang anda tuju tidak ada.); ?></p>

MetaNews ID Membuat Theme Wordpress dengan Framework Responsive

<?php endif; ?>
</div>
<div class=span4>
</div>
</div>
<?php get_footer(); ?>
Karena kita juga akan menampilkan sidebar di beberapa template lainnya
maka kita akan mempergunakan tag Wordpress get_sidebar() yang cara
kerjanya sama dengan get_header maupun get_footer.
Untuk membuat sidebar, buatlah sebuah file bernama sidebar.php dan
tulis kode berikut ini :
<h2>sidebar</h2>

b. Template Sidebar
Kita akan memodifikasi template sidebar nanti.
Sekarang buka dulu page.php dan tambahkan tag ger_sidebar() di dalam
div span4.
<div class=span4>
<?php get_sidebar(); ?>
</div>

c. Template Daftar Post (Post Listing)

Template daftar post agak sedikit berbeda dan juga sedikit rumit.
Karena template tersebut nantinya bukan hanya menampilkan judul da nisi
dari post, tetapi menampilkan judul, permalink, tanggal dan lain-lain.
Untuk membuat template tersebut buka page.php dan save as sebagai
home.php. Dalam wordpress home.php diperuntukan untuk daftar post. Kita
akan mempergunakan home.php ini sebagai halaman News.
Tambahkan tag h1 untuk kata News di bagian paling atas dari content.
Tag ini harus berada di atas loop.

MetaNews ID Membuat Theme Wordpress dengan Framework Responsive

Loop yang kita gunakan disini akan berulang untuk setiap post. Kita
gunakan tag h2 untuk judul dari post.
Kita juga harus menambahkan tag _the_permalink() yang akan menjadi link
untuk setiap post.
Markup dari kode link seperti di bawah ini :
<h2><a href="<?php the_permalink(); ?>"><?php the_title();
?></a></h2>
Perubahan lain yang akan kita lakukan
- Ubah kata Sorry no results menjadi Maaf tidak ada post
- Tambahkan tanggal dengan format misalnya
Monday, October 1st, 2012
Kita gunakan tag the_time()
the_time(l, F jS, Y)
- Tambahkan tag hr untuk memisahkan masing-masing post
Kode akhir dari home.php

<?php get_header(); ?>

<div class="row">
<div class="span8">
<h1>Berita</h1>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h2><a href="<?php the_permalink(); ?>"><?php the_title();
?></a></h2>
<p><em><?php the_time('l, F jS, Y'); ?></em></p>
<hr>

<?php endwhile; else: ?>

<p><?php _e("Sorry, there are no posts."); ?></p>
<?php endif; ?>
</div>

MetaNews ID Membuat Theme Wordpress dengan Framework Responsive

<div class="span4">
<?php get_sidebar(); ?>
</div>
</div>

<?php get_footer(); ?>

Untuk melihat hasilnya ubah dulu setting dari admin area
Setting > Reading
Dalam drop down Posts Page pilih Home
Refresh website dan lihat hasilnya.

d. Template Single Post

- Buka page.php dan save as dengan nama single.php
- Tambahkan tanggal dengan kode berikut ini :
<p><em><?php the_time(l, F jS, Y); ?></em></p>
- Tambahkan tag untuk komentar yaitu dengan tag comments_template()
- Kode final dari single.php :
<?php get_header(); ?>
<div class="row">
<div class="span8">
<?php if ( have_posts() ) : while ( have_posts() ) :
the_post(); ?>
<h1><?php the_title(); ?></h1>
<p><em><?php the_time('l, F jS, Y') ?></em></p>
<?php the_content();?>
<hr>
<?php comments_template(); ?>
<?php endwhile; else: ?>

MetaNews ID Membuat Theme Wordpress dengan Framework Responsive

<p><?php _e('Sorry, no this page does not exist.'); ?></p>
<?php endif; ?>
</div>
<div class="span4">
<?php get_sidebar(); ?>
</div>
</div>
<?php get_footer(); ?>

14. Finishing Theme

a. Update Header
i. Kita ingin menampilkan judul post beriringan dengan nama website.
Caranya:
- Buka header.php
- Ganti tag <title> agar menjadi dinamis dengan tag
wp_title(|, 1, right);
- Tag ini akan menampilkan nama website. Kita kombinasikan untuk
menampilkan judul post juga dengan kode berikut ini :
<title><?php wp_title(|, 1, right);?><?php
bloginfo(name); ?></title>
ii. Membuat Judul Website Dinamis
Judul website akan kita atur berada di sebelah kiri atas dan juga
menjadi link ke halaan homepage kita.
Tetapi kita sudah melakukannya dengan kode :
<a class="brand" href="<?php echo site_url(); ?>"><?php
bloginfo('name'); ?></a>

iii. Menghilangkan Home dari menu Navigasi

Cek id dari halaman home yang kita buat di dalam admin area.
Kemudian ubah kode berikut ini dalam header.php

MetaNews ID Membuat Theme Wordpress dengan Framework Responsive

<?php wp_list_pages(array('title_li' => '')); ?>
Menjadi
<?php wp_list_pages(array('title_li' => '', 'exclude'
=>id_home)); ?>
id_home diganti dengan no id dari halaman home kita.
iv. Menambahkan Widget di Sidebar
Buka file functions.php dan tambahkan kode berikut ini sebelum
tag penutup phpnya:
if (function_exists('register_sidebar'))
register_sidebar(array(
'before_widget'=>'',
'after_widget'=>'',
'before_title'=>'<h3>',
'after_title'=>'</h3>',
));
dan sidebar.php diubah menjadi dinamis dengan kode berikut ini :
<?php if (!function_exists('dynamic_sidebar') ||
!dynamic_sidebar()) :?>
<?php endif; ?>