WordPress - Styling dan Integration

Konsep

Sebuah tema WordPress adalah wadah yang sudah dirancang sebelumnya, ini memungkinkan kamu menginstalnya situ website kamu, sehingga kamu dapat mengubah tampilan dan tata letaknya. Fitur tema ini memungkinkan kamu sebagai pemilik situs untuk membuat situs web kamu terlihat menarik tanpa perlu mengetahui cara memprogram kodenya. Terdapat berbagai jenis tema yang tersedia termasuk yang gratis dan berbayar. Kamu bisa mencari berbagai tema yang tersedia di internet, terdapat beberapa provider tema website yang dapat kamu jelajahi semisalnya ThemeForest atau bahkan pada situs WordPress.org itu sendiri, disana kamu bisa membandingkan berbagai komponen faktor seperti desain, harga, pilihan kustomisasi dan review dari pengguna yang telah menggunakan tema tersebut.

 

Dalam tema WordPress biasanya terdapat beberapa komponen yang sering digunakan seperti

 

Gambar komponen umum.

 

-         Header: bagian atas dari situs website, pada umumnya pada bagian ini terdapat logo dan menu navigasi.

-         Footer: jika header adalah bagian atas maka footer adalah bagian bawah dari situs website kamu, biasanya pada bagian ini mengandung informasi copyright dan link yang terhubung ke akun sosial media.

-         Sidebar: Sidebar biasanya terletak di pinggir kanan atau kiri dari website, bagian ini biasanya berisi widgets yang menampilkan informasi seperti postingan terbaru, kategori yang tersedia, dan kolom pencarian dari website kamu.

-         Content Area: Kamu mungkin seharusnya sudah sering melihat bagian ini baik itu secara sadar atau tidak, bagian ini biasanya mengandung konten yang kamu cari di internet.

 

Instalasi tema

Agar kamu lebih paham ayo kita praktik langsung bagaimana installasi tema di WordPress, ada 2 cara yang bisa kamu lakukan untuk menginstal tema di WordPress. Cara yang pertama adalah mencari langsung tema yang kamu inginkan langsung dari WordPress, sedangkan cara yang kedua kamu bisa cari melalui search engine dan mengunduhnya dari situs pihak ketiga dan menginstalnya ke dalam WordPress kamu.

 

Cara instalasi tema langsung melalui WordPress

1. Hal yang pertama kamu harus lakukan adalah masuk ke halaman dashboard kamu.
2. Berikutnya pada sidebar menu kamu bisa pilih Appearance lalu pilih Themes.

Gambar setelah kamu masuk menu themes.

3. Berikutnya kamu buka menu untuk menambahkan tema dengan mengklik Add New Theme.

Gambar setelah masuk ke menu add new theme.

4. Cari tema yang kamu inginkan, jika kamu ingin melihat preview dari tema yang kamu inginkan kamu bisa klik Details & Preview pilihan menu tersebut akan muncul ketika kursor kamu berada diatas tema yang kamu inginkan.

Gambar menu details & preview.

 

5. Jika tema tersebut dirasa sesuai kamu bisa menerapkannya dengan mengklik instal.

Gambar lokasi tombol instal.

6. Setelah itu proses instalasi akan berjalan.

Gambar proses instalasi.

 

7. Jika proses installing sudah selesai tahap berikutnya adalah mengaktifkan tema yang kamu pilih dengan mengklik tombol active.

Gambar letak tombol active.

 

8. Jika sudah maka kamu akan diarahkan kembali ke menu themes.

Gambar menu themes setelah menambahkan tema baru.

 

9. Untuk memastikan tema yang kamu inginkan telah aktif kamu bisa mengklik tombol Customize pada tema tersebut dan kamu akan diarahkan ke menu kustomisasi jika tombol publish masih berwarna biru kamu klik lagi tombol tersebut hingga tombol tersebut berganti warna ke abu dan bertuliskan published..

Gambar Letak posisi tombol publish.

 

10. Jika sudah kamu bisa mengunjungi halaman utama WordPress kamu dan melihat hasilnya.

Gambar setelah proses instalasi tema berhasil.

Cara instalasi tema dengan cara upload tema yang sudah ada

Untuk menyamakan tutorial yang akan kita jalankan kamu bisa mengunduh file template WordPress pada tautan ini unduh template.

1. Sedikit mirip dengan cara sebelumnya, hal yang pertama kamu harus lakukan adalah masuk ke halaman dashboard kamu.
2. Lalu pada sidebar menu kamu bisa pilih Appearance lalu pilih Themes lagi.
3. Pada tahap ke-3 ini berbeda dengan cara sebelumnya, disini kamu klik tombol Upload Theme, dan akan muncul fitur untuk mengupload file tema yang kamu miliki dalam bentuk .zip.

Gambar fitur untuk upload tema WordPress.

4. Ekstrak file zip yang sudah kamu unduh sebelumnya kedalam sebuah folder, maka kamu akan mendapatkan hasil seperti gambar dibawah ini. Di Dalam zip yang sudah kita ekstrak tersebut terdapat file buildex, itu merupakan template yang akan kita upload ke WordPress kita.

 

5. Klik browse dan masukan tema (zip file yang bernama buildex) yang sudah kamu ekstrak sebelumnya, lalu klik tombol Instal Now.

Gambar letak posisi tombol instal.

Note*

Jika kamu mengalami error seperti gambar dibawah ini, tenang saja jangan panik. Error ini artinya tema yang kamu miliki melebihi batas upload file yang sudah ditentukan pada konfigurasi file php.ini. Perlu diingat pada tutorial ini menggunakan sistem operasi windows dan aplikasi developmentnya adalah Xampp berikut adalah cara mengatasinya, jika kamu menggunakan aplikasi development lain seperti lampp atau menggunakan sistem operasi lain mungkin saja cara mengatasinya akan sedikit berbeda namun jangan menyerah kamu bisa mencarinya di search engine kesayanganmu 😀.

Gambar error upload_max_filesize melebihi batas.

 

a.       Buka aplikasi XAMPP, klik Config lalu pilih php.ini

Gambaran aplikasi Xampp.

b.      XAMPP akan membuat notepad lalu kamu cari baris kode upload_max_filesize ubah valuenya ke 128M, cari juga post_max_size dan ubah valuenya menjadi 128M. Simpan perubahannya dan tutup notepadnya, lakukan restart pada service Apache dengan cara melakukan stop dan start kembali service tersebut.

Gambar baris yang harus diubah.

c.       Error yang kita hadapi sudah kita atasi sekarang kembali kita coba upload tema tersebut.

6. Berikut adalah status jika proses instalasi berhasil, setelah itu kamu klik Activate untuk mengaktifkan tema, kamu akan diarahkan kembali ke menu themes

Gambar setelah proses instalasi berhasil.

 

7. Jika kamu perhatikan setelah mengklik aktif dan dibawa kembali ke menu themes, tema tersebut meminta kita untuk menginstal plugin. Klik Begin installing plugin.

Gambar Rekomendasi untuk menginstal plugin.

8. Klik install pada bagian yang ditandai dengan warna merah seperti pada gambar dibawah ini.

Gambar Lokasi tombol instal.

9. Berikut merupakan gambaran jika status instalasi berhasil.

Gambar Status instalasi plugin telah berhasil.

10. Setelah itu kamu kembali ke themes, maka kamu akan melihat tombol START INSTALL, klik tombol tersebut.

Gambar muncul notifikasi pada menu themes.

 

11. Pada bagian pertama kita akan ditunjukan apakah sistem kita telah memenuhi persyaratan jika sudah maka akan muncul tulisan berwarna hijau pada bagian Your system information, setelah itu klik next.

Gambar proses konfigurasi tahap 1.

12. Pada bagian berikutnya, kamu pilih STAR INSTALL.

Gambar proses konfigurasi tahap 2.

13. Pada tahap berikutnya kamu akan diminta untuk menginstal beberapa plugin untuk mendukung tema tersebut, pada tahap ini kamu kembali klik next untuk melanjutkan proses instalasi.

Gambar proses konfigurasi tahap 3.

 

14. Proses konfigurasi hampir selesai, berikutnya kita diminta apakah kita akan menambahkan demo dan bagaimana mekanismenya. Pada tahap ini pilih Replace my existing content with demo content lalu klik next.

Gambar proses konfigurasi tahap 4.

15. Pada tahap Importing sample data, kamu diminta untuk memasukan password user WordPress kamu, silakan kamu masukan passwordnya dan kamu tunggu prosesnya hingga selesai.

Gambar proses konfigurasi tahap 5.

 

16. Pada tahap ini proses instalasi dan integrasi tema telah selesai kamu bisa mengunjungi halaman utama pada situ kamu dan melihat hasilnya.

Gambar halaman utama setelah proses konfigurasi.

 

 

Konfigurasi Tema

Jika kamu memperhatikan, pada bagian yang ditandai dengan warna merah seperti yang ditunjukan pada gambar dibawah ini, terdapat logo yang tidak sesuai yaitu pada bagian logo. Untuk mengubah logo tersebut kamu perlu pergi kembali ke bagian Appearance lalu klik pada bagian Themes. Lalu pilih Customize.

Gambar sebelum mengkonfigurasi tema.

Kamu akan dibawa ke menu kustomisasi, disini kamu bisa mengubah beberapa hal yang berkaitan dengan tema situs kamu seperti nama situs, logo dan sebagainya.

Sebagai contoh kita ingin mengganti bagian navbar yang ditandai dengan warna merah pada bagian sebelumnya, maka kamu dapat mencarinya pada sidebar menu atau mengklik ikon pensil yang ditandai dengan warna merah sebagaimana yang ditunjukan pada gambar dibawah ini.

Gambar lokasi ikon pensil untuk mengganti logo.

Pada sidebar menu kamu bisa mengklik Change logo untuk mengganti logo pada navbar tersebut.

Gambar letak posisi Change logo.

Pada bagian ini masukan logo yang akan digunakan, misalkan disini saya akan menggunakan logo stechoq upload logo tersebut dan lanjutkan prosesnya.

Gambar fitur upload logo.

Jika sudah hasilnya akan muncul pada fitur preview disamping, untuk menyimpan perubahan tersebut klik Publish.

Gambar preview logo yang sudah diganti.

 

Proses mengkonfigurasi tema dengan yang kita inginkan sudah selesai, jika kamu ingin mengatur sesuai yang berkaitan dengan tema yang kita gunakan kamu dapat mengaksesnya melalui fitur kustomisasi yang tadi kita gunakan untuk mengganti logo dari situs kita.

                     

Gambar Halaman utama setelah publish.

 

Praktikum

Template: unduh

1. Coba kamu instal dan konfigurasi template yang sudah disediakan ke WordPress local milikmu, cantumkan screenshot-screenshot selama proses kamu mengerjakan instalasi dan konfigurasi template tersebut!