MODUL TRAINING
WEBSITE SEKOLAH
SVARNA CORP
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.
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.
5.
Pilih aplikasi yang akan diinstal. Centang semua pilihan dan klik tombol Next.
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.
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.
3.
Buka browser, lalu ketik http://localhost/xampp di address bar. Jika muncul tampilan
seperti gambar di bawah ini, instalasi telah berhasil.
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 :
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 :
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.
c:\xampp\htdocs
12
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
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
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 :
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.
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 :
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
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.
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.
21
lalu Anda akan dilarikan menuju halaman depan dari wordpress milik Anda.
22
23
Kali ini saya akan contohkan themes Dazzling. Klik Dazzling maka akan
muncul halaman berikut.
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.
25
Tunggu sampai proses extract file selesai maka akan muncul folder
hasil extractnya seperti gambar di bawah ini.
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.
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.
28
29
7. Atur bagian foto yang akan ditampilkan sebagai header Klik Crop and
Publish
30
8.
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
/*
Version: 1
*/
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()) {
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
3
3
3
4
3
5
3
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
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
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 »</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>
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
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>
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
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)
11
sidebar.php (ini adalah bagian template yang diletakkan dibagian semua template BAGIAN
UTAMA).Berikut adalah bagan lengkapnya
12
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.