Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress

Dimulai dengan WordPress: Bersiap untuk Menyesuaikan Tema Anda Menggunakan Tema Anak

by
Read Time:10 minsLanguages:
This post is part of a series called Beginning With WordPress.
Beginning With WordPress: First Steps With Your New Website
Beginning With WordPress: Editing the Look of Your Site With CSS

Indonesian (Bahasa Indonesia) translation by ibnuhadis83 (you can also view the original English article)

Ok, jadi situs Anda sudah aktif dan berjalan dan Anda mungkin mulai merasa gatal untuk membuat beberapa perubahan, dan perubahan itubukan hanya perubahan pada konten saja, bukan?

Anda mungkin ingin mengubah beberapa elemen dari apa yang sebenarnya tampak seperti tema Anda, dan mungkin bahkan mengubah bagaimana ia berperilaku. Jadi, saat kami terus bergerak melalui tutorial ini, kami menuju kemampuan menyesuaikan tema Anda dengan lebih baik dan kami benar-benar akan mendapatkan lebih banyak hal yang masuk ke dalam tweaking dan pengembangan tema. Namun, sebelum kami pergi ke sana, kami memiliki beberapa hal terakhir yang harus kami lakukan untuk menyelesaikan pembuatan situs kemudian kami akan menyiapkan sehingga Anda dapat mulai membuat beberapa perubahan kode.

Apa yang akan kita bahas hari ini:

Situs Akhir Mengatur Tweaks

  1. Mematikan komentar pada halaman
  2. Menyiapkan menu

Mempersiapkan Editing Tema dengan Membuat Tema Anak

Sekilas tentang apa yang membuat tema Anda:

  1. Menggunakan editor teks untuk mengedit templat / file tema
  2. Tema anak - mengapa kami menggunakannya
  3. Tema anak - cara membuatnya dan aktifkan di situs Anda

Kamu akan membutuhkan:

  1. Pemahaman tentang HTML dan CSS (jika Anda seorang pemula mutlak di bagian depan itu Anda bisa mulai di sini dengan kursus gratis Tuts + Premium: 30 Hari untuk Mempelajari HTML & CSS)
  2. Instalasi WordPress Anda yang berfungsi
  3. Klien FTP
  4. Perangkat lunak pengeditan teks
  5. Peramban web

Pengeditan Situs Akhir Tweaks

Ok, cukup cepat, sebelum kami memulai tweaking tema Anda, mari kita hentikan beberapa pengaturan situs terakhir, dimulai dengan mematikan komentar di halaman.

Mematikan Komentar pada Halaman

Secara default, pengaturan diskusi untuk WordPress memungkinkan untuk mengomentari situs Anda dan menambahkan kolom komentar baik ke Tulisan maupun ke halaman. Lebih sering daripada tidak, ketika saya berada di kelas pelatihan, orang akan meminta untuk mematikan komentar pada halaman. Anda dapat melakukannya dengan salah satu dari dua cara.

Cara pertama untuk mematikan diskusi / komentar adalah berdasarkan halaman demi halaman, jadi pergi ke Edit Page dan tekan tombol Screen Options di kanan atas halaman.

Pilih kotak centang Discussion. Ini membuat panel opsi Discussion muncul di editor halaman Anda.

Sekarang, di bawah kotak editor konten Anda sekarang akan melihat opsi Discussion ... lanjutkan dan batalkan pilihan kotak centang Allow Comments, kemudian perbarui halaman Anda. Pekerjaan selesai!

7-bwwp_5-edit-commenting_single7-bwwp_5-edit-commenting_single7-bwwp_5-edit-commenting_single

Atau, Anda mungkin ingin menghemat waktu dan mematikan komentar pada lebih dari satu halaman pada suatu waktu ... jadi pergilah ke daftar All Pages dan pilih halaman di mana Anda ingin menghapus komentar.

Lalu lanjutkan ke drop down Bulk Actions dan pilih Edit dan tekan tombol Apply.

9-bwwp_5-edit-commenting-bulk9-bwwp_5-edit-commenting-bulk9-bwwp_5-edit-commenting-bulk

Ini akan memunculkan panel Bulk Edit. Di sebelah kiri panel itu adalah daftar laman yang Anda edit, jika ada yang tidak ingin diedit, tekan 'x' di sebelahnya untuk menghapusnya dari daftar.

Di sebelah kanan adalah elemen yang tersedia untuk bulk editing pages. Bisa ditebak, salah satunya adalah komentar jadi ubah itu pilih item ke 'Do Not Allow' lalu klik Update. Pekerjaan selesai, lagi!

8-bwwp_5-edit-commenting-bulk_28-bwwp_5-edit-commenting-bulk_28-bwwp_5-edit-commenting-bulk_2

Menyiapkan Menu Kami

Navigasikan ke Appearance »Menus di sidebar.

Ini adalah area di mana Anda dapat mengatur seberapa terstrukturnya navigasi situs Anda  - Anda akan dapat melihat beberapa bidang utama; kolom di sebelah kiri tempat Anda memilih item menu Anda, dan panel di sebelah kanan tempat Anda menyusun menu.

2-bwwp_5-menu-editor2-bwwp_5-menu-editor2-bwwp_5-menu-editor

1. Buat menu Anda, dan Anda akan melihat di atas bahwa kami telah membuat menu, dalam hal ini disebut Primary Menu.

(Dalam contoh di atas saya telah memilih tab View All sehingga saya dapat melihat semua halaman yang harus saya pilih.)

2. Pilih halaman di daftar panel kiri yang ingin Anda tambahkan ke menu Anda dan tekan tombol Add to Menu.

3. Anda sekarang akan melihat item menu yang tercantum dalam struktur menu Anda yang dapat Anda seret dan letakkan di dalam pesanan yang Anda inginkan.

4-bwwp_5-menu-editor_drag_drop4-bwwp_5-menu-editor_drag_drop4-bwwp_5-menu-editor_drag_drop

4. Tambahkan menu ke Navigation Menu Anda. Ini akan menempatkan daftar kami di tempat yang telah dipilih oleh pengembang tema untuk navigasi utama. Sebenarnya, opsi yang muncul di lokasi menu adalah spesifik tema. Tema kami saat ini, Twenty Thirteen, menawarkan satu lokasi menu yang disebut Navigation Menu, opsi yang tersedia di sini mungkin berbeda sesuai dengan tema Anda. Pilih kotak centang itu dan tekan Save Menu.

5-bwwp_5-menu-editor_add_location5-bwwp_5-menu-editor_add_location5-bwwp_5-menu-editor_add_location

5. Navigasikan ke bagian depan situs Anda untuk melihat menu baru Anda beraksi.

6-bwwp_5-menu-editor_menu_published6-bwwp_5-menu-editor_menu_published6-bwwp_5-menu-editor_menu_published

OK, itu sudah cukup dari situs dasar yang disiapkan ... sekarang mari kita menyingsingkan lengan baju kita untuk mulai benar-benar bersiap-siap untuk beberapa kustomisasi.


Mempersiapkan Kustomisasi Tema - Mengatur Tema Anak

Pertama ambil sendiri beberapa perangkat lunak pengedit teks. Ada banyak editor teks gratis di luar sana yang paling dasar mereka bisa termasuk Notepad di Windows atau Teks Edit di Mac (pastikan Anda mengubah preferensi Edit Teks ke Plain Text jika Anda menggunakan ini), tetapi masalahnya dengan editor ini adalah bahwa mereka tidak benar- benar dibuat untuk pengembang. Editor teks khusus-pengembang memberi Anda manfaat tambahan dari nomor baris dan penyorotan sintaks (kode warna) yang membuat keseluruhan proses jauh lebih sedikit rumit.

Untuk latihan ini, saya sarankan untuk mendapatkan editor teks pengembang, dan untuk membuatnya mudah, saya sarankan untuk menggunakan salah satu editor gratis di luar sana, berikut ini beberapa saran:

(Saya menggunakan Text Wrangler dalam semua contoh ini. Tata letaknya akan berbeda di editor lain, tetapi Anda harus menemukan hal-hal mendasar yang sama.)

Berikut ini ikhtisar singkat tentang apa yang akan Anda lihat ketika Anda melihat file CSS di Text Wrangler.

  • Daftar dokumen yang terbuka, sehingga Anda dapat menavigasi file yang ingin diedit
  • Nomor baris untuk membantu Anda menemukan jalan Anda melalui file Anda (terutama berguna jika Anda melihat kesalahan yang merujuk ke baris kode)
  • Penyorotan sintaks yang memberi Anda teks berwarna sesuai dengan bagian dari fungsi kode-kode dalam file itu
1-bwwp_5-text-editor1-bwwp_5-text-editor1-bwwp_5-text-editor

Setelah Anda mengaturnya, kami akan masuk ke bagian terbesar dari tutorial kami, kami akan segera kembali ke editor teks.

Melihat File Tema Anda

Instalasi WordPress yang saat ini kami gunakan secara default menggunakan tema Twenty Thirteen, sekumpulan template PHP, CSS, Javascript dan file gambar yang semuanya bekerja sama untuk membuat situs Anda terlihat seperti itu. Mari kita lihat di mana menemukan file tema tersebut, karena mengubah tampilan dan nuansa tema Anda membutuhkan pengeditan beberapa file ini.

Crank klien FTP Anda (ingat Filezilla? Kami mengaturnya di Bagian 3 - Menginstal WordPress secara Manual) dan membuka koneksi ke situs web Anda dan di panel jarak jauh menavigasi ke direktori wp-content.

10-bwwp_5-wp-content10-bwwp_5-wp-content10-bwwp_5-wp-content

Saat Anda menelusuri direktori, Anda akan menemukan struktur folder seperti ini:

Bisa ditebak, direktorinya yang kami tertarik adalah twentythirteen, buka itu dan Anda akan mendapatkan tampilan seperti ini (Dalam contoh gambar saya menyortir menurut Jenis File sehingga urutan file mungkin berbeda dengan Anda).

11-bwwp_5-twenty-thirteen11-bwwp_5-twenty-thirteen11-bwwp_5-twenty-thirteen

Pada titik ini jangan panik tentang volume file belaka. Itu bisa luar biasa; Namun, ketika kami sampai pada titik mengedit tema kami, kami akan membuat perubahan menggunakan Tema Anak yang akan mengurangi beberapa 'gangguan' dan membuat semuanya menjadi kurang berantakan.

Apa, dan Mengapa Kita Menggunakan, Tema Anak?

Salah satu hal yang akan Anda perhatikan ketika Anda menghabiskan waktu dengan WordPress atau pengembangan web itu adalah lingkungan perubahan konstan. .Selalu ada pembaruan untuk kode, atau plugin dan tema yang tentu saja, adalah salah satu hal hebat tentang proyek WordPress. Tetapi itu juga berarti bahwa pada titik tertentu kemungkinan besar akan terjadi perubahan pada tema yang Anda gunakan ketika pengembang mendorong pembaruan untuk kinerja, keamanan, dan fungsionalitas.

Begini masalahnya ... Jika Anda telah menggunakan tema sebagai tema pemula untuk situs Anda dan telah menyesuaikannya agar sesuai dengan desain khusus dan kebutuhan situs Anda, dan pengembang asli mendorong pembaruan tema, perubahan apa pun yang Anda buat akan ditimpa jika Anda menekan tombol pembaruan itu. Tetapi jika pembaruan untuk keamanan, apa yang akan Anda lakukan? Tinggalkan situs Anda sebagaimana adanya dan ambil risiko dengan kode tidak aman? EEK! Anda tidak ingin melakukan itu.

Jadi, yang kami inginkan adalah sistem yang memungkinkan kami memperbarui tema kami tanpa tumpang tindih dengan penyesuaian.

Masukkan Tema Anak yang sederhana.

Tema anak memungkinkan Anda untuk membuat tema baru yang menggunakan tema lain sebagai induknya. Semua gaya dan fungsi induk digunakan sebagai templat situs Anda tetapi setiap file yang diubah dan dikustomisasi disimpan di direktori mereka sendiri, benar-benar terpisah dari induknya. Jadi dalam kasus tema induk yang diperbarui, dikarenakan tema anak Anda terpisah, tidak ada risiko file-nya ditimpa. Menggunakan tema anak juga merupakan cara yang bagus untuk memulai dengan pengembangan WordPress dengan awal kepala yang nyata daripada memulai dari goresan mutlak.

Jadi Itulah Mengapa, Beginilah Cara

Pertama-tama inilah referensi untuk tema anak dari WordPress.org itu sendiri, itu referensi yang bagus http://codex.wordpress.org/Child_Themes.

Di sinilah kita mulai benar-benar membuat beberapa file kita sendiri dengan editor teks kami. Jadi buka editor Anda dan salin kode ini ke bagian atas dokumen baru Anda:

Sebelum Anda menyimpan file, Anda dapat mengedit beberapa bidang ini untuk menjadikan tema Anda sendiri, jadi lanjutkan dan edit nama tema dan URL serta kolom deskripsi dan penulis, tetapi jangan mengedit Templat, itulah baris penting yang memberi tahu WordPress yang tema ini bergantung pada tema induk, dalam hal ini, twentythirteen .

12-bwwp_5-stylesheet-header12-bwwp_5-stylesheet-header12-bwwp_5-stylesheet-header

Hal 2nd yang harus kita lakukan adalah menempelkan baris yang memberitahu WordPress di mana untuk menemukan stylesheet (file CSS yang menentukan semua gaya yang membuat tema terlihat seperti itu)

Jadi salin baris ini ke file Anda:

13-bwwp_5-stylesheet-header_213-bwwp_5-stylesheet-header_213-bwwp_5-stylesheet-header_2

Simpan file dengan nama style.css (nama ini penting, jangan beri nama yang lain, WordPress secara khusus mencari file ini) ke desktop Anda (atau di suatu tempat Anda akan dapat menemukannya).

Memindahkan File Dari Mesin Lokal Kami ke Server

Hal berikutnya yang perlu kita lakukan adalah mengirim file ini ke server, tetapi kita perlu membuat direktori di folder wp-content untuk tema anak baru kita terlebih dahulu. Jadi kembali ke program FTP Anda dan di jendela server jauh, luaskan pohon file sehingga Anda dapat melihat direktori tema dan klik kanan di atasnya dan pilih Create Directory dari menu pop-up.

14-bwwp_5-new-directory_214-bwwp_5-new-directory_214-bwwp_5-new-directory_2

Klik untuk membuat direktori, dan masukkan nama di jendela untuk tema kami (beri nama direktori yang sama dengan tema Anda untuk memudahkannya sendiri) dan klik ok.

15-bwwp_5-new-directory15-bwwp_5-new-directory15-bwwp_5-new-directory

Kemudian klik dua kali pada direktori tema baru sehingga di sisi jauh dari jendela FTP Anda Anda dalam direktori tema kosong baru dan menavigasi di sisi lokal jendela FTP Anda jadi desktop Anda, atau direktori di mana Anda menempatkan Anda lembar style.css , adalah salah satu yang dipilih.

Ketika Anda selesai melakukannya, seret file style.css Anda dari panel Local Desktop ke direktori tema remote.

Sekarang, kembali ke browser Anda dan situs WordPress Anda dan arahkan ke Appearance »Themes. Perhatikan bahwa ada tema baru di sana dengan nama Anda di atasnya! (Dengan asumsi Anda mengubah nama penulis menjadi milik Anda sendiri saat kami mengedit header stylesheet).

Lanjutkan dan Aktifkan ...

17-bwwp_5-activate-theme17-bwwp_5-activate-theme17-bwwp_5-activate-theme

Anda sekarang harus melihat bahwa tema Anda adalah tema saat ini - Anda mungkin memperhatikan bahwa detail di panel  Current Theme mencerminkan informasi yang Anda edit di header stylesheet yang kita buat.

18-bwwp_5-activate-theme_218-bwwp_5-activate-theme_218-bwwp_5-activate-theme_2

Akhirnya, arahkan ke bagian depan situs web dan amati ...

19-bwwp_child_frontpage19-bwwp_child_frontpage19-bwwp_child_frontpage

Yap, meskipun Anda memiliki tema baru, situs Anda tidak terlihat berbeda ... ingat kami pada dasarnya masih melihat tema TwentyThirteen. Tetapi harap berhati-hati, dalam tutorial kami berikutnya, mari kita lihat cara memulai membuat beberapa perubahan sederhana untuk menjadikan tema ini lebih banyak dari milik Anda sendiri!


Kesimpulan

Setelah situs Anda aktif dan berjalan, halaman dan menu sudah siap, Anda mungkin mulai berpikir tentang bagaimana Anda dapat benar-benar mendapatkan tema yang lebih menarik 'Anda'. Cara terbaik dan paling bijaksana untuk melakukannya adalah mulai dengan tema yang ada dan mengatur tema anak Anda sendiri menggunakan tema yang ada sebagai templatnya. Ini tidak hanya mempercepat waktu pengembangan, (berdiri di atas bahu raksasa, sebagaimana adanya),juga membantu kita untuk mempelajari bagaimana tema disatukan , tetapi di atas semua itu, melindungi perubahan kita terhadap waktu seperti di waktu pengembang tema asli memperbarui tema.

Advertisement
Did you find this post useful?
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.