Cara Upload Wordpress di 000webhost menggunakan FileZilla

Setelah pendaftaran Hosting Gratis yang saya bahas di Daftar 000webhost dengan domain dot tk tentu saja pendaftaran hosting itu bertujuan untuk kalian yang ingin membuat website misalkan membangun website kita dengan CMS seperti yang pernah saya jelaskan di Penjelasan dari CMS , sebagai contoh kita akan menggunakkan CMS Wordpress, untuk upload File CMS ke Hosting kita gunakan software fillezilla yang bisa kamu download disini , dan download wordpressnya disini. jika sudah kita mulai tahapan-tahapannya.

1. Sekarang login akun 000webhost mu.pilih Go to CPanel.

2. Pilih View Account Details untuk melihat akun detail yang akan kita gunakan untuk upload wordpress

3. Sekarang kita buat terlebih dahulu Databasenya, pilih menu Quick Links ada di bagian paling bawah, pilih MySQL management di open link new tab untuk mempermudah tahapan berikutnya

4. Isi MySQL database name misalkan dengan wpdb, MySQL user name misalkan dengan wpdb (databasename dan username harus sama)

5. Isi Password for MySQL user dengan password yang kamu inginkan, klik create database jika sudah, setelah itu akan ada tampilan seperti dibawah ini

Simpan data-data dari database tersebut untuk nanti digunakan.
6. Berikutnya extract file wordpress yang telah di download dan buka aplikasi FileZillajika kamu sudah instalkan
7. Isi bagian gambar seperti dibawah ini dengan Server Name dan Username pada bagian Account Information

gambar filzilla

gambar account information Isi bagian nama dengan servername, nama pengguna dengan username pada acount information dan kata kunci dengan password akun 000webhost mu, untuk port tidak usah di isi dan klik tombol koneksi cepat jika sudah.
8. Untuk menggampangkan penjelasan pada File Zilla saya buat menjadi Bagian A, B,C, dan D agar mudah dimengerti seperti gambar di bawah ini.

9. Pada Bagian D double klik root public html
10. Pada bagian A cari file Wordpress yang telah di extract, jika sudah buka atau klikFolder wordpress tersebut
11. Maka Pada Bagian C akan tampil isi dari Folder Wordpress tsb, sekarang blok semua file pada bagian C klik kanan dan Pilih Upload.

dan tunggu sampai proses upload di root public html selesai
12. Sedikit tambahan jika ada Pengiriman yang gagal seperti gambar dibawah ini

Klik tab Pengiriman Gagal klik kanan pada salah satu file pada tab Pengiriman Gagal pilihProses Antrian.
13. Sekarang Buka URL domain dot tk yang kamu daftarkan di 000webhost, maka akan ada tampilan seperti dibawah ini, pilih Create a Configuration File

14. Pilih Lets go, sekarang kamu buka akun Mysql yang kamu simpan seperti pada Tahap No 5 untuk mengisi Konfigurasi set up Wordpress atau kampu masuk CPanel dan pilih Mysql
15. 
    
    
    
    
    
16. Isi Data Base Name dengan Database Mysql(a2814537_wpdb) dan Username (a2814537_wpdb), Database Host dengan isi dari Mysql Host(mysql17.000webhost.com) seperti gambar diatas

17. Lalu pilih Submit, Run the install, dan Isi Informasi Admin Wp yang dibutuhkan seperti username, password untuk login nanti dll, Klik Install wordpress
18. Login akun admin Wp tadi yang dibuat, dan Selesai

Membuat Tema Simple Untuk Wordpress

Untuk mulai membangun tema Anda, terlebih dahulu membuat sub-folder dalam direktori wp-content/themes dalam folder WordPress Anda. Untuk tujuan dari tutorial ini, kita akan memanggil folder "tutorial_theme". Nama folder harus sesuai deng`n nama tema yang ingin Anda buat. Untuk melakukan hal ini Anda dapat menggunakan salah satu klien FTP favorit Anda atau File Manager di cPanel Anda.

Sebelum Anda mulai membuat tema, Anda harus memutuskan bagaimana tata letak situs web Anda akan terlihat seperti. Dalam tutorial ini kita akan membangun theme WordPress yang terdiri dari header, sidebar, area konten dan footer, seperti yang ditunjukkan di bawah ini:

Untuk melakukan hal ini kita harus membuat file-file berikut ke direktori tutorial_theme:

• header.php - File ini akan berisi kode untuk bagian header dari tema;

• index.php - Ini adalah file utama untuk tema. Ini akan berisi kode untuk Main Area dan akan menentukan di mana file lainnya akan dimasukkan;

• sidebar.php - File ini akan berisi informasi tentang sidebar;

• footer.php - File ini akan menangani footer Anda;

• style.css - File ini akan menangani styling tema baru Anda;

Sekarang mari kita lihat lebih dekat pada setiap file dan apa yanf harus diisi: 

Header.php :

Dalam file ini, Anda harus menambahkan kode berikut:

<html>
<head>
<title>Tutorial theme</title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
</head>
<body>
  <div id="wrapper">
    <div id="header">
      <h1>HEADER</h1>
    </div> 

Pada dasarnya, ini adalah kode HTML sederhana dengan satu baris yang berisi kode php dan fungsi WordPress standar. Dalam file ini Anda dapat menentukan meta tag seperti judul website Anda, meta deskripsi dan kata kunci untuk halaman Anda.

Tepat setelah judul baris kita tambahkan <link rel = "stylesheet" href = "<php bloginfo ('stylesheet_url');?>"> untuk memberitahu WordPress untuk memuat file style.css. Ini akan menangani styling dari situs web Anda. Kode <php bloginfo ('stylesheet_url');?> adalah bagian dari garis yang berfungsi memuat file stylesheet pada Wordpress.

Selanjutnya, kita telah menambahkan awal dari "div" dengan wrapper class yang akan menjadi wadah utama website. Kita telah menetapkan kelas untuk itu sehingga kita bisa memodifikasi melalui file style.css.

Setelah itu kita telah menambahkan HEADER label sederhana dibungkus dengan "div" dengan kelas "header" yang akan ditentukan kemudian dalam file stylesheet.

index.php

 <?php get_header(); ?>
   
<div id="main">
  <div id="content">
    <h1>Main Area</h1>
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <h1><?php the_title(); ?></h1>
    <h4>Posted on <?php the_time('F jS, Y') ?></h4>
    <p><?php the_content(__('(more...)')); ?></p>
    <hr>
    <?php endwhile; else: ?>
    <p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
    <?php endif; ?>
  </div>

  <?php get_sidebar(); ?>

  </div>

<div id="delimiter"></div>

<?php get_footer(); ?>

Kode dalam file ini dimulai dengan <get_header php ();?> Yang akan menyertakan file header.php dan kode di dalamnya di halaman utama. Ini menggunakan fungsi WordPress internal untuk melakukan hal ini. Kita akan menjelaskan hal ini secara rinci nanti dalam tutorial ini. Kemudian kita telah menempatkan teks di Area Main untuk menunjukkan bagian mana dari tema Anda ditampilkan di daerah ini.

Beberapa baris berikutnya terdiri dari kode PHP dan standar Wordpress fungsi. Kode ini memeriksa apakah Anda memiliki posting di blog Anda diciptakan melalui wilayah administrasi Wordpress dan menampilkannya.

Selanjutnya, kita menyertakan file sidebar.php dengan baris ini - <php get_sidebar ();?>. Dalam file ini Anda dapat menampilkan kategori posting Anda, arsip dll

Setelah baris ini, kita menyisipkan "div" kosong yang akan memisahkan area Main dan Sidebar dari footer.

Akhirnya, kita menambahkan satu baris terakhir - <php get_footer ();?> Yang akan menyertakan file footer.php di halaman Anda.
 

 sidebar.php

<div id="sidebar">
  <h2 class="sidebartitle"&ft;<?php _e('Categories'); ?></h2>
  <ul class="list-cat">
    <?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>
  </ul>
 
  <h2 class="sidebartitle"><?php _e('Archives'); ?></h2>
    <ul class="list-archives">
      <?php wp_get_archives('type=monthly'); ?>
    </ul>
</div>

 Dalam file ini kita menggunakan fungsi internal Wordpress untuk menampilkan Kategori dan Arsip posting. Fungsi WordPress mengembalikan mereka sebagai daftar item, karena itu kita telah membungkus fungsi yang sebenarnya dalam daftar (tag <ul>).

footer.php

<div id="footer">
  <h1>FOOTER</h1>
</div>

</div>

</body>
</html>

Dengan kode ini kita menambahkan label FOOTER sederhana. Alih-alih kode ini Anda dapat  
menambahkan link, teks tambahan, informasi hak cipta untuk theme dan benda-benda tambahan.

style.css

body {
    text-align: center;
}

#wrapper {
    display: block;
    border: 1px #a2a2a2 solid;
    width:90%;
    margin:0px auto;
}

#header {
    border: 2px #a2a2a2 solid;
}

#content {
    width: 75%;
    border: 2px #a2a2a2 solid;
    float: left;
}

#sidebar {
    width: 23%;
    border: 2px #a2a2a2 solid;
    float: right;
}

#delimiter {
    clear: both;
}

#footer {
    border: 2px #a2a2a2 solid;
}

.title {
    font-size: 11pt;
    font-family: verdana;
    font-weight: bold;
}

 File css sederhana menetapkan terlihat dasar tema Anda. Baris tersebut mengatur latar belakang halaman Anda dan mengelilingi bagian utama dari situs Anda dengan perbatasan untuk kenyamanan. Pada titik ini website Anda akan terlihat seperti ini:

Selamat Mencoba ^_^