WordPress Eklenti Ayarları Sayfası Oluşturmanın 5 Yolu

Sıfırdan yeni bir WordPress eklentisi oluşturmayalı uzun zaman oldu, ancak son zamanlarda sadece benim için çalışan bazı kodları dağıtabileceğim tam olarak oluşturulmuş bir eklentiye dönüştürmeye karar verdim. Bu sürecin bir kısmı, sabit kodlanmış verilerin, eklentinin gelecekteki kullanıcılarının ayarlayabileceği seçeneklerle değiştirilmesini içeriyordu.

Eklentide bir ayarlar sayfası oluşturmam gerekiyordu ve kendimi sürekli değişen bir WordPress dünyasında en son ve en iyi yaklaşımın ne olduğunu merak ederken buldum. WordPress eklentinize bir ayarlar sayfası eklemenin çeşitli yollarına bir göz atalım.

1. WordPress Ayarları API'sı
2. Özel Alanlar Çerçevesi
3. Kod Oluşturucu Kullanma
4. REST API'yi kullanma
5. VueJS
6. Tepki

WordPress Ayarları API'sı

WordPress Ayarları API'si, WordPress 2.7'ye eklenmiştir ve geliştiricilerin, gösterge tablosundaki mevcut ayar formlarındaki ayar alanlarını kaydetmelerine ve ayrıca WordPress'in görüntüleyip verileri kaydetmeye özen göstereceği yeni ayar formları oluşturmasına olanak tanır:

Ayarlar sayfalarını, bu sayfalardaki bölümleri ve bölümler içindeki alanları tanımlamanıza olanak tanır.

Bu, kesinlikle bu yazıda tartışılan yöntemlerin en el kitabıdır, ancak nasıl çalıştığını anlamaya değer ve bazı durumlarda ihtiyaç duyulan tek şey olabilecek yeterince basit bir yaklaşımdır.

Öncelikle yeni bir menü öğesi ve ayarlar formumuzu içerecek sayfa kaydetmemiz gerekiyor. Sayfayı WordPress kontrol panelindeki 'Ayarlar' üst düzey menü öğesinin altına ekleyelim:

 <?php function dbi_add_settings_page() { add_options_page( 'Example plugin page', 'Example Plugin Menu', 'manage_options', 'dbi-example-plugin', 'dbi_render_plugin_settings_page' ); } add_action( 'admin_menu', 'dbi_add_settings_page' );

add_options_page için beşinci argüman, sayfanın içeriğini görüntülemek için kullanılan işlevin adıdır, bu durumda ayarlar formu olacaktır. Ayarlar API'sı ile iletişim kurmak için bu işlevin bir form öğesine ve bazı işlev çağrılarına sahip olması gerekir:

 <?php function dbi_render_plugin_settings_page() { ?> <h2>Example Plugin Settings</h2> <form action="options.php" method="post"> <?php settings_fields( 'dbi_example_plugin_options' ); do_settings_sections( 'dbi_example_plugin' ); ?> <input name="submit" class="button button-primary" type="submit" value="<?php esc_attr_e( 'Save' ); ?>" /> </form> <?php }

settings_fields işlevi, forma ne yapacağını söyleyen kodun yanı sıra nonce kullanarak güvenli hale getirmek için gizli bir girdi oluşturur. İşleve iletilen bağımsız değişken, daha sonra kaydedilecek ayarlar grubu için bir addır.

do_settings_sections işlevi formun anahtar kısmıdır, bu, tüm bölümlerin ve alanların (metin kutuları, seçimler, onay kutuları vb.) çıktılandığı yerdir, böylece veriler kullanıcı tarafından girilebilir. Yine, bu işlev argümanı keyfidir ancak benzersiz olması gerekir. Alanları kaydederken bunu kullanacağız.

Hadi bunu yapalım:

 <?php function dbi_register_settings() { register_setting( 'dbi_example_plugin_options', 'dbi_example_plugin_options', 'dbi_example_plugin_options_validate' ); add_settings_section( 'api_settings', 'API Settings', 'dbi_plugin_section_text', 'dbi_example_plugin' ); add_settings_field( 'dbi_plugin_setting_api_key', 'API Key', 'dbi_plugin_setting_api_key', 'dbi_example_plugin', 'api_settings' ); add_settings_field( 'dbi_plugin_setting_results_limit', 'Results Limit', 'dbi_plugin_setting_results_limit', 'dbi_example_plugin', 'api_settings' ); add_settings_field( 'dbi_plugin_setting_start_date', 'Start Date', 'dbi_plugin_setting_start_date', 'dbi_example_plugin', 'api_settings' ); } add_action( 'admin_init', 'dbi_register_settings' );

Burada üç şey oluyor. İlk olarak, seçenek_adı olarak 'dbi_example_plugin_options' ile ayarlarımız için wp_options tablosunda yeni bir kayıt oluşturmak için register_setting kullanıyoruz.

Bireysel ayarlarımız, serileştirilmiş bir veri dizisi olarak saklanacaktır. Bu, tüm eklenti ayarlarımızı tek bir yerde gruplamak için harikadır, ancak verilerin serileştirilmesi, düzgün bir şekilde ele alınmadıkça WordPress veritabanını taşırken sorunlara yol açabilir. Üçüncü argüman, seçeneği kaydederken girilen verileri doğrulamayı işleyen işlevin adıdır.

Örneğin, API anahtarının yalnızca sayı ve harfler içeren 32 karakterlik bir dize olduğundan emin olun:

 <?php function dbi_example_plugin_options_validate( $input ) { $newinput['api_key'] = trim( $input['api_key'] ); if ( ! preg_match( '/^[a-z0-9]{32}$/i', $newinput['api_key'] ) ) { $newinput['api_key'] = ''; } return $newinput; }

İkinci olarak, ayarlar için seçeneğe bağlı bir grup bölümü kaydediyoruz. Ve son olarak, add_settings_field ile grup için üç alan kaydediyoruz. Bunların tümü, eklentimizin ayarlarını tutan metin alanlarıdır.

Ardından, bölüm için faydalı metin görüntülemek ve formdaki alanları oluşturmak için işlevler oluşturmamız gerekiyor:

 <?php function dbi_plugin_section_text() { echo '<p>Here you can set all the options for using the API</p>'; } function dbi_plugin_setting_api_key() { $options = get_option( 'dbi_example_plugin_options' ); echo "<input id='dbi_plugin_setting_api_key' name='dbi_example_plugin_options[api_key]' type='text' value='" . esc_attr( $options['api_key'] ) . "' />"; } function dbi_plugin_setting_results_limit() { $options = get_option( 'dbi_example_plugin_options' ); echo "<input id='dbi_plugin_setting_results_limit' name='dbi_example_plugin_options[results_limit]' type='text' value='" . esc_attr( $options['results_limit'] ) . "' />"; } function dbi_plugin_setting_start_date() { $options = get_option( 'dbi_example_plugin_options' ); echo "<input id='dbi_plugin_setting_start_date' name='dbi_example_plugin_options[start_date]' type='text' value='" . esc_attr( $options['start_date'] ) . "' />"; }

Vay! İşte bu, bir ayarlar sayfamız var:

Kodumuzdaki ayarları kullanmak, daha sonra get_option('dbi_example_plugin_options') kullanma ve ihtiyacımız olan ayar için dizi anahtarını kullanma durumudur.

Burada epeyce hareketli parça var, şunu ve şunu kaydediyor, kodu çoğaltıyor ve hepsinin doğru bir şekilde bir araya getirildiğinden emin oluyor. WordPress API'lerinin kullanımı ve hatta açıklaması en kolayı değil. Bu nedenle, WordPress eklentinize bir ayarlar sayfası ekleme sürecini basitleştirmeyi amaçlayan bir avuç sarmalayıcı kitaplığının olması şaşırtıcı değildir.

2012'de Instagram WordPress eklentimi oluşturduğumda, kendi Gilbert Pellegrom'umuz tarafından oluşturulan WordPress Ayarlar Çerçevesini kullanarak ayarlar sayfasını oluşturdum – bu, birlikte çalışmadan ve hatta birbirimizi tanımadan önceydi. Çerçeve artık Delicious Brains'in bir arkadaşı olan James Kemp tarafından sürdürülüyor – WordPress topluluğu gerçekten küçük bir dünya olabilir. 😄

Özel Alanlar Çerçevesi

PHP çerçevelerinden bahsetmişken, WordPress Ayarları API'sini kullanmadan bir ayarlar sayfası oluşturmaya alternatif bir yaklaşım göstermek istedim. İstemciler için siteler oluştururken, bir ayarlar sayfasına ihtiyacım olursa, bir seçenekler sayfası oluşturmak için varsayılan olarak Gelişmiş Özel Alanlar'ı kullanacağım ve ardından alanları ACF kullanarak tanımlayacağım.

ACF'yi kullanmayı sevmemin birçok nedeninden biri bu: karmaşık bir WordPress işi gerektiriyor ve onu basitleştiriyor. (Yeni Block Editor için React'e dokunmadan blokları kaydetmek için kullanılan PHP sarmalayıcı ACF Blocks'u gördünüz mü?)

Ancak, dağıtım için bir eklenti veya tema oluştururken, ACF'yi yüklemiş olan kullanıcıya güvenemezsiniz. Karbon Alanları çerçevesine girin. ACF'den farklı olarak, Carbon Fields bir eklenti değildir ve genellikle bir eklenti içinde kitaplık olarak kurulur ve önerilen yaklaşımları Composer kullanmaktır.

Kurulduktan sonra, henüz yapmadıysanız, Composer autoload.php dosyasına ihtiyacınız olduğundan emin olarak Carbon Fields kitaplığını başlatmanız gerekir:

 <?php function dbi_load_carbon_fields() { \Carbon_Fields\Carbon_Fields::boot(); } add_action( 'after_setup_theme', 'dbi_load_carbon_fields' );

WordPress Ayarları API'si ile yukarıda yaptığımızı kopyalamak için aşağıdaki kodu kullanmak kadar basit:

 <?php use Carbon_Fields\Container; use Carbon_Fields\Field; function dbi_add_plugin_settings_page() { Container::make( 'theme_options', __( 'Example Plugin Page' ) ) ->set_page_parent( 'options-general.php' ) ->add_fields( array( Field::make( 'text', 'dbi_api_key', 'API Key' ) ->set_attribute( maxLength, 32 ), Field::make( 'text', 'dbi_results_limit', 'Results Limit' ) ->set_attribute( 'min', 1 ) ->set_attribute( 'max', 100 ) ->set_default_value( 10 ), Field::make( 'date', 'dbi_start_date', 'Start Date' ), ) ); } add_action( 'carbon_fields_register_fields', 'dbi_add_plugin_settings_page' );

Gördüğünüz gibi, çerçeve, 'Sonuç Sınırı' alanına bir varsayılan, minimum ve maksimum eklemenin yanı sıra 'Başlangıç ​​Tarihi' alanını bir tarihe dönüştürmek gibi alanları daha kullanıcı dostu hale getirmeyi son derece kolaylaştırıyor. seçici – Ayarlar API'sı ile elde etmek için oldukça fazla kodlama gerektiren bir şey.

Bir ayarın kayıtlı verilerini kullanmak için carbon_get_theme_option() işlevini kullanmanız gerekir:

 <?php $api_key = carbon_get_theme_option( 'dbi_api_key' );

Çerçeveler daha küçük boyutlu projeler için aşırıya kaçabilir, ancak daha az kodla çok şey başarmanın harika bir yoludur , eklentiniz için kod yazmaya konsantre olmanıza ve başka bir ayar sayfası oluşturarak tekerleği yeniden icat etmemenize olanak tanır.

Kod Oluşturucu Kullanma

Bir çerçevenin kullanım kolaylığı ile birlikte WordPress Ayarları API'sinden yararlanan başka bir yaklaşım, etraftaki birçok WordPress oluşturucudan biridir:

• WP Ayarları API'si – http://wpsettingsapi.jeroensormani.com/
• WordPress Seçenek Sayfası Oluşturucu https://jeremyhixon.com/tool/wordpress-option-page-generator/
• GenerateWP (premium) https://generatewp.com/settings-page/

WordPress Seçenek Sayfası Oluşturucu'yu kullanarak ayarlar sayfamızı yeniden oluşturalım. Yalnızca birkaç alan türünü destekler; metin, textarea, seç, radyo, onay kutusu, yani tarih seçici de yok.

İşte doğrudan eklentimde kullanabileceğim ve verileri WordPress Ayarları API'si ile aynı şekilde kullanabileceğim oluşturulan kod.

Jeneratörler, kapsamlı kodlama gerektirmeden ayarlanabilen hazır bir ayarlar sayfasıyla eklentinizi başlatmak için çok yararlı bir araçtır. Ayrıca işlerin nasıl yürüdüğünü öğrenmek, mevcut kodu ayırmak ve hepsinin nasıl bir araya geldiğini görmek için de iyi olabilirler. Ancak, ayar kodunda çok fazla değişiklik gerektiren bir eklenti için uzun vadede en iyi seçim olmayabilirler.

REST API'yi kullanma

WordPress REST API'nin birçok harika kullanımından biri, eklenti veya tema ayarları ekranlarınızı iyileştirmektir.

Bu mükemmel makalede Josh Pollock, REST API ve jQuery kullanarak bir ayarlar sayfasının nasıl oluşturulacağına dalıyor. Makale son derece kapsamlı bir eğitim olduğundan, ayarlar sayfamı bu teknikle yeniden oluşturmayacağım.

REST API, geleneksel admin-ajax.php isteklerine göre performans avantajları sunabilir ve 'Kaydet'i tıklatarak geliştirilmiş kullanıcı deneyimi ve sayfa yenileme olmadan arka planda kaydedilen form ayarlarıyla birleştiğinde, bu tür bir yaklaşım çok daha modern hissettirir. WordPress Ayarları API'sinden daha iyidir.

Josh, ayarları ekledikçe ve formunuz daha karmaşık hale geldikçe "jQuery ile yönetilmesi zahmetli ve daha basit olan ve VueJS veya React kullandıysanız daha iyi bir kullanıcı deneyimi sağlayan daha fazlasını yapacaksınız" diye belirtiyor. , bu da beni bir sonraki yaklaşıma, VueJS destekli bir ayarlar sayfasına götürüyor.

VueJS'yi kullanma

Geçen yıl WordPress üyelik eklentimi edinme sürecinde, nasıl yazıldığını görmek için kod tabanını araştırdım ve ayarlar sayfasının REST API ve VueJS – wp-optionskit kullanan bir paket tarafından desteklendiğini keşfettim:

Paket, Composer ile kurulabilir ve ayarlar sayfası burada bulunan kod kullanılarak başlatılabilir ve yapılandırılabilir. Örnek ayarlar sayfamız şöyle görünür:

Bu yaklaşımla ilgili sevdiğim şey, yalnızca PHP'de veri dizilerini yapılandırarak birden çok sekme ve alt bölüm içeren karmaşık ayar sayfaları oluşturmanıza izin vermesidir. Diğer yaklaşımlardan bazıları gibi, ayar verileri seçenekler tablosundaki bir kayıtta saklanır, bu nedenle kaydedilen verileri almak ve kullanmak için tanıdık bir yaklaşımdır.

Bir dakika, VueJS? WordPress, React'te her şeyi yerine getirmiyor mu?

Tepki Üzerine Bir Söz

WordPress dünyası, WordPress yöneticisinde içerik düzenlemek için hızlı bir tempoda React'i benimsiyor olsa da (WooCommerce, yöneticilerini React'te yeniden oluşturuyor), eklentiler için ayar sayfaları oluşturmak için herhangi bir React tabanlı çerçeve görmedim, sadece birkaçı burada ve orada öğreticiler. Ancak wp-optionskit ile gördüğümüz gibi, REST API'yi kullanmak, WordPress yöneticisinde VueJS veya React'i kapsamlı bir şekilde kullanmak için kapıyı açar.

WP Migrate DB Pro'nun tüm kullanıcı arayüzünü React'te yeniden yazdığımızı biliyor muydunuz? Bunu yaparken, performansı ve kullanıcı deneyimini iyileştiriyoruz ve gelecekteki geliştirmeler için kodu çok daha yönetilebilir hale getiriyoruz. (Eklentide beta güncellemelerini etkinleştirirseniz 2.0 beta kullanılabilir.)

Toplama

Her şey geliştirmede olduğu gibi, aynı şeyi başarmanın birçok yolu vardır ve bir proje için seçtiğiniz yaklaşım diğerinde farklı olabilir. Şu anda kişisel favorim wp-optionskit, çünkü birden fazla ayar sekmesine ve alt bölüme izin veriyor ve kaydetme sırasında daha iyi bir kullanıcı deneyimi sunuyor.

Eklentileriniz için WordPress ayar sayfaları oluşturmak için kullandığınız yaklaşım nedir? Herhangi bir popüler seçeneği kaçırdım mı? Yorumlarda bize bildirin.