Yeni Başlayanlar İçin WordPress Geliştirme: Widget’lar ve Menüler
WordPress sitesinde ayarlamalar yaparken widget’lar ve menüler genellikle ilk çağrı bağlantı noktanızdır. Yalnızca sitenizde herhangi bir yere içeriği yerleştirmenize ve göstermenize izin vermekle kalmaz (elbette, widget açısından hazır widget), aynı zamanda temanızın her bir potansiyel kullanıcısı için de dikkate alınması gereken bir özelliktir. Temanıza widget ve menüler eklemek sonunda bazı kodlama becerileri içermesine rağmen, PHP’nin uygulanması kolaydır. Mantığı anladıktan sonra, kenar çubuğunuzun ve menünüzün görünümünü ve hissini nasıl kullanmak için CSS becerilerinizi yerleştirebilirsiniz.
Bu, yeni başlayanlar için beş bölümümüzde dördüncü yazıdır, bu da size bir üreticiden bir geliştiriciye atlayabilmeniz için WordPress geliştirmenin temel kavramını öğretir. Serinin sonunda, kendi temel temalarınızı ve eklentilerinizi oluşturabilir ve kendi özelliklerinizle mükemmelleştirebilirsiniz. Bu öğreticide, bir kod oluşturmayı ve kendi taraf ve menü çubuğunuzu nasıl ayarlayacağınızı öğreneceksiniz. Ayrıca daha karmaşık işlevsellik için özel kodlamayı inceleyeceğiz. Not: Bu dizi için, HTML ve CSS hakkında kapsamlı bir anlayışa sahip olmanız önemlidir, çünkü bu iki dil WordPress ile çalışırken önemli yapı taşlarıdır.
Başlayalım. Yeni başlayanlar için WordPress Geliştirme Serisindeki öğreticiyi özlüyor musunuz? Beş yazıyı buradan takip edebilirsiniz:
Yeni başlayanlar için WordPress’in geliştirilmesi: Başlangıç
Yeni Başlayanlar İçin WordPress Geliştirme: PHP Öğrenme
Yeni başlayanlar için WordPress Geliştirme: Temalar Oluşturma
Yeni Başlayanlar İçin WordPress Geliştirme: Widget’lar ve Menüler
Yeni başlayanlar için WordPress’in geliştirilmesi: Widget Alanı ile Yapı Eklentisi Çalışmaları Kenar çubuğu olarak birçok kişi olarak adlandırılan şey aslında widget alanıdır. Bazen yan çubuk alanında görüntülenirler, ancak bu her zaman olmaz. Widget alanı, sitenizde herhangi bir yerde ve tema geliştiricisi olarak size bağlı olduğu yerde görüntülenebilir. Bir widget’ı altbilgide, diğeri gönderinin altında, biri menünün arkasına gizlenmiş vb. Görüntülemek isteyebilirsiniz.
Ayrıca WordPress’e bir widget alanı oluşturmayı planladığınızı söylemeniz gerekir. Buna yan bıçakların kaydedilmesi ve kullanıcı arayüzünün yöneticide görünmesi denir. Bu serinin üçüncü bölümünde, yeni başlayanlar için WordPress’in geliştirilmesi: tema geliştirmeye giriş, bir function.php dosyası oluşturduk. Biraz daha dar üzerinde çalıştığımız tema için ana içeriği oluşturalım ve kenar çubuğu için ikinci sütunu ekleyelim. Önce yan çubuğu kaydedeceğiz, bu yüzden Fonksiyonunuza Aşağıdakileri Ekleyin.php Dosya:
Core 3DAF60076C594AFA6BB8 içerir
Bit add_action (), endişelenmeyin, henüz tartışmadık! (Bu serideki bir sonraki yazıda, yeni başlayanlar için WordPress’in geliştirilmesi: bir eklenti oluşturma.
Temel sorun MAT_WIDGET_AREAS () işlevindedir. WordPress’e widget alanımızın tüm ayrıntılarını anlatmak için Register_sideBar () işlevini kullanıyoruz. Ad ve açıklama parametreleri yönetici kullanıcı arayüzünde görüntülenir, bu nedenle açıklayıcı yapın! Her widget, widget’tan önce ve sonra parametrelerde sağlanan koda sarılır. %1 $ s’yi kimliğin yerine kullanın ve herhangi bir sınıf için %2 $ s kullanın ve WordPress bunu otomatik olarak üretecektir. Bu kodu kaydettikten sonra, görünüm menüsünde yeni widget alt bölümünün görüntüsünü göreceksiniz ve widget alanımız verilen ayrıntılarla görünecektir. WordPress’teki alan widget’ı
Şimdiye kadar iyi. Artık bu widget alanına her zamanki gibi bir widget ekleyebilirsiniz, ancak önce tema kodumuza eklemediğimiz için bu hiçbir yerde görünmeyecektir. Bir kenar çubuğu.php dosyası oluşturun ve aşağıdakileri ekleyin:
Bu benim kenar çubuğumdur Kenar çubuğunu barındırmak için üstbilgi ve altbilgi dosyalarını değiştirmemiz gerekir. Bulacağımız yapı aşağıdaki gibidir:
Bunu uygulamak için, #Site kaplama bölmesini başlıkta açmamız ve altbilgide kapatmamız gerekir. Kenar çubuğumuzu altbilgiye de dahil etmeliyiz. #Site-consebar öğesini içerir.
Referanslar için başlık ve altbilgi dosyalarının son şekli:
Core 3DAF60076C594AFA6BB8 içerir
Core 3DAF60076C594AFA6BB8 içerir
Gördüğünüz gibi, yan bıçaklar get_sideBar () işlevi kullanılarak geri çekilebilir. Bu noktada, içeriğinizin altında “Bu benim yan çubuğum” göreceksiniz, ancak birkaç stil ekleyerek, içeriğimizin yan tarafını yanına yerleştirebiliriz. İşte yaptığım değişiklik ve kod şeklinde ekleme ve yeni değişiklik: Maksimum genişliği 525px’e azaltmak ve sol şamandırayı eklemek için #site içeriği değiştiriyorum
220 piksel genişlik, 22px sınır, sınır yarıçapı ve içerik gibi beyaz arka plan veren #site-sidebar ekledim ve sağda yüzdüm
#Site-container’ın kümülatif içerik ve kenar çubuğu kadar geniş hale getirdiğini ve konsantre olduğunu ekledim.
Altbilgiye yüzen elemanların altında zorlamak için net bir kural ekledim.
Core 3DAF60076C594AFA6BB8 içerir
Bulmacanın son kısmı WordPress’e bizim tarafımızda ayarlanan tüm widget’ları göstermesini söylemektir. Bu, ilk parametre olarak kenar çubuğu kimliğimizi ekleyerek Dynamic_sideBar () işleviyle yapılabilir.
Aşağıda, sonunda kenar çubuğu.php dosyasını görüntüleyin:
Core 3DAF60076C594AFA6BB8 içerir
Test teması şimdi daha dar bir içerik alanı ve sağda seçilen widget’ı görüntüleyen küçük bir widget alanı göstermelidir. Çirkin, ama daha sonra küçük CSS tarafından düzeltilebilecek hiçbir şey yok!
Temamızın tarafı.
Widget: Öğrendiğimiz şey, yan çubuğu ilk kez uyguladığınızda muhtemelen biraz aşırıdır, bu yüzden özetleyelim. WordPress’e kenar çubuğu eklemek için aşağıdaki adımları eklemeniz gerekir:
Kayıt_idabar () kullanarak yan bıçakları kaydedin
Çalışmanızı organize etmek için CSS kullanın
Widget alanı ile mantıkta benzer bir menü ile çalışmak. Önce WordPress yöneticisinde görünmek ve ardından işlevi kullanarak temanıza eklemek için kaydetmelisiniz.
Fonksiyonlarımıza yeni bir menü kaydederek başlayalım.php dosyası:
Core 3DAF60076C594AFA6BB8 içerir
Bu işlev, diziye üye ekleyerek birkaç menü eklemenizi sağlar. Array Anahtarı, tema konumunun adıdır ve değer menünün kendisidir. Bunu yapmayı bitirdikten sonra menüyü derlemeye başlayabilirsiniz. Aşağıda gösterildiği gibi, harika başlık menüsü konumumuza birkaç öğe ve ardından atama menüsünü eklediğinizden emin olun.
Menümüzü derleyin.
Menüyü görüntülemek istediğiniz her yerde WP_NAV_MENU () işlevini kullanın. #Site-header öğesinin hemen altındaki başlık dosyasına ekleyeceğim, örneğin:
Core 3DAF60076C594AFA6BB8 içerir
WP_NAV_MENU () işlevi, çıktıyı kontrol etmek için kullanabileceğiniz birçok parametre gerektirir. Ancak, temanın yeri bizim için en önemli olanıdır. Daha derin bir açıklama için Codex WordPress’teki işlev belgesine bakın. Son olarak, her şeyin yarı düzgün görünmesi için bazı temel stiller ekleyeceğim. Kötü her şeyi affedin Birkaç CSS dikkatle çözülebilir (bu makalenin ana odağı olmasa da). Core 3DAF60076C594AFA6BB8 içerir
Daha fazla okuma ve çalışma WordPress Tema Dizini’ne dahil edilmesi gereken bir tema tarafından karşılanması gereken birçok gereksinim vardır. Yüzeyi yeni çizdik ve şimdi temanıza daha fazla işlevsellik eklemeyi seçmeye başlamak için yeterli bilgiye sahip olmalısınız. Temanızı analiz edecek ve WordPress tema ekibinin gereksinimlerini karşılamak için ne yapılması gerektiğini gösterecek tema kontrol eklentisini yüklemenizi öneririm. ve diğerleri her seferinde sayfalar ve iletişim sayfaları gibi günlük web sitelerini kullandı. Tüm gereksinimleri gömdükten sonra, tema ayarlarını gelecekte tema kullanıcılarınızın kendi renklerini ve diğer seçeneklerini seçmesine izin vermek için kullanmak isteyebilirsiniz. Öğrenilecek temalar ve daha fazlasını geliştirmenin temellerini tartıştık, ancak pratik yaptığınız sürece bunu iyi yapacaksınız. Ben böyle öğreniyorum: yavaş yavaş. Gelecek hafta bu serideki son yazı için, yeni başlayanlar için WordPress’in geliştirilmesi: bir eklenti oluşturun. Bu arada:
Bu dizideki geçen haftanın yayınını inceleyin, Yeni Başlayanlar için WordPress’in Geliştirilmesi: Bina Temaları
PHP’nizi artırmaya devam edin – Yeni Başlayanlar için WordPress’in geliştirilmesini gözden geçirin: PHP’yi öğrenin ve PHP öğrendiğimiz en son gönderiyi görün – derinlik: 8 WordPress geliştiricileri için kaynaklar diğer PHP kaynakları için kaynaklar
Temanızı oluşturmaya devam edin.Tuzağa düşeceksiniz, hayal kırıklığına uğrayacaksınız ve düzeltmek uzun zaman alacak bir hata yapacaksınız, ama hepsi normal.Üzerinde çalışın – hepsi öğrenme sürecinin bir parçası. 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.Etiket:
acemi
gelişim
