Your browser does not support JavaScript!

Gaswad.Com

— Apapun Informasinya Yang Penting Berguna
    Follow :

Tutorial : Cara Membuat Template WordPress – Part 1
Oct 9th, 2017

Tutorial : Cara Membuat Template WordPress – Part 1

Category : Wordpress | Posted by G-admin at at October 9th, 2017 13:21 pm
1314 | 0

Halo para pembaca Gaswad, pada artikel ini penulis ingin membahas tentang bagaimana cara membuat template WordPress. Kenapa penulis membuat artikel ini tidak lain karena ingin berbagi pengetahuan kepada kalian khususnya para pengguna CMS WordPress seperti penulis agar kalian bisa berkreasi sendiri dalam membuat template WordPress untuk tampilan website kalian.

Untuk kalian para blogger WordPress yang sudah terbiasa menggunakan template-template gratisan tentunya pasti pernah merasa bosan dan monoton dengan tampilan template gratisan yang ‘itu-itu‘ saja, template gratisan yang ‘gratis‘ itu kemungkinan banyak di pakai oleh para blogger-blogger WordPress yang lain sehingga tidak akan bisa mencirikan website kalian sama sekali, mungkin ada beberapa website yang di kira menjiplak website lain cuma gara-gara template yang di gunakan sama. Ingin menggunakan template premium namun harus mengeluarkan biaya, belum lagi kalian tidak tahu apakah template gratisan atau premium yang kalian gunakan itu aman atau tidak dari sisi pembuatan skrip template-nya.

Karena sebagian besar kasus website ter-hacked biasanya di karenakan skrip pada template yang kurang aman, jadi jika kalian membuat template bikinan sendiri lalu tiba-tiba ter-hacked maka silahkan kalian salahkan diri kalian sendiri, jangan salahkan pihak Hosting atau WordPress karena penulis yakin dari sisi keamanan mereka sudah cukup baik, apalagi WordPress yang sudah punya nama besar dan sering melakukan update pada Core aplikasinya jadi sepertinya peluang untuk ter-hacked sangat minim, walaupun tidak menutup kemungkinan bisa ter-hacked.

Nah’, sekarang coba kalian bayangkan jika kalian bisa membuat template sendiri tentunya akan menjadi suatu nilai tersendiri bagi para pembaca karena website kalian memiliki ciri khas, yang hanya dimiliki oleh website kalian sendiri. Kalian pasti tidak ingin bukan di sama-samakan website-nya dengan website orang lain??

Dalam pembuatan template WordPress pastikan kalian sudah paham dengan basic atau dasar dari pemrograman HTML dan PHP, tidak perlu hatam bahasa pemrograman tersebut yang penting kalian cukup tahu saja. Dalam tutorial ini akan di bagi menjadi beberapa bagian diantaranya yaitu :

  1. Intro & Registering Template – Part 1
  2. Frontpage, Header & Footer – Part 2
  3. Single Page – Part 3
  4. Menu Navigasi & Sidebar (Widget)- Part 4
  5. Styling Template – Part 5 (Complete)

Sebelum membuat template WordPress, maka perlu kalian ketahui bagaimana file-file pada template WordPress bekerja dan apa fungsi-fungsinya.

 

Template Hierarchy

WordPress menggunakan template Hierarchy atau urutan template pada file-file template-nya, yang berarti tiap-tiap file yang membentuk template WordPress memiliki prioritas, dari prioritas yang terbesar ke yang terkecil, dari yang wajib sampai yang optional, dsb. Untuk lebih jelasnya silahkan kalian merujuk ke link berikut :

Sedangkan untuk membuat template WordPress file-file yang di haruskan ada pada setiap template berdasarkan prioritas dari yang terbesar ke yang terkecil ialah sebagai berikut :

  • style.css (wajib), di gunakan untuk styling tampilan website dengan menggunakan kode CSS.
  • index.php (wajib), merupakan halaman utama untuk menampilkan halaman individual seperti About Us, Contact Us, Vision, Mission, dll.
  • header.php (optional), di gunakan untuk menampilkan Header website di semua halaman.
  • footer.php (optional), di gunakan untuk menampilkan Footer website di semua halaman.
  • single.php (optional), di gunakan untuk menampilkan halaman Artikel/Post.

Sebenarnya ada banyak file-file pendukung yang bisa kita gunakan seperti category.php, archive.php, attachment.php, dll. untuk membentuk sebuah template WordPress namun kebanyakan bersifat optional, kalian bisa mengembangkannya sendiri dengan merujuk ke link berikut :

Dalam tutorial ini kita hanya menggunakan ke lima file tersebut diatas karena penulis rasa file-file tersebut sudah cukup untuk membentuk sebuah template WordPress sisanya tinggal kalian kembangkan sendiri nanti.

 

1. Registering Template

Untuk dapat menggunakan template WordPress terlebih dahulu kalian harus mendaftarkan template yang kalian buat agar terbaca oleh aplikasi WordPress pada halaman Themes yang terdapat pada menu Appearance > Themes.

Untuk memulainya silahkan kalian ikut langkah-langkah berikut :

  1. Buat folder baru dengan nama ‘my_theme‘ di dalam folder ‘\wp-content\themes‘.
  2. Di dalam folder ‘my_theme‘ silahkan kalian buat ke lima file di atas, perhatikan extension-nya.
  3. Setelah selesai silahkan kalian buka file style.css yang sudah kalian buat tadi, lalu masukan skrip berikut :
    /*
    Theme Name: My Theme
    Theme URI: https://www.gaswad.com/
    Author: Gaswad
    Author URI: https://www.gaswad.com/
    Description: Ini adalah template pertama saya yang hanya untuk website saya dan di gunakan oleh saya, penggunaan tanpa ijin akan di tuntut oleh saya.
    Version: 1.0
    License: GNU General Public License v2 or later
    License URI: http://www.gnu.org/licenses/gpl-2.0.html
    */

    *Skrip di atas di gunakan untuk mendaftarkan template kita agar terbaca oleh aplikasi WordPress.

  4. Selanjutnya silahkan kalian buka file index.php lalu masukan skrip HTML standar sebagai berikut :
    <html>
      <head>
      <	title>Template WordPress Saya</title>
      </head>
    
      <body>
        <h1>Template WordPress Perdana Saya</h1>
      </body>
    </html>
  5. Selesai.

Jangan lupa untuk menyimpan perubahan yang sudah kalian lakukan tadi, lalu untuk melihat apakah template yang kita buat di atas berhasil di daftarkan atau tidak silahkan kalian lihat pada menu Appearance > Themes pada halaman Administrator WordPress kalian masing-masing.

Jika template tersebut gagal kita daftarkan maka akan tampil pesan error di halaman Themes yang menunjukan bagian atau file mana yang mengalami error, namun jika berhasil maka kurang lebih tampilannya akan seperti berikut.

Terakhir, silahkan kalian klik tombol ‘Activate‘ untuk mengaktifkan template kalian setelah itu silahkan kalian akses halaman website kalian.

Untuk pendaftaran template WordPress sudah selesai, pada artikel berikutnya akan kita bahas bagaimana cara membuat halaman Frontpage/Home, Header dan Footer website dari template yang sudah kita daftarkan di atas.

Share social media :



Your response about this article :


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related Articles

Tutorial : Cara Membuat Template WordPress – Part 4
Tutorial : Cara Membuat Template WordPress – Part 4
Category : Wordpress | October 20th, 2017
874 | 0
Tutorial : Cara Membuat Template WordPress – Part 3
Tutorial : Cara Membuat Template WordPress – Part 3
Category : Wordpress | October 20th, 2017
683 | 0
Tutorial : Cara Membuat Template WordPress – Part 2
Tutorial : Cara Membuat Template WordPress – Part 2
Category : Wordpress | October 13th, 2017
772 | 0
11 Cara Meningkatkan Keamanan Pada WordPress
11 Cara Meningkatkan Keamanan Pada WordPress
Category : Wordpress | October 10th, 2017
821 | 0
Tutorial : Instalasi WordPress
Tutorial : Instalasi WordPress
Category : Wordpress | September 20th, 2017
694 | 0
Selalu Ke Jendela Login Saat Update WordPress?
Selalu Ke Jendela Login Saat Update WordPress?
Category : Wordpress | June 24th, 2015
565 | 0
Help…! Minta Login FTP Saat Update WordPress??
Help…! Minta Login FTP Saat Update WordPress??
Category : Wordpress | April 6th, 2015
626 | 0
Cara Reset Password Admin WordPress
Cara Reset Password Admin WordPress
Category : Wordpress | June 27th, 2014
555 | 0
Latest Posts

Perbedaan Localhost Dan Web Hosting
Perbedaan Localhost Dan Web Hosting
Category : Others | September 17th, 2018
162 | 0

Halo ghaes… Bagi beberapa dari kalian pasti masih belum ada yang begitu paham bagaimana suatu website bisa menampilkan konten-konten atau artikel seketika kita melakukan pencarian baik dengan menggunakan mesin pencari atau search engine seperti...

Continue reading
Membuat Efek Gradasi Warna Menggunakan CSS
Membuat Efek Gradasi Warna Menggunakan CSS
Category : Tutorials | September 4th, 2018
364 | 2

Pada tutorial kali ini kita akan mencoba membuat gradasi warna, apa itu gradasi warna bisa kalian lihat contohnya pada gambar-gambar berikut : Yup, seperti yang sudah kalian lihat pada gambar-gambar tersebut dimana pada tiap gambar memiliki lebih dar...

Continue reading
Iklan Adsense Di Website Kamu Ter-klik Sendiri? Nih! Tips-nya
Iklan Adsense Di Website Kamu Ter-klik Sendiri? Nih! Tips-nya
Category : Tips & Tricks | August 14th, 2018
249 | 0

Hallo guys, akhirnya kita berjumpa lagi setelah sekian lama kita berpisah… Hallah… Okey langsung saja, untuk artikel kali ini penulis ingin coba berbagi sedikit mengenai tips jika iklan adsense kamu ter-klik, mungkin lebih tepatnya ter-kl...

Continue reading
Tutorial : Cara Install Composer
Tutorial : Cara Install Composer
Category : Others | June 5th, 2018
367 | 0

Apa Itu Composer? Composer adalah suatu aplikasi manajemen paket selain Node.js (npm) dan Ruby (bundler) yang menyediakan format standar untuk mengelola dependensi PHP dan library-library yang diperlukan. Sumber : Wikipedia Jadi secara garis besar, d...

Continue reading
Error Reported Attack Page! Waw… Domain Di Blacklist Google??
Error Reported Attack Page! Waw… Domain Di Blacklist Google??
Category : Tips & Tricks | November 13th, 2017
690 | 0

Seperti yang kalian lihat pada contoh tampilan gambar di atas, tampilan tersebut merupakan tampilan bahwa domain kalian di blacklist atau di blokir oleh Google, alhasil tentunya website kalian tidak akan bisa di akses. Ada yang pernah ngalamin?? Bebe...

Continue reading
Cara Menambah Ads Unit Atau Blok Iklan Adsense
Cara Menambah Ads Unit Atau Blok Iklan Adsense
Category : Tutorials | November 13th, 2017
1219 | 4

Halo para pembaca Gaswad yang ganteng dan yang cantik-cantik, yang jelek jangan kesinggung ya. Hehe… 😀 Ssetelah sekian lama ngga update akhirnya dapet kesempatan nyolong-nyolong waktu buat nge-update artikel Gaswad. Pada pembahasan artikel k...

Continue reading
Yang Baru Di Bootstrap 4
Yang Baru Di Bootstrap 4
Category : Others | October 31st, 2017
711 | 0

Tidak terasa baru saja beberapa waktu lalu penulis menulis artikel tentang Bagaimana Cara Membuat Web Responsif Dengan Boostrap yang masih menggunakan versi 3, ehh… udah nongol aja ini adeknya yang versi 4. Yaaa’, sebenarnya sih’ ud...

Continue reading
Tutorial : Cara Membuat Template WordPress – Part 5 (Complete)
Tutorial : Cara Membuat Template WordPress – Part 5 (Complete)
Category : Wordpress | October 24th, 2017
815 | 2

Artikel ini merupakan artikel terakhir tentang bagaimana cara membuat template WordPress, bagi kalian yang sudah tertinggal atau melewatkan artikel-artikel sebelumnya, maka silahkan kalian merujuk ke link berikut : Intro & Registering Template ...

Continue reading
Panduan SEO ala Google
Panduan SEO ala Google
Category : Tips & Tricks | October 24th, 2017
592 | 0

Kali ini penulis ingin memberikan beberapa tips dan panduan untuk meningkatkan SEO website kalian, beberapa panduan dan tips berikut secara kebetulan merupakan salah satu yang  di referensikan oleh Google agar website kalian dapat dengan mudah di cr...

Continue reading
Tutorial : Cara Membuat Template WordPress – Part 4
Tutorial : Cara Membuat Template WordPress – Part 4
Category : Wordpress | October 20th, 2017
874 | 0

Pada sesi ini kita akan membuat Menu Navigasi dan Sidebar pada halaman template yang sudah kita buat sebelumnya, sesi ini merupakan sambungan dari artikel-artikel berikut : Intro & Registering Template – Part 1 Frontpage, Header & Footer ...

Continue reading
Tutorial : Cara Membuat Template WordPress – Part 3
Tutorial : Cara Membuat Template WordPress – Part 3
Category : Wordpress | October 20th, 2017
683 | 0

Pada artikel kali ini kita akan melanjutkan bagaimana cara membuat template WordPress menyambung artikel sebelumnya. Pada sesi sebelumnya kita sudah berhasil membuat halaman Frontpage, Header dan Footer website, pada artikel kali ini kita akan coba m...

Continue reading
Cara Mendapatkan Uang Dengan Google Adsense
Cara Mendapatkan Uang Dengan Google Adsense
Category : Tutorials | October 16th, 2017
1293 | 2

Setelah beberapa waktu lalu di kantor penulis sempat heboh-hebohnya di karenakan fitur dari Google yang bernama Adsense ini, bagaimana tidak karena rekan-rekan penulis yang tadinya cuma browsing-browsing doang, youtube-an, download film, tidur, kesur...

Continue reading

Wordpress

  • Oct
    24
    2017
    Tutorial : Cara Membuat Template WordPress – Part 5 (Complete)
    Artikel ini merupakan artikel terakhir tentang bagaimana cara membuat template WordPress, bagi ...
    Read more
  • Oct
    20
    2017
    Tutorial : Cara Membuat Template WordPress – Part 4
    Pada sesi ini kita akan membuat Menu Navigasi dan Sidebar pada halaman template yang sudah kita...
    Read more
  • Oct
    20
    2017
    Tutorial : Cara Membuat Template WordPress – Part 3
    Pada artikel kali ini kita akan melanjutkan bagaimana cara membuat template WordPress menyambun...
    Read more
  • Oct
    13
    2017
    Tutorial : Cara Membuat Template WordPress – Part 2
    Artikel ini merupakan sambungan dari artikel pertama, pada artikel sebelumnya kita sudah membah...
    Read more
  • Oct
    10
    2017
    11 Cara Meningkatkan Keamanan Pada WordPress
    Pada artikel kali ini penulis ingin membagikan beberapa tips seputar keamanan pada website Word...
    Read more
  • More articles
Tips & Tricks

  • Nov
    02
    2018
    8 Tips Memilih Jasa Server Hosting Terbaik
    Pada artikel kali ini penulis ingin memberikan beberapa tips memilih server hosting terbaik. Ba...
    Read more
  • Oct
    18
    2018
    Syntax error or access violation: 1071 Specified key was too long
    Bagi kalian pengguna Framework Laravel, terutama Laravel mulai dari versi 5.4 keatas pasti pern...
    Read more
  • Aug
    14
    2018
    Iklan Adsense Di Website Kamu Ter-klik Sendiri? Nih! Tips-nya
    Hallo guys, akhirnya kita berjumpa lagi setelah sekian lama kita berpisah… Hallah… ...
    Read more
  • Nov
    13
    2017
    Error Reported Attack Page! Waw… Domain Di Blacklist Google??
    Seperti yang kalian lihat pada contoh tampilan gambar di atas, tampilan tersebut merupakan tamp...
    Read more
  • Oct
    24
    2017
    Panduan SEO ala Google
    Kali ini penulis ingin memberikan beberapa tips dan panduan untuk meningkatkan SEO website kali...
    Read more
  • More articles
Tutorials

  • Nov
    09
    2018
    Tutorial : Belajar Menggunakan Laravel – Part 6 (Menampilkan Data)
    Melanjutkan tutorial sebelumnya dimana kita sudah berhasil memasukan data ke dalam database mel...
    Read more
  • Nov
    01
    2018
    Tutorial : Belajar Menggunakan Laravel – Part 5 (Form Input Data)
    Halo semua, kali ini penulis ingin melanjutkan tutorial cara Belajar Menggunakan Laravel, pada ...
    Read more
  • Oct
    18
    2018
    Tutorial : Belajar Menggunakan Laravel – Part 4 (Model & Konfigurasi Database)
    Halo para pembaca Gaswad, menyambung artikel tutorial Belajar Menggunakan Laravel sebelumnya, k...
    Read more
  • Oct
    09
    2018
    Tutorial : Belajar Menggunakan Laravel – Part 3 (View & Blade Template)
    Di artikel sebelumnya, kita sudah berhasil menampilkan output langsung dari halaman Controller ...
    Read more
  • Oct
    09
    2018
    Tutorial : Belajar Menggunakan Laravel – Part 2 (Routing & Controller)
    Pada artikel kali ini, kita akan belajar menggunakan Routing dan Controller dimana Routing dan ...
    Read more
  • More articles
Others

  • Sep
    17
    2018
    Perbedaan Localhost Dan Web Hosting
    Halo ghaes… Bagi beberapa dari kalian pasti masih belum ada yang begitu paham bagaimana s...
    Read more
  • Jun
    05
    2018
    Tutorial : Cara Install Composer
    Apa Itu Composer? Composer adalah suatu aplikasi manajemen paket selain Node.js (npm) dan Ruby ...
    Read more
  • Oct
    31
    2017
    Yang Baru Di Bootstrap 4
    Tidak terasa baru saja beberapa waktu lalu penulis menulis artikel tentang Bagaimana Cara Membu...
    Read more
  • Oct
    09
    2017
    Pengertian Page View, Visitor Dan Bounce Rate
    Sebenarnya pada artikel kali ini penulis ingin membuat tutorial bagaimana cara membuat template...
    Read more
  • Sep
    29
    2017
    ​Apa Itu Web Framework?
    Beberapa dari kalian apalagi yang masih pemula dalam bidang pemrograman website pasti masih awa...
    Read more
  • More articles
Page generated in : 858.52 ms