WordPress ürünlerinin lansmanında kullanıcı deneyimini geliştirmenin (UX) altı bölümünün son bölümünde, BoeSplate BoeSerping Welcome WP sayfası Lighty GPL’yi tamamlayacağız. Tüm WordPress ürünleriniz için kullanabilirsiniz. Boilerplate’imiz için temel dosyalar ve girişimler oluşturduk. Şimdi mantık kodunu tartışacağız ve kullanıcıyı arka uçtaki hoş geldiniz sayfasına ve hoş geldiniz sayfasına güvenle yönlendirecek dosyaları göreceğiz. Eklenti mantığını tanımlama başlatma dosyasında set_transient () ve delete_transient () işlevlerini tanımladıktan sonra, güvenli aktarım ve hoş geldiniz sayfası ekranı için mantık oluşturabiliriz. Eklenti mantığını yönetmek için, aşağıdaki kodu içeren Welcome-Logic.php adlı ayrı bir dosya oluşturdum:
‘wpw_welcome_page’
),
admin_url (‘plugins.php’)
));
}
}
// Hoşgeldin sayfasının alt menüsü.
if (! function_exists (‘wpw_welcome_page’))) {
// ‘admin_menu’ ekleyin.
Add_action (‘admin_menu’, ‘wpw_welcome_page’);
/**
* Alt menü hoş geldiniz sayfası.
*
* Eklenti menüsüne bir hoş geldiniz sayfası ekleyin.
*
* @sejak 1.0.0
*/
işlev wpw_welcome_page () {
// Alt menüleri depolamak için global değişkenler ekleyin.
Global $ wpw_sub_menu;
// alt menü kendisi.
$ wpw_sub_menu = add_submenu_page (
‘Plugins.php’, // Ana menü (veya Standart WordPress Yönetici Dosya Adı) için Slug Adı.
__ (‘Hoş Geldiniz’, ‘WPW’), // Menü seçildiğinde sayfa başlık etiketinde görüntülenecek metin.
__ (‘Hoş Geldiniz’, ‘WPW’), // Menüler için kullanılacak metin.
‘Oku’, // Bu menünün kullanıcılara görüntülenebilmesi için gerekli özellikler.
‘wpw_welcome_page’, // bu menüye atıfta bulunmak için sümüklü adı (bu menü için benzersiz olmalıdır).
‘wpw_welcome_page_content’, // bu sayfanın içeriğini görüntülemek için çağrılacak işlev.
);
}
}
// Hoşgeldin sayfası ekranı.
if (! function_exists (‘wpw_welcome_page_content’))) {
/**
* Hoşgeldin sayfası ekranı.
*
* Hoş Geldiniz Sayfa İçeriği HTML/CSS/PHP’dir.*
* @sejak 1.0.0
*/
işlev wpw_welcome_page_content () {
// Sayfaya hoşgeldiniz.
if (file_exist (wpw_dir. ‘/welcome/welcome-view.php’) {
need_once (wpw_dir. ‘/welcome/welcome-view.php’);
}
}
}
// hoş geldiniz sayfası için CSS.
if (! function_exists (‘wpw_styles’))) {
// Bir stil kuyruğu yapın.
Add_action (‘admin_enqueue_scripts’, ‘wpw_styles’);
/**
* Kuyruk stili.
*
* @param int $ Hook Hook Hook Hook’un Geçerli Yönetici sayfası için sonunu.
* @sejak 1.0.0
*/
Wpw_styles işlevi ($ kait) {
// Global değişkene depolanan alt menü ile erişin.
Global $ wpw_sub_menu;
// Hoşgeldin sayfasına stil ekleyin.
if ($ kanca! = $ wpw_sub_menu) {
dönüş;
}
// Sayfa stili hoş geldiniz.
wp_enqueue_style (
‘wpw_style’,
WPW_URL. ‘/Welcome/css/style.css’,
Ayarlamak (),
Wpw_version,
‘tüm’
);
}
} Kodun Açıklanması Kod belgelenmesine rağmen, onu da izleyeceğiz. Dosya bir doküman yorumuyla başlar ve ardından bu dosyaya WordPress kapsamı dışında erişilirse eklenti işlemini iptal etmek için bir ABSPath sınavı ile başlar.
Hoş Geldiniz sayfasından güvenli aktarım gereksinimlerini karşılamak için, admin_init’in eylemlerine bağlı olan ve yönetici alanı başlatıldığında işlevin doğru çalışmasını sağlayan özel bir işleve ihtiyacımız var. Böylece, 16-52 satırında wpw_safe_welcome_redirect () adlı bir işlev yaptım. Karmaşık koşullar yapmamız gerektiğinden, bir “koruma maddesi” yapmak her zaman daha iyidir. Koruma Maddesi, yalnızca yöntemin doğrudan değerinin istisnasının veya geri dönüşünün çağrılmasına yol açan ve bunu yöntemin başlangıcına yerleştiren tüm koşulluları çıkarır. İlk sınav geçici transferinin varlığını test etti. Burada, get_transient () adlı bir işlev bulacaksınız. Bu, WordPress’teki API geçişleri tarafından desteklenen başka bir işlevdir (diğer ikisi, set_transient () ve delete_transient ()) önceki makalede tartışılmıştır. Get_transient () işlevinin amacı, geçici için ‘anahtar’ olan tek bir parametre kullanan belirli geçişlere karşı depolanan değeri almaktır. Not: Bu, set_transient () ‘de bir parametre olarak kullandığınız anahtarla aynıdır. Önceki makalede işlev, yani _welcome_redirect_wpw tanımladım. Bu nedenle, sınavı yapmak için aynı şeyi kullandım. Şimdi, alınan değer doğru değilse, geçici değerimizi önceki makalede doğru olarak ayarladık, o zaman geri dönüş, bu işlevin geri dönmeden veya hiçbir şey yapmadan yürütmeyi durduracağı anlamına gelir. Geçici silinmişse, yönlendirme işlevi kullanıcıyı Hoş Geldiniz sayfasına yönlendirmez.
Bununla birlikte, depolanan geçiciden alınan değer doğruysa ve aktivasyon transferinin geçici olması varsa, fonksiyon aktif geçici olanı kaldırdığı yerde daha fazla gerçekleştirilecektir, böylece transfer sadece bir kez gerçekleşir.Ayrıca, eklenti WordPress Multisite Network’te etkinleştirilirse, karşılama sayfasını yeniden yönlendirmemek için bu işlev için başka bir koruma maddesi yapıyorum.Geçici aktarım varsa ve eklenti ağda etkinleştirilmezse, işlev ileriye doğru çalıştırılacak ve kullanıcının hoş geldiniz sayfasına yönlendirildiği güvenli bir aktarım yapacak.Tüm bu koruma maddeleri, eklentiyi etkinleştirdiklerinde kullanıcıyı hoş geldiniz sayfasına yönlendirmemize yardımcı olur.
Wp_safe_redirect () işlevi, sunucuya doğru aktarım konumunu anlatarak bu görevi yapar. Add_query_arar () işlevi konumu belirlemeye yardımcı olur. Bir sorgu dizesi ile değiştirilmiş bir URL şeklinde geldi. Codex’e göre, bu bir çift anahtar değer ve konum URL’si içeren ilişkisel bir dizidir. Bizim durumumuzdaki sayfanın sayfası wpw_welcome_page’dir (bu makalenin ilerleyen saatlerinde belirlenecektir). Yeri belirlemek için admin_url () işlevini kullanıyorum. Bu işlev, kullanıcıları Domain-and.com/wp-admin/plugin.php?page=wpw_welcome_page’ye yönlendirir. Şimdiye kadar, transfer süreci güvenlidir. Ancak eklenti kullanıcılarını yönlendiren bir WordPress yönetici sayfasına ihtiyacımız var. Eklenti menüsüne bir hoş geldiniz sayfası eklemek için, 54-79 satırında özel bir işlev, yani wpw_welcome_page () tanımlıyorum. Add_subMenu_Page () ile bir alt menü sayfası ekler ve bu sayfa kimliğini stil sayfası için kuyruklamak için kullanılan global bir değişkene kaydederiz (daha sonra hakkında daha fazla bilgi). Add_submenu_page () function add_submenu_page () işlevi, herhangi bir menüye sayfa ekleyen varsayılan bir wordPress işlevidir ” Eklenti’. Bir parametre listesi gereklidir, yani
$ parent_slug
$ Page_tigns
$ Menu_title

$ Yetenek
$ Menu_slug
$ işlev
Bu işlevin tüm ilgili parametrelerini 71-78 satırında tanımladım. Ayrıca wpw_welcome_page () işlevini 56-57 satırında admin_menu eylemleriyle ilişkilendiriyorum. Şimdiye kadar, karşılama sayfamızın temel yapısı tamamlandı. Kullanıcılar eklentiyi etkinleştirdiğinde, boş bir sayfaya yönlendirilir. Şimdi bir hoş geldiniz sayfası ekranı eklemeliyiz.
Add_submenu_page işlevinin son parametresi olarak, hoş geldiniz sayfamızın görünümünden sorumlu olacak başka bir işlevi hatırladım. Bu işlevi, hoş geldiniz-view.php içeren bir hoş geldiniz sayfası ekran dosyası içeren wpw_welcome_page_content () olarak adlandırılır. Bundan sonra, 100-129 satırından, hoş geldiniz sayfamızın stil sayfasını beklemekten sorumlu bir işlev ekledim. Not: Styles sayfasının yalnızca hoş geldiniz sayfasında enqueed’de olmasını istiyorum, bu yüzden bambenu_page kimliğimizi $ wpw_sub_menu adlı bir değişkende depolamak için global bir değişken yapıyorum. Geçerli yönetici sayfası kimliğini hoş geldiniz sayfası kimliği ile karşılaştırmama yardımcı olan $ kanca parametresini kullanıyorum, $ wpw_sub_menu, böylece WP sadece basit bir koruma maddesi yardımıyla hoş geldiniz sayfasındaki stil sayfasını bırakacak. -View.php. Bu dosya, kullanıcılarımızı yönlendirdiğimiz hoş geldiniz sayfasındaki tüm HTML/CSS kodundan sorumludur. Bu dosyanın kodu şöyle görünüyor:

Başlangıç ​​

Adım #1: lorem iPsum Dolor oturma amet, seçkin adipising kavramı.
Adım #2: cras sed silen quam. Sed dapibus est id enim cilisis lig.
Adım #3: tortor est congue ligula, AB adipiscing quam ligula ut purus.

İçerik nedir?

<div class = "http://placehold.it/600×180/0092f9/fff

<div class = "http://placehold.it/600×180/0092f9/fff

<div class = "http://placehold.it/600×180/0092f9/fff

<div class = "http://placehold.it/600×180/0092f9/fff

1-20 satırında standart WP PHP dokümanı ve ABSPATH sınavını bulacaksınız, HTML’de kullanılacak değişkenleri de belirleyebilirsiniz.
22-78 satır tüm içeriği, sınıfları, varlıkları vb. İçerir. WordPress Core ekibi tarafından basit bir ızgara tabanlı sütun düzeni oluşturmak için kullanılan birkaç sınıf buldum. Bu kodla elde edebileceğiniz hoş geldiniz sayfası düzeni aşağıdaki öğeleri içerir:
Başlatmak için eklentinin, sürümün ve logonyatoryal adım adım adım adım
Video öğretici
İki sütunda eklenti özellikleri
Dosya Style.css ile Özel Stil
BoilerPlate Hoş Geldiniz Sayfaları WP – Test Sonunda sayfayı ayarlama zamanı gelir. Bunu uygulamak için aşağıdaki ayarlara sahip olmanız gerekir:
Github’dan WP-Welcome-Pagal-Boilerplate düştü
Yüklü wordpress ile demo web sitesi
Hoş Geldiniz Sayfası Bolarplate eklentisi yüklendi ve etkinleştirildi
Eklentiyi etkinleştirdikten sonra, hoş geldiniz sayfasına yönlendirilirsiniz. Buradan aşağıdaki ekran görüntülerinde hoş geldiniz sayfasının tam düzenini görebilirsiniz: her şeyden önce kısa bir giriş ve eklenti logosu var. Sonra başlamak için adımlar bulabilirsiniz. Sırada video eğitimi. Bu, eklentilerin nasıl çalıştığı konusunda daha gerçek zamanlı bir görünüm verir. Son olarak, önemli bir ürün özelliği içeren parçalar vardır. Katkıda bulunanlar, yeni ve gelecekteki özelliklerin yanı sıra abonelik formları hakkında bölümler de ekleyebilirsiniz. WordPress ürününüzün kullanıcı deneyimini geliştirme ile ilgili diziyi sonuçlandırmak için bunu sonuçlandıralım. Bu adımları kendim uyguladıktan sonra, eklentimi kullanmaya devam eden daha fazla kullanıcı var. Umarım bu sizin için de işe yarar. Son olarak, tüm makalelerimi profil sayfamda görebilirsiniz ve beni blogumdan takip edebilir ve/veya Twitter @Mrahmadwais ile iletişime geçebilirsiniz; WordPress bağlamında geliştirme iş akışları hakkında yazıyorum. Her zamanki gibi, aşağıda soru veya yorum bırakmaktan çekinmeyin ve birbirimize cevap vermeye çalışacağım.