Perkenalan Dan Installasi WordPress

47
SVARNA CORP MODUL TRAINING WEBSITE SEKOLAH

description

Perkenalan Dan Installasi WordPress

Transcript of Perkenalan Dan Installasi WordPress

Page 1: Perkenalan Dan Installasi WordPress

SVARNA CORP

MODUL TRAINING WEBSITE SEKOLAH

Page 2: Perkenalan Dan Installasi WordPress

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.

1

Page 3: Perkenalan Dan Installasi WordPress

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.

2

Page 4: Perkenalan Dan Installasi WordPress

SVARNA CORP | MODUL TRAINING WEBSITE SEKOLAH

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.

3

Page 5: Perkenalan Dan Installasi WordPress

SVARNA CORP | MODUL TRAINING WEBSITE SEKOLAH

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.

Cara Menjalankan Aplikasi XAMPP

4

Page 6: Perkenalan Dan Installasi WordPress

SVARNA CORP | MODUL TRAINING WEBSITE SEKOLAH

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. 

3. Buka browser, lalu ketik http://localhost/xampp di address bar. Jika muncul tampilan

seperti gambar di bawah ini, instalasi telah berhasil.

5

Page 7: Perkenalan Dan Installasi WordPress

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.

6

Page 8: Perkenalan Dan Installasi WordPress

SVARNA CORP | MODUL TRAINING WEBSITE SEKOLAH

Baik kita akan membuat databasenya terlebih dahulu menggunakan phpmyadmin. Arahkan

mouse lalu pilih menu Databases, dibagian atas :

Setelah itu nanti akan muncul tampilan seperti di bawah ini :

Kemudian silahkan masukkan di bagian form inputan Create Database dengan

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

7

Page 9: Perkenalan Dan Installasi WordPress

SVARNA CORP | MODUL TRAINING WEBSITE SEKOLAH

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,

8

Page 10: Perkenalan Dan Installasi WordPress

SVARNA CORP | MODUL TRAINING WEBSITE SEKOLAH

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 :

Hostname : localhost

Username : root

Password :

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 WordPressSebelumnya Anda telah mendownload wordpressnya, saya menggunakan wordpress-3.9.1.zip.

Silahkan kopikan file tersebut letakkan di

1 c:\xampp\htdocs

9

Page 11: Perkenalan Dan Installasi WordPress

SVARNA CORP | MODUL TRAINING WEBSITE SEKOLAH

kopikan seperti pada gambar di bawah ini

10

Page 12: Perkenalan Dan Installasi WordPress

SVARNA CORP | MODUL TRAINING WEBSITE SEKOLAH

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

11

Page 13: Perkenalan Dan Installasi WordPress

SVARNA CORP | MODUL TRAINING WEBSITE SEKOLAH

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

1 c:\xampp\htdocs\wordpress

 seperti pada gambar dibawah ini

12

Page 14: Perkenalan Dan Installasi WordPress

SVARNA CORP | MODUL TRAINING WEBSITE SEKOLAH

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.

13

Page 15: Perkenalan Dan Installasi WordPress

SVARNA CORP | MODUL TRAINING WEBSITE SEKOLAH

1 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 :

14

Page 16: Perkenalan Dan Installasi WordPress

SVARNA CORP | MODUL TRAINING WEBSITE SEKOLAH

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.

15

Page 17: Perkenalan Dan Installasi WordPress

SVARNA CORP | MODUL TRAINING WEBSITE SEKOLAH

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 :

16

Page 18: Perkenalan Dan Installasi WordPress

SVARNA CORP | MODUL TRAINING WEBSITE SEKOLAH

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 [email protected]. 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

17

Page 19: Perkenalan Dan Installasi WordPress

SVARNA CORP | MODUL TRAINING WEBSITE SEKOLAH

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.

18

Page 20: Perkenalan Dan Installasi WordPress

SVARNA CORP | MODUL TRAINING WEBSITE SEKOLAH

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.

19

Page 21: Perkenalan Dan Installasi WordPress

SVARNA CORP | MODUL TRAINING WEBSITE SEKOLAH

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

20

Page 22: Perkenalan Dan Installasi WordPress

SVARNA CORP | MODUL TRAINING WEBSITE SEKOLAH

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.

21

Page 23: Perkenalan Dan Installasi WordPress

SVARNA CORP | MODUL TRAINING WEBSITE SEKOLAH

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

22

Page 24: Perkenalan Dan Installasi WordPress

SVARNA CORP | MODUL TRAINING WEBSITE SEKOLAH

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.

23

Page 25: Perkenalan Dan Installasi WordPress

SVARNA CORP | MODUL TRAINING WEBSITE SEKOLAH

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.

24

Page 26: Perkenalan Dan Installasi WordPress

SVARNA CORP | MODUL TRAINING WEBSITE SEKOLAH

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.

25

Page 27: Perkenalan Dan Installasi WordPress

SVARNA CORP | MODUL TRAINING WEBSITE SEKOLAH

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.

4. Pilih foto untuk headernya

5. Klik Open.

26

Page 28: Perkenalan Dan Installasi WordPress

SVARNA CORP | MODUL TRAINING WEBSITE SEKOLAH

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

27

Page 29: Perkenalan Dan Installasi WordPress

SVARNA CORP | MODUL TRAINING WEBSITE SEKOLAH

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

8.

N

28

Page 30: Perkenalan Dan Installasi WordPress

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

2

3

4

5

6

7

/*

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

Page 31: Perkenalan Dan Installasi WordPress

SVARNA CORP | MODUL TRAINING WEBSITE SEKOLAH

8 */

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,

1234

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

1

Page 32: Perkenalan Dan Installasi WordPress

SVARNA CORP | MODUL TRAINING WEBSITE SEKOLAH

56789101112131415161718192021222324252627282930313233

        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>

2

Page 33: Perkenalan Dan Installasi WordPress

SVARNA CORP | MODUL TRAINING WEBSITE SEKOLAH

343536

 

… di sini mewakili script script yang lain …

Kemudian sebelum tag headnya berakhir silahkan sisipkan script di bawah ini

123456

</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

Cara Membuat Template WordPress Bagian 3 – Body

Single.php

3

Page 34: Perkenalan Dan Installasi WordPress

SVARNA CORP | MODUL TRAINING WEBSITE SEKOLAH

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

1234567891011121314151617181920212223242526272

<?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; ?>

4

Page 35: Perkenalan Dan Installasi WordPress

SVARNA CORP | MODUL TRAINING WEBSITE SEKOLAH

829

 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

123456789101112131415161718192021222324

<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>.            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

5

Page 36: Perkenalan Dan Installasi WordPress

SVARNA CORP | MODUL TRAINING WEBSITE SEKOLAH

252627282930313233343536373839404142434445464748495051

&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>

6

Page 37: Perkenalan Dan Installasi WordPress

SVARNA CORP | MODUL TRAINING WEBSITE SEKOLAH

52535455565758

 

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

1234567891011121314151617181

<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>...</aside> </article> <?php endwhile; ?> <?php else : ?> <h2>Not Found</h2> <?php endif; ?> </div>

7

Page 38: Perkenalan Dan Installasi WordPress

SVARNA CORP | MODUL TRAINING WEBSITE SEKOLAH

92021222324252627282930

 </div>

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

8

Page 39: Perkenalan Dan Installasi WordPress

SVARNA CORP | MODUL TRAINING WEBSITE SEKOLAH

Cara Membuat Template WordPress Bagian 4 – Polesan

AkhirIni 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 :

123456789101112131415

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

 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 lain-

lain sebagainya, dengan kata lain menunjukkan halaman yang tidak ada klasifikasian atau

pengkategorian, contoh page adalah misalkan buku tamu dan lain-lain

9

Page 40: Perkenalan Dan Installasi WordPress

SVARNA CORP | MODUL TRAINING WEBSITE SEKOLAH

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)

sidebar.php (ini adalah bagian template yang diletakkan dibagian semua template BAGIAN

UTAMA).Berikut adalah bagan lengkapnya

10

Page 41: Perkenalan Dan Installasi WordPress

SVARNA CORP | MODUL TRAINING WEBSITE SEKOLAH

Free Premium WordPress Template : DigieraBagi 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 artikel-

artikel 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.

11