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

Buat Halaman Tetapan Untuk Tema WordPress Anda

by
Difficulty:IntermediateLength:LongLanguages:

Malay (Melayu) translation by Neurion (you can also view the original English article)

Mewujudkan tema anda sendiri untuk WordPress adalah cara yang baik untuk memberikan blog anda atau laman web WordPress yang dikuasakan dengan sentuhan asal. Tetapi tema yang paling menarik bukanlah bagus jika anda perlu berada di bawah hud dan mengedit HTML atau kod PHP tema apabila tiba masanya mengubah beberapa aspek. Terutama, apabila bukan anda tetapi pelanggan yang membayar menggunakan tema anda. Nasib baik, membuat halaman tetapan untuk tema anda di WordPress tidak begitu sukar, dan selepas membaca tutorial ini, anda akan dapat membuatnya dalam masa yang singkat!


Langkah 1 Menentukan Tetapan Apa yang Diperlukan

Semuanya bermula dari keperluan: untuk membuat halaman tetapan yang jelas dan berguna, anda perlu memikirkan perkara-perkara yang perlu diubah dan meninggalkan segala-galanya. Setiap tetapan baru yang anda tambahkan ke menu admin menambah kerumitan kepada antara muka pengguna dan risiko menjadikan tema lebih sukar digunakan. Itulah sebabnya lebih baik untuk berhati-hati dan menimbulkan pilihan yang sering berubah dan meninggalkan penyesuaian satu kali yang boleh dilakukan dengan mudah mengubah satu fail di dalam tema.

Satu lagi soalan yang perlu diingat adalah "Siapa yang akan mengubah tetapan ini?" Jika pengguna sudah biasa dengan PHP dan WordPress, mungkin wajar untuk mengharapkan dia OK dengan memasukkan kod Google Analyticsnya dalam kod itu sendiri, tetapi anda tidak sepatutnya memerlukan dari perancang grafik, belum lagi seorang penulis yang tidak bahkan tidak perlu tahu apa-apa tentang HTML dan CSS.

Idea-idea umum untuk perkara-perkara untuk menentukan dalam tetapan tema termasuk:

  • Kod Penjejakan Google Analytics tapak
  • Bilangan sidebar dan kedudukan mereka (kiri, kanan, mungkin naik dan turun)
  • Lebar halaman
  • Kandungan footer anda
  • Pilihan untuk ciri yang khusus untuk tema, seperti format penggoda tersuai.

Sebaik sahaja anda telah mengumpulkan senarai ciri tema yang anda ingin kawal melalui halaman tetapan, anda hampir bersedia untuk memulakan pelaksanaannya. Sebelum anda beralih dan membuat halaman tetapan anda, anda boleh menjimatkan masa dengan memastikan tiada ciri WordPress yang tersedia untuk penyesuaian yang anda fikirkan. Widget, menu tersuai, latar belakang adat dan imej header adalah alat yang berguna untuk membuat tema anda disesuaikan dengan kerja yang jauh lebih sedikit daripada yang diperlukan untuk membuat tetapan anda sendiri. Walau bagaimanapun, mereka adalah topik untuk tutorial yang berbeza.

Tetapan yang Dicipta dalam Tutorial Ini

Untuk tutorial ini, saya bermimpi halaman utama tema yang terdiri daripada grid dengan bilangan jawatan yang berbeza yang boleh dipilih, diedit dan disusun semula oleh admin menggunakan halaman tetapan tersuai.

Dalam editor, unsur halaman depan akan dibentangkan sebagai senarai unsur yang mana yang baru boleh ditambah menggunakan JavaScript dan jQuery.

Saya suka untuk melihat pratonton halaman pentadbir WordPress seperti yang saya reka bentuk HTML, jadi saya biasanya mulakan dengan menghubungkan halaman tetapan ke WordPress, dan kemudian hanya bergerak ke merancang kandungan halaman. That's why, our next step is creating a placeholder settings page and hooking it to WordPress.


Langkah 2 Mengambil Halaman Tetapan ke WordPress

Membuat halaman tetapan bermula dengan membuat fungsi yang menyusun menu dan menyambungkannya ke admin_menu tindakan WordPress. Ini memberitahu WordPress untuk memanggil fungsi anda apabila waktunya untuk membuat menu supaya segala-galanya dilakukan pada masa yang sesuai. Tambahkan kod ini ke fail functions.php tema anda:

Sekarang kami akan meletakkan kod untuk membuat halaman tetapan di dalam fungsi yang baru kami buat.

Apabila membuat halaman tetapan anda, anda mempunyai pilihan sama ada menambah halaman sebagai submenu kepada salah satu kumpulan tetapan sedia ada atau mencipta menu tahap tertinggi anda sendiri.

Menambah submenu dilakukan dengan fungsi add_submenu_page:

  • $ parent_slug adalah pengenal unik untuk halaman menu teratas yang submenu ini ditambah sebagai seorang kanak-kanak.
  • $ page_title adalah judul halaman yang hendak ditambahkan
  • $ menu_title adalah tajuk yang ditunjukkan dalam menu (sering versi yang lebih pendek dari $ page_title
  • Keupayaan $ adalah keupayaan minimum yang diperlukan dari pengguna agar dapat mengakses menu ini.
  • $menu_slug adalah pengenal unik untuk menu yang dibuat
  • $function adalah nama fungsi yang dipanggil untuk mengendalikan (dan memberi) menu ini

Jika anda memilih untuk menambah halaman menu sebagai submenu kepada salah satu kumpulan WordPress, anda boleh menggunakan nilai berikut sebagai parameter $ parent_slug:

  • Papan Pemuka: index.php
  • Catatan: edit.php
  • Media: upload.php
  • Links: link-manager.php
  • Halaman: edit.php?post_type=page
  • Komen: edit-comments.php
  • Rupa: themes.php
  • Plugins: plugins.php
  • Pengguna: users.php
  • Alat: tools.php
  • Settings: options-general.php

Kumpulan Penampilan kelihatan seperti calon yang baik untuk meletakkan halaman tetapan kami. Mari cuba, dan buat halaman tetapan pertama kami. Berikut adalah versi persediaan menu kami yang dikemas kini:

Kami masih perlu membuat fungsi theme_front_page_settings untuk berfungsi. Di sini ia dalam bentuk yang paling mudah:

Dan ini adalah bagaimana ia kelihatan dalam tindakan:

Kami juga perlu menyemak bahawa pengguna mempunyai hak yang diperlukan untuk menyunting halaman tetapan. Untuk melakukannya, tambahkan kod berikut pada permulaan fungsi halaman tetapan:

Sekarang, jika pengguna yang tidak dibenarkan menguruskan pilihan datang ke halaman tetapan, dia akan melihat apa-apa kecuali mesej, "Anda tidak mempunyai keizinan yang mencukupi untuk mengakses halaman ini."

Jika tema anda memerlukan banyak halaman tetapan, ia boleh mengelirukan bagi pengguna untuk mencari mereka berselerak di sekitar struktur menu. Dalam kes itu, mewujudkan kumpulan tetapan anda sendiri memudahkan pengguna tema untuk mencari semua halaman menu untuk tema itu.

Untuk menambah kumpulan tetapan anda sendiri, anda perlu membuat halaman menu tahap teratas dan hubungkan halaman submenu kepadanya. Here is a new version of our menu setup function. Fungsi add_menu_page yang digunakan untuk membuat menu tahap teratas adalah serupa dengan add_submenu_page kecuali ia tidak mengambil parameter $ parent_slug.

Jika anda menguji kod dan menyegarkan pentadbir WordPress, anda akan melihat kumpulan menu baru anda muncul di bahagian bawah senarai menu:

Jika anda menguji kod dan menyegarkan pentadbir WordPress, anda akan melihat kumpulan menu baru anda muncul di bahagian bawah senarai menu: Mengklik elemen menu atas tidak membawa anda ke menu "Halaman Depan" tetapi halaman menu dipanggil "Tema contoh." Mengklik elemen menu atas tidak membawa anda ke menu "Halaman Depan" tetapi halaman menu dipanggil "Tema contoh."

Kelihatan lebih baik. Sekiranya anda masih ingin meningkatkan penampilan kumpulan menu anda, terdapat dua medan pilihan dalam fungsi add_menu_page yang anda akan dapati berguna. Hanya tambah nilai selepas nama fungsi dalam panggilan kaedah:

  • $ icon_url menentukan URL ikon untuk menu tahap teratas.
  • Kedudukan $ menentukan posisi kumpulan menu anda dalam senarai menu. Semakin tinggi nilai, semakin rendah kedudukan dalam menu.

Langkah 3 Mewujudkan Borang HTML Untuk Halaman Tetapan

Sekarang kita telah membuat halaman tetapan, dan ia muncul dengan baik di menu sebelah, sudah tiba masanya untuk mula menambahkan beberapa kandungan. Jadi, mari kita kembali ke senarai tetapan yang ada dalam fikiran kita, dan draf halaman untuk mengeditnya.

Dalam tutorial ini, kita memerlukan medan untuk menentukan berapa banyak elemen yang perlu disenaraikan dalam satu baris, dan senarai untuk menentukan elemen sebenar. Untuk bermula dari yang lebih mudah, mari buat bidang teks untuk bilangan elemen pada satu baris. Edit fungsi halaman tetapan anda:

Apabila anda memuatkan semula halaman tetapan anda, anda akan melihat medan tetapan pertama muncul:

Untuk membuat halaman tetapan sesuai dengan lancar dalam pengalaman WordPress dan untuk memberi plugin anda sentuhan profesional, amalan terbaik untuk menggunakan kelas CSS dan gaya yang digunakan oleh WordPress dalam halaman tetapannya sendiri. Cara yang baik untuk mempelajari cara ini adalah dengan meneruskan dan menganalisis kod sumber WordPress.

Perkara yang paling penting adalah membungkus halaman tetapan anda dengan div dengan kelas "bungkus". Dalam elemen div tersebut, anda boleh menggunakan banyak gaya yang telah ditetapkan seperti tajuk, butang, dan medan borang. Mari bermula dengan menyusun tajuk halaman tetapan kami:

  • Kami akan membuat tajuk h2 untuk halaman (Anda boleh menggunakan tag tajuk dari h2 hingga h6 untuk membuat tajuk dengan saiz yang berbeza.)
  • Kami akan menunjukkan ikon halaman tetapan tema sebelum tajuk. (Anda boleh menggunakan ikon WordPress yang telah ditetapkan dengan fungsi screen_icon. Fungsi ini boleh mengambil salah satu daripada parameter berikut: indeks, edit, muat naik, pautan-pengurus, halaman, komen, tema, plugin, pengguna, alat atau pilihan-umum.)
  • Kami akan memasukkan unsur input di dalam bentuk dan jadual dengan jadual bentuk kelas.

Seterusnya, sudah tiba masanya untuk menambah unsur-unsur.

Untuk melakukan ini, kami akan menggunakan jQuery kerana ia menjadikan perkara-perkara lebih mudah daripada menulis JavaScript dengan dari awal, dan digabungkan dengan WordPress. Sekiranya anda menggunakan jQuery sebelum ini, ada satu perkara yang perlu diingat: notasi $ yang biasanya anda gunakan dengan jQuery tidak berfungsi di WordPress - anda perlu menaip keseluruhan perkataan, jQuery sebaliknya.

Pertama, kami akan membuat elemen untuk menyunting tetapan untuk satu blok halaman utama untuk berfungsi sebagai templat untuk elemen yang ditambahkan oleh pengguna. Tambahkan kod ini betul-betul di antara tag jadual penutup dan tag bentuk penutup selepas itu.

Kini, ia kelihatan seperti ini:

Kini kami mempunyai templat kami, sudah tiba masanya untuk menyembunyikannya dan buat JavaScript untuk menggunakannya untuk membuat barisan pos yang diketengahkan ke halaman tetapan. Tetapkan gaya untuk elemen li di atas untuk dipaparkan: tiada;

Kemudian, kami akan membuat senarai untuk memegang unsur halaman depan kerana ia ditambah, dan pautan yang akan diklik oleh pengguna untuk menambah elemen baru. Saya mengulangi keseluruhan HTML supaya anda boleh melihat dengan jelas di mana perubahan itu berlaku:

Dalam tema kehidupan sebenar, amalan yang baik untuk meletakkan kod JavaScript anda dalam fail berasingan, tetapi untuk membuat tutorial ini sedikit lebih mudah untuk diikuti, saya kini menambah JavaScript dalam fungsi yang sama dengan HTML di atas, tepat sebelum bungkus div:

Kod JavaScript di atas mencipta fungsi yang dipanggil apabila pengguna mengklik pautan dengan jawatan-tambahan-tambah id. Fungsi ini mengklonkan item senarai templat yang kami buat lebih awal dan mengemas kini medannya untuk mempunyai id dan nama yang unik. Dengan cara ini mereka semua akan dihantar dengan betul dengan borang apabila pengguna klik hantar. Elemen elementer berubah mengandungi id seterusnya untuk ditambahkan. Ia juga disimpan dalam medan tersembunyi supaya bila borang dihantar, kita tahu berapa banyak unsur halaman depan yang diharapkan.

Sekiranya anda mengklik pautan "Tambah pos yang diketengahkan" beberapa kali, anda akan melihat unsur-unsur hownew dimasukkan ke dalam senarai:

Tetapi apabila anda mengklik pautan keluarkan, anda akan melihat bahawa tiada apa yang berlaku. Mari tambahkan fungsi untuk mengeluarkan elemen dari senarai:

Kita juga perlu memanggil fungsi tersebut. Tambah kod berikut sebelum menambah elemen.

Sebelum bergerak untuk menyelamatkan borang, ada satu lagi perkara yang harus dilakukan. Kami akan menggunakan plugin jQuery ui.sortable untuk membuat elemen halaman depan disusun dengan menyeretnya pada halaman. Untuk mendayakan fungsi pengisihan, kita perlu menyertakan fail JavaScript yang betul (yang juga digabungkan dengan WordPress). Ini boleh dilakukan dengan menambah baris kod berikut pada akhir functions.php:

Kemudian, kami akan menambah hak JavaScript berikut sebelum (atau selepas) fungsi klik jQuery ("# ​​add-featured-post").

Coretan ini membuat senarai boleh disusun dan menambah peristiwa yang dipanggil setiap kali pengguna selesai menyusun. Pengendali acara mengemas kini semua id dalam elemen supaya pesanan baru dipelihara juga semasa menyimpan borang (ini akan menjadi lebih jelas sebaik sahaja kami melaksanakan penjimatan). Apabila menulis pengendali berhenti ini, saya perhatikan bahawa kod untuk menetapkan id untuk kandungan templat itu diduplikasi dalam dua tempat, jadi saya refactored ke fungsi sendiri, yang saya letakkan tepat sebelum garis dengan jQuery (document) .ready () :

Dengan menambahkan unsur-unsur baru, menyusunnya, dan mengeluarkannya bekerja, sudah tiba masanya untuk bergerak untuk menyimpan data. Tetapi sebelum itu, tambahkan butang serah hak sebelum tag penutup borang.


Langkah 4 Menyimpan Borang

Halaman tetapan kelihatan baik, tetapi ada sesuatu yang hilang: ia tidak melakukan apa-apa lagi. Sudah waktunya untuk menyimpan beberapa data. WordPress menyediakan sistem yang mudah untuk menyimpan tetapan tema dan plugin sebagai pasangan nilai utama ke pangkalan data menggunakan dua fungsi: get_option dan update_option. Data yang disimpan dengan menggunakan fungsi boleh semudah sebagai nilai nombor atau sebagai kompleks seperti array bersarang pelbagai kali.

Pengendalian bentuk dilakukan dalam fungsi yang sama yang membuat bentuk. Untuk mengetahui sama ada borang diserahkan atau tidak, kami menambah medan tersembunyi, update_settings ke borang dan kemudian semak sama ada medan itu dihantar atau tidak dalam fungsi pengendalian.

Medan tersembunyi yang masuk ke dalam bentuk kelihatan seperti ini:

Mari mulakan dengan menyimpan tetapan yang lebih mudah, num_elements. Kami akan melepaskan atribut untuk memastikan pengguna tidak menghantar kandungan berniat jahat dari tag HTML dan kemudian menyimpannya ke storan tetapan WordPress. Apabila menggunakan update_option, kita tidak perlu risau sama ada tetapan telah disimpan atau tidak.

Sebelum kita bergerak untuk menyimpan senarai, mari tambahkan nilai semasa num_elements ke bentuk tetapan supaya pengguna sentiasa melihat nilai apa yang telah dimasukkannya sebelum menentukan nilai seterusnya. Ini juga akan membantu kami menguji bahawa nilai sebenarnya disimpan.

Dan untuk kes-kes di mana kita belum menyimpan apa-apa lagi, kita perlu memuatkan nilai semasa dari pilihan, jadi mari tambahkan sekeping kod ini untuk dilaksanakan apabila tiada borang dihantar.

Apabila borang disimpan, penting untuk memberitahu pengguna supaya dia tidak tertanya-tanya sama ada sesuatu berlaku atau tidak. Jadi, mari kita membuat notis mudah yang mengatakan "Tetapan disimpan." selepas update_option:

Kemudian, mari kita simpan unsur halaman depan. Nilai id tertinggi di elemen halaman depan diluluskan sebagai elemen-max-id, jadi kita boleh mengambil nilai dan gelung melalui unsur-unsur sehingga id itu, menyimpan data mereka ke dalam susunan dalam urutan yang betul:

Ini menyimpan data, tetapi kita masih perlu mempersembahkan nilai pada halaman tetapan. Jadi, mari kita lakukan sama dengan medan num_elements dan muatkan pilihan lalai pada permulaan fungsi:

Dan kemudian, buat elemen sedia ada ketika melakukan bentuk:

Kami juga perlu menetapkan nilai awal untuk pembolehubah elementCounter yang digunakan dalam JavaScript dengan menetapkan nilai awal medan tersembunyi dalam PHP dan membacanya ketika menginisialisasi pemboleh ubah JavaScript:

Dan bahagian JavaScript:


Langkah 5 Menggunakan Tetapan Di dalam Tema

Menyimpan dan menunjukkan nilai tetapan di dalam kawasan admin adalah hebat, tetapi apa yang benar-benar penting adalah bagaimana anda menggunakannya untuk menyesuaikan tema anda, jadi sekarang, kami telah sampai ke titik di mana saatnya untuk mengambil tetapan kami dan melakukan sesuatu yang sejuk dengan mereka.

Dari sini, perubahan pergi ke index.php bukan functions.php. Pertama, kami akan membaca pilihan untuk pembolehubah:

Mari kita gelung melalui senarai elemen $, masukkan mereka ke baris dengan blok $ num_elements pada setiap satu.

Dan kemudian, menggunakan data yang disimpan untuk setiap elemen, kami akan mengisi bahagian rendering elemen di atas:

Dengan beberapa elemen, ia kelihatan seperti ini:

Masih agak membosankan. Siaran tidak mempunyai imej lakaran kecil dan tiada gaya untuk mereka. Untuk menjadikannya lebih baik, mari tambahkan sokongan pertama untuk imej lakaran kecil. Ini dilakukan dengan menghubungkan fungsi baru yang menetapkan ciri tema yang akan dipanggil sejurus selepas tema dimuatkan

Fungsi, setup_theme_features menghidupkan thumbnail imej menggunakan fungsi WordPress add_theme_support supaya WordPress menambah fungsi ini ke halaman menyimpan pos. Di halaman pos, kami kini boleh menambah satu imej sebagai lakaran kecil dengan mengklik "Gunakan sebagai imej pilihan" pada halaman muat naik imej selepas memuat naik foto.

Fungsi ini juga mentakrifkan jenis saiz imej baru, tutorial-thumb-size yang digunakan ketika mendapatkan thumbnail gambar dalam kod rendering.

Selepas memilih imej yang diketengahkan, simpan perubahan dan muat semula halaman depan. Kelihatan lebih menarik lagi:

Akhirnya, kami akan menambah beberapa gaya ke style.css, dan di sana kami pergi, tema ini mempunyai paparan dipaparkan dipaparkan:


Kesimpulan

Sekarang, kami telah membuat halaman tetapan untuk tema tersuai. Tema ini jauh dari lengkap, tetapi saya harap pengenalan ini dapat bermula dengan menambah tetapan dan unsur-unsur disesuaikan untuk tema WordPress seterusnya anda.

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.