‘cara membuat tampilan berbeda di setiap halaman(page) wordpress’ ialah, kita dapat membuat tampilan yang berbeda-beda di setiap page(halaman), kita asumsikan page ialah;
- tampilan home
- tampilan single post
- tampilan tag
- tampilan kategory
- tampilan search
- tampilan archive
- tampilan about, sitemap, contack us
- tampilan author
- serta tampilan lainya
untuk contohnya, silakan buka home page indaam.com terus buka juga halaman-halaman lain, misal about, archive, tag, kategori dan lain-lain, beda kan tampilanya?
bagaimana cara membuatnya?
yang paling pertama, sobat harus paham ini
- web statis
- eksternal css
- html
- css
- sedikit php
- sedikit logika
basa-basi dulu ya 
, pada intinya untuk merubah tampilan website atau blog, yang harus kita lakukan adalah menambahkan cascading style sheet(css). yah css, fungsi sederhana dari css ialah merubah tampilan tag-tag html.
, pada intinya untuk merubah tampilan website atau blog, yang harus kita lakukan adalah menambahkan cascading style sheet(css). yah css, fungsi sederhana dari css ialah merubah tampilan tag-tag html.agar ini(cara membuat tampilan berbeda di setiap halaman(page) wordpress) berfungsi, sobat harus paham penggunaan eksternal file pada css(ada di postingan terdahulu), setelah paham ekternal css. kita akan menggunakan fungsi wordpress yaitu
- if home
- if single
- if tag
- if categories
- dll(lengkapnya ada di codex.wordpress.org)
logikanya, dengan fungsi tadi ‘kita akan memanggil style css yang berbeda di setiap page(halaman). nah, jika cssnya berbeda-beda, otomatis tampilanya juga beda bukan? yah, kita membuat beberapa style css, misal untuk home, single, tag dan lain-lain. apakah semua style di request di setiap page(halaman)? tidak, kita hanya merequest style css tadi sesuai dengan pagenya, bingung?
seperti ini
- jika home kita akan me-request misal home.css(style lainya tidak iku di request)
- jika single kita akan me-request misal single.css(style lainya tidak ikut di request)
- jika tag kita akan me-request misal tag.css(style lainya tidak ikut di requeas)
- dan lain-lain
yah, setiap page(misal home) hanya merequest 1(satu) style css.
weweweweweweh, basa-basinya kepanjangan ya, ini scriptnya, anggap contoh
<!-- start css -->
<?php if ( is_home() ) : ?>
<link rel="stylesheet" href="<?php /*fungsi ini adalah untuk template url misal http://indaam.com/wp-content/themes/nama-folder-themes*/bloginfo('stylesheet_directory'); /* kode ini hanya dijalanan pada home.php atau index.php jika home.php tidak ada */?>/home.css" type="text/css" media="screen" />
<!-- // home.css -->
<!-- // End home.css -->
<?php elseif ( is_single() ) : ?>
<link rel="stylesheet" href="<?php /*fungsi ini adalah untuk template url misal http://indaam.com/wp-content/themes/nama-folder-themes*/bloginfo('stylesheet_directory'); /* kode ini hanya dijalanan pada single.php atau index.php jika single.php tidak ada */ ?>/single.css" type="text/css" media="screen" />
<!-- // single.css -->
<!-- // End single.css -->
<?php elseif ( is_search() ) : ?>
<link rel="stylesheet" href="<?php /*fungsi ini adalah untuk template url misal http://indaam.com/wp-content/themes/nama-folder-themes*/bloginfo('stylesheet_directory');
/* kode ini hanya dijalanan pada search.php atau index.php jika search.php tidak ada*/ ?>/search.css" type="text/css" media="screen" />
<!-- // search.css -->
<!-- // End search.css -->
<?php elseif ( is_404() ) : ?>
<link rel="stylesheet" href="<?php /*fungsi ini adalah untuk template url misal http://indaam.com/wp-content/themes/nama-folder-themes*/bloginfo('stylesheet_directory');
/* kode ini hanya dijalanan pada 404.php atau index.php jika 404.php tidak ada */?>/404.css" type="text/css" media="screen" />
<!-- // 404.css -->
<!-- // End 404.css -->
<?php elseif ( is_tag() ) : ?>
<link rel="stylesheet" href="<?php /*fungsi ini adalah untuk template url misal http://indaam.com/wp-content/themes/nama-folder-themes*/bloginfo('stylesheet_directory');
/* kode ini hanya dijalanan pada tag.php atau index.php jika teg.php tidak ada*/ ?>/tag.css" type="text/css" media="screen" />
<!-- // tag.css -->
<!-- // End tag.css -->
<?php elseif ( is_category() ) : ?>
<link rel="stylesheet" href="<?php /*fungsi ini adalah untuk template url misal http://indaam.com/wp-content/themes/nama-folder-themes*/bloginfo('stylesheet_directory');
/* kode ini hanya dijalanan pada category.php atau archive.php jika category.php tidak ada dan index.php akan dijalankan jika category.php dan archive.php tidak ada */ ?>/category.css" type="text/css" media="screen" />
<!-- // category.css-->
<!-- // End category.css-->
<?php elseif ( is_archive() ) : ?>
<link rel="stylesheet" href="<?php /*fungsi ini adalah untuk template url misal http://indaam.com/wp-content/themes/nama-folder-themes*/bloginfo('stylesheet_directory');
/* kode ini hanya dijalanan pada archive.php dan index.php akan dijalankan jika archive.php tidak ada*/ ?>/archive.css" type="text/css" media="screen" />
<!-- // archive.css -->
<!-- // End archive.css -->
<?php elseif ( is_page() ) : ?>
<link rel="stylesheet" href="<?php /*fungsi ini adalah untuk template url misal http://indaam.com/wp-content/themes/nama-folder-themes*/bloginfo('stylesheet_directory');
/* kode ini hanya dijalanan pada page.php dan index.php akan dijalankan jika page.php tidak ada*/ ?>/page.css" type="text/css" media="screen" />
<!-- // page.css -->
<!-- // End page.css -->
<?php endif; ?>
<!-- salam http://www.indaam.com -->
tambahkan script diatas tepat di atas
</head> buka header.php
fungsi script diatas ialah me-request eksternal css yang berbeda-beda di setiap page,
misal home page maka jadinya seperti ini
<!-- start css -->
<link rel="stylesheet" href="http://url-blog-sobat/wp-content/themes/nama-folder-themes/home.css" type="text/css" media="screen" />
<!-- // home.css -->
sedangkan pada single paga(halaman postingan) jadinya seperti ini
<!-- start css -->
<link rel="stylesheet" href="http://url-blog-sobat/wp-content/themes/nama-folder-themes/single.css" type="text/css" media="screen" />
<!-- // single.css -->
begitu juga untuk page, tag, search, category, archive dan lain-lain ‘akan merequest file ekternal css yang berbeda-beda.
setelah paham fungsi script dan eksternel cssnya, langkah selanjutnya ialah masuk ke directory themes sobat …wp-content/themes/nama-folder-themes/ lalu buat file 8 file css dengan rincian seperti ini
setelah paham fungsi script dan eksternel cssnya, langkah selanjutnya ialah masuk ke directory themes sobat …wp-content/themes/nama-folder-themes/ lalu buat file 8 file css dengan rincian seperti ini
- home.css
- single.css
- search.css
- 404.css
- tag.css
- category.css
- archive.css
- page.css
dan yang tidak kalah penting ialah(untuk mempermudah proses) di dalam folder themes sobat harus ada list file berikut
- home.php //-> ini untuk home page contoh //-> http://www.indaam.com
- single.php //-> ini untuk single post(halaman postingan) contoh //-> http://indaam.com/cara-membuat-tampilan-berbeda-di-setiap-pagehalaman-wordpress
- search.php //-> ini untuk halaman search contoh //-> http://www.indaam.com/?s=css
- 404.php //-> ini untuk halaman not found contoh //-> http://www.indaam.com/nnnn
- tag.php //-> ini untuk halaman tag contoh //-> http://www.indaam.com/tag/cascading-style-sheet/
- category.php //-> ini untuk halaman category contoh //-> http://www.indaam.com/category/css/
- archive.php ini untuk halaman archive contoh //-> http://www.indaam.com/2010/07/
- page.php ini untuk page misal contoh //-> http://www.indaam.com/about
oklah, sekian sharing kali ini, untuk contoh proses pengeditan, misal mau ubah tampilan home page, silakan edit home.php dan home.css, sesuaikan css dan tag-tag htmlnya.
sekedar tambahan, masih ada halaman-halaman lain yang masih bisa dirubah bentuk serta tampilanya, seiring berjalanya waktu, sobat akan memahami itu.
note
jika themes sobat tidak memiliki home.php, anggap saja index.php adalah home.php, seperti komentar yang saya tambahkan diatas, jika home.php tidak ada maka index.php-lah yang dijalankan.
jika themes sobat tidak memiliki home.php, anggap saja index.php adalah home.php, seperti komentar yang saya tambahkan diatas, jika home.php tidak ada maka index.php-lah yang dijalankan.
jika sobat sudah sangat mahir dengan css, silakan kosongkan property serta value cssnya lalu ngodinglah dari awal. merancang itu lebih mudah ketimbang ngedit.
sebenarnya sih, kalau mau buat themes wordpress dua file dan satu folder saja sudah cukup, file apa itu? index.php dan style.css etc
No comments:
Post a Comment