Kesalahan Pengembangan Tema WordPress Paling Umum (dan Cara Memperbaikinya)

Diterbitkan: 2019-05-14

Mengirimkan tema ke direktori tema WordPress.org adalah cara yang bagus untuk membagikan karya Anda dan berkontribusi pada komunitas WordPress. Saat ini, ada lebih dari 7000 tema dalam direktori, yang paling populer melebihi 300.000 instalasi aktif. (Tidak termasuk Dua Puluh____ Tema yang dikemas dengan WordPress dan memiliki jumlah pemasangan jutaan.)

Sebelum mengirimkan tema Anda ke direktori, penting untuk memahami proses peninjauan terlebih dahulu karena jika tema Anda tidak memenuhi persyaratan tersebut dapat ditolak di tempat.

Tema yang memiliki 3 atau lebih masalah yang berbeda dapat ditutup karena tidak disetujui. Namun, penulis tema dapat mengirimkan ulang tema setelah mereka memperbaiki masalah.

https://make.wordpress.org/themes/handbook/review/required/

Peninjau ada di pihak Anda dan ingin melihat tema Anda ditayangkan, setelah memenuhi standar yang diperlukan. Jika tema Anda hanya memiliki masalah kecil yang mencegahnya dimasukkan ke dalam direktori, peninjau Anda akan bekerja dengan Anda untuk memperbaikinya.

Sayangnya, jika tema Anda memiliki terlalu banyak masalah, itu akan ditutup karena tidak disetujui. Jika Anda memutuskan untuk memperbaiki masalah, Anda dapat mengunggah tema lagi – tetapi tema itu akan bergabung di bagian belakang antrean.

Dari pengalaman saya meninjau lebih dari 100 tema, saya dapat mengidentifikasi masalah paling umum yang mencegah tema disetujui. Dengan membagikannya kepada Anda di artikel ini, saya harap saya dapat membantu Anda menghindari terjebak dalam antrian atau ditolak.

Mengunggah Tema Anda

Saat Anda mengunggah tema, tema tersebut akan bergabung dengan antrean untuk ditinjau. Rata-rata, dibutuhkan waktu dua bulan untuk tema Anda mencapai garis depan antrean dan menerima ulasan pertamanya. Semua pengulas adalah sukarelawan dengan waktu terbatas yang tersedia untuk menyelesaikan tinjauan. Berbagai faktor dapat mempengaruhi waktu tunggu. Saat lebih banyak orang secara sukarela meninjau tema, antrean bergerak dengan cepat. Sebaliknya, ketika tema dengan banyak masalah dikirimkan, itu memperlambat antrian.

Dengan mengirimkan tema yang memenuhi semua persyaratan, proses peninjauan menjadi jauh lebih lancar dan pada akhirnya tema Anda akan ditayangkan lebih cepat. Dalam panduan ini, kita akan mengeksplorasi masalah paling umum yang akan membuat tema Anda tertahan di antrian dan mencegahnya disetujui.

Catatan: Penulis tema yang memiliki rekam jejak mengirimkan tema bebas masalah dapat mengajukan permohonan untuk menjadi 'Penulis Tepercaya'.

Masalah Penamaan

Saat Anda mengunggah tema, pemeriksaan pertama yang dilakukan adalah melihat apakah nama itu sudah diambil. Sering kali Anda akan diberi tahu bahwa nama yang Anda pilih sudah diambil, bahkan jika Anda tidak dapat melihat tema dengan nama itu di direktori.

Bagaimana bisa? Alasannya adalah bahwa pengujian tidak hanya memeriksa direktori, tetapi memeriksa seluruh ekosistem WordPress. Jika sebuah tema telah dirilis di mana saja (Github, ThemeForest, dll.) dan memiliki lebih dari 50 instalasi aktif, nama itu tidak akan tersedia untuk digunakan.

Catatan: jika Anda telah merilis tema Anda di tempat lain dan mengumpulkan 50+ instalasi, Anda masih dapat menggunakan nama itu di direktori.

Keluaran yang Tidak Terhindari

Peninjau tema memperhatikan keamanan dengan sangat serius, bahkan ada sumber daya khusus. Seluruh artikel dapat ditulis tentang menulis tema aman, tetapi di bagian ini kita akan menjelajahi satu aspek: keluar dari keluaran.

Keluaran yang tidak lolos menempatkan pengguna tema Anda dalam bahaya. Berikut ini contoh nilai yang tidak lolos ($title):

 $judul = get_option( 'my_custom_title' );
gema '<h2>' . $judul . '</h2>';

Masalah dengan di atas adalah bahwa sementara kita tahu apa jenis nilai $title seharusnya , sebuah string, kita belum memeriksa apakah itu masalahnya.

Jika seorang hacker telah berhasil mengubah nilai 'my_custom_title' di database, tema Anda akan menampilkan nilai tersebut. Ini menghadirkan risiko besar karena mereka dapat mengganti output yang diinginkan dengan Javascript sebaris:

 alert('Ini berbahaya');

Solusinya adalah menghindari semua keluaran untuk memastikannya hanya menyertakan jenis data yang kita harapkan.

Contoh kami dapat diperbaiki seperti ini:

 $judul = get_option( 'my_custom_title' );
gema '<h2>' . esc_html( $judul ) . '</h2>';

Kelemahan menggunakan esc_html adalah menghapus semua tag HTML. Jika $title termasuk bold atau italic, misalnya:

 $title = 'Artikel ini <strong>sangat</strong> bermanfaat';
echo esc_html( $judul );

Kata 'sangat' tidak akan dicetak tebal di bagian depan; sebagai gantinya itu akan menampilkan kode <strong>sangat</strong>.

Ini menggambarkan mengapa penting untuk menggunakan fungsi pelolosan yang benar untuk konteksnya. Jika kita mengharapkan beberapa HTML dalam output, sebaiknya kita menggunakan wp_kses_post() atau wp_kses() dan menyetel parameter $allowed_html.

Fungsi yang outputnya juga perlu di-escape:

 <a href="<?php echo esc_url( get_permalink() ); ?>">

Pengecualian adalah fungsi inti WordPress yang menyertakan 'the_' dalam namanya, ini biasanya sudah diloloskan.

 function the_permalink( $post = 0 ) {
    /**
     * Filter tampilan permalink untuk posting saat ini.
     *
     * @sejak 1.5.0
     * @sejak 4.4.0 Menambahkan parameter `$post`.
     *
     * @param string $permalink Tautan permanen untuk posting saat ini.
     * @param int|WP_Post $post Post ID, objek WP_Post, atau 0. Default 0.
     */
    echo esc_url( apply_filters( 'the_permalink', get_permalink( $post ), $post ) );
}

Teks yang tidak dapat diterjemahkan

Untuk diterima ke dalam direktori, semua tema harus 100% 'siap terjemahan'. Itu berarti setiap string teks keluaran tema Anda harus dapat diterjemahkan.

WordPress sudah memiliki sistem dan fungsionalitas untuk menangani proses penerjemahan, Anda hanya perlu memastikan string Anda menggunakan fungsi yang benar.

Meskipun sederhana untuk diterapkan, ini sering diabaikan karena bertentangan dengan cara orang menulis HTML.

Biasanya, Anda mungkin melakukan sesuatu seperti ini:

 <h1>404 - Tidak Ditemukan</h1>

Untuk membuatnya dapat diterjemahkan, Anda perlu menambahkan beberapa PHP:

 // __ fungsi adalah dasar dari lokalisasi.
<h1><?php echo __( '404', 'domain teks' ); ?>

// _e fungsi menggemakan nilai.
<h1><?php _e( '404', 'domain teks' ); ?>

// Melarikan diri dan menggemakan string.
<h1><?php esc_html_e( '404', 'domain teks' ); ?>

// lokalisasi dan variabel.
<h1><?php _n( 'Satu posting', '%s posting', $count, 'domain teks' ); ?>

Output string oleh fungsi juga harus siap terjemahan:

 // belum siap terjemahan :-(
<?php next_posts_link( 'Entri Lama' ); ?>

// terjemahan-siap :-)
<?php next_posts_link( esc_html__( 'Entri Lama', 'domain teks' ) ); ?>

Tip: Banyak contoh kode di codex.wordpress.org tidak menggunakan fungsi terjemahan, jadi berhati-hatilah saat menyalin dan menempelkannya.

Salah Mengantrekan Sumber Daya

File .css dan .js yang digunakan tema Anda harus diantrekan menggunakan fungsi yang benar: wp_enqueue_style() untuk CSS dan wp_enqueue_script() untuk Javascript.

Kesalahan umum adalah melakukan hardcode skrip dan gaya langsung ke <head> atau sebelum </body>. Ada dua masalah untuk pendekatan ini:

1. Tidak mungkin dihapus

Jika sebuah plugin perlu menghapus sumber daya yang telah Anda muat, itu tidak mungkin. Jika Anda telah menggunakan fungsi enqueue yang tepat, itu bisa dilakukan seperti:

 /**
 * Dequeue tema javascript.
 *
 * Terhubung ke tindakan wp_enqueue_scripts, dengan prioritas terlambat (100),
 *sehingga setelah script di enqueued.
 */
fungsi wptavern_dequeue_script() {
   wp_dequeue_script( 'skrip tema');
}
add_action( 'wp_enqueue_scripts', 'wptavern_dequeue_script', 100 );

2. Pemuatan Duplikat

Jika Anda mengantrekan sumber daya, jQuery misalnya, dan sebuah plugin juga mengantrekannya, WordPress cukup pintar untuk hanya memuatnya sekali.

 /**
 * Antrean jQuery
 *
 * jQuery hanya akan dimuat sekali, meskipun ada dua enqueue.
 * jQuery dikemas dengan WordPress sehingga kita tidak perlu menentukan src. 
 */
fungsi wptavern_enqueue_script() {
   wp_enqueue_script('jquery');
   wp_enqueue_script('jquery');
}
add_action( 'wp_enqueue_scripts', 'wptavern_enqueue_script');

Jika sebaliknya Anda telah meng-hardcode jQuery ke <head> Anda maka tidak akan ada cara bagi WordPress untuk mengetahuinya, dan itu akan dimuat dua kali.

Fungsionalitas Wilayah Plugin

Cakupan tema seharusnya hanya menangani desain dan estetika situs web, semua fungsi lainnya harus ditangani oleh WordPress itu sendiri atau plugin.

Dalam upaya untuk menambah nilai lebih pada tema mereka, penulis tema sering mencoba memasukkan fungsionalitas tambahan, misalnya, kontrol SEO atau jenis posting khusus.

Masalah dengan fungsionalitas bundling ke dalam tema adalah bahwa datanya tidak portabel. Ambil kontrol SEO sebagai contoh, jika pengguna mengubah tema, mereka kehilangan semua pekerjaan yang mereka lakukan untuk mengoptimalkan halaman mereka. Berbeda dengan menggunakan plugin SEO, data dan fungsionalitas tidak tergantung pada tema dan akan dipertahankan saat mengubah tema.

Beberapa contoh fungsionalitas wilayah plugin:

  • Analisis/Pelacakan
  • Kontrol SEO
  • Formulir Kontak
  • Kode pendek
  • Blok Gutenberg

Tip: Jika kode Anda menulis ke database, kemungkinan besar itu adalah wilayah plugin. Pengecualiannya adalah pengaturan terkait desain (posisi bilah sisi, warna, dll.).

Bukan Awalan

Awalan adalah cara untuk memastikan bahwa kode Anda tidak berbenturan dengan kode dari plugin. Namespacing di PHP adalah cara yang lebih baik untuk mencapai efek yang sama. Namun, beberapa pengguna masih menggunakan versi lama PHP (5.2) yang tidak mendukung fitur tersebut.

Justin Tadlock membagikan daftar hal-hal umum yang harus diawali:

  • nama fungsi PHP.
  • nama kelas PHP.
  • variabel global PHP.
  • Kait aksi/Filter.
  • Menangani skrip.
  • Pegangan gaya.
  • Nama ukuran gambar.

Sumber: https://themereview.co/prefix-all-the-things/

 // contoh fungsi.
my_prefix_example();

// contoh kelas.
kelas My_Prefix_Example { … }

// contoh tindakan dan filter.
do_action('my_prefix_action' );
apply_filters( 'my_prefix_filter', $nilai );

// contoh antrean.
wp_enqueue_script( 'my_prefix_script', get_template_directory_uri() . '/js/custom-script.js' );
wp_enqueue_style( 'my_prefix_style', get_template_directory_uri() . '/css/styles.css' );

// contoh ukuran gambar.
add_image_size( 'my_prefix_image_size', 220, 180 ); // Lebar 220 piksel dengan tinggi 180 piksel.

Pengecualian: Saat mengantrekan sumber daya pihak ketiga, jangan tambahkan awalan:

 // mengantrekan skrip pihak ketiga (chosen.js).
 wp_enqueue_script( 'terpilih', get_template_directory_uri() . '/js/chosen.js' );

Masalah Lisensi

Tema Anda dan semua filenya harus 100% kompatibel dengan GPL. Ini termasuk gambar, perpustakaan, skrip, dan font.

Semua sumber daya pihak ketiga harus mencantumkan sumber dan informasi lisensi mereka.

Persyaratan ini bisa sangat rumit karena tidak semua lisensi ramah GPL. Lisensi Unsplash hanya memiliki satu batasan:

“Lisensi ini tidak termasuk hak untuk mengkompilasi foto dari Unsplash untuk mereplikasi layanan serupa atau bersaing.”

Namun, satu batasan itu cukup untuk membuatnya tidak kompatibel dengan GPL, dan dengan demikian, Anda tidak akan melihat gambar Unsplash disertakan dalam tema wordpress.org.

Daftar lisensi yang kompatibel dengan GPL tersedia di sini – https://www.gnu.org/licenses/license-list.html#GPLCompatibleLicenses

Baru-baru ini, stocknap.io telah menjadi sumber gambar paling umum di direktori karena semua gambar yang mereka daftar dilisensikan sebagai CC0 (kompatibel dengan GPL).

Kesalahan Tangkapan Layar

Persyaratan menyatakan bahwa tangkapan layar Anda harus merupakan representasi tema Anda yang belum diedit yang tidak terlihat seperti iklan. Itu berarti tidak ada photoshop yang berfungsi, overlay, border, atau efek mewah.

Gambar juga harus mengikuti persyaratan lisensi yang sama yang kami jelajahi di atas.

tema dalam foto: Blocksy

Bonus: Gunakan Standar Pengkodean

Kode yang kelihatannya mudah untuk Anda baca dan pahami, bisa jadi kebalikan total bagi seorang reviewer yang hanya memiliki waktu 10-15 menit untuk memeriksa kode Anda.

Meskipun tidak ada persyaratan standar pengkodean, mengikuti standar membuat kode Anda lebih mudah dibaca, dipahami, dan dipelihara. Saya pribadi menggunakan dan merekomendasikan 'WordPress Coding Standards', meskipun ada yang lain.

Menggunakan PHP_CodeSniffer dan kumpulan aturan WordPress di editor kode Anda dapat membuat kepatuhan pada standar jauh lebih mudah – https://github.com/WordPress-Coding-Standards/WordPress-Coding-Standards

Kesimpulan

Persyaratan Tema dibuat dengan mempertimbangkan pengguna akhir. Hindari membuat kesalahan umum yang saya sebutkan di atas dan tema Anda akan disetujui dalam waktu singkat. Jika Anda ingin merasakan proses review dari sisi lain, Anda bahkan bisa menjadi reviewer.