Anda di halaman 1dari 44

0

MODUL TRAINING
WEBSITE SEKOLAH

SVARNA CORP

SVARNA CORP|MODUL TRAINING WEBSITE SEKOLAH

Perkenalan dan Installasi WordPress

Ada dua jenis wordpress yang beredar, pertama adalah layanan pembuatan blog, Anda bisa
mengaksesnya pada wordpress.com, dan ada versi free software-nya yang bisa Anda download
dan kostumisasi sendiri dilocalhost kemudian diupload ke hosting, agar bisa diakses
menggunakan domain milik Anda sendiri.
Jika Anda registrasi di wordpress.com maka nantinya blog Anda akan memiliki
namanamaanda.wordpress.com. Namun berbeda halnya jika Anda menggunakan yang free
software, website Anda akan bisa di akses dengan domain Anda sendiri misalkan
www.namaanda.com. Untuk domain sendiri paling tidak yang harus dimiliki adalah hosting dan
domain. Jika Anda belum mengetahui hosting dan domain tidak apa. Akan dijelaskan
dipertemuan selanjutnya.
Namun jika Anda ingin mencoba wordpress di PC Anda, maka Ada software yang perlu
didownload terlebih dahulu, pertama adalah wordpress itu sendiri, dan yang kedua adalah
webservernya, yakni xampp. Xampp merupakan web server yang nanti fungsinya seperti sebuah
wadah, dimana tempat file-file dan database itu diletakkan, sehingga script php yang ada di
tubuh wordpress bisa di eksekusi.
Pertama
silahkan
download
terlebih
dahulu
wordpress
yang
terbaru
di
sinihttp://wordpress.org/latest.zip, lalu silahkan download xamppnya terlebih dahulu di
sinihttps://www.apachefriends.org/download.html silahkan pilih XAMPP for windows lalu pilih
yang versinya PHP 5.5.x. Mengikuti perkembangan zaman. :)
Setelah semua selesai di download, lalu silahkan langkah pertama adalah melakukan installasi
XAMPP dan yang kedua adalah Installasi WordPressnya.

SVARNA CORP|MODUL TRAINING WEBSITE SEKOLAH

Installasi XAMPP
1.

Dobel klik file xampp.exe, selanjutnya akan muncul jendela installer language seperti di
bawah ini:

2.

Pilih bahasa yang diinginkan misalkan Bahasa Inggris (English), lalu Klik OK.

3.

Jika muncul pesan error maka abaikan saja dan lanjutkan dengan klik OK dan YES.

4.

Akan muncul jendela yang isinya meminta Anda menutup semua aplikasi yang sedang
berjalan. Jika semua aplikasi sudah ditutup, klik tombol Next.

SVARNA CORP|MODUL TRAINING WEBSITE SEKOLAH

5.

Pilih aplikasi yang akan diinstal. Centang semua pilihan dan klik tombol Next.

SVARNA CORP|MODUL TRAINING WEBSITE SEKOLAH

6.

Tentukan lokasi folder penyimpanan file-file dan folder XAMPP. Secara default akan
diarahkan ke lokasi c:\xampp. Namun jika Anda ingin menyimpannya di folder lain bisa
klik browse dan tentukan secara manual folder yang ingin digunakan. Jika sudah selesai,
lanjutkan dan klik tombol Install.

7.

Tunggu beberapa menit hingga proses intalasi selesai. Jika sudah muncul jendela seperti di
bawah ini, klik tombol Finish untuk menyelesaikannya.

8.

Berikutnya, akan muncul jendela dialog seperti gambar di bawah ini yang menanyakan Anda
apakah mau langsung menjalankan aplikasi XAMPP atau tidak. Jika ya, maka klik YES.

SVARNA CORP|MODUL TRAINING WEBSITE SEKOLAH

Cara Menjalankan Aplikasi XAMPP


1.

Buka aplikasi XAMPP, bisa melalui Start Menu atau Desktop, dan klik icon XAMPP.

2.

Klik tombol Start pada kolom Action untuk aplikasi yang akan dijalankan.

SVARNA CORP|MODUL TRAINING WEBSITE SEKOLAH

3.

Buka browser, lalu ketik http://localhost/xampp di address bar. Jika muncul tampilan
seperti gambar di bawah ini, instalasi telah berhasil.

SVARNA CORP|MODUL TRAINING WEBSITE SEKOLAH

Installasi WordPress
WordPress membutuhkan database penyimpanan, sedangkan yang didownload sebelumnya
adalah scriptnya saja, nah database penyimpanan ini dihandle oleh MySQL Database. Dan tidak
bisa begitu ada, melainkan harus dipersiapkan terlebih dahulu.
Baik kita akan membuat databasenya terlebih dahulu menggunakan phpmyadmin. Arahkan
mouse lalu pilih menu Databases, dibagian atas :

SVARNA CORP|MODUL TRAINING WEBSITE SEKOLAH

Setelah itu nanti akan muncul tampilan seperti di bawah ini :

SVARNA CORP|MODUL TRAINING WEBSITE SEKOLAH

Kemudian silahkan masukkan di bagian form inputan Create Database dengan


nama dbwordpress, lalu klik tombol create, maka akan muncul notifikasi database sudah di buat

SVARNA CORP|MODUL TRAINING WEBSITE SEKOLAH

10
Jika database sudah dibuat maka nanti akan muncul di bagian samping dari phpmyadmin, nama
database yang sudah dibuat, tampilannya adalah seperti ini :

Dan apabila wpdbnya di klik maka akan muncul halaman seperti ini,

yang kurang lebih berarti databasenya belum terisi apapun, alias masih kosong. Pembuatan
database cukup sampai disini saja, sedangkan pembuatan table nanti akan dilakukan secara
otomatis pada installasi wordpressnya. Oke, masuk ke langkah selanjutnya.
Ketika Anda menginstall xampp, lalu menjalankan service apache dan mysql. Maka secara
otomatis akan terdapat koneksi Antara apache dan mysql. Koneksi ini memiliki authentikasi
default yang dibawa oleh xampp. Informasi merupakan informasi yang dibutuhkan ketika Anda
akan menginstall wordpress nantinya. Informasi default tersebut terdiri dari login connection.
Terdiri dari hostname, username, dan password, yang digunakan oleh apache untuk terhubung
kedalam database mysql.
Secara default informasinya adalah sebagai berikut :

SVARNA CORP|MODUL TRAINING WEBSITE SEKOLAH

11
Hostname
Username
Password

:
:
:

localhost
root

Passwordnya kosong. Dan database yang akan kita gunakan nanti adalah dbwordpress. Inilah
informasi yang akan digunakan ketika installasi nanti. Oke, kita lanjut.

Ekstrak File Zip WordPress


Sebelumnya Anda telah mendownload wordpressnya, saya menggunakan wordpress-3.9.1.zip.
Silahkan kopikan file tersebut letakkan di
1

c:\xampp\htdocs

kopikan seperti pada gambar di bawah ini

SVARNA CORP|MODUL TRAINING WEBSITE SEKOLAH

12

Mengapa dikopikan ke folder c:\xampp\htdocs, ini adalah pertanyaan mendasar yang


fundamental. Script php bawaan wordpress, itu bisa dieksekusi oleh web server xampp, jika
Anda meletakkannya di c:\xampp\htdocs. Tidak hanya script php wordpress, tetapi semua script
php. Folder tersebut merupakan direktori / path default dari intepreter phpnya. Intepreter itu
semacam daemon, aplikasi yang berjalan ketika service apache dijalankan, untuk bisa
mengeksekusi filenya. Jika sebelumnya Anda telah mempelajari jenis bahasa pemrogaman
SVARNA CORP|MODUL TRAINING WEBSITE SEKOLAH

13
seperti Visual Basic, maka hasil interpreter / kompilasinya adalah EXE-cutable. Sedangkan di
PHP hasilnya adalah HTML.
Langkah selanjutnya adalah mengekstrak file zip tersebut dengan cara klik kanan | extract. Saya
menggunakan WinRar untuk mengekstrak file tersebut.

Secara otomatis nantinya akan menghasilkan sebuah folder baru, bernama wordpress yang
letakknya adalah di direktori yang sedang Anda akses, yakni di

c:\xampp\htdocs\wordpress

seperti pada gambar dibawah ini

SVARNA CORP|MODUL TRAINING WEBSITE SEKOLAH

14

Apabila anda masuk ke dalam direktori wordpress, akan terdapat file-file yang digunakan oleh
wordpress nantinya. Oke setelah selesai mengekstrak langkah selanjutnya adalah, kita akan
installasi wordpressnya

Langkah Terakhir Installasi WordPress


Yang perlu Anda lakukan adalah buka browser internet kesayangan Anda, saya menggunakan
Chrome, kemudian silahkan masuk ke alamat.
SVARNA CORP|MODUL TRAINING WEBSITE SEKOLAH

15

http://localhost/wordpress

Localhost itu adalah nama lain dari komputer milik Anda yang sedang menjalankan service
Apache dan Mysql bawaan dari XAMPP. Browser memanggilnya localhost. Nah /wordpress itu
merupakan letak di mana file-file wordpress, nama wordpress diambil dari folder hasil ekstrak
file zip.
Lalu akan muncul tampilan seperti ini :

Ini adalah pernyataan lumrah dari wordpress, karena tidak ada file wp-config.php yang
memberikan koneksi wordpress ke Apache dan MySQLnya. Lalu? Kita ikuti langkah
selanjutnya. Silahkan klik tombol Create A Configuration File seperti pada gambar di bawah ini

Setelah tombol Create Configuration File di klik maka nanti akan muncul tampilan seperti ini,
yang menyatakan apa saja yang dibutuhkan ketika akan melakukan installasi wordpress, seperti :

SVARNA CORP|MODUL TRAINING WEBSITE SEKOLAH

16

Nama Database yang akan digunakan, Hostname, Username, Password dan prefix. Prefix
merupakan awalan dari nama table yang akan dibuat. Prefix diusahakan jangan default, karena
hacker akan dengan mudah bisa mengetahui struktur table Anda. Intinya prefix default itu adalah
untuk alasan keamanan.
Silahkan isikan formnya sesuai dengan informasi default yang sudah saya jelaskan sebelumnya.
Yakni database name di isi dengan wpdb, user name di isi dengan root, password di kosongkan ,
dan database host di isikan localhost, yang terakhir adalah Table prefix isikan saja dengan wp_
seperti pada gambar di bawah ini.

SVARNA CORP|MODUL TRAINING WEBSITE SEKOLAH

17

Setelah itu klik submit . Nanti akan muncul tampilan seperti ini :

dan nanti akan terjadi proses yang lumayan agak lama. Jika sudah selesai nanti Anda akan masuk
ke dalam halaman seperti di bawah ini :

SVARNA CORP|MODUL TRAINING WEBSITE SEKOLAH

18

Silahkan isi dengan informasi akun Anda, disini saya mengisikan Site Title atau judul dari
websitenya yakni Web PertamaQu. Kemudian di bagian username saya isikan ShaLut, dan
passwordnya juga saya isikan shaviralutfiani. Dan emailnya adalah shalut.25@gmail.com. Ini
adalah informasi login yang akan digunakan ketika Anda akan login sebagai admin untuk
melakukan posting artikel dan semua yang berbau administrasi di back office. Atau menu admin.
Setelah itu cukup klik install wordpress. Dan jika sukses maka tampilannya adalah akan menjadi
seperti ini

SVARNA CORP|MODUL TRAINING WEBSITE SEKOLAH

19

Anda cukup klik login saja, maka Anda akan dibawa menuju ke halaman pengisian area login,
seperti di bawah ini

Untuk login sebagai admin di kemudian hari, Anda tinggal buka saja browser, lalu isikan alamat
di address barnya
1

http://localhost/wordpress/wp-login.php

Setelah Anda login maka wordpress akan menampilkan halaman admin dashboardnya, bagian
depan dari halaman Admin berisi informasi seputar wordpress website Anda, dan informasi
terbaru dari situs official wordpress, mengenai perkembangan wordpress. Disitu juga ada
shortcut untuk membuat post.

SVARNA CORP|MODUL TRAINING WEBSITE SEKOLAH

20

Nah, sampai sini Anda telah sukses melakukan installasi wordpress. Untuk melihat halaman
depan website Anda yang menggunakan wordpress, silahkan arahkan mouse Anda ke button
bergambar rumah, di samping kiri atas. Lalu nanti akan muncul hover button, Anda bisa klik
Visit Site.

SVARNA CORP|MODUL TRAINING WEBSITE SEKOLAH

21

lalu Anda akan dilarikan menuju halaman depan dari wordpress milik Anda.

SVARNA CORP|MODUL TRAINING WEBSITE SEKOLAH

22

CARA MENGGANTI TEMPLATE


Pastikan anda memiliki theme untuk website anda. Jika anda belum
memilikinya, maka anda bisa mencari themes sesuai keinginan anda. Saya
akan contohkan untuk mendownload themes dari website wordpress
https://wordpress.org/themes/. Di situ terdapat beberapa pilihan themes.

SVARNA CORP|MODUL TRAINING WEBSITE SEKOLAH

23

Kali ini saya akan contohkan themes Dazzling. Klik Dazzling maka akan
muncul halaman berikut.

SVARNA CORP|MODUL TRAINING WEBSITE SEKOLAH

24

Klik Preview jika anda ingin melihat demonya terlebih dahulu, jika
tidak anda bisa langsung klik Download untuk mengunduh file template
nya. Setelah file selesai didownload, maka pindahkan/kopikan file ke folder
tempat file wordpress disimpan tadi yaitu klik Local Disk (C:) klik
htdocs klik wordpress klik wp-content klik themes. Lalu
extract filenya, caranya seperti dibawah ini.

SVARNA CORP|MODUL TRAINING WEBSITE SEKOLAH

25
Tunggu sampai proses extract file selesai maka akan muncul folder
hasil extractnya seperti gambar di bawah ini.

Kemudian masuk ke dashboard website anda, pilih menu yang ada di


sisi sebelah kiri. Klik Appearance Themes.

SVARNA CORP|MODUL TRAINING WEBSITE SEKOLAH

26
Lalu akan muncul seluruh tema yang ada di folder serta themes yang
kita download. Untuk mengaktifkan themesnya, arahkan mouse ke themes
yang kita pilih lalu klik Activate.

Jika aktivasi themesnya sudah selesai maka aka nada pemberitahuan


seperti di bawah ini.

Untuk mengetahui hasil dari pemasangan themanya, kita bisa klik


Visit Site (tanda panah merah). Berikut ini hasil tampilan dengan tema yang
baru dipasang.

SVARNA CORP|MODUL TRAINING WEBSITE SEKOLAH

27

Jika anda bingung dan bertanya kenapa kok tidak ada fotonya? Itu
bukan karena ada yang error tapi disebabkan karena kita belum
memasukkan foto satupun pada website kita. Bagaimana caranya?

HEADER
Apa itu header?
Header adalah
Cara mengganti header :
1. Klik Appearance
2. Klik Header
3. Setelah muncul halaman
Custom Header lalu Klik
Pilih File (Jika mengambil
foto dari computer) atau
Choose
File
(Jika
mengambil foto dari galeri di website). Kali ini saya contohkan jika
mengambil dari computer.

SVARNA CORP|MODUL TRAINING WEBSITE SEKOLAH

28

4. Pilih foto untuk headernya


5. Klik Open.

6. Nanti akan muncul nama filenya. Lalu klik Upload.

SVARNA CORP|MODUL TRAINING WEBSITE SEKOLAH

29

7. Atur bagian foto yang akan ditampilkan sebagai header Klik Crop and
Publish

SVARNA CORP|MODUL TRAINING WEBSITE SEKOLAH

30

8.

SVARNA CORP|MODUL TRAINING WEBSITE SEKOLAH

Cara Membuat Template WordPress Header


Di praktik kali ini kita akan mencoba sebuah template yang sudah distandarkan sesuai dengan
syarat-syarat SEO, dan cocok untuk dijadikan ke dalam template wordpress. Yakni template yang
saya berikan di akhir tutorial ini, template coolblue, penulis dapet mungut di jalan. Bukan buatan
penulis sendiri.
Template coolblue, akan kita konversikan ke dalam wordpress. Mengikuti langkah sebelumnya
Silahkan buka filenya.

Langkah 1
Tempatkan folder template Anda yang berisi file-file HTML, CSS, gambar-gambar dan lain lain,
letakkan di :
c:/xampp/htdocs/wordpress/wp-content/themes/coolblue
Struktur file didalamnya kurang lebih seperti ini nantinya :

1. Folder images,
2. index.html,
3. style.css

Langkah 2
1

/*

Theme Name: CoolBlue Themes

Theme URI: http://www.google.com

Description: Ini adalah template coolblue, tumbal praktik, kelinci percobaan

Author: Nama Saya

Author URI: http://facebook.com/nama.saya

Version: 1

*/

Memasukkan script tersebut di bagian paling Atas dari file style.css


Kemudian jika bagian template utama nama filenya adalah index.html maka silahkan diganti
terlebih dahulu menjadi index.php
Setelah itu silahkan masuk ke dalam admin wordpress dan masuk ke bagian :
Appearance > Themes
http://localhost/wplabz/wp-admin/themes.php
lalu akan muncul sebuah template baru bernama coolblue :

Nah di bagian kali ini kita akan mencoba masuk ke dalam pembuatan template wordpress
bagianheader templatenya terlebih dahulu, pada praktik sebelumnya saya sudah menyediakan :
Di langkah ke 3 ini kita akan mencoba memasukkan tag-tag di atas ke dalam bagian header
template.
Langkah pertama silahkan buka file index.php nya, kita akan masukkan script ini kebagian
<title></title> , jadi nanti scriptnya ada di dalam tag title,
1
2
3
4

<title>
<?php
if (function_exists('is_tag') && is_tag()) {

SVARNA CORP|MODUL TRAINING WEBSITE SEKOLAH

5
6
7
8
9
1
0
1
1
1
2
1
3
1
4
1
5
1
6
1
7
1
8
1
9
2
0
2
1
2
2
2
3
2
4
2
5
2
6
2
7
2
8
2
9
3
0
3
1
3
2

single_tag_title("Tag Archive for &quot;"); echo '&quot; - '; }


elseif (is_archive()) {
wp_title(''); echo ' Archive - ';
}
elseif (is_search()) {
echo 'Search for "'.wp_specialchars($s).'" - ';
}
elseif (!(is_404()) && (is_single()) || (is_page())) {
wp_title(''); echo ' - ';
}
elseif (is_404()) {
echo 'Not Found - ';
}
if (is_home()) {
bloginfo('name'); echo ' - '; bloginfo('description');
}
else {
bloginfo('name');
}
if ($paged>1) {
echo ' - page '. $paged;
}
?>
</title>

SVARNA CORP|MODUL TRAINING WEBSITE SEKOLAH

3
3
3
4
3
5
3
6

di sini mewakili script script yang lain


Kemudian sebelum tag headnya berakhir silahkan sisipkan script di bawah ini
1
2
3
4
5
6

</title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
<?php wp_head(); ?>
</head>

Kemudian lakukan activate pada template di dalam admin panel wordpress bagian Appearance >
Themes

SVARNA CORP|MODUL TRAINING WEBSITE SEKOLAH

Cara Membuat Template WordPress Bagian 3 Body


Single.php
Di pertemuan yang ketiga ini kita akan melanjutkan template yang kemarin sudah dibuat bagian
headernya. Nah jika sudah selesai bagian header, kita akan masuk ke bagian bodynya.
Sebelum mengedit bagian body, ada yang perlu diketahui di antaranya, tag-tag atau syntax yang
diperlukan dalam menyusun bagian body template wordpress adalah
1
2
3
4
5
6
7
8
9
1
0
1
1
1
2
1
3
1
4
1
5
1
6
1
7
1
8
1
9
2
0
2
1
2
2
2
3
2
4
2

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>


<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
<?php include (TEMPLATEPATH . '/inc/meta.php' ); ?>
<div class="entry">
<?php the_content(); ?>
</div>
<div class="postmetadata">
<?php the_tags('Tags: ', ', ', '<br />'); ?>
Posted in <?php the_category(', ') ?> |
<?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments
&#187;'); ?>
</div>
</div>
<?php endwhile; ?>
<?php include (TEMPLATEPATH . '/inc/nav.php' ); ?>
<?php else : ?>
<h2>Not Found</h2>
<?php endif; ?>

SVARNA CORP|MODUL TRAINING WEBSITE SEKOLAH

5
2
6
2
7
2
8
2
9

Anda dapat menggunakan script di atas namun harus di sesuaikan dengan struktur pada template
yang akan digunakan nantinya. Misalkan kita masih menggunakan template coolblue yang
kemaren, dengan catatan sudah diselesaikan bagian header dari template tersebut sesuai dengan
praktik yang pertama dan yang kedua minggu-minggu sebelumnya.
Dalam template coolblue bagian artikel itu terdapat pada
1
2
3
4
5
6
7
8
9
1
0
1
1
1
2
1
3
1
4
1
5
1
6
1
7
1
8
1
9
2
0

<div id="content" class="clearfix">


<!-- main -->
<div id="main">
<article class="post">
<div class="primary">
<h2><a href="index.html">Read Me First</a></h2>
<p class="post-info"><span>filed under</span> <a href="index.html">templates</a>, <a
href="index.html">internet</a></p>
<div class="image-section">
<img src="images/img-post.jpg" alt="image post" height="206" width="498"/>
</div>
<p>CoolBlue
is
a
free
website
template
by
<a
href="http://www.styleshout.com/">styleshout.com</a>. This work is
released
and
licensed
under
the
<a
rel="license"
href="http://creativecommons.org/licenses/by/3.0/">
Creative Commons Attribution 3.0 License</a>, which means that you are free to
use and modify it for any personal or commercial purpose. All I ask is that you give me credit by
including a link back to
<a href="http://www.styleshout.com/">my website</a>.
</p>
<p>
You can find more of my free template designs at <a href="http://www.styleshout.com/">my
website</a>.

SVARNA CORP|MODUL TRAINING WEBSITE SEKOLAH

2
1
2
2
2
3
2
4
2
5
2
6
2
7
2
8
2
9
3
0
3
1
3
2
3
3
3
4
3
5
3
6
3
7
3
8
3
9
4
0
4
1
4
2
4
3
4
4
4
5
4

For premium commercial designs, you can check out <a href="http://themeforest.net?
ref=ealigam" title="Site Templates">Themeforest</a>.
</p>
<p><a class="more" href="index.html">Continue Reading &raquo;</a></p>
</div>
<aside>
<p class="dateinfo">JAN<span>31</span></p>
<div class="post-meta">
<h4>Post Info</h4>
<ul>
<li class="user"><a href="#">Erwin</a></li>
<li class="time"><a href="#">12:30 PM</a></li>
<li class="comment"><a href="#">2 Comments</a></li>
<li class="permalink"><a href="#">Permalink</a></li>
</ul>
</div>
</aside>
</article>
...
...
...
</div>
</div>

SVARNA CORP|MODUL TRAINING WEBSITE SEKOLAH

6
4
7
4
8
4
9
5
0
5
1
5
2
5
3
5
4
5
5
5
6
5
7
5
8

dari tag HTML tersebut kita bisa mengetahui bahwa artikel di letakkan di dalam <div
id=main>, dan artikel-artikelnya itu di ulang-ulang denggan menggunakan <article> ini
artinya, pengulangan artikel di template wordpress dilakukan di bagian <div id=main>
Sehingga
1
2
3
4
5
6
7
8
9
1
0
1
1
1
2

<div id="content" class="clearfix">


<!-- main -->
<div id="main">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<article class="post">
<div class="primary">
...
</div>
<aside>
...

SVARNA CORP|MODUL TRAINING WEBSITE SEKOLAH

1
3
1
4
1
5
1
6
1
7
1
8
1
9
2
0
2
1
2
2
2
3
2
4
2
5
2
6
2
7
2
8
2
9
3
0

</aside>
</article>
<?php endwhile; ?>
<?php else : ?>
<h2>Not Found</h2>
<?php endif; ?>
</div>
</div>

Cara untuk single.php ini sama halnya digunakan ke dalam page.php .

SVARNA CORP|MODUL TRAINING WEBSITE SEKOLAH

Cara Membuat Template WordPress Bagian 4 Polesan


Akhir
Ini adalah pertemuan terakhir untuk Basic Template, karena tahapan selanjutnya kita akan masuk
menuju bagian yang lebih advanced. Sehingga praktik-praktik yang sebelumnya dilakukan itu
menjadi bekal dalam untuk mendalami tingkat selanjutnya.
Yang kita akan pelajari saat ini adalah bagaimana membuat template wordpress dengan keadaan
yang sesungguhnya. Maksudnya bagaimana?
Saya akan jelaskan lebih detilnya.
Dalam wordpress template ada beberapa file-file yang mewakili dari keutuhan template
wordpress itu sendiri, file-file tersebut pernah saya jabarkan pada Basic template bagian 1.
Kurang lebih daftar file dalam template wordpress adalah sebagai berikut :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

404.php
archive.php
comments.php
footer.php
functions.php
header.php
images
index.php
page.php
screenshot.png
search.php
searchform.php
sidebar.php
single.php
style.css

SVARNA CORP|MODUL TRAINING WEBSITE SEKOLAH

10
Detilnya adalah sebagai berikut :
Jika melihat pada fitur wordpress, dimana ada bagian wordpress dinamakan sebagai page, page
atau halaman itu dalam website company profile biasanya di isi dengan tentang kami dan lainlain sebagainya, dengan kata lain menunjukkan halaman yang tidak ada klasifikasian atau
pengkategorian, contoh page adalah misalkan buku tamu dan lain-lain
Namun dalam fitur wordpress yang utama ada juga yang dinamakan sebagai post , post ini
biasanya berisi artikel yang tentunya ada dibawah klasifikasi kategori. Misalkan kategori
kesehatan maka didalamnya akan berisi semua post / artikel yang memiliki kategori kesehatan.
Ini adalah basic yang kuat menunjang dari pembuatan wordpress yang file-filenya terpisah.
Sehingga BAGIAN UTAMA
Ketika seorang user mengakses halaman utama, index, dari website yang menggunakan
wordpress, maka sesungguhnya dia mengakses template bagian index.php
Ketika seorang user mengakses halaman / page, maka sesungguhnya dia mengakses template
bagianpage.php
Ketika seorang user mengakses ke bagian kategori maka sesungguhnya dia mengakses template
bagian archive.php
Ketika seorang user mengakses suatu artikel / post, maka sesungguhnya dia mengakses template
wordpress bagian single.php
Ketika seorang user mencari artikel / post, maka sesungguhnya dia mengakses template
wordpress bagian search.php
Untuk menunjang bagian-bagian template tersebut, maka bagian-bagian tubuh si template
wordpress yang utama di pisah-pisah lagi 404.php (ini digunakan ketika user mengakses sebuah
halaman yang tidak tercantum dalam database)
comments.php (ini bagian template yang hanya bisa dimunculkan / diletakkan pada halaman
yakni page.php, dan artikel yakni bagian post.php)
footer.php (ini adalah bagian template yang diletakkan di semua template BAGIAN UTAMA)
functions.php (ini adalah bagian template yang berisi function-function yangdigunakan oleh
semua bagian template)
header.php (ini adalah bagian template yang diletakkan di semua template bagian BAGIAN
UTAMA)
searchform.php (ini bagian template yang hanya bisa dimunculkan / diletakkan pada halaman
search.php)

SVARNA CORP|MODUL TRAINING WEBSITE SEKOLAH

11
sidebar.php (ini adalah bagian template yang diletakkan dibagian semua template BAGIAN
UTAMA).Berikut adalah bagan lengkapnya

SVARNA CORP|MODUL TRAINING WEBSITE SEKOLAH

12

Free Premium WordPress Template : Digiera


Bagi Anda blogger penganut wordpress sejati, template wordpress yang cantik, juga user
friendly, dan tentunya search engine friendly merupakan senjata sendiri dalam menjaring visitor,
membuat pengunjung betah-betah bertahan lama di halaman blog Anda, dengan disuguhi artikelartikel
yang
fresh
bermutu,
dan
google
panda
pun
menyukainya.
Hasilnya apa ? Karena visitor banyak, mendatangkan uang yang banyak. Apa pasal? Monetize,
konversi dari visitor ke dalam uang. ;-), Caranya dimulai dengan tampilan yang cantik, user
friendly, search engine friendly, dan selanjutnya, dan seterusnya.

Digiera, merupakan salah satu template yang bisa mewakili itu semua. Tampilannya yang black,
simple, search engine friendly, dan yang luar biasa adalah free. Digiera merupakaan free
premium wordpress template yang bisa Anda melihat demonya di sini
http://www.wpthemepremium.com/themes_preview/?theme=Digiera
atau juga bisa langsung mendownloadnya? di sini
http://www.wpthemepremium.com/get/?post-name=digiera
Selamat mengunduh, nantikan free wordpress template selanjutnya di kategori free template
Salam.

SVARNA CORP|MODUL TRAINING WEBSITE SEKOLAH

Anda mungkin juga menyukai