Orta Kullanıcılar İçin WordPress Geliştirme: Temalarınızı Hazırlayın
Geçmişte, tema kullanıcısınıza sitelerinin veya temalarının yönlerini nasıl ayarlayacağınızı vermek istiyorsanız, Tema Seçeneği sayfasını oluşturacaksınız. Ancak şimdi en iyi yol (ve temalar için beklenen yöntem) bir özelleştirici kullanmaktır. Bu, orta kullanıcılarımız için WordPress geliştirme serisindeki ikinci gönderi. Bu dizi, sizi WordPress ile geliştirmenin temellerini, PHP ile kodlamaya ve temalar ve eklentiler oluşturma ile tanışan WordPress için yeni başlayanlar geliştirmek için popüler öğreticimizi takip ediyor. Bu öğreticide, temanıza nasıl özelleştirici işlevselliği ekleyeceğinizi göstereceğim. Tartışacağız:
Ayarlama ve varsayılan ayarların özeti,
Ayarlamalarla etkileşim kurmak için kullanmanız gereken kancalar ve işlevler,
Özelleştiriciye bir parça ekleyin,
Renk, metin ve radyo düğmeleri dahil olmak üzere kendi tarafınıza kontrol ekleyin ve
Ayarlarla temanıza kullanıcı girişini uygulayın.
Ayrıca, kullanıcılarınızın sitelerine nasıl metin eklemesine izin verebileceğinizi ve aynı zamanda düzenlemede renk seçmenlerini kullanarak stili nasıl değiştirebileceklerini de göreceğiz. Not: PHP hakkında bilgi sahibi olmanız önemlidir, çünkü bu WordPress’in temel dilidir ve bu dizi boyunca kod görüntülerine atıfta bulunacağım.
Başlayalım. Orta kullanıcılarımız için WordPress Geliştirme Serisindeki öğreticiyi özlüyor musunuz? Yedi yazıyı buradan takip edebilirsiniz:
Orta Kullanıcılar İçin WordPress Geliştirme: Ayrıntılı Tema Geliştirme
Orta Kullanıcılar İçin WordPress Geliştirme: Temalarınızı Hazırlayın
Orta Kullanıcılar İçin WordPress Geliştirme: Orta Kullanıcılar İçin WordPress Geliştirme Eklentisi Oluşturma: Özel Gönderim Türleri ve Taksonomisi
Orta Kullanıcılar İçin WordPress Geliştirme: Perde ve Tekrarlama
Orta Kullanıcılar için WordPress Geliştirme: Özel ve Meta Veri alanları
Orta kullanıcılar için WordPress’in geliştirilmesi: uluslararasılaşma
Bu doğru, WPMU dev üyeleri için ücretsiz WordPress bilgisi, akran incelemeleri, eğitmen geri bildirimi ve sertifika, bu diziyi takip etmeniz gerekenleri öğrenmeye başlar, yapmanız gereken bir temaya ihtiyacınız vardır. Kendi temanızı kullanabilirsiniz (yani, temanızla çalışması için kodumu uyarlamanız gerekir) veya bu serinin 1. Bölümünde üzerinde çalıştığınız temayı kullanabilirsiniz. İsterseniz, bu kurs için kaynak dosyaya Bölüm 1’in son temasını indirebilirsiniz. Ayrıca kullanım için bir geliştirme sitesine (belki de yerel makinenizde) ve kod düzenleyicisine ihtiyacınız var. Birkaç ipucuna mı ihtiyacınız var? Windows’ta yerel ortamı nasıl yöneteceğiniz ve Mac’te nasıl yapılacağı aşağıda açıklanmıştır. WordPress geliştiricileri için Kılavuz 24 En İyi Metin Düzenleyicisi’nizi de görmek isteyebilirsiniz.
Özelleştirici nedir? WordPress bilginizi bu kursu inceleyene kadar geliştirdiyseniz, daha önce bir özelleştirici kullanmış olmalısınız, böylece çok fazla tanıtıma ihtiyacınız yoktur. Kabuller, site yöneticisinin, çalışırken neler olduğunu gösteren doğrudan önizlemelerle birlikte widget, menüler vb. Ekleme eklemenin yanı sıra sitenin içeriğinde veya tasarımında değişiklik yapmasına izin verir. Bu, mevcut demo sitem için özelleştirici ekranı:
Şu anda dört varsayılan parçası var:
Widget – Kayıtlı widget alanına widget eklemek için.
Statik Ön Sayfa – Statik sayfaları ana sayfa olarak ayarlamak için bunu kullanın.
Bu, WordPress tarafından eklendi ve temalarımızla değil, ayarlama veya kontrol bölümü eklenmez. Bu seride, biri başlık içeriği için, diğeri renk için iki parça ekleyeceğiz.
Ayarların ayarlanmasıyla kullanılan sınıflar, kancalar ve yöntemlerin kendi ateşi vardır, çeşitli sınıflar, kancalar ve etkileşim kurmanız gereken işlevler ve temanız için işlevsellik eklemek için kullanır. Bazılarına bakalım:
Customize_register’ın kancaları, özelleştiriciye erişmek için kullanmanız gerekenlerdir. Özelleştirici işlevlerinizin çoğunun bununla ilişkilendirilmesi gerekir.
Ayarlamadaki ayarlara göre bölümünüze özel bir stil eklemek için WP_head kancasını da kullanabilirsiniz – bunu bu kurstaki renkle yapacağız.
WP_Customize_Manager Sınıfı, düzenleme, kontrol ve ayarlama çalışmasının nasıl tanımlanması. Bir özelleştirici ile etkileşime girerken bu sınıfın yöntemini kullanırsınız.
Ayrıca, varsayılan olarak nasıl çalıştığını tanımlayan belirli kontrol türleri için geçerli bir sınıf da vardır. Buna wp_customize_color_control ve wp_customize_control sınıfı dahildir. Bunu genişletmek ve temanızda kullanacağınız kontrolün özel sürümünü belirlemek için kendi sınıfınızı oluşturabilirsiniz.
Bir bölüm oluşturmak için $ wp_customize-> add_section () yöntemini kullanırsınız. Ekleme işleminde çalışırken size bunun için parametreler göstereceğim. Kontrol eklemek için $ wp_customize-> add_control () yöntemini kullanıyorsunuz.
Kontrollerin içinde bir şey yapmasına izin veren ayarlar eklemek için $ wp_customize-> add_setting () yöntemini kullanın.
Açıkladığım son üç yöntemin işlev yerine yöntemler olduğunu unutmayın, çünkü bunlar bağımsız işlevler değil sınıf yöntemleridir.
Bu ders bölümündeki ayar, kontrol ve ayarları hazırlarken bunların her birini yapacağız. Başlangıç: Ayarlamalar için bir dosya oluşturun Özelleştirici için bir kod eklemeye başlamadan önce, tüm kodları içeren bir dosya ekleyelim. Bunu function.php tema dosyasına eklemek yerine, bir dahil dosyası oluşturalım.
Tema klasörünüzde, dahil edilen bir klasör oluşturun.
İçinde, Customer.php adlı boş bir dosya oluşturun.
Function.php dosyanızı açın. Üstte şunu ekleyin:
Core 1392D651B0F9933846EB33005050F25 içerir
İşlev dosyanızı kaydedin ve kapatın.
Ardından, yeni Customer.php dosyasında çalışmaya başlayalım.
Yeni Customer.php dosyanızı açın ve <? PHP açılış add_setting () yönteminin iki parametresi vardır: Ayarlar için benzersiz kimlik
Varsayılan değer
$ Wp_customize-> add_control () yöntemi, WordPress’e oluşturduğumuz sınıftan yeni örnekler yaptığımızı söyleyen yeni wpmu_customize_textarea_control olan bir parametreye sahiptir. Yeni sınıfın üç parametresi var:
$ wp_customize, bu sınıfın nesnesi.
Ayarlar için benzersiz kimlik.
Bir dizi değeri:
Çevrilmeye hazır bir etiket (bu dersin bir sonraki bölümünde daha fazlası).
Bu kontrolün olacağı kısım.
Oluşturduğunuz ayarların benzersiz bir kimliği olan veri gönderme amacını ayarlayın.
Şimdi sitenizdeki özelleştiriciye geri dönüp ekranı yenilerseniz, iletişim bilgileri görüntülenir:
Ve bu kısmı tıklarsanız, kontrolünüzü göreceksiniz:
Şu anda, kontrole bir şey yazıyorsanız, kontrol sitede görünmez, ancak yakında düzelteceğiz. İlk olarak, ikinci bölüme bazı kontroller ekleyelim. Kontroller ve diğer renk ayarları ekleyerek, Site Yöneticisi tarafından renk şeması temasını değiştirmek için kullanılabilecek bazı renk kontrolleri ekleyelim. Buraya dört kontrol eklediğimiz için, bir değişken $ textColors hazırlayacağım ve daha sonra her renk için eklemek ve kontrol yapmak istediğimiz her rengi yapmak için kullanacağım. İlk olarak, bu değişkeni ayarlayalım.
Kontrol metnini kontrol etmek için eklediğiniz kod altında şunu ekleyin: Çekirdek 1392D651B0F9933846EB330050F25
Dosya ‘yı kaydet.
Bu, Dizi değerini içeren $ TextColors değişkenini yapar: wpmu_color1, wpmu_color2, wpmu_links_color1 ve wpmu_links_color2. Bunların her biri için salyangoz, varsayılan renkler ve etiketler içeren diğer ikinci seviyeli diziler vardır. Sırtınızı Patlayın – Sadece yeni bir PHP tekniği kullandınız: değişkenlere yerleştirilmiş dizi! Şimdi kontrolü yapalım. Dört rengimizin her biri için yenileri yapmak yerine, değişkenlerimizde tanımladığımız dört rengi tekrarlamak için foreach () kullanacağız. Değişkeni ayarlamak için eklediğiniz kod altında şunu ekleyin: Core 1392D651B0F9933846EB33005050F25 içerir
Dosyanızı kaydedin.
Bu, renklerimizin her birinde döngüdür ve aşağıdakileri eklemek:
Ayarlar, iki parametreli:
Değişken dizisinden bir sümük kullanan benzersiz kimlik
Varsayılan değerleri içeren dizi değerleri, bir kez daha değişken diziden alınan ve bir seçenek olan kontrol türü.
Üç parametreyle wp_customize_color_control kullanan kontrol:
$ wp_customize
Salyangozları kullanarak benzersiz kimlik
Bir dizi, etiket, bölüm ve ayarda.
Bu, metni kontrol etmek için yaptığımız şeye çok benzer, ancak $ TextColors değişkenini kullanarak tanımladığımız dizinin değerini kullanın. İsterseniz, eklediğiniz kontrol ve metin ayarlarına tekrar denemek ve aynı tekniği uygulamak isteyebilirsiniz.
Şimdi sitenizdeki özelleştiriciye bakın. Renk şemasının bir kısmını dört renk kontrolü ile göreceksiniz:
Metin kontrolü gibi, renk seçmenlerini kullanarak yeni bir renk seçerseniz, sitenizde herhangi bir fark yaratmaz. Öyleyse devam edelim ve değiştirelim. Özelleştiriciye kontrol ve ayarlar ekleme temasına kontrol ve ayar ayarlarını uygulamak iyi bir ilk adımdır, ancak işlevini yerine getirmelisiniz, bu da temanız için WordPress depolanan ayarlarınız için değerleri alacak kod eklemek anlamına gelir. veritabanında ve temanızda yayınlayın. İki şey yapmalıyız: iletişim bilgileri için, metni görüntüleyebileceğimiz başlığa kancalar ekleyin.
Renkler için, temadaki belirli sınıfların renk değerini değiştirmek için WP_Head Hook ile ilişkilendirdiğimiz stili yapın.
İlk olarak, iletişim bilgileri. Temaya metin ekleyin, Customer.php dosyamızda metin görüntüleyen işlevleri yazıyoruz, işlevde eylemle ilişkilendireceğiz. Bu, başlığında temamızda başka eylemler yapmamız gerektiği anlamına gelir.
Header.php başlık dosyanızı açın.
satırını bulun ve bunu hemen altına ekleyin:
Core 1392D651B0F9933846EB33005050F25 içerir
Header.php dosyasını kaydedin ve kapatın.Şimdi işlevlerimizle ilişkilendirebileceğimiz bir kancamız var. Bu işlevi yapalım.
Customer.php adresinde boş bir işlev ekleyin:
Core 1392D651B0F9933846EB33005050F25 içerir
İşlevinizde aşağıdakileri ekleyin:
Core 1392D651B0F9933846EB33005050F25 içerir
Dosya ‘yı kaydet.
Bu, işaretlemeye dört şey ekledi:
Başka bir adres öğesi
Adresli bir paragraf
Telefon numaralı bir paragraf
Bu adresin bağlantısında bir e -posta adresine sahip paragraf.
Bunu yapmak için, özelleştirici tarafından ilgili ayarlar için depolanan verileri alan Get_Theme_Mod () işlevini kullandık. İki parametre vardır: kimlik düzenlemesi ve varsayılan değer. Şimdi, sitenize bakarsanız, başlıktaki varsayılan metni göreceksiniz: Başlık-sağ sınıfı olan öğedeki metin, stil sayfası ile belirlenen doğru seviyeye sahip olduğundan, metnimiz doğru şekilde hizalandı bizim için. Arama kutusunun altına biraz boşluk eklemek için widget başlık alanı altındaki kenar boşluğunu ayarlamak isteyebilirsiniz (veya belki de içeren başlık öğesinin altındaki kenar boşluğunu ayarlayın). Şimdi metni özelleştirici üzerindeki düzenlemeyi deneyin:
Bir sonraki temaya stil ekleyerek, renk şeması için bir işlev oluşturalım. Kodu eklemeden önce, her renk için neyi hedeflemek istediğimizi belirleyelim.
İlk renk (WPMU_COLOR1) başlık, navigasyon menüsündeki bağlantılara ve arka plan altbilgisine uygulanacaktır.
İkinci renk navigasyon arka planı için geçerli olacaktır.
Üçüncü renk, bağlantıdaki veya ziyaret edilen durumdaki bağlantılar için geçerli olacaktır.
Dördüncü renk, havada veya aktif durumdaki bağlantılar için geçerli olacaktır.
Renk şemanızı farklı öğelere uygulamak veya ek öğelere veya sınıflara daha fazla renk eklemek isteyebilirsiniz. Stil eklemeden önce işlevler yapmamız gerekir.
Customer.php adresinde şu işlevi ekleyin: Core 1392D651B0F9933846EB33005050F25 içerir Dosya ‘yı kaydet.
Bu, WP_head eylem kancasına bağlanır, böylece işlevin işlevi her sayfadaki bölümüne eklenir. Bu ideal değildir, çünkü her sayfaya CSS eklemek stil sayfası kullanmak gibi iyi bir uygulama değildir. Ancak bunu yapmanın tek yolu budur, çünkü her renk bir işlevle eklenir ve PHP işlevlerini stil sayfasına kodlayamazsınız. İşlevimin sonunda <? PHP açılış <? PHP eklediğimi unutmayın, ancak başlangıçta değil. Bunun nedeni, fonksiyona bir kapanış etiketi ekleyeceğim – okuma ve mantıklı olacak. Şimdi, her renk için bir değişken yapalım. İşlevinizde şunu ekleyin:
Core 1392D651B0F9933846EB33005050F25 içerir
Dosya 'yı kaydet.
Şimdi öğesindeki renkleri tanımlamak için kullanabileceğimiz dört değişkenimiz var. Bunu ekleyelim.
Değişkeninizin altında, ancak yine de işlevde, şunu ekleyin:
Core 1392D651B0F9933846EB33005050F25 içerir
Bir PHP kapak etiketi, ardından stilimiz için Elements var.
Ardından, stili ilk renge ekleyin:
Core 1392D651B0F9933846EB33005050F25 içerir
Şimdi ikinci renk:
Core 1392D651B0F9933846EB33005050F25 içerir
Ve son olarak, bağlantının iki rengi:
Core 1392D651B0F9933846EB33005050F25 içerir
Dosya ‘yı kaydet.
Temanıza bağlı olarak hedeflediğiniz öğeler ve sınıflarda bazı ayarlamalar yapmak isteyebilirsiniz. Şimdi sitenizdeki özelleştiriciye giderseniz, renk şemanızı değiştirmeye başlayabilirsiniz. Bu çok yapışkan bir şemaya sahip benim!
Bu, sitenizde kullanmayı seçtiğiniz renk şeması olmayabilir, ancak bu size rengin temada nasıl uygulandığını gösterir.Daha iyi bir şey deneyeceğim ve kaydedip yayınlayacağım: Artık kullanıcınız bir özelleştirici kullanarak sitelerindeki renk şemasını değiştirebilir.Zorluk: Bazı metin kontrolleri ve renk şemaları ekledikten sonra kendi ayarlarınızı ve denetimlerinizi ekleyin, neden daha fazla ayar eklemeye ve temanıza kontrol etmeye çalışmıyorsunuz, şimdiye kadar öğrendiğiniz teknikleri uygulayın.Muhtemelen:
Yükle Medya – Bunu yapmak için WP_Customize_Image_Control Class’tan renk kontrol sınıfıyla aynı şekilde yeni bir örnek oluşturursunuz.Daha sonra, iletişim bilgileri için yaptığınız gibi, kancayı kullanarak siteye (belki de başlıktaki logo?) Görüntüler eklemeniz gerekir.
Görüntü Düzenlemesi – Ortam yüklemeleri eklerseniz, görüntüyü düzenlemek için site başlığının solundaki logoyu geliştirmek veya site başlığını değiştirmek için kullanmak gibi bazı seçenekler oluşturabilirsiniz. Kontrol için, $ wp_customize-> add_control () için parametrede ‘Type’ => ‘radyo’ tanımlayarak radyo düğmesini kullanabilirsiniz. Ardından, Get_theme_mod () kullanarak seçilen kuvvet seçeneğini yukarıdaki renk için aynı şekilde saklamak için değişkeni kullanacaksınız. Son olarak, bu seçeneklerin her biri için stil sayfanıza veya wp_head’e bağlı bir işlev aracılığıyla bir kuvvet ekleyeceksiniz. Stil sayfasını kullanabilmenizin nedeni, stil sayfanızdaki o sınıfa stil eklemek için değil, şablon dosyanıza sınıf ekleme seçeneğini kullanmanızdır. Bunu, ilgili stilleri ekleyerek WP_head’e eklediğiniz işlevdeki koşullu etiketleri kullanarak belirli içerik türleri (yayınlar veya tek sayfalar gibi) için yapabilirsiniz. Yine, Radyo düğmesini kullanacak ve Get_theme_mod () işlevini kullanarak stili ayarlayacaksınız.
Eleman konumu – Yan çubuğu sola veya sağa taşımak veya başlık görüntüsünü menünün veya site başlığının üstüne veya altına taşıyabilmek için bir seçenek ekleyebilirsiniz. Bir kez daha bir radyo düğmesine ve Get_theme_mod () kullanarak kuvveti tanımlamak için kullandığınız değişkeye ihtiyacınız var.
Diğer Metin Seçenekleri – Sidebar.php dosyalarına ve footer.php temasına eklediğiniz kancalara bağlı, özelleştiricideki kullanıcılar tarafından düzenlenebilen bir kenar çubuğu veya altbilgi metin oluşturmaya çalışın. Radyo ile birlikte düzenlenebilir. Düğme düğmenin etkinleştirilip etkinleştirilmediğini ve nerede göründüğünü belirlemek için.Ardından, kutunun o konuma eklenip eklenmeyeceğini kontrol etmek için işlevinizde bir kutu (kanca üzerinden) ekleyen koşullu etiketi kullanın.
Bunlar sizin için sadece birkaç olasılıktır. Neden bazılarını denemiyorsunuz? Ayarlama kontrolü için daha fazla ilham almaya ihtiyacınız varsa, tema dizininde ayarlanabilen bazı büyük temaları görmeye çalışın ve yaptıklarını yeniden oluşturup yaratamayacağınızı görün. Ancak, aşırıya kaçmayın – kullanıcılarınızı bunalmak istemezsiniz! Bu seride oluşturduğunuz kodu görmek istiyorsanız, temanın bir kopyasını GitHub’daki kaynak dosyadan almayı unutmayın. Herhangi bir noktada sıkışmışsanız veya kodunuz çalışmıyorsa, soruyu buradan göndermeden önce lütfen kodu kontrol edin. Öğrenmenin en iyi yolu bunu kendiniz yapmaktır! Ayarlama, güçlü bir araç ayarlaması, temanızın kullanıcılarının herhangi bir kod yazmadan sitelerinde değişiklik yapmalarını sağlamak için harika bir araçtır. Diğer insanların sitelerinde kullanmaları için bir tema oluşturursanız, bu onlara sitelerinin görünümü üzerinde daha fazla esneklik ve kontrol sağlar. Ve istemciler için bir site oluşturursanız, ayarlama, herhangi bir kod yazmak (veya bunu yapmanızı sağlamak) gerekmeden yandaki iletişim bilgileri ve metin gibi içeriği düzenlemenin iyi bir yoludur. Umarım, bu serinin bir kısmı size ayarlamanın nasıl ve ona nasıl ayar eklediğiniz ve kendi temanıza eklemeniz için size ilham verdiğiniz konusunda bir temel vermiştir. Mutlu deneyler! Bu doğru, WPMU Dev üyelerinin öğrenmeye başlaması için ücretsiz olarak çok sayıda WordPress bilgisi, akran yorumları, eğitmen geri bildirimi ve sertifika
Bu öğreticinin yararlı olduğunu düşünüyor musunuz?Neden WordPress gelişimini öğrenmek istiyorsunuz?Daha fazla bilmek istiyorsun?Bize aşağıdaki yorumlarda anlatın.
gelişim
çokitus
