WordPress'te Ayarlar Sayfası Nasıl Oluşturulur

Bir WordPress eklentisi oluşturuyorsanız, bunun için nasıl bir ayarlar sayfası oluşturacağınızı merak ediyor olabilirsiniz. WordPress bunun için bir tür “standart” mekanizma sunuyor mu? Modern ayar sayfaları oluşturmak için yeni araçlar veya çerçeveler var mı? Bir ayarlar sayfası oluşturmak iyi bir fikir mi? Pekala, bugün tüm bunlar hakkında konuşacağız ve ben de sorularınızı cevaplayacağım.

Seçenekler Değil Kararlar

WordPress, web'i demokratikleştirmeyi amaçlayan bir platformdur. Kulağa çok hoş gelen ama aynı zamanda çok soyut olan bu ifade, “herkesin WordPress kullanabilmesini istiyoruz” demenin bir yolu. Ve ister inanın ister inanmayın, ayarlar sayfaları bunun için bir engel olabilir ve aslında çoğu durumda öyledir. Bana inanmıyor musun? WordPress'in kendisi şöyle diyor:

Karar verirken ilk olarak dikkate aldığımız kullanıcılar bunlardır. Bu düşüncenin harika bir örneği yazılım seçenekleridir. Bir kullanıcıya bir seçenek verdiğinizde, onlardan bir karar vermelerini istersiniz. Bir kullanıcı seçeneği umursamadığında veya anlamadığında, bu sonuçta hayal kırıklığına yol açar. Geliştiriciler olarak bazen her şey için seçenekler sunmanın iyi bir şey olduğunu düşünüyoruz, asla çok fazla seçeneğiniz olamaz, değil mi? Sonuçta bu seçimler, ortalama son kullanıcının ilgilenmediği teknik seçimler olur. Akıllı tasarım kararları vermek ve teknik seçimlerin ağırlığını son kullanıcılarımıza yüklemekten kaçınmak geliştiriciler olarak bizim görevimizdir.

WordPress felsefesi

Bu nedenle, bir ayarlar sayfası oluşturmadan önce, kullanıcılarınıza sunmak istediğiniz seçenekleri, neden bu seçeneklere erişmelerini istediğinizi ve bunun gerekli veya yararlı olup olmadığını dikkatlice düşünün.

Alternatif Olarak Filtreler

Kullanıcılarıma çok fazla seçenek sunmamam gerektiğini bilsem bile, bir geliştirici olarak bir seçenek sunmak yerine karar vermenin benim için her zaman kolay olmadığını itiraf etmeliyim. Gösterdiğim seçeneklerin karmaşık olduğunun farkında olmama rağmen, kullanıcılarımın seçme yeteneğine sahip olmasını istediğim zamanlar oluyor. Peki bu durumlarda ne yapacağım? WordPress'in tavsiyesini takip edip ileri düzey kullanıcılarımı sınırlandırıyor muyum?

Neyse ki, WordPress bu ikilem için mükemmel bir çözüm sunuyor: filtreler . Bir eklenti tasarladığınızda ve (ileri düzey) kullanıcılarınızın davranışını ayarlayabilmesini istediğinizde, bir ayarlar sayfası veya buna benzer bir şey oluşturmayın. Bunun yerine, eklentinizi WordPress'in filtreleme mekanizmasıyla özelleştirilebilir hale getirin.

Filtreleri kullanırsanız, kullanıcılarınızın çoğu varsayılan bir davranıştan (“kararlar”, hatırlıyor musunuz?) hoşlanır, çünkü eklentiyi filtrelerinizde ayarlanan varsayılan değerlerle kullanacaklar, ileri düzey kullanıcılar ise bunları değiştirme olanağına sahip olacak. kancalar aracılığıyla kararlar (ve böylece “seçenekleriniz” de vardır). Her iki dünyanın da en iyisi!

WordPress Ayarları

Tamam, artık kullanıcılarımız için karar vermenin öneminin farkında olduğumuza ve bu sınırlamayı (gerekirse) filtreler aracılığıyla nasıl aşacağımızı gördüğümüze göre, WordPress'te nasıl bir ayarlar sayfası oluşturabileceğimizi görmenin zamanı geldi. Cuz, evet: Kullanıcılarımıza tercihlerine göre karar verme seçeneği sunmamız gereken zamanlar vardır.

WordPress'te Ayarlar API'sı

Ayarlar API'si, WordPress 2.7 sürümüne eklendi. Bu, ayar sayfalarının oluşturulmasını standartlaştıran, hangi seçeneklerin mevcut olduğunu, bu seçeneklerin her birini (esas olarak bir formdaki alanlar) düzenlemek için kullanıcı arayüzünün ne olacağını ve nasıl doğrulanacağını, kaydedileceğini tanımlamanıza izin veren bir dizi işlevdir. ve değerlerini alın.

Öğrenmenin en iyi yolunun örnekler üzerinden olduğunu düşünüyorum, o halde adım adım settings API kullanarak ilk ayarlar sayfamızı oluşturalım.

Yeni bir Ayarlar Sayfası oluşturma

Ayarlar sayfası oluşturmak için yapmanız gereken ilk şey (sürpriz, sürpriz!) ayarları görüntülemek için bir sayfa oluşturmaktır. Bunu yapmak için, admin_menu eylemi sırasında add_options_page işlevini kullanın ve sayfayı kaydedin:

 function nelio_add_settings_page() { add_options_page( 'Nelio Plugin Settings', 'Nelio', 'manage_options', 'nelio-example-plugin', 'nelio_render_settings_page' ); } add_action( 'admin_menu', 'nelio_add_settings_page' );

Gördüğünüz gibi, bu işlevle yaptığımız tek şey, WordPress Ayarları menüsü altında başlığı, menüdeki adı, kullanıcının erişebilmesi için sahip olması gereken izinleri ile görünecek yeni bir sayfa kaydetmek. , ve işletim sistemi açık. Son argüman, nelio_render_settings_page , söz konusu sayfayı oluşturmaktan sorumlu olacak işlevin adıdır:

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

Ayarlar sayfasının kendisinin oluşturulması nispeten kolaydır. İçeriği WordPress tarafından yarı otomatik olarak oluşturulacak bir form eklememiz yeterlidir. Bir yandan, "güvenli" hale getirmek için temelde forma bir nonce ekleyen settings_fields işlevini çağırıyoruz. Ardından, WordPress'ten eklentimiz için oluşturduğumuz tüm ayarları do_settings_sections işlevini kullanarak işlemesini istiyoruz. Ve son olarak, formu Gönder düğmesini eklememiz yeterlidir.

Ayarlar Sayfamızdaki Gerçek Ayarlar

Ardından, ayarlar sayfamızın bir parçası olacak seçeneklerin her birini kaydetmeliyiz. Bunu yapmak için iki işlev kullanacağız: ayarları veritabanına kaydedeceğimiz adı belirtmemize izin veren register_setting ve her bir seçeneği ekleyen add_settings_field :

 function nelio_register_settings() { register_setting( 'nelio_example_plugin_settings', 'nelio_example_plugin_settings', 'nelio_validate_example_plugin_settings' ); add_settings_section( 'section_one', 'Section One', 'nelio_section_one_text', 'nelio_example_plugin' ); add_settings_field( 'some_text_field', 'Some Text Field', 'nelio_render_some_text_field', 'nelio_example_plugin', 'section_one' ); add_settings_field( 'another_number_field', 'Another Number Field', 'nelio_render_another_number_field', 'nelio_example_plugin', 'section_one' ); } add_action( 'admin_init', 'nelio_register_settings' );

Önceki kod parçacığında özel ilgiyi hak eden birkaç şey var. Bir yandan, register_setting işlevinin üçüncü argümanı olduğuna dikkat edin: nelio_validate_example_plugin_settings . Bu, kullanıcının seçtiği değerleri doğrulamak için çağrılacak olan geri çağırma işlevinin adıdır (form alanlarınızı her zaman doğrulamanız ve temizlemeniz gerektiğini unutmayın). Bu işlev şöyle bir şeydir:

 function nelio_validate_example_plugin_settings( $input ) { $output['some_text_field'] = sanitize_text_field( $input['some_text_field'] ); $output['another_number_field'] = absint( $input['another_number_field'] ); // ... return $output; }

burada $input input'tan gönderilen her bir alanı alırız ve onu $output output'a sterilize ederiz, böylece veritabanına kaydettiğimiz her şeyin geçerli ve doğru olduğundan emin oluruz.

Sizi odaklamak istediğim ikinci şey, tanımladığımız alanların her birinin, WordPress'e her alanın nasıl işlenmesi gerektiğini söyleyen bir işlev referansı içermesidir. Örneğin, örneğimizdeki alanların geri çağrıları şöyle olabilir:

 function nelio_section_one_text() { echo '<p>This is the first (and only) section in my settings.</p>'; } function nelio_render_some_text_field() { $options = get_option( 'nelio_example_plugin_settings' ); printf( '<input type="text" name="%s" value="%s" />', esc_attr( 'nelio_example_plugin_settings[some_text_field]' ), esc_attr( $options['some_text_field'] ) ); } function nelio_render_another_number_field() { $options = get_option( 'nelio_example_plugin_settings' ); printf( '<input type="number" name="%s" value="%s" />', esc_attr( 'nelio_example_plugin_settings[another_number_field]' ), esc_attr( $options['another_number_field'] ) ); }

Özünde, tüm bu geri aramaların yaptığı, oluşturmaları gereken alanın geçerli değerini almak ( get_option ile) ve kullanıcının bir değeri veya diğerini ayarlamasına izin verecek HTML'yi oluşturmaktır (bu örnekte, bir input alanı text veya number yazın).

Son sonuç nedir, soruyorsun? Bu:

Son düşünceler

Gördüğünüz gibi, bir ayarlar sayfası oluşturmak nispeten basittir. Şahsen tüm süreçten pek hoşlanmıyorum, çünkü oldukça tekrarlayıcı ve aynı ortak kod kodunu tekrar tekrar yazmamız gerekiyor… ama yine de kolay.

Bu süreci daha da basitleştirmek için, basit bir kullanıcı arayüzü aracılığıyla ayarlar sayfanızda istediğiniz farklı alanları tanımlayabileceğiniz bazı çevrimiçi kod oluşturucular vardır. Birkaç örnek:

• WP Ayarları API'si
• WordPressOption Sayfa Oluşturucu

Ve elbette, React gibi teknolojileri kullanarak bir ayarlar sayfası oluşturma olasılığı her zaman vardır… ama bu farklı bir zamanın hikayesi, değil mi?

Unsplash'ta Rima Kruciene tarafından öne çıkan görsel.