Bir WordPress Eklentisi Oluşturmak için En İyi Kılavuz

Eklentiler, belirli işlevlere ihtiyaç duyan WordPress web sitelerinin hayati bir parçasıdır.

Resmi WordPress deposunda aralarından seçim yapabileceğiniz 45.000'den fazla eklenti bulunurken, bu eklentilerin çoğu hedefi kaçırıyor.

Bir eklentinin depoda olması, performansını engellemeyeceği veya güvenliğini tehlikeye atmayacağı anlamına gelmez.

Peki ne yapabilirsin? Pekala, kendin inşa edebilirsin.

Harika bir WordPress eklentisi oluşturmak, dikkatli bir planlama ile başlar.

İster sıfırdan, ister bir kalıptan yola çıkarak inşa edin, iyi belgelenmiş en iyi uygulamaları takip etmek kesinlikle çok önemlidir.

Bu eğitimde, basit bir WordPress eklentisini doğru şekilde nasıl oluşturacağınızı öğreneceksiniz.

Okurken son kaynak kodunu incelemek isterseniz, burada bulabilirsiniz.

Bir planla başlayın.

Öncelikle eklentimizin sahip olacağı özellikleri listeleyelim ve tam olarak ne yapması gerektiğini özetleyelim.

Oluşturduğumuz eklenti, site ziyaretçilerinin içeriği daha sonra okumak üzere kaydetmesine olanak tanır.

Kayıtlı kullanıcılar için listeyi veritabanında saklayacağız ve anonim kullanıcılar için listeyi çerezler kullanarak kaydedeceğiz.

Aşağıda, eklentimizin sağlayacağı özelliklerin ve işlevlerin bir özeti bulunmaktadır.

Ayarlar ekranı

• Yöneticilerin içeriğin sonuna "Öğeyi Kaydet" düğmesini ekleme yeteneği.
• Bu düğmenin eklenmesini istediğimiz gönderilerin türünü seçme yeteneği.
• Kullanıcılara önceden tanımlanmış stilimizi kullanmak isteyip istemediklerine karar verme seçeneği sunun
• İşlevi yalnızca oturum açmış kullanıcılar için etkinleştirme seçeneği sağlayın.
• Eklentinin ziyaretçiye bakan kısmında görünen mesajları değiştirmek için bir seçenek sağlayın.

İçeriği Kaydetme

• Kullanıcı oturum açtıysa, içeriği özel bir kullanıcı alanına kaydedin
• Kullanıcı oturum açmadıysa, içeriği çerezlere kaydedin

Mesajlar

Aşağıdaki mesajlar, bir ziyaretçinin eklentiyle etkileşimine yanıt olarak veya eyleme geçirilebilir öğeler üzerinde etiketler olarak ekranda görünecektir:

• "Öğeyi kaydet."
• "Öğenin kaydını iptal et."
• "Kaydedildi. Kaydedilen öğeleri görün.”
• "Kaydedilmiş öğeniz yok."

Kaydedilen Ekran

Ziyaretçilerin kaydettikleri gönderilerin listesini görüntüledikleri yer burasıdır.

• Kaydedilen öğelerin listesini göster
• Eklentinin etkinleştirilmesinde Kayıtlı bir sayfa oluşturun
• Eklentinin devre dışı bırakılması üzerine Kaydedilen sayfayı sil

Kısa kod

Bir kısa kodla, Kaydedilen sayfa, eklendiği her yerde oluşturulabilir.

Bir kazan plakası kullanın.

Bu bulduğum en iyi kazan plakası. İyi yapılandırılmış, nesne yönelimli ve verimlidir. Her en iyi uygulamayı takip eder. Ve hızlı ve hafif.

Bu WordPress Plugin Boilerplate'i temel alan bir eklenti kod tabanı oluşturmak için bu sayfayı kullanabilirsiniz:

Bir .zip dosyası almalısınız.

Çıkarın ve WordPress kurulum klasörünüze koyun: wp-content/plugins/ .

WordPress Kontrol Panelinizi açar ve eklentilere giderseniz, eklentinizin orada listelendiğini görürsünüz. Henüz etkinleştirmeyin.

Etkinleştirme ve devre dışı bırakma işlemlerini gerçekleştirin.

Eklentimizin etkinleştirme ve devre dışı bırakma işlemlerini düzgün şekilde yapması önemlidir.

Eklentimiz etkinleştirildiğinde, kullanıcının kayıtlı öğelerini içinde tutacak olan “Kaydedildi” adlı bir sayfa oluşturacağız.

O sayfayı oluştururken, o sayfanın içeriğine kaydettiğimiz öğeler için bir kısa kod ekleyeceğiz.

Sonunda sayfayı kaydedeceğiz; kimliğini al; ve veritabanında saklayın, böylece daha sonra eklentinin devre dışı bırakılmasından sonra erişebiliriz.

Eklentimiz devre dışı bırakıldığında, veritabanından "Kayıtlı" sayfa kimliğini alırız ve ardından "Kaydedilen" sayfayı sileriz ve eklentinin tüm izlerini kaldırırız.

Bunların hepsini include/class-toptal-save-activator.php ve include/class-toptal-save-deactivator.php içinde yapabiliriz .

Aktivasyon süreciyle başlayalım:

 <?php // includes/class-toptal-save-activator.php // ... class Toptal_Save_Activator { /** * On activation create a page and remember it. * * Create a page named "Saved", add a shortcode that will show the saved items * and remember page id in our database. * * @since 1.0.0 */ public static function activate() { // Saved Page Arguments $saved_page_args = array( 'post_title' => __( 'Saved', 'toptal-save' ), 'post_content' => '[toptal-saved]', 'post_status' => 'publish', 'post_type' => 'page' ); // Insert the page and get its id. $saved_page_id = wp_insert_post( $saved_page_args ); // Save page id to the database. add_option( 'toptal_save_saved_page_id', $saved_page_id ); } }

Eklenti activate() işlevi çağrılır.

wp_insert_post() işlevini kullanarak yeni bir sayfa oluşturur ve sayfa kimliğini add_option() kullanarak veritabanına kaydeder.

Şimdi eklentiyi devre dışı bırakma işlemine geçelim.

 <?php // includes/class-toptal-save-activator.php // ... class Toptal_Save_Deactivator { /** * On deactivation delete the "Saved" page. * * Get the "Saved" page id, check if it exists and delete the page that has that id. * * @since 1.0.0 */ public static function deactivate() { // Get Saved page id. $saved_page_id = get_option( 'toptal_save_saved_page_id' ); // Check if the saved page id exists. if ( $saved_page_id ) { // Delete saved page. wp_delete_post( $saved_page_id, true ); // Delete saved page id record in the database. delete_option( 'toptal_save_saved_page_id' ); } } }

Eklenti devre dışı bırakıldığında çağrılan deactivate deactivate() ) işlevi, get_option() işlevini kullanarak sayfayı alır, wp_delete_post() kullanarak ilgili sayfayı veritabanından kaldırır ve wp_delete_post() delete_option() kullanarak seçenekler tablosundan kayıtlı kimliği kaldırır. .

Eklentimizi aktif edip sayfalara gittiğimizde içerisinde kısa kod bulunan “Kaydedildi” isimli bir sayfa görmeliyiz.

Eklentiyi devre dışı bırakırsak, o sayfa kaldırılır.

wp_delete_post() yöntemimizde argüman olarak true kullandığımız için bu sayfa çöpe gitmeyecek, aksine tamamen silinecek.

Bir eklenti ayarları sayfası oluşturun.

Ayarlar sayfamızı admin/class-toptal-save-admin.php dosyasının içinde oluşturabiliriz ve bu dosyada yapmamız gereken ilk şey, enqueue_styles() işlevi içindeki wp_enqueue_style() çağrısını kaldırmak veya yorum yapmak ve yönetici ekranına herhangi bir CSS/JS eklemeyeceksek, enqueue_scripts() wp_enqueue_script() öğesini çağırın.

Ancak, eğer biraz stil ekleyeceksek, o zaman bu dosyaları tüm WordPress yönetici sayfalarına değil, yalnızca eklentimizin ayarlar sayfasına yüklememizi öneririm. Bunu, yorum yapacağımız satırların hemen üzerine aşağıdaki kodu yerleştirerek yapabiliriz:

 if ( 'tools_page_toptal-save' != $hook ) { return; } wp_enqueue_style( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'css/toptal-save-admin.css', array(), $this->version, 'all' );

 if ( 'tools_page_toptal-save' != $hook ) { return; } wp_enqueue_script( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'js/toptal-save-admin.js', array( 'jquery' ), $this->version, false );

Bu 'tools_page_toptal-save' kısmını nereden aldığımı merak ediyorsanız.

Sorun şu ki, toptal-save ile bir ayarlar sayfası oluşturacağımı biliyorum ve ayrıca bunu Araçlar ( tools.php ) ekranına ekleyeceğimi de biliyorum. Böylece, bu ikisini bir araya getirerek, $hook değişkeninin değerinin 'tools_page_toptal-save' - bu iki değerin bir birleşimidir.

Eklenti ayarları sayfamızda değilsek, içinde bulunduğumuz işlevin yürütülmesini hemen sonlandırmak için return kullanırız.

Yönetici ekranıma herhangi bir özel stil eklemeyeceğim için – eklenti ekranımın yerel WordPress ekranı gibi görünmesini istediğim için – bu kodu eklemeyeceğim.

Artık ayarlar sayfamızı oluşturmaya devam edebiliriz.

Toptal_Save_Admin sınıfına add_submenu_page() işlevini çağıracak basit bir yöntem ekleyerek başlayacağız.

 /** * Register the settings page for the admin area. * * @since 1.0.0 */ public function register_settings_page() { // Create our settings page as a submenu page. add_submenu_page( 'tools.php', // parent slug __( 'Toptal Save', 'toptal-save' ), // page title __( 'Toptal Save', 'toptal-save' ), // menu title 'manage_options', // capability 'toptal-save', // menu_slug array( $this, 'display_settings_page' ) // callable function ); }

Bu, add_submenu_page() işlevine ilettiğimiz oldukça az sayıda argüman. İşte her birinin anlamı.

• Ana bilgi: Üst menünün bilgi adı (veya standart bir WordPress yönetici sayfasının dosya adı). Ebeveyn sümüklü böceklerinin tam listesini burada görebilirsiniz.

• Sayfa başlığı: Menü seçildiğinde sayfanın başlık etiketlerinde görüntülenecek metin.

• Menü başlığı: Menü başlığı için kullanılacak metin.

• Yetenek: Bu menünün kendilerine gösterilmesi için kullanıcının ihtiyaç duyduğu yetenek. Yönetim Paneli seçeneklerine erişim sağlayan “manage_options”ı kullandık. Roller ve Yetenekler hakkında daha fazla bilgiyi burada bulabilirsiniz.

• Menü bilgisi: Bu menüye atıfta bulunulacak bilgi adı.

• Çağrılabilir işlev: Bu sayfanın içeriğini çıkarmak için çağrılacak işlev. Çağrılabilir fonksiyonumuzun adını tanımladığımız için onu yaratmamız gerekiyor, ancak yapmadan önce, bir sınıfın örneğini kendi içinden referans almak için $this kullandık. İşte PHP belgelerinin bu konuda söyleyecekleri:

Sözde değişken $this, bir nesne bağlamından bir yöntem çağrıldığında kullanılabilir. $this, çağıran nesneye bir başvurudur (genellikle yöntemin ait olduğu nesne, ancak yöntem ikincil bir nesne bağlamından statik olarak çağrıldıysa muhtemelen başka bir nesne).

Ardından, sınıfa başka bir yöntem ekleyeceğiz:

 /** * Display the settings page content for the page we have created. * * @since 1.0.0 */ public function display_settings_page() { require_once plugin_dir_path( dirname( __FILE__ ) ) . 'admin/partials/toptal-save-admin-display.php'; }

Bu çağrılabilir işlev, ayarlar sayfamızı gösterecek olan şablonumuzu içerir. Toptal-save-admin-display.php adlı admin/ partials içinde bulunan bir dosyaya atıfta bulunduğumuzu görebilirsiniz.

Şimdi, Araçlar'a giderseniz, o ekranı görmezsiniz. Niye ya? Çünkü register_admin_page() yöntemimizi admin_menu kancasına bağlamadık.

Bunu, include/class-toptal-save.php dosyamızı açıp bu kod parçasını define_admin_hooks() yönteminin içine ekleyerek yapabiliriz, burada $plugin_admin = new Toptal_Save_Admin( $this->get_plugin_name(), $this->get_version() ); kısmıdır.

 /** * Register all of the hooks related to the admin area functionality * of the plugin. * * @since 1.0.0 * @access private */ private function define_admin_hooks() { $plugin_admin = new Toptal_Save_Admin( $this->get_plugin_name(), $this->get_version() ); $this->loader->add_action( 'admin_menu', $plugin_admin, 'register_settings_page' ); $this->loader->add_action( 'admin_enqueue_scripts', $plugin_admin, 'enqueue_styles' ); $this->loader->add_action( 'admin_enqueue_scripts', $plugin_admin, 'enqueue_scripts' ); }

add_action() çağrıları için endişelenmeyin çünkü bu daha sonra ele alacağımız bir konu.

Şimdilik, Araçlar sayfasını açmanız yeterlidir; Toptal Save sayfasını görebileceksiniz. Açarsak çalışıyor ama üzerinde hiçbir şey olmadığı için boş bir ekran görüyoruz.

Biraz ilerleme kaydediyoruz, ama hey, burada bazı ayarları göstermemiz gerekiyor, o yüzden yapalım.

Alanları oluşturmaya başlayacağız ve bu, WordPress Ayarları API'sinin yardımıyla yapacağımız bir şey.

Bilmiyorsanız, verilerimizi kaydetmek için kullanabileceğimiz form alanları oluşturmamıza olanak tanır.

 /** * Register the settings for our settings page. * * @since 1.0.0 */ public function register_settings() { // Here we are going to register our setting. register_setting( $this->plugin_name . '-settings', $this->plugin_name . '-settings', array( $this, 'sandbox_register_setting' ) ); // Here we are going to add a section for our setting. add_settings_section( $this->plugin_name . '-settings-section', __( 'Settings', 'toptal-save' ), array( $this, 'sandbox_add_settings_section' ), $this->plugin_name . '-settings' ); // Here we are going to add fields to our section. add_settings_field( 'post-types', __( 'Post Types', 'toptal-save' ), array( $this, 'sandbox_add_settings_field_multiple_checkbox' ), $this->plugin_name . '-settings', $this->plugin_name . '-settings-section', array( 'label_for' => 'post-types', 'description' => __( 'Save button will be added only to the checked post types.', 'toptal-save' ) ) ); // ... }

register_settings() fonksiyonunun içinde tüm alanları ekleyebilir ve yapılandırabiliriz. Fonksiyonun tam uygulamasını burada bulabilirsiniz. Yukarıda gösterilen fonksiyonda aşağıdakileri kullandık:

• register_setting() : Bir ayarı ve temizleme geri aramasını kaydeder.
• add_settings_section() : Ayarlar sayfasına yeni bir bölüm ekler.
• add_settings_field() : Ayarlar sayfasının bir bölümüne yeni bir alan ekler.

Bu üç işlevden birini ne zaman kullansak, bir temizlik geri araması sağlandı. Bu, verilerin sterilize edilmesine ve bir alansa uygun HTML öğesinin (onay kutusu, radyo, giriş, vb.) gösterilmesine olanak tanır.

Ayrıca, gerektiğinde label_for, description veya default gibi bir dizi veriyi bu geri aramalara ilettik.

Şimdi, bu sanitizasyon geri aramalarını oluşturabiliriz. Bu geri aramaların kodunu burada bulabilirsiniz.

Her şey yolunda, ancak alanları admin_init kancasına bağlamamız ve sonra göstermemiz gerekiyor.

WordPress çekirdeğinin yürütme sırasında veya belirli bir olay meydana geldiğinde belirli noktalarda başlattığı bir kanca olan add_action kullanacağız. admin_init , bir kullanıcı yönetici alanına eriştiğinde başka herhangi bir kancadan önce tetiklenir.

İlk olarak, include/class-toptal-save.php dosyasına bir eylem eklememiz gerekiyor.

 /** * Register all of the hooks related to the admin area functionality * of the plugin. * * @since 1.0.0 * @access private */ private function define_admin_hooks() { $plugin_admin = new Toptal_Save_Admin( $this->get_plugin_name(), $this->get_version() ); // Hook our settings page $this->loader->add_action( 'admin_menu', $plugin_admin, 'register_settings_page' ); // Hook our settings $this->loader->add_action( 'admin_init', $plugin_admin, 'register_settings' ); $this->loader->add_action( 'admin_enqueue_scripts', $plugin_admin, 'enqueue_styles' ); $this->loader->add_action( 'admin_enqueue_scripts', $plugin_admin, 'enqueue_scripts' ); }

Ardından, admin/partials/topal-save-admin-display.php içinde, eklentimizin yönetici alanı için bir görünüm sağlamamız gerekiyor:

 <?php /** * Provide a admin area view for the plugin * * This file is used to markup the admin-facing aspects of the plugin. * * @link https://www.toptal.com/resume/ratko-solaja * @since 1.0.0 * * @package Toptal_Save * @subpackage Toptal_Save/admin/partials */ ?> <!-- This file should primarily consist of HTML with a little bit of PHP. --> <div> <form method="post" action="options.php"> <?php settings_fields( 'toptal-save-settings' ); do_settings_sections( 'toptal-save-settings' ); submit_button(); ?> </form> </div>

settings_fields() işlevi, bir ayarlar sayfası için nonce, action ve options_page alanlarının çıktısını almak için kullanılır.

Bunu, belirli bir ayarlar sayfasına eklenen tüm ayar bölümlerini yazdıran do_settings_sections() izler.

Son olarak, sağlanan metin ve uygun sınıf(lar) kullanılarak submit_button() işlevi kullanılarak bir gönder düğmesi eklenir.

Şimdi sayfamıza bir göz atarsak, şöyle görünecek:

Yönetici alanımızda yapmamız gereken tek şey bu. Eklentimizin genel kısmı üzerinde çalışmaya başlayalım.

Eklenti işlevselliğini oluşturun.

İşte ilginç kısım geliyor. İşlevselliğimizi ayırmak için birden çok işlev oluşturmamız gerekiyor:

• “Öğeyi Kaydet” düğmesini gösterecek bir işlev. Bu, mevcut kullanıcının o öğeyi önceden kaydedip kaydetmediğini kontrol etmelidir, buna bağlı olarak, rengin yanı sıra farklı metin de göstereceğiz.
• Bir öğeyi kaydedecek/kaydetmeyi kaldıracak bir işlev (AJAX).
• Kaydedilen tüm öğeleri gösterecek bir işlev.
• Kısa kodlarımızı oluşturacak bir işlev.

O halde butonu göstermeye başlayalım. Bunların hepsini public/class-toptal-save-public.php içinde yapacağız .

Bunu yaparken, aşağıdakiler gibi belirli şeylerle ilgilenmek için bazı ek yardımcı işlevler oluşturmamız gerekecek:

• Web sitesi için benzersiz bir çerez adı oluşturma
• Çerez oluşturma
• Çerez değerini alma
• Ayarlardan üyelik durumunu alma

Bu yardımcı işlevlerin kodu burada bulunabilir.

get_unique_cookie_name() işlevi, web sitesi URL'sinden, web sitesi adından ve özel tanımlı son ekimizden benzersiz bir çerez adı oluşturmamıza yardımcı olacaktır. Bu, aynı etki alanı altında birden çok WordPress sitesinde kullanıldığında oluşturulan çerez adının çakışmaması içindir.

toptal_set_cookie() ve toptal_get_cookie() işlevleri sırasıyla çerezlerimizin değerini oluşturacak ve alacaktır.

get_user_status() işlevi, ayarlardaki üyelik onay kutumuzun durumunu alır (işaretlendiğinde 1, aksi takdirde 0 döndürür).

Şimdi, sulu kısım, kaydetme düğmesini göstermekten sorumlu olacak işlevi oluşturur. show_save_button() fonksiyonumuzun uygulaması burada bulunabilir. Ve burada WordPress API'sinden bazı yeni işlevler kullandık:

• get_queried_object_id() : Geçerli sorgulanan nesnenin kimliğini alır.
• is_user_logged_in() : Mevcut ziyaretçinin oturum açmış bir kullanıcı olup olmadığını kontrol eder.
• get_user_meta() : Bir kullanıcı için kullanıcı meta veri alanını alır.
• wp_create_nonce() : Belirli bir eyleme, kullanıcıya, kullanıcı oturumuna ve zaman aralığına bağlı bir şifreleme belirteci oluşturur.

Şimdi butonumuzu içeriğin sonuna ekleyecek bir fonksiyon oluşturalım. Burada iki temel şartımız var.

1. Düğmenin yalnızca ayarlarda seçilen/seçilen gönderi türlerinde gösterildiğinden emin olun.
2. Düğmeyi eklemek için onay kutusunun işaretli olduğundan emin olun.

 /** * Append the button to the end of the content. * * @since 1.0.0 */ public function append_the_button( $content ) { // Get our item ID $item_id = get_queried_object_id(); // Get current item post type $current_post_type = get_post_type( $item_id ); // Get our saved page ID, so we can make sure that this button isn't being shown there $saved_page_id = get_option( 'toptal_save_saved_page_id' ); // Set default values for options that we are going to call below $post_types = array(); $override = 0; // Get our options $options = get_option( $this->plugin_name . '-settings' ); if ( ! empty( $options['post-types'] ) ) { $post_types = $options['post-types']; } if ( ! empty( $options['toggle-content-override'] ) ) { $override = $options['toggle-content-override']; } // Let's check if all conditions are ok if ( $override == 1 && ! empty( $post_types ) && ! is_page( $saved_page_id ) && in_array( $current_post_type, $post_types ) ) { // Append the button $custom_content = ''; ob_start(); echo $this->show_save_button(); $custom_content .= ob_get_contents(); ob_end_clean(); $content = $content . $custom_content; } return $content; }

Şimdi, bu işlevi the_content kancasına bağlamamız gerekiyor.

Niye ya? Çünkü the_content , veri tabanından alındıktan sonra ve ekrana yazdırılmadan önce gönderinin içeriğini filtrelemek için kullanılır.

Bununla, kaydet butonumuzu içeriğin herhangi bir yerine ekleyebiliriz. Bunu include/class-toptal-save.php içinde define_public_hooks() yönteminde şöyle yapabiliriz:

 /** * Register all of the hooks related to the public-facing functionality * of the plugin. * * @since 1.0.0 * @access private */ private function define_public_hooks() { $plugin_public = new Toptal_Save_Public( $this->get_plugin_name(), $this->get_version() ); // Append our button $this->loader->add_action( 'the_content', $plugin_public, 'append_the_button', 45 ); $this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'enqueue_styles' ); $this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'enqueue_scripts' ); }

Şimdi, eklenti ayarlarına gidip gönderileri ve sayfaları kontrol edip düğmeyi eklerseniz, düğmenin gösterildiği herhangi bir blog gönderisinde göreceğiz.

Buradan, devam edip o düğmeye stil vermeliyiz.

Bunu public/css/toptal-save-public.css içinde yapabiliriz . Güncellenmiş CSS dosyasını burada bulun.

Şimdi, öğeyi gerçekten kaydedecek bir işlev oluşturalım.

Bunu genel sınıfımızda yapacağız ve AJAX ile yapacağız. Kod burada.

Bu işlevi WordPress AJAX'a bağlayalım.

 /** * Register all of the hooks related to the public-facing functionality * of the plugin. * * @since 1.0.0 * @access private */ private function define_public_hooks() { $plugin_public = new Toptal_Save_Public( $this->get_plugin_name(), $this->get_version() ); // Append our button $this->loader->add_action( 'the_content', $plugin_public, 'append_the_button', 45 ); // Save/unsave AJAX $this->loader->add_action( 'wp_ajax_save_unsave_item', $plugin_public, 'save_unsave_item' ); $this->loader->add_action( 'wp_ajax_nopriv_save_unsave_item', $plugin_public, 'save_unsave_item' ); $this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'enqueue_styles' ); $this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'enqueue_scripts' ); }

AJAX hakkında daha fazla bilgiyi burada eklentilerde okuyabilirsiniz.

Bu kısmı bitirmeden önce iki şey daha yapmamız gerekiyor.

1. Bir komut dosyasını yerelleştirin.
2. public/js/toptal-save-public.js içinde AJAX çağrımızı oluşturun

Bir betiğin yerelleştirilmesi, public/class-toptal-save-public.php dosyamızdaki wp_localize_script() işlevi aracılığıyla yapılacaktır.

Ayrıca, hazır buradayken, "tarzımızı kullan" onay kutumuzun durumuna bağlı olarak CSS ve JS dosyalarını göstermeyi de uygulayacağız.

 /** * Register the stylesheets for the public-facing side of the site. * * @since 1.0.0 */ public function enqueue_styles() { /** * This function is provided for demonstration purposes only. * * An instance of this class should be passed to the run() function * defined in Toptal_Save_Loader as all of the hooks are defined * in that particular class. * * The Toptal_Save_Loader will then create the relationship * between the defined hooks and the functions defined in this * class. */ $options = get_option( $this->plugin_name . '-settings' ); if ( ! empty( $options['toggle-css-override'] ) && $options['toggle-css-override'] == 1 ) { wp_enqueue_style( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'css/toptal-save-public.css', array(), $this->version, 'all' ); } } /** * Register the JavaScript for the public-facing side of the site. * * @since 1.0.0 */ public function enqueue_scripts() { /** * This function is provided for demonstration purposes only. * * An instance of this class should be passed to the run() function * defined in Toptal_Save_Loader as all of the hooks are defined * in that particular class. * * The Toptal_Save_Loader will then create the relationship * between the defined hooks and the functions defined in this * class. */ wp_enqueue_script( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'js/toptal-save-public.js', array( 'jquery' ), $this->version, false ); // Get our options $options = get_option( $this->plugin_name . '-settings' ); // Get our text $item_save_text = $options['text-save']; $item_unsave_text = $options['text-unsave']; $item_saved_text = $options['text-saved']; $item_no_saved = $options['text-no-saved']; $saved_page_id = get_option( 'toptal_save_saved_page_id' ); $saved_page_url = get_permalink( $saved_page_id ); wp_localize_script( $this->plugin_name, 'toptal_save_ajax', array( 'ajax_url' => admin_url( 'admin-ajax.php' ), 'item_save_text' => $item_save_text, 'item_unsave_text' => $item_unsave_text, 'item_saved_text' => $item_saved_text, 'item_no_saved' => $item_no_saved, 'saved_page_url' => $saved_page_url ) ); }

Artık AJAX çağrımıza geçebiliriz.

Ön uç betiğimiz, "toptal-save-button" sınıfına sahip öğeleri arayacaktır.

Eşleşen tüm öğelere, API çağrısını gerçekleştirecek ve kullanıcı arayüzünü buna göre güncelleyecek bir tıklama işleyicisi kaydedilecektir.

Kodu burada ve gerekli CSS'yi burada bulabilirsiniz.

Öğe eklendiğinde bildirimi işleyecek bir işlev de ekledim.

İşte her şey böyle çalışıyor.

Ardından, kullanıcıların istedikleri yere eklemeleri için bir kısa kod oluşturmamız gerekiyor.

Bunu public/class-toptal-save-public.php içinde yapabiliriz :

 /** * Create Shortcode for Users to add the button. * * @since 1.0.0 */ public function register_save_unsave_shortcode() { return $this->show_save_button(); }

Ayrıca, fonksiyon kendi başına hiçbir şey yapmayacağından, onu kaydetmemiz gerekiyor.

include/class-toptal-save.php içinde bu kodu butonumuzu eklediğimiz satırdan sonra ekleyin.

 // Add our Shortcodes $this->loader->add_shortcode( 'toptal-save', $plugin_public, 'register_save_unsave_shortcode' );

Şimdi, bu işe yaramayacak çünkü henüz add_shortcode() yöntemini yükleyici sınıfımıza yüklemedik.

İşte include/class-toptal-save-loader.php dosyasının tam kodu.

shortcodes adında yeni bir korumalı değişken ekledim, ardından sınıfın yapıcı yönteminde onu bir diziye dönüştürdüm.

104. satırda, kısa kodlarımızın oluşturulmasından sorumlu olacak bir işlev ekledim; “filtreyi” “kısa kod” ve “filtreleri” “kısa kodlar” olarak değiştirmem dışında, hemen hemen üstündeki işlevle ( add_filter() ) aynı olduğunu görebilirsiniz.

Ayrıca run() yönteminde, kısa kod dizimizden geçecek başka bir foreach ekledim ve bunları WordPress'e kaydettim.

Kolaydı.

Unutmayın, başlangıçta bir kısa kod [toptal-saved] kullandık, bu yüzden tüm kayıtlı öğelerimizi gösterecek bir yöntem oluşturalım.

Bu yöntemin tam kodunu burada bulun.

Şimdi, her zaman olduğu gibi, kısa kodu include/class-toptal-save.php içine kaydetmemiz gerekiyor :

 /** * Register all of the hooks related to the public-facing functionality * of the plugin. * * @since 1.0.0 * @access private */ private function define_public_hooks() { $plugin_public = new Toptal_Save_Public( $this->get_plugin_name(), $this->get_version() ); // Append our button $this->loader->add_action( 'the_content', $plugin_public, 'append_the_button', 45 ); // Add our Shortcodes $this->loader->add_shortcode( 'toptal-save', $plugin_public, 'register_save_unsave_shortcode' ); $this->loader->add_shortcode( 'toptal-saved', $plugin_public, 'register_saved_shortcode' ); // Save/unsave AJAX $this->loader->add_action( 'wp_ajax_save_unsave_item', $plugin_public, 'save_unsave_item' ); $this->loader->add_action( 'wp_ajax_nopriv_save_unsave_item', $plugin_public, 'save_unsave_item' ); $this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'enqueue_styles' ); $this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'enqueue_scripts' ); }

Burada yapacağımız iki şey daha var.

1. Kaydedilmiş öğeler sayfamızı şekillendirin.
2. Bir kullanıcı kayıtlı bir öğeyi kaldırdığında, kayıtlı öğeler sayfasından kaybolduğundan emin olun.

İlk görev için gerekli CSS kodunu burada bulabilirsiniz.

İkincisi için, biraz ön uç komut dosyası oluşturmayı içerir.

Bunun için tam JavaScript kodu burada bulunabilir.

52. satırda göreceğiniz gibi, "toptal-saved-item" sınıfıyla div'i aradım.

Daha sonra, 70-75 satırlarında, o üst div'in bir sınıf toptal-kaydedilmiş-öğesi olup olmadığını kontrol ederiz.

Olursa, fadeOut ile itemimizi gizleriz ve ardından animasyon bittikten sonra itemi tamamen ekrandan kaldırırız.

Şimdi daha zor kısma geçelim – onu modüler hale getirelim.

Eklentiyi modüler yapın.

Modüler bir eklentinin temel tanımı şudur:

Genişletilebilir veya modüler kod, çekirdek kod tabanını hiç değiştirmeden değiştirilebilen, etkileşime girilebilen, eklenebilen veya değiştirilebilen koddur.

Şimdi, bu eklenti söz konusu olduğunda, kullanıcıların kaydedilen öğeler sayfasında kaydedilen öğenin içindeki HTML'yi değiştirebildiğinden emin olurdum.

Bu yüzden register_saved_shortcode() yöntemimizde birkaç değişiklik yapmamız gerekecek:

• Kullanıcıların HTML'yi değiştirebilmesini istediğimiz yerde html_to_return inner_html_to_return olarak değiştirin. inner_html_to_return değişkenimizin ilk bildiriminin önünde nokta olmadan “=” olduğundan emin olun.
• apply_filters() yöntemini kullanın.

Bu iki değişiklikle, bunun gibi bir şeyle sonuçlanmalısınız.

Şimdi, eğer kullanıcılar kodumuzla etkileşim kurmak isterse, functions.php dosyalarının içine şöyle bir şey ekleyebilirler:

 <?php add_filter( 'toptal_saved_item_html', 'change_toptal_saved_item_html'); function change_toptal_saved_item_html( $inner_html_to_return ) { // Some custom code return $inner_html_to_return; }

Çeviri dosyaları oluşturun.

Çeviri çok önemlidir çünkü WordPress topluluk üyelerinin ve çok dillilerin eklentinizi çevirmesine izin vererek İngilizce olmayan siteler için erişilebilir hale getirir.

Bununla birlikte, WordPress'in çevirileri nasıl ele aldığına dair bazı teknik ayrıntılara girelim.

WordPress, çeviri için GNU gettext yerelleştirme çerçevesini kullanır. Bu çerçevede, üç tür dosya vardır:

• Taşınabilir Nesne Şablonu (POT)
• Taşınabilir Nesne (PO)
• Makine Nesnesi (MO)

Bu dosyaların her biri, çeviri sürecindeki bir adımı temsil eder.

Bir POT dosyası oluşturmak için, WordPress kodunu arayacak ve _e() __e() ve _e() gibi çeviri işlevlerimize geçirilen tüm metni alacak bir programa ihtiyacımız var. Çeviri işlevleri hakkında daha fazla bilgiyi buradan edinebilirsiniz.

Burada hem İngilizce'yi hem de çevirimizi bir PO dosyasına kaydederek POT dosyasından metni çeviriyoruz ve PO dosyasını bir MO dosyasına dönüştürüyoruz.

Eklentinizdeki her çevrilebilir dosya için birkaç satır kod yazmanız gerekeceğinden bunu manuel olarak yapmak çok zaman alacaktır. Neyse ki, Loco Translate adlı kullanışlı küçük bir eklenti kullanmanın daha iyi bir yolu var.

Yükleyip etkinleştirdikten sonra, Loco Translate > Eklentiler > Toptal Save'e gidin.

Buradan Şablonu düzenle'yi ve ardından Eşitle ve Kaydet'i tıklayın. Bu, diller klasörümüzün içindeki toptal-save.pot düzenleyecektir.

Şimdi, eklenti çeviri için kullanılabilir.

WordPress eklentinizi şimdi oluşturun.

Bu yazıda oldukça basit bir eklenti oluşturduk, ancak bu süreçte bu eklentiyi kolayca korumamızı ve genişletmemizi sağlayacak uygulamaları ve standartları takip ettik.

WordPress işlevlerini, platformun genel performansını engellemeyecek şekilde kullandık.

İster basit bir eklenti, ister karmaşık bir eklenti, ister bireysel bir geliştirici ister bir WordPress geliştirme şirketi olun, en iyi uygulamaları planlamak ve takip etmek, sağlam bir eklenti oluşturmanın anahtarıdır.