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

WordPress Theme pengembangan pelatihan roda: hari pertama

by
Length:LongLanguages:

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

Siap untuk belajar bagaimana membuat tema WordPress Anda pertama? Seri tutorial ini akan mengambil pendekatan langkah demi langkah, menggunakan "tema pembelajaran" dikenal sebagai WordPress pelatihan roda, untuk membantu mengajar subjek. Seri ini akan mengambil newbie WordPress mutlak melalui langkah-langkah dasar yang diperlukan untuk mengubah template HTML apapun menjadi sebuah tema WordPress yang berfungsi penuh.

Learning How to Make a WordPress Theme

Pengenalan seri!

Ketika saya mulai menggunakan WordPress kembali pada tahun 2006, tidak ada sangat banyak tutorial di sekitar kembali kemudian di mana untuk memulai dengan pengembangan Theme.

Saya belajar cara yang keras, melalui trial and error, pertambangan WordPress codex, juga dari beberapa tuts yang telah ada saat itu. Untuk 2-3 tahun terakhir aku sudah mengajar dasar WordPress tema pembangunan dan mematikan, dan telah memperhatikan bahwa, bagi mereka yang tidak sangat akrab dengan sistem manajemen konten, sebagian besar tutorial yang ada untuk mengajar pembangunan dari awal terlalu rumit.

Jadi, saya telah mengembangkan pendekatan langkah demi langkah, menggunakan "tema pembelajaran" dikenal sebagai WordPress pelatihan roda, yang akan mengambil newbie WordPress lengkap melalui langkah-langkah dasar yang diperlukan untuk mengubah template HTML apapun menjadi sepenuhnya fungsional WordPress tema. Kita akan mulai keluar perlahan-lahan meskipun, khusus untuk mereka yang tidak memiliki kemewahan dari pengalaman sebelumnya bekerja dengan CMS kode atau PHP untuk hal itu. Oleh karena itu nama, "Pelatihan roda". Hardcore coders langkah samping, kami akan menghapus trek balap!

Training Wheels Screenshot
Mengintip tema awal yang kita akan membangun atas seri. Ini tidak dimaksudkan untuk menjadi visual fantastis, ini dimaksudkan untuk menjadi pendidikan fantastis! Jangan khawatir - setelah kami selesai, Anda akan pada tema-tema yang lebih besar dan lebih baik dalam waktu singkat.

Akan kami fokus terutama pada kode WordPress, bukan desain. Jadi template sengaja sederhana dengan styling beberapa cahaya sehingga Anda tidak naik sepeda Anda dari tebing dari kebosanan.


Untuk benar-benar besar intro untuk pengembangan web menggunakan HTML & CSS, check out seri tutorial Net Tuts - Web pengembangan dari Gores

Prasyarat:

  • Pernah dikodekan sebuah tema WordPress sebelum
  • Bekerja HTML & CSS pengetahuan
  • Pengetahuan manajemen WordPress Admin
  • Pengetahuan tentang instalasi WordPress baik pada server virtual atau hidup
  • Browser terbaru (untuk menghindari tua browser bug)
  • Teks atau Editor kode
  • Inspektur kode sumber browser seperti Firebug
  • Kemauan untuk belajar! (penting)

Rincian tambahan

WordPress tema yang pada dasarnya Plain HTML template, dengan sedikit bit WordPress Tag PHP spesifik dilemparkan ke daerah-daerah yang mana konten dinamis kebutuhan akan dimuat dari database. Untuk alasan ini pemahaman yang baik tentang HTML akan diperlukan untuk menindaklanjuti dengan seri ini.


Langkah 1 - Install WordPress

WordPress Tema, meskipun terutama terdiri dari HTML, tidak dapat menampilkan secara default di browser Anda karena PHP yang dikandungnya, yang mengubah cara mereka berfungsi. Mereka perlu dijalankan melalui sebuah server yang mampu menafsirkan kode PHP, itulah sebabnya mengapa sangat penting untuk bekerja pada PHP mampu web server ketika mengembangkan tema WordPress.

Kami akan dapat melompat-lompat selama proses instalasi untuk WordPress sekarang sebagai fokus kami akan menjadi murni pada pengembangan Theme. Aku sudah terhubung ke Tutorial Video yang sangat baik pada menginstal WordPress pada live server. Ton lebih dapat ditemukan secara online untuk Live dan Virtual Server.

"Virtual Server adalah pada dasarnya server berjalan pada komputer desktop lokal Anda dan dapat setup menggunakan MAMP(mac), XAMPP (mac & windows) atau WAMP(windows)."

Untuk belajar cara menginstal WordPress secara lokal pada virtual server Periksa Video berikut.

Proses instalasi pada dasarnya melibatkan:

  1. Membuat Database, Database pengguna dan itu terkait Password
  2. Meng-upload file WordPress, download dari WordPress.org
  3. Mengedit file wp-config.php sehingga berisi nama, username, password dan mysql server rincian database
  4. Menjalankan script instalasi ditemukan di www.yoursite.com/wp-admin/install.php

Mereka tidak menyebutnya instalasi terkenal 5 menit untuk apa-apa. Pada kenyataannya, jika Anda sudah melakukannya cukup kali dibutuhkan kurang dari 5 menit.


Langkah 2 - mempersiapkan file

Memeriksa www.freecss templates.org untuk satu ton template yang sempurna untuk memulai dan sudah diarahkan digunakan sebagai tema WordPress.

Setelah Anda memiliki instalasi WordPress yang berjalan, Anda akan memerlukan template HTML dasar (index.html) tes dengan stylesheet (style.css). Saya akan mendorong siapa pun belajar HTML untuk proses konversi WordPress untuk berlatih dengan mengunduh sederhana free HTML & CSS template dan mengubah beberapa untuk latihan.

Aku akan menggunakan WordPress tema roda pelatihan selama seri tutorial ini dan saya mendorong Anda untuk melakukan hal yang sama sehingga kita tidak menjajakan dalam arah yang berbeda untuk memulai dengan. Tema pelatihan roda adalah template tulang telanjang, tidak bersemangat atau mencolok, tetapi berisi semua komponen akrab tema WordPress yang khas, yaitu. Header, Menu, Sidebars, isi kolom & Footer. Tema akan diberi pelatihan-roda-0.0 di awal, dan nama akan terus berubah karena kita menambahkan kode lebih lanjut dan kemajuan ke arah yang matang sepenuhnya tema. Di akhir pelajaran ini nama akan berubah ke pelatihan-roda-0.1

Silahkan lihat pada struktur HTML dasar di bawah ini. Sangat sederhana.

HTML Structure

Penamaan file starter

Harus file starter tidak bernama menurut cara yang disebutkan di atas, Anda akan perlu untuk mengubah nama mereka. WordPress memerlukan file dengan nama-nama ini sebagai minimal untuk tema untuk menjadi fungsional. Selain itu kita akan memiliki folder foto untuk menjaga gambar rapi terselip keluar dari cara kami.

  • index.html Home.html»
  • style.css mystyles.CSS»

Mengubah ekstensi File

File index.html, yang akan menjadi struktur dasar untuk tema perlu diganti ke index.php. Saya selalu merekomendasikan menjaga salinan index.html pada sisi meskipun, dalam kasus apa pun berjalan miring sebagai yang pasti akan terjadi. Pikirkan hal ini sebagai ban cadangan dalam kasus Anda mengalami pecah Ban. Pengakuan: bahkan setelah tahun pembangunan tema saya masih benar-benar bodoh hal, terutama setelah tengah malam, ketika otak saya tidak lagi dapat berfungsi tapi kopi adalah menjaga saya akan.

Kita berakhir dengan berikut. Saya berada di folder yang disebut pelatihan-roda-0,0

strater files

Langkah 3 - Stylesheet Header komentar

Jika Anda pernah mencoba menambahkan template HTML biasa ke direktori tema WordPress, Anda akan melihat bahwa itu tidak muncul dalam pilihan untuk mengaktifkan tema. Dengan versi WordPress Anda juga akan menemukan bahwa jika stylesheet Anda tidak mengandung stylesheet komentar di bawah ini, pesan kesalahan akan muncul. Hal ini karena WordPress menggunakan potongan komentar CSS yang ditemukan di bawah ini untuk mendaftar tema Anda sebagai sebuah tema WordPress yang valid. Saat ini sudah tidak lagi perlu untuk memiliki komentar untuk tema Anda untuk mendaftar, tapi tema Anda akan muncul tanpa detil selain nama folder seperti yang dilihat di bawah ini.

Personalisasi tema Anda dengan komentar stylesheet

Kode berikut harus diubah ke halaman berisi rincian unik Anda sendiri serta informasi unik tentang tema Anda membuat.

Dengan rincian dari tema roda pelatihan saya termasuk, itu akan terlihat seperti ini:

Ada beberapa parameter tambahan yang dapat ditambahkan, terutama jika Anda sedang mempertimbangkan tema Anda untuk umum melepaskan, menjual, atau pemuatan ke direktori tema resmi wordpress.org.

Sebelas dua puluh tema Stylesheet komentar

Contoh lebih fleshed stylesheet komentar untuk memberikan sedetail mungkin tentang tema dapat ditemukan di sebelas dua puluh tema default. Seperti Anda dapat melihat beberapa tambahan tag informasi untuk membantu pengguna ketika mencari jenis tertentu tema melalui dashboard tema pencarian atau pada direktori tema adalah hadir. Deskripsi rinci serta beberapa beberapa tema informasi lisensi juga disertakan. Kami akan mengabaikan ini untuk latihan ini.

Setelah Anda punya komentar Stylesheet Anda di tempat, tema Anda sekarang siap untuk diaktifkan melalui administrasi WordPress Dashboard, di bawah penampilan» tema


Langkah 4 - membuat Screenshot

Untuk membantu diri sendiri dan pengguna lain dari tema untuk dengan cepat mengenali tema tema pemasangan wilayah dasbor, ketentuan telah dibuat untuk screenshot.png gambar secara otomatis akan ditampilkan jika ditemukan di root folder tema Anda.

Idealnya, Anda ingin memiliki screenshot yang memberikan representasi yang baik dari apa yang tampak seperti tema. Saya menemukan banyak tema desainer termasuk logo di sini, yang tidak selalu membantu pengguna akhir mengidentifikasi tema yang mereka cari, terutama dalam kasus dimana pengguna memiliki banyak tema-tema yang sudah diinstal, cukup umum terjadi saya percaya.

Screenshot.png harus 240px X 180px, yang merupakan ukuran yang digunakan untuk thumbnail di dashboard. Anda dapat memasukkan ukuran yang berbeda tapi gambar akan diubah ukurannya untuk masuk ke dalam dimensi itu. Terbaik untuk tetap dengan ukuran yang benar pertama kali sekitar untuk memberikan tampilan dan halaman beban pengalaman.

Theme Screenshot

Langkah 5 - PHP Tag Anda pertama

Sebelum kita melangkah lebih jauh, kita perlu menunjukkan arah diri kita sedikit dengan struktur bahasa pengembangan PHP, dan lebih penting lagi struktur WordPress PHP tertentu. PHP yang digunakan dalam tema WordPress oleh dan besar, disesuaikan secara khusus untuk bekerja dalam lingkungan WordPress hanya. Kita akan mulai dengan struktur yang mengandung kode PHP, seperti dengan HTML memiliki kurung sendirian, kode PHP dibungkus.

Di dalam kurung adalah dimana semua fungsi yang terjadi, dengan kode kita umumnya merujuk pada fungsi PHP. Selalu memastikan bahwa ruang yang ada antara yang berisi tag dan kode PHP batin. Fungsi-fungsi ini kita akan berurusan dengan yang paling sederhana adalah bloginfo(); fungsi. Perhatikan bahwa setelah nama fungsi, kita memiliki 2 bulat kurung, pembukaan dan penutupan, dengan titik koma pada akhir, menutup off fungsi dan dalam banyak kasus sangat penting. Kurung bulat akan kadang-kadang berakhir yang mengandung beberapa parameter tambahan, untuk memberitahu bloginfo(); fungsi, khusus apa yang dibutuhkan untuk melakukan.

Beberapa fungsi WordPress tidak perlu parameter dalam kurung bulat untuk melakukan fungsi, meskipun mereka mungkin opsional memiliki beberapa fungsi mereka agar lebih spesifik. Bloginfo(); parameter Namun, membutuhkan satu hanya untuk berfungsi sama sekali. Kita akan mendapatkan beberapa fungsi tambahan yang bekerja tanpa parameter seiring berjalannya waktu.

Nama situs

Perhatikan bagaimana nama kata, ditulis dengan tanda kutip tunggal di sekitarnya dalam kurung bulat.

adalah kode yang kami gunakan sebagai pengganti nama situs, di mana pun kami ingin nama itu muncul dalam template kami. Sebagai contoh, dimanapun saya telah menulis "WordPress pelatihan roda" Aku hanya bisa menggantikan bahwa teks dengan fungsi.

Membayar perhatian yang cermat untuk struktur fungsi ini, sebagai sisa kode WordPress mengikuti struktur serupa seluruh. Meninggalkan bagian penting, seperti dalam kurung bulat, titik koma setelah kurung bulat, atau ruang antara php dan kata bloginfo, akan menghasilkan kode Anda tidak bekerja dengan benar. Dalam beberapa kasus ini bisa membunuh seluruh halaman Anda. Aku tahu, itu adalah rasa sakit menjadi yang hati-hati, tetapi membantu mengembangkan kebiasaan baik sejak awal. Mematuhi aturan jalan dan perjalanan Anda akan cara kurang bergelombang.

Ketika situs WordPress menjalankan fungsi ini beban, WordPress query database dan menemukan nama yang Anda telah dimasukkan ke dalam bidang Nama Blog di bawah pengaturan» umum.

General Site Settings

Hal ini juga nama yang Anda masukkan di awal ketika Anda menjalankan instalasi untuk menyiapkan WordPress pertama kalinya. Mengubah nama ini dalam pengaturan umum akan mengakibatkan template Anda mencerminkan perubahan itu segera. Ini pada dasarnya adalah bagaimana bekerja WordPress, atau apapun lainnya Content Management System untuk hal itu. Dinamis Tag menggantikan isi statis sehingga isi dapat dikelola melalui antarmuka administrasi daripada langsung mengedit template.

Tema ini masih tidak cukup siap untuk didaftarkan dalam WordPress. Itu hilang satu langkah penting yang memungkinkan WordPress untuk menampilkan tema Anda dengan benar.


Langkah 6 - menghubungkan CSS Anda utama dengan WordPress

Beberapa langkah kembali index.html kami dengan mudah mampu untuk link ke yang menyertai stylesheet, karena mereka berada dalam folder yang sama dan hanya memasukkan nama file stylesheet dalam stylesheet link akan cukup. Hal ini tidak lagi terjadi meskipun. Tema WordPress tidak berada di tingkat akar dari situs, seperti yang mereka dipasang di wp-content» tema folder dalam perangkat lunak WordPress.

Seperti yang Anda lihat di bawah ini sewaktu mengaktifkan tema saat ini, kami masih tidak melihat gambaran lengkap. Meskipun beban struktur HTML, stylesheet tidak sedang terhubung, yang menghasilkan sebuah halaman unstyled.

Tanpa menjelaskan terlalu banyak detail tentang bagaimana WordPress berjalan tentang memanggil template dari dalam folder tersebut, kita perlu menyadari sekarang bahwa file bisa tidak lagi dihubungkan dengan mudah karena kami terhubung ke mereka di situs HTML sederhana. Kita perlu menggunakan beberapa fungsi WordPress tambahan untuk mengisi langkah antara direktori root dan folder tema saat ini diaktifkan. Kita melakukan ini dengan bantuan lain bloginfo(); fungsi, kali ini mendeteksi URL untuk stylesheet tema saat ini diaktifkan. Tidak peduli apa nama folder tema, WordPress sekarang akan mengisi kekosongan dan masukkan path ke style.css file.

Fungsi ini dimasukkan ke dalam tag tautan stylesheet

yang sekarang menjadi

Jika Anda memeriksa kode sumber Anda menggunakan Lihat sumber atau dengan sesuatu seperti firebug, Anda akan melihat WordPress termasuk jalur penuh dari akar situs semua jalan ke stylesheet. Root folder dari situs contoh saya terletak di http://www.wpbedouine.com/training-wheels/. WordPress karena itu menghasilkan:

Stylesheet_url fungsi yang sama akan otomatis masukkan path ke setiap saat ini diaktifkan tema dalam cara yang sama, tanpa kode sumber sedang diedit. Anda akan melihat sebuah pola muncul, dengan bit isi kode keras digantikan oleh fungsi dinamis yang menarik data dari database dengan cepat.

Merasa bahwa udara yang bergegas melalui rambut Anda sekarang? Jangan khawatir, roda pelatihan akan datang segera! Aku berjanji.


Langkah 7 - menambahkan file ke WordPress

Tempat Anda index.php dan style.css file ke folder sendiri, dinamai berdasarkan apa yang Anda inginkan tema untuk diberi nama dan kemudian upload ke wp-content» folder tema dalam versi live atau virtual host Anda instalasi WordPress Anda seperti yang dilihat di bawah ini.


Langkah 8 - mengaktifkan tema Anda

Dan tanpa basa-basi lagi, pergi ke tampilan» tema dan klik Aktifkan di bawah tema baru dibuat. Untuk sisa dari pembaca situs ini, langkah-langkah ini mungkin telah mengganggu sederhana, tetapi saya secara pribadi kenal perasaan akhirnya mengklik dengan proses ini dan memiliki tema pertama saya mengaktifkan dalam WordPress. Tak ternilai harganya untuk newbie.


Langkah 9 - beberapa potongan tambahan dinamis konten

Sebelum kita menyelesaikan, mari kita gunakan beberapa tambahan, sangat sederhana bloginfo(); fungsi untuk mengisi konten dinamis. Kami sudah telah memperkenalkan bloginfo('name'); dan bloginfo('stylesheet_url');. Di bawah ini kami memiliki HTML awal untuk div header tema kami.

Kami akan mengganti isi H1 link href atribut, yang saat ini hanya memiliki simbol hash dan biasanya akan terlihat seperti href="home.html", dengan bloginfo('url'); fungsi.

Selain itu kami akan mengganti h2 tagline dibawah nama situs dengan:

Jadi potongan kode kami sekarang terlihat lebih wordpressish.

Salah satu isu terakhir untuk menyelesaikan adalah link ke gambar konten di kolom tengah template. Mirip dengan masalah menghubungkan stylesheet, kita perlu menggunakan bloginfo() lain; fungsi untuk mengisi jalur gambar sebagai images/imagename.jpg akan tidak lagi bekerja.

Broken Image

Untuk mengatasi masalah ini, kita menggunakan kode berikut sebelum memanggil direktori gambar

Jadi kita akan berakhir dengan berikut.

Membayar perhatian yang cermat untuk forwardslash tepat setelah penutupan braket dan sebelum nama folder foto!


Langkah 10 - wrap-up proses kita membahas

  1. Menginstal WordPress pada server lokal atau hidup
  2. Menyiapkan file HTML dengan mengganti
  3. Memasukkan dan mengedit stylesheet Anda header komentar
  4. Membuat preview tema Anda screenshot.png
  5. Untuk mengatasi dengan struktur kode WordPress PHP dasar
  6. Menghubungkan kembali stylesheet Anda cara WordPress dengan bloginfo('stylesheet_url');
  7. Menambahkan file ke wp-content > folder tema
  8. Mengaktifkan tema Anda di dashboard di bawah penampilan > tema
  9. Menambahkan beberapa fungsi tambahan bloginfo untuk isi dinamis.

Bloginfo(); fungsi memiliki ton menggunakan untuk menghasilkan berbagai potongan konten dari dalam situs Anda.
Untuk daftar yang lebih lengkap dari parameter untuk bloginfo(); Periksa WordPress Codex dokumentasi pada fungsi ini - http://codex.wordpress.org/Function_Reference/bloginfo.

Lain sumber yang sangat bagus untuk banyak fungsi WordPress DBS interaktif WordPress Tag referensi yang pada dasarnya lebih rapi dan presentasi yang lebih tertib kode terdaftar WordPress Codex.

Saya telah menambahkan potongan kode yang dibahas dalam pelajaran ini ke snipplr account.

DBS Interactive WordPress Functions Reference

Gratis mendorong dengan WordPress segera untuk mengikuti. Aku mendengar roda pelatihan itu berderak datang dari :)

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