Bu makale, yerleşik WordPress özelliklerini, yani Tema Özelleştirici'yi kullanarak özel tema ayarlarının nasıl ekleneceğini gösterecektir. Temaları özelleştirmek için WP çekirdeğinde yerleşik güçlü araç.

Önsöz

Geçenlerde bir müşteri için düzen yapmayı bitirdim ve bunu WP'ye yüklemem gerekiyordu. Bazı ön çalışmalar yaptım, tema için temel bir iskelet yaptım ve yerel bir sunucuda test etmeye karar verdim. Sonra "Yapılandır" yönetici menüsünde ilginç bir öğe fark ettim. Evet, bu noktayı daha önce fark ettim ve hatta diğer konularda nasıl uygulandığını gördüm ama ben kendim şüpheliydim. Ancak daha sonra, ortamın yerel hale getirilmesi gereken şeyler, yani. WordPress çekirdeğine yerleştirmek o kadar da kötü bir fikir değil. Ve sonra sorunu anlamaya başladım.

Aslında makalede anlattığım konu hakkında öğrendiğim her şey. Artıları / eksileri ve benim fikrimi hemen okumakla kim ilgileniyor, lütfen makalenin sonuna gidin veya.

Aksiyon!

Dolayısıyla, temanızı etkinleştirirken "Görünüm - Özelleştir" menü öğeniz yoksa, onu eklemeniz gerekir. Bu şu şekilde yapılır:

Bunu yapmak için, temanın kök dizininde functions.php dosyasını oluşturup açın ve aşağıdaki kodu oraya ekleyin:

Add_action ("admin_menu", function () (add_theme_page ("Özelleştir", "Özelleştir", "edit_theme_options", "custom.php");));

Önemli! Tüm kod arasında olmalıdır... Bu, PHP ile çalıştığımızı sunucuya gösterecektir.

Bir bölüm oluşturun

Şimdi ayarlarımızı eklememiz gerekiyor. Bu 2 geçişte yapılır. Beyinlerini zorladılar. Bir kez daha zorlayalım: bir ayarlar bölümü ekleyin.

Daha önce oluşturduğumuz php dosyasını aşağıdaki kodu ekleyin:

Add_action ("customizer_register", function ($ customizer) ($ customizer-\u003e add_section ("example_section_one", array ("title" \u003d\u003e "Ayarlarım", "description" \u003d\u003e "Örnek bölüm", "öncelik" \u003d\u003e 11) ,));));

Bir kanca oluşturduk ve ona bir işlev ekledik. Add_section () yöntemi yalnızca ayarlar bölümünü ekler. 2 parametre alır:

$ args - bağımsız değişken dizisi

başlık - bölüm nasıl adlandırılacak

açıklama - bölüm açıklaması (isteğe bağlı)

Ayarı bölüme ekleme

Ekleme 2 aşamada gerçekleşir. İlk önce ayarları kendimiz oluşturuyoruz ve ardından bölümde göstermesi için kontrolü yapıyoruz.

Ayarlar eklemek için Bu kodu functions.php'ye add_section () yönteminden hemen sonra, ancak custom_register kancasının içine yazalım:

$ customizer-\u003e add_setting ("örnek_metin kutusu", dizi ("varsayılan" \u003d\u003e "Site sitesi"));

Add_setting () yöntemi iki parametre alır:

$ id - benzersiz tanımlayıcı

$ args - bağımsız değişken dizisi

$ Args dizisinde birkaç konum olabilir, yani:

varsayılan - varsayılan ayar değeri

tür - ayar türü

yeteneği - bu parametreyi değiştirmek için gerekli kullanıcı hakları. Şunlar. farklı parametreler farklı kullanıcı grupları tarafından görülebilir. Güzel! (gerekli değil)

theme_supports - geçerli temanın parametrede açıklanan işlevi desteklemesi gerektiğini belirtir (isteğe bağlı)

taşıma - ayar değişikliğinin önizleme penceresinde nasıl görüntüleneceği. Sayfa yenileme veya AJAX. Varsayılan olarak, ayar her güncellendiğinde sayfa yenilenir, ancak ilgilenirseniz, sayfayı yeniden yüklemeden AJAX'ta bunu nasıl uygulayacağınızı size söyleyebilirim. Dileklerinizi yorumlara yazın.

sanitize_callback - veri tabanındaki giriş verilerini filtrelemek için işlevin adı

sanitize_js_callback - çıktıyı veritabanından filtrelemek için işlevin adı

Şimdi ayarlara kontrol ekle... Aşağıya aşağıdaki kodu ekliyoruz:

$ customizer-\u003e add_control ("örnek_metin kutusu", dizi ("etiket" \u003d\u003e "Metin özelleştirme", "bölüm" \u003d\u003e "örnek_bölüm_bir", "tür" \u003d\u003e "metin",));

Şimdi ayarımızı görebiliriz.

// resim

Add_control () yöntemi iki parametre alır:

$ id - benzersiz tanımlayıcı

$ args - bağımsız değişken dizisi

$ Args dizisinde birkaç konum olabilir, yani:

etiket - ayarın adı

açıklama - açıklama

bölüm - kontrol ve ayarın yerleştirileceği bölüm

type - denetim türü (varsayılan: metin)

seçimler - onay kutuları olan bir tür için, aralarından seçim yapabileceğiniz bir değer listesi belirtir

öncelik - bölümün hangi hesapta yer alacağı veya önceliği (varsayılan olarak 10)

Ama temayı temaya getirmedik. Hadi başlayalım.

Temadaki ayarları görüntüleme

Temadaki ayarları görüntülemek için, tanımlayıcısını doğru yere eklemeniz gerekir. Yapması kolaydır, sadece bir yapı ekleyin:

Get_theme_mod () işlevi iki argüman alır ^

$ isim - alınacak ayarın adı

$ default, varsayılan değerdir. Ayar yoksa görüntülenecek

Diğer denetim türleri

CheackBox (Onay Kutusu)

Herhangi bir şeyi etkinleştirmenize veya devre dışı bırakmanıza izin verir.

$ customizer-\u003e add_control ("hide_text", array ("type" \u003d\u003e "checkbox", "label" \u003d\u003e "Metni gizle", "section" \u003d\u003e "example_section_one",));

Konu aşağıdaki gibi görüntülenir:

Şimdi, onay kutusunu seçmediyseniz, bu metin görüntülenmeyecektir. Saklanman gerekiyorsa kullanışlıdır. bir şey.

Radyo (Anahtar grubu)

Listeden herhangi 1 parametre seçmenize izin verir.

$ customizer-\u003e add_setting (" radyo", dizi (" varsayılan "\u003d\u003e" öğe_1 ")); $ özelleştirici-\u003e add_control (" radyo", dizi (" tür "\u003d\u003e" radyo "," etiket "\u003d\u003e" Örnek radyo düğmeleri "," bölüm "\u003d\u003e" örnek_bölüm_bir "," seçimler "\u003d\u003e dizi (" öğe_1 "\u003d\u003e" öğe_1 "," öğe_2 "\u003d\u003e" öğe_2 "," öğe_3 "\u003d\u003e" öğe_3 ",),));

(Liste) öğesini seçin

Açılır liste.

$ customizer-\u003e add_setting ("seç", dizi ("varsayılan" \u003d\u003e "WordPress")); $ customizer-\u003e add_control ("select", array ("type" \u003d\u003e "select", "label" \u003d\u003e "Biz kimiz?", "section" \u003d\u003e "example_section_one", "options" \u003d\u003e array ("People) "\u003d\u003e" İnsanlar "," Stakhanovitler "\u003d\u003e" Stakhanovitler "," Sert adamlar "\u003d\u003e" Sert adamlar "," UFO'lar "\u003d\u003e" UFO'lar ",),));

Sayfaların açılır listesi

Sitedeki tüm sayfaların bir açılır listesini oluşturur. Sayfalar WordPress'in kendisi tarafından oluşturulur.

$ customizer-\u003e add_setting ("page-setting", array ("sanitize_callback" \u003d\u003e "example_sanitize_integer")); $ customizer-\u003e add_control ("page-setting", array ("type" \u003d\u003e "dropdown-pages", "label" \u003d\u003e "Bir sayfa seçin:", "section" \u003d\u003e "example_section_one",));

Palet

Bir renk seçici ekler. Örneğin, arka plan için.

$ customizer-\u003e add_setting ("renk ayarı", dizi ("varsayılan" \u003d\u003e "# 000000", "sanitize_callback" \u003d\u003e "sanitize_hex_color",)); $ customizer-\u003e add_control (new WP_Customize_Color_Control ($ customizer, "color-setting", array ("label" \u003d\u003e "Color setting", "section" \u003d\u003e "example_section_one", "settings" \u003d\u003e "color-setting", )));

Dosyaları standart WP yükleyici aracılığıyla yüklemenize izin verir. WP_Customize_Upload_Control sınıfıyla çalışır. Dikkatli ol.

$ customizer-\u003e add_setting ("dosya yükleme"); $ customizer-\u003e add_control (yeni WP_Customize_Upload_Control ($ customizer, "dosya-yükleme", dizi ("etiket" \u003d\u003e "Dosya yükleme", "bölüm" \u003d\u003e "example_section_one", "ayarlar" \u003d\u003e "dosya yükleme") ));

Dosya indirmeyle aynı şekilde, yalnızca dosya izinlerine kısıtlamalar getirilir. Yalnızca resimler kabul edilir. Elverişli. yalnızca görüntülerin yüklenmesi gerekiyorsa. Örneğin, arka plan için. Yukarıdaki örnekle aynı şekilde çalışır, yalnızca WP_Customize_Image_Control sınıfı kullanılır.

$ wp_customize-\u003e add_setting ("img-yükleme"); $ wp_customize-\u003e add_control (yeni WP_Customize_Image_Control ($ wp_customize, "img-upload", array ("label" \u003d\u003e "Resim yükleme", "bölüm" \u003d\u003e "example_section_one", "ayarlar" \u003d\u003e "img-yükle") ));

Hepsi bu değil

Yerleşik ayarların sınırlı olduğu yerin burası olduğunu düşünüyorsanız, yanılıyorsunuz. İçlerinde birçok ilginç şey var: kendi ayarlarınızı eklemek, AJAX ile sayfayı güncellemek. Devam etmek istiyorsanız kendiniz kazabilir veya yorum yazabilirsiniz.

Lehte ve aleyhte olanlar

Şimdi bu yöntemin tuzaklarını ve avantajlarını özetleyip düşünelim.

Artıları:

• Ayarlar, WordPress'in çekirdeğine yerleştirilmiştir. Bu, bir siteyi aktardığınızda veya yeni bir sürüme güncellediğinizde, çerçeve güncellemelerini ve uyumsuzlukları indirmeden hemen ayarlara sahip olacağımız anlamına gelir.
• Eklemesi çok kolay. Temel WP ve PHP bilgisi temaya özelleştirmeler eklemek için yeterlidir. Üçüncü taraf çözümleri bağlamaktan çok daha kolay
• Özel ayar türleri ekleme. İşlevselliği genişletebilirsiniz. Böyle bir olasılık var ki bu çok cesaret verici.
• Değişiklikler, ön izleme penceresinde hemen görünür.

Eksiler:

• Metin için görsel düzenleyici desteği yok. Bu, karmaşık projeler için ciddi bir dezavantajdır.
• Yeterli ayar türü yok. Bir çok şey eksik, ama isterim. Örneğin, sınırsız sayıda slayt içeren aynı kaydırıcı. Kısmen kendi kontrolünüzü ekleme yeteneği ile çözüldü. Ancak bunlar gereksiz vücut hareketleridir.
• İthalat / ihracat yok. Temayı yeniden yüklemek istiyorsanız. daha sonra tüm ayarların tekrar manuel olarak yapılması gerekecektir! Bu son derece sakıncalıdır.
• Blok yerleştirme özgürlüğünüz sınırlıdır. Sadeliğin bir bedeli vardır. İstediğiniz yere uyarı veya bilgi içeren bir blok yerleştiremezsiniz, her şey belirtilen formattadır. Bazıları için önemli değil, bazıları için kritik. Herkes kendine ulaşır.

Sonuç

Bana gelince, Tema Özelleştiricinin şimdilik biraz nemli olduğunu düşünüyorum. Evet. çok fazla potansiyele sahip ve eminim gelecekte bunun için birçok uzantı ve iyileştirme göreceğiz. Ama şimdi üzerinde karmaşık projeler geliştirmek işe yaramayacak.

Basit bir konu yapıyorsanız veya pratik yapıyorsanız, bu "çip" WP'ye dikkat edin. Zaten bir şey üzerinde ciddi bir şekilde çalışıyorsanız ve buna değer olduğunu düşünüyorsanız, hareket ediyor olsun ya da olmasın, o zaman daha iyi değildir. Henüz değil. Ama kesinlikle ne tür bir "canavar" olduğunu görmeye değer. Sonuçta, büyük bir potansiyeli var.

Ancak dedikleri gibi, herkes kendi tecrübesine ve proje karmaşıklığına göre karar verir. Bunun üzerine bir sonraki yazıya kadar size veda ediyorum. Sana iyi şanslar. WordPress'in zor öğreniminde sabır yanınızda olsun.

Bu, WordPress Temaları (Şablonlar) için ana kılavuzdur. Temel bilgiler resmi kılavuzdan ve kişisel deneyimlerden alınmıştır.

Tema nedir?

Bir WordPress teması, WordPress ve eklentilerle birlikte, ekranda veritabanındaki bilgileri güzel ve kullanışlı bir biçimde (tasarım) görüntüleyen bir dizi css, js, php dosyasıdır. Eh, ya da çirkin ve uygunsuz bir durumda, hangi temanın seçileceğine bağlıdır ... Diğer motorlarda, bir temaya "şablon" da denir, ancak WordPress'te tam olarak bir tema - bir şablon değil, bir tema - bir şablon demek alışılagelmiştir. Her ikisi de aslında aynı olsa da ...

Bu nedenle, temayı değiştirirseniz, site görünümünü değiştirir, farklı görünür. WordPress.org'da binlerce ücretsiz tema var. Çok çeşitli temalara rağmen, birçok kişi kendi temalarını oluşturmayı seçiyor. Bu, temelde basit bir tema oluşturmanın zor olmadığı gerçeğinden kaynaklanmaktadır.

Gerekli dosyalar

Bir tema oluşturmak için yalnızca iki dosyaya ihtiyaç vardır:

1. index.php - içeriği görüntülemekten sorumlu ana tema dosyası
2. style.css - css stillerinden sorumlu ana stil dosyası

Ancak hiçbir tema aslında sadece iki dosyadan oluşmaz. Daha fazlası var: PHP, dil dosyaları, CSS ve JS dosyası, metin dosyaları. Tema iki dosyayla başlar ve ardından daha kullanışlı hale getirmek için aşağıdaki gibi dosyalar eklenerek genişletilir:

• header.php - başlığı görüntülemekten sorumludur
• footer.php - altbilgiyi görüntülemekten sorumludur
• sidebar.php - kenar çubuğunu görüntülemekten sorumludur
• page.php - ayrı bir sayfanın (gönderi) görüntülenmesinden sorumludur
• vb. tam listeye bakın.

Tema özellikleri

Temanın olanakları aslında sonsuzdur, çünkü orada PHP'yi tam olarak kullanabilirsiniz. FAKAT! Tema, sitenin içeriğini belirli bir şekilde göstermeyi amaçladığı gibi siteye işlevsellik katmaz. Bu nedenle, temanın yeteneklerini görünümden ve diğer tüm özelliklerden sorumlu olanlarla sınırlandırmak gelenekseldir: oylama, derecelendirmeler, yönlendirmeler, SEO vb. eklentileri çıkarmak gelenekseldir ...

Böylece bir tema şunları yapabilir:

• Farklı cihaz türleri için site içeriğini görüntülemekten sorumludur: monitörler ve akıllı telefonlar. Bunlara duyarlı temalar denir. Ayrıca temalar sabit, tek sütunlu, iki sütunlu vb. Olabilir;
• Tema herhangi bir içeriği görüntüleyebilir;
• Farklı kullanıcılara hangi içeriğin gösterileceğini belirleyebilir;
• Herhangi bir tasarım öğesini (resimler, videolar) kullanabilir.

Herhangi bir web sitesinde olduğu gibi, tema yalnızca bir renk şeması, bir düzen ve güzel bir resim değildir. Gerçekten kaliteli temalar da çok işlevseldir. Temanın işlevselliği, esnek yapılandırmasında yatmaktadır. Şunlar. siteye yeni bir şey eklemez, ancak sahibinin zevkine göre mükemmel şekilde özelleştirilebilir. Örneğin: bir arka plan görüntüsü ayarlanır, öğelerin renkleri değiştirilir, menü ve içerik blokları (widget'lar) yapılandırılır.

Bir temanın bir eklentiden farkı nedir?

Kod açısından hiçbir şey söyleyemezsiniz - temada tam teşekküllü bir eklenti oluşturabilirsiniz. Ama mantık açısından - herkes! Eklentinin görevi, siteye yeni bir şey eklemek, örneğin bir anket eklemek. Konunun görevi, bu anket dahil içeriği göstermektir ...

Bu nedenle, tema, içeriğin sayfada görüntülenmesinden sorumludur ve sitenin işlevselliğini uygulamak için eklentiye ihtiyaç vardır.

Bunun için ikna edici bir neden olmadıkça temanın kendisine hiçbir zaman işlevsellik eklemeyin. Bunu yaparsanız, temayı değiştirdiğinizde, işlevsellik onunla yerinde kaybolacaktır. Örneğin, temanızın harika bir fotoğraf galerisi var. Konuyu değiştirirseniz, bu harika fotoğraf galerisi kaybolacak ...

"Sosyal Medyada İçerik Pazarlaması: Abonelerin Başına Nasıl Ulaşılır ve Markanıza Aşık Olun" adlı yeni bir kitap yayınladık.

Abone ol

Çocuk temalarının ("kızların") işleyişi, ebeveynleriyle ("ebeveynler") ilişkilerine dayanmaktadır. Ücretsiz ve ücretli temaların başlangıçta ebeveynler olduğunu dikkate almak önemlidir, bu nedenle kız, parametrelerini ve özelliklerini kopyalar ve ayrıca standart bir işlevler seti alır. Gelecekte, belirli bir İnternet kaynağının ihtiyaçları dikkate alınarak, bu seçenekler kümesi genişletilebilir.

Terminolojiye değinirsek, o zaman ebeveyn olarak hareket eden başka birinin anlamlarını alan özel bir konudan bahsediyoruz. Neden yaratıldılar? Mevcut WordPress temalarını değiştirmek ve böylece sayılarını artırmak.

"Kız" arasındaki fark nedir

Wordpress'in alt teması, gerekli değişiklikleri ve ayarlamaları yapma yeteneğini açar. Sonra, nasıl oluşturulacağına bakacağız, ancak ondan önce, temel farklılıklarına bir göz atalım:

1. Ebeveyn üzerinde yapılan değişiklikler çocuğu etkilemez. Bundan, gelişmeden sonra birbirlerinden bağımsız oldukları sonucu çıkar.
2. Türev işlevi yalnızca üst öğe kuruluysa ve etkinleştirilmesi daha sonra gerçekleşir.
3. Bağlı kuruluşlar yalnızca kendi merkezlerine bağlıdır ve bunlardan biri veya diğeri ile bağlantılı değildir.

Çalışmak uygun mu

Bir çocuk WordPress teması, birçok faydası olan harika bir fikirdir. Şahsen, premium ürünlerle standart bir paket olarak tavsiye ederiz. Bazı avantajları listeleyelim:

1. Ayarlamalarınızı otomatik olarak kaydederler. Bu sayede, güncelleme sırasında ayarların kaybolma veya kaybolma riski olmadan doğrudan kodda ayarlamalar yapabilirsiniz.
2. Onlarla çalışmak, ana değişkenler için ana kodu yazmaya geçiş için mükemmel bir hazırlıktır.
3. İş akışı geliştirildi. Emrinizde olan tek bir tematik çerçeve ile çeşitli karmaşıklık ve işlevselliğe sahip siteler oluşturabilirsiniz.

Bu ebeveynin devamı olduğu için, özellikler ve işlevler burada aynıdır. Ana bileşenler:

1. Dizin (dosya bileşenlerinin klasörü / konumu).
2. Ana ve ek özellikleri içeren "Style.css".
3. Fonksiyonların tanımlandığı "Functions.php".

Şablon eklemede herhangi bir kısıtlama yoktur, ancak listelenen bileşenlerin herhangi birinde zorunludur.

İşlevsellik

"Kızları" ayrı bir klasörde yerelleştirilir ve ayrı "functions.php" ve "style.css" ile övünür. Yardımcı dosyalar yazmak her zaman mümkündür, ancak bu çift, hatalar ve problemler olmaksızın doğru çalışmadan sorumludur.

Bu formatların doğru kullanımıyla, stil, münferit düzen öğeleri, komut dosyaları ve daha fazlası dahil olmak üzere hemen hemen tüm başlangıç \u200b\u200bparametrelerini düzenleyebilirsiniz.

Tema cihazı, fotoğraf editörlerinin düzenleyici katmanlarına benzer. Bir kullanıcı İnternet kaynağınızı ziyaret ederse, önünde bir "kız" açılır ve daha sonra zaten eksik olan seçenekler ve stiller üst taraftan yüklenir. Sonuçta, kodun çoğu ebeveynden aktarılır, ancak kullanılmadan önce çocuğun ayarlarını yansıtacak şekilde değiştirilmelidir.

Nasıl oluşturulurum

Önce ihtiyacınız olan her şeye sahip olup olmadığınızı kontrol edin. Yani, FTP veya dosya yöneticisine erişim, Wordpress kontrol panelinin kendisine açık erişim. Öyleyse başlayalım.

Aşama 1. WordPress alt teması oluşturma

Bu oldukça basit bir süreçtir. Talimatları ayrıntılı olarak uygularsanız, herhangi bir kullanıcı bu konuda uzmanlaşacaktır.

Öncelikle, standart dizinde kızı için bir klasör oluşturun. Dizini düzenli tutmak ve içeriği düzenlemek için, klasörü "Ebeveyn adı + çocuk sonu" şeklinde adlandırmak daha iyidir. Kolaylık sağlamak için tema oluşturduğumuz bir projenin adını ekleyebilirsiniz. Önemli olan, dizin adında boşluk olmamasıdır, aksi takdirde hatalara yol açabilir. Bir dosya yöneticisi veya FTP istemcisi yeni bir klasör oluşturmanıza yardımcı olacaktır. FileZilla gibi bir FTP istemcisi bugün kendini kanıtlamıştır.

Örneğin, birçok kişinin aşina olduğu "Yirmi Onyedi" yi ele alalım. Dosya Yöneticisi ile çalışmayı tercih ederim, bu nedenle oluşturulan klasöre giden yolum şöyle görünüyor:

Aşağıdakileri yapıyoruz:

Elbette, yaratmanın kolay bir süreç olduğuna ikna oldunuz. Sadece talimatlara kesinlikle uymak ve doğru yaklaşımla çalışmak gerekir.

Adım 2. Özelleştirme

Başlamak, değiştirmek, tamamlamak, "kız" sitenizin isteklerine ve gereksinimlerine uyarlamak için, ayarları doğru şekilde yapılandırmanız gerekir. Sırayla bakalım.

1. İlk önce görünümü özelleştirmeniz gerekir.

Bunun için dizinde bulunan "custom.css" de ayarlamalar yapacağız. Bu, bir FTP istemcisi, normal bir metin editörü, dosya yöneticisi veya özel bir Wordpress editörü ("Görünüm" ve ardından "Düzenleyici" yi açarak bulabilirsiniz) yapılabilir. Burada en azından CSS kullanım kuralları hakkında minimum bilgiye ve tarayıcı aracılığıyla site öğelerini kontrol etme becerisine ihtiyacınız olacak. Örneğin, "style.css" deki arka plan rengini değiştirmek için aşağıdaki CSS kuralını yazıyoruz:

Sonraki resim, yapılan ayarlamalardan sonra site tasarımının nasıl değişeceğini göstermektedir. Arka plan açık yeşile döndü:

Böylelikle sitedeki mevcut tüm öğeleri düzenleyebilirsiniz.

2. Fonksiyonlarla çalışmak.

"Kızları" kullanmak ve onlarla çalışmak da iki bağımsız "functions.php" yi sürdürme yeteneği gibi bir avantaj sağlar. Bu dosyaların eskiyi kaldırmak ve yeni işlevler eklemek için kullanıldığını hatırlayın. Oradalarsa, belgenin çalışmasındaki güvenlik veya sorunlar hakkında endişelenmenize gerek yoktur. Baz yenilense bile değişmeden kalacaktır.

Yeni bir seçenek eklemek için, dosyaya yeni PHP kodu eklenir. Örneğin, aşağıdaki kod WordPress arama seçeneğini kaldıracaktır.

Geliştiricinin işini kolaylaştırmak için özel hizmetler

Oluşturma sürecini kolaylaştırmak için bir dizi özel eklenti kullanabilirsiniz. WordPress kitaplığı, çoğu kullanımı ücretsiz olan çok çeşitli eklentiler sunar. Eklentileri kullanmak, geliştirme sürecini büyük ölçüde basitleştirir. En popüler eklentilere bir göz atalım.

1. Çocuk Themify.

Sezgisel bir arayüze sahip en basit ve kullanımı kolay eklentidir. Buradaki birçok ayar, bir düğmeye tıklanarak yapılabilir.

2. Çocuk Teması Yapılandırması.

Burada ayrıca bir "kız çocuk" da oluşturabilirsiniz ve bu yalnızca birkaç tıklama alır. CSS düzenleyici, gelişmiş özelleştirmeye izin verecek kadar güçlüdür. Eklenti, önemli CSS kurallarını otomatik olarak tanımlar ve düzenleme sırasında bunları etkilemez.

3._child Theme Boilerplate.

İşte "kızların" oluşumu için hazır şablonlar. Şablon basitçe "_child" olarak adlandırılır ve özellikle işleri kolaylaştırmak için tasarlanmıştır. Şablon sezgisel bir tema sunar, yapmanız gereken tek şey "ebeveyn" e bir bağlantı sağlamaktır. Bu türden bir şablon, profesyonel seçenekler oluşturmanıza olanak sağlar - 2 hazır dosya zaten oluşturulmuştur, standart "functions.php" ve "style.css".

İlki "aa_enqueue_styles ()" adında özel bir işleve sahiptir. Bu seçenek, ebeveyn ve ardından alt öğelerle birlikte bir stil sayfası sırası oluşturmanıza olanak tanır. Sonuç olarak, her zaman ilk önce ikincisinin tarzı belirlenir.

Çoğu geliştirici bu tabloları CSS'de bir araya getirir, ancak bu yarardan çok zarar verir. Tarayıcı, siteyi uzun süre yüklemeye başlar, çünkü stilleri önce "üst" ve sonra türevden yüklemek gerekir. Stil sayfalarını ayrı ayrı koyarsanız, tarayıcının görevi daha kolay olacak ve yükleme hızı artacaktır.

İşte bu seçeneği eklemek için kod:

İkinci dosyanın belirli bilgileri içeren temel bir başlığı vardır. Bu bilgi, WordPress'in onu bir "kız" stil sayfası olarak tanımasına izin verir. Bu nedenle, "style.css" için kod yazmak özellikle önemlidir:

Özetleyelim

Wordpress deneyiminin yanı sıra programlama becerilerinin seviyesi de önemli değildir. Bir WordPress alt teması oluşturmak kolaydır ve özelleştirmelerinizin çıktıktan sonra silinme riski yoktur. Küçük bir kod yazarak veya önceden yazılmış olanlarda değişiklik yaparak ve dizin ile basit işlemler gerçekleştirerek sitenizi değiştirebilirsiniz. Ana şey, yavaş yavaş bir noktadan diğerine hareket ederek talimatları takip etmektir. Şunları unutmayın: "ana" için güncellemeler varsa, "yavru" değişmez, bu kural içerikte, ayarlarda vb. Değişiklikler için geçerlidir.

Deneyin, farklı seçenekleri deneyin ve kendiniz için en iyisini arayın.

Geliştirdiğim sitelerin çoğunun CMS Wordpress kullanılarak oluşturulmuş olması ve sürekli önemsiz olmayan görevlerle yüzleşmek zorunda olması nedeniyle, çeşitli eklentileri kullanma deneyimini sizlerle paylaşmaya karar verdim. Hem ücretsiz hem de ücretli ve bu formata bağlı kalmaya çalışacağım: bir makale - bir eklenti. Sadece gerçekten kayda değer gelişmeleri dikkate almaya çalışacağım ve ilk hikayemde size OptionTree'den bahsedeceğim - bence, özel site ayarlarıyla bir sayfa oluşturmak için mükemmel bir çözüm.

Özel ayarlar nelerdir?

Sitemizde kullanabildiğimiz Wordpress şablonları (temalar), çoğu zaman başlıkların rengi gibi bazı ek parametreleri yapılandırmamıza izin verir. Kullanmam gereken tüm ücretli temalar, ayrı bir arayüz nedeniyle yönetim panelinin işlevselliğini önemli ölçüde genişletiyor. Aşağıda böyle bir uzantı örneği veriyorum, lütfen bakınız.

Benzersiz bir site oluşturulduğunda (benzersiz olarak, özel olarak müşteri için geliştirilmiş benzersiz bir tasarıma ve işlevselliğe sahip bir şablon kullanan bir siteyi kastediyorum), genellikle yöneticilerin belirli parametreleri değiştirmesi için bir fırsat yaratması gerekir. Logo dosyasını, ana sayfadaki bazı öğeleri, sosyal medya simgelerini, sitenin altbilgisindeki arka plan rengini vb. Değiştirme yeteneği vermek neredeyse her zaman gereklidir. Bu tam olarak OptionTree eklentisinin geliştiricilere sağladığı şeydir ve resmi Wordpress web sitesinden ücretsiz olarak indirilebilir.

Yüklemeden sonra...

Eklentiyi kurup etkinleştirerek, şartlı olarak iki bölüm elde ederiz: biri site geliştiricileri için, diğeri kullanıcılar için. İlk bölüm, Wordpress'in yönetici bölümünde solda eklentiyi etkinleştirdikten sonra görünen "OptionTree" - "Ayarlar" menü öğesinden kullanılabilir. Eklentinin ikinci bölümünde ("Görünüm" - "Tema Seçenekleri)" kullanıcılara sunulacak bir dizi özel alan oluşturmak için burayı tıklayıp benzersiz bir arayüz elde etmekten çekinmeyin.

Tema Seçenekleri UI Builder

Peki nasıl özelleştirmeler yaratırsınız? Ayrı bir ayarla, site yöneticisinin düzenleme için kullanabileceği belirli bir alanı kastediyorum. UI Builder, belirli ayarların yer alacağı bölümler veya bölümler oluşturmanıza izin verir, daha iyi diyelim. Yukarıdaki resimde, "Genel" ve "Hizmetler" olmak üzere iki bölümden oluşan bir ayar örneği verdim. Şunlar. "Genel" bölümünde bazı genel site ayarlarının ve hizmetler sayfasına özel "Hizmetler" bölümüne yerleştirileceği anlaşılmaktadır. Bakalım bölümler kullanıcıya nasıl görünecek. "Görünüm" - "Tema Seçenekleri" ve - yaşasın! İşte ayarlar sayfası!

Solda, değiştirilebilen bölümleri sağda görüyoruz - bölümün içinde bir dizi ayar. Bölümler, "Bölüm ekle" düğmesine tıklanarak Tema Seçenekleri Kullanıcı Arayüzü Oluşturucu kullanılarak oluşturulur ve bölüm için başlığını ve benzersiz tanımlayıcısını girmeniz gerekir. Bir "Gelişmiş" bölümü oluşturalım ve oraya bazı ayarlar ekleyelim.

Elbette tüm değişiklikler "Değişiklikleri Kaydet" düğmesine tıklanarak yapılır. Şimdi başlıkların rengi gibi bir özelleştirme ekleyelim. "Ayar ekle" yi tıklayın ve hangi alan kümesinin seçilebileceğini görün. Büyük diyebiliriz! "Renk Seçici" yi seçin ve bir başlık ve benzersiz tanımlayıcı girin. Tanımlayıcılara dikkat edin, benzersiz tanımlayıcı sayesinde bu alanın değerine şablon kodunda erişebiliriz.

Şimdi kullanıcı için düzenleme için neyin mevcut olduğunu görelim: yeni bir bölüm ve yeni bir ayar, kullanıcının artık rahat bir şekilde düzenleyebileceği "Başlık rengi" alanı var. Bak, yaratılabilecek alanların tam listesi üzerinde durmayacağım, elbette eklenti belgelerinde ve geliştiricilerin resmi web sitesinde. Yine de, bazı alanlar ilginizi çekiyorsa - yazın, bu yayını önerilen alan türlerinden biri veya daha fazlasıyla güncelleyeceğim. Prensip olarak, anlamı alan adından anlaşılıyor, ancak tekrar ediyorum, bir şey size zorluk çıkarırsa - benimle iletişime geçmekten çekinmeyin, kesinlikle açıklayacağım.

Şablonu düzenleme

Şimdi siz ve ben, geliştiriciler olarak, kullanıcının girdiği veya seçtiği bir veya başka alanın değerini almak için site şablonunda değişiklik yapmamız gerekiyor. Bundan belirli bir işlev sorumludur, başlık rengi seçimimiz için aşağıda vereceğim bir örnek. Dahası, bu eklentiyi kullanmak için çok çeşitli seçenekler olabileceğini not ediyorum, verdiğim örnekte, belgenin head bölümündeki şablonun header.php dosyasında artık başlık stili, yani h_color alanının değerine bağlı olarak renkleri görüntülenecek.

Şunlar. ot_get_option ($ seçenek_id, $ varsayılan) fonksiyonu, geliştiriciler olarak kendimiz belirlediğimiz, parametreleri alan tanımlayıcısı olan alan değerini görüntülemekten sorumludur, bizim durumumuzda h_color alanının değerini görüntüleriz. Fonksiyonun ikinci parametresi çıktı formatıdır, biraz daha ayrıntılı olarak bunun üzerinde durayım. Örneğin, kullanıcının sosyal ağlar için kendi simge setini oluşturmasına izin verecek bir seçenek yapmamız gerekiyor. Bunun için Liste Öğesi alanını kullanacağız (aşağıda gösterilmiştir).

Bu alan, kullanıcı aynı parametreleri tek bir ayara ekleyebildiği zaman, bir dizi yinelenen alan oluşturmanıza olanak tanır. Biraz anlaşılmaz, açıklamaya çalışacağım ve sonra nasıl çalıştığını kodda göstereceğim. Bizim durumumuzda, social_icons tanımlayıcısını Liste Öğesi alanına atayacağız ve bu alanın içine (not, başka bir Ayar ekle düğmesi var) iki alan ekleyeceğiz: simge dosyası ve bağlantı. İlk alanın türü Yükle, ikincisinin türü - Metin olacaktır. İlk alan tanımlayıcısı icon_image, ikinci alan tanımlayıcısı ise icon_link olacaktır.

Kullanıcı ne alacak? Artık ayarlar sayfasındaki "Yeni ekle" düğmesine tıklayarak birkaç sosyal medya simgesi ekleyebilecek. Ayrıca, bu tür ayarların sayısının artık sınırsız olduğunu ve yalnızca kullanıcıya bağlı olduğunu lütfen unutmayın.

Şimdi şablonda böylesine karmaşık bir alanı görüntülemek için, biraz farklı bir çıktı biçimi kullanmanız gerekir, aşağıda böyle bir durum için bir PHP kodu parçası verilmiştir. Yorumlarda neler olduğunu açıklamaya çalışacağım.

"; // şablondaki alanları görüntüle)))?\u003e

Gözaltında

Kullanabileceğiniz gerçekten pek çok alan türü var, eklenti geliştiricileri ellerinden geleni yaptılar: bunlar tarih seçimi, renk seçimi, resim galerileri, anahtarlar vb. Oluşturabilirsiniz. Site geliştiricisi, bu tür alanları birleştirerek ve bunları şablonda doğru şekilde görüntüleyerek, kullanıcıya belirli ayarları değiştirmek için uygun bir arayüz sağlayacaktır. Son sitelerden birinde 50'den fazla farklı alan oluşturmam gerektiğine dikkat edin, böylece müşteriler sitedeki ana sayfadaki başlıkların, metinlerin renklerini değiştirebilir, sayfada görüntülenen haber sayısını değiştirebilir, kişileri ve yol haritasını düzenleyebilir ve diğerleri.

Kendi WordPress temanızı oluşturmak, blogunuza veya diğer WordPress tabanlı sitenize kişisel bir dokunuş katmanın harika bir yoludur. Bununla birlikte, en çekici ve güzel tema bile, kaputun altına girip PHP ve HTML kodunu, bazı yönlerini biraz değiştirmeniz gerektiğinde düzenlemeniz gerekiyorsa ideal olmayacaktır. Özellikle bunu yapmak zorunda olan siz değilseniz, müşteriniz ise. Neyse ki, WordPress temanız için bir ayarlar sayfası oluşturmak o kadar da zor değil ve bu kılavuzu okuduktan sonra, herhangi bir zorluk yaşamadan kendi ayarlar sayfanızı oluşturabilmelisiniz.

Adım 1. Hangi ayarlara ihtiyacımız olduğunu öğrenin.

Her şey ihtiyaçlarla başlar: net ve kullanışlı bir ayarlar sayfası oluşturmak için neyin değiştirilmesi gerektiğini tanımlamalı ve diğer her şeyi aynı bırakmalısınız. Yönetici menüsüne eklediğiniz her yeni ayar, kullanıcı arayüzünün karmaşıklığını artırır - temanın kullanımını zorlaştırma riskini alırsınız. Bu nedenle, en iyisi dikkatli olmak ve sıklıkla değişecek seçenekleri dikkatlice seçmek, bir kez değişen ayarları atarak, uygun tema dosyalarını ayarlayarak kolayca yapılabilir.

Akılda tutulması gereken bir diğer soru da "Bu ayarları kim değiştirecek?" Kullanıcı WordPress ve PHP'ye aşina ise, Google Analytics kodunu temaya bağımsız olarak enjekte edebileceklerini beklemek mantıklı olacaktır, ancak bunu HTML veya CSS bilmeleri gerekmeyen yazarlar bir yana, bir grafik tasarımcıdan talep etmemelisiniz. ...

Bileşenlerin tema ayarlarına taşınması için genel fikirler şunları içerir:

• Google Analytics İzleme Kodu
• Kenar çubuklarının sayısı ve konumları (sol, sağ, hatta belki yukarı ve aşağı)
• Sayfa genişliği
• Altbilgi içeriği
• Örneğin teaser formatları gibi temaya özel özellikler için seçenekler.

Ayarlar sayfasından kontrol etmek istediğiniz tema özelliklerinin bir listesini oluşturduktan sonra, bunları uygulamaya neredeyse hazırsınız. Daha ileri gitmeden ve ayarlar sayfanızı oluşturmadan önce, WordPress'in değiştirilebilecek bu özelliğe sahip olmadığından emin olarak zaman kazanabilirsiniz. Widget'lar, özel menüler, özel arka planlar ve başlık görüntülerinin tümü, genellikle kendi özelleştirmelerinizi oluşturmak için gereken çabanın çok daha azıyla temanızı özelleştirilebilir hale getirmek için yararlı araçlardır. Doğru, bu bileşenlerin tümü başka bir öğreticinin konusu.

Bu kılavuzda oluşturulan ayarlar

Bu eğitim için, özel bir ayarlar sayfası kullanılarak bir yönetici tarafından seçilebilen, düzenlenebilen ve yeniden sıralanabilen çeşitli sayılarda popüler gönderiler içeren bir ızgaradan oluşan bir ana sayfa aldım.

Editörde, ana sayfa öğeleri, Javascript ve Jquery kullanılarak yeni öğelerin eklenebileceği bir liste olarak sunulacaktır.

HTML'yi yazarken WordPress kontrol panelinde yönetici sayfasının bir önizlemesine sahip olmayı seviyorum, bu yüzden genellikle ayarlar sayfasını WordPress'e bağlayarak başlıyorum ve sonra sadece sayfa içeriğini geliştirmeye devam ediyorum. Bu nedenle bir sonraki adımımız boş bir ayarlar sayfası oluşturmak ve onu WordPress'e bağlamak olacak.

Adım 2. Ayarlar sayfasını WordPress'e bağlama.

Bir ayarlar sayfasının oluşturulması, bir menüyü kuran ve bunu admin_menu eylemine bağlayan bir işlev yazarak başlar. Bu, WordPress'e menüyü oluştururken işlevi çağırmasını söyler, böylece her şey uygun zamanda tamamlanır. Aşağıdaki kodu temanızın functions.php dosyasına ekleyin:

Function setup_theme_admin_menus () (// Fonksiyonun içeriğini çok yakında yazacağız.) // WP'ye menü sayfalarının oluşturulması gerektiğinde "setup_theme_admin_menus" fonksiyonunu // çağırmasını söyler. add_action ("admin_menu", "setup_theme_admin_menus");

Şimdi, ayarlar sayfasını oluşturmak için kodu az önce yazdığımız fonksiyona koyacağız:

Bir ayarlar sayfası oluştururken, bir seçeneğiniz vardır - sayfayı mevcut ayar gruplarından birine alt menü olarak ekleyin veya kendi üst düzey menünüzü oluşturun.

Bir alt menü eklemek, add_submenu_page işlevi kullanılarak yapılır:

• $ parent_slug, alt menünün ekleneceği üst düzey menü için benzersiz bir tanımlayıcıdır.
• Eklenen sayfanın $ page_title başlığı.
• Menüde görüntülenen $ menu_title title (genellikle $ page_title'ın kısa bir versiyonu)
• $ yeteneği, kullanıcının bu menüye erişmek için ihtiyaç duyduğu minimum erişim haklarıdır.
• $ menu_slug, yaratılan menü için benzersiz bir tanımlayıcıdır.
• $ işlevi, bu menü sayfasını işlemek (ve sunmak) için çağrılan işlevin adıdır.

Zaten var olan bir WordPress grubuna alt menü olarak bir menü sayfası eklemek istiyorsanız, aşağıdaki değerleri $ parent_slug parametresi olarak kullanabilirsiniz:

• Gösterge tablosu: index.php
• Mesajlar: edit.php
• Medya: upload.php
• Bağlantılar: link-manager.php
• Sayfalar: edit.php? Post_type \u003d page
• Yorumlar: edit-comments.php
• Görünüm: temalar.php
• Eklentiler: plugins.php
• Kullanıcılar: users.php
• Araçlar: tools.php
• Ayarlar: options-general.php

Görünüm grubu, ayarlar sayfamızı barındırmak için iyi bir adaydır. Buna odaklanalım ve ilk ayarlar sayfamızı oluşturmaya çalışalım. Menü kurulum özelliğimizin güncellenmiş bir sürümü:

Function setup_theme_admin_menus () (add_submenu_page ("temalar.php", "Ön Sayfa Öğeleri", "Ön Sayfa", "manage_options", "ön sayfa öğeleri", "theme_front_page_settings");)

Ayarlarla çalışmak için hala theme_front_page_settings işlevini oluşturmamız gerekiyor. İşte en basit şekli:

İşlev theme_front_page_settings () (echo "Merhaba, dünya!";)

Eylemde şöyle görünecek:

Ayrıca kullanıcının ayarlar sayfasını düzenlemek için gerekli haklara sahip olup olmadığını kontrol etmemiz gerekir. Bunu yapmak için, ayarlar sayfasındaki işlevin en başına aşağıdaki kodu ekleyin:

// (! current_user_can ("manage_options")) (wp_die ("Bu sayfaya erişmek için yeterli izniniz yok.");)

Şimdi, ayarlar sayfasını yönetemeyen bir kullanıcı ayarlar sayfasına girerse, normal mesajı görür: "Bu sayfaya erişmek için yeterli haklara sahip değilsiniz."

Temanız birden fazla ayar sayfası gerektiriyorsa, menüde aramak zorunda oldukları için bu durum kullanıcı için kafa karıştırıcı olabilir. Bu durumda, kendi ayar grubunuzu oluşturmak, menüdeki sayfaları bulmayı çok daha kolay hale getirecektir.

Kendi özel ayar grubunuzu eklemek için, bir üst düzey menü sayfası oluşturmalı ve alt menü sayfalarını buna bağlamalısınız. Menü oluşturma işlevimizin yeni bir sürümü burada. Add_menu_page işlevi, $ parent_slug parametresine ihtiyaç duymaması dışında add_submenu_page'e benzer bir üst düzey menü oluşturur.

Function setup_theme_admin_menus () (add_menu_page ("Tema ayarları", "Örnek tema", "manage_options", "tut_theme_settings", "theme_settings_page"); add_submenu_page ("tut_theme_settings", "Ön Sayfa Öğeleri", "Ön Sayfa", "manage_options" , "front-page-elements", "theme_front_page_settings");) // üst düzey menü işlevini işlemek için bir işlev eklememiz gerekiyor theme_settings_page () (echo "Ayarlar sayfası";)

Kodu test eder ve WordPress panonuzu yenilerseniz, menü listesinin en altında yeni bir menü grubunun sunulduğunu göreceksiniz.

Ancak şimdiye kadar bu tamamen doğru görünmüyor. Üst menü öğesine tıklamak sizi Ön Sayfa menü sayfasına değil, Örnek tema sayfasına götürür. Bu, diğer WordPress menülerinin çalışma şekliyle aynı değildir, öyleyse bir şey daha yapalım: add_submenu_page çağrısındaki $ menu_slug özniteliğini üst düzey menüdekiyle aynı değere değiştirerek, iki menüyü bağlayarak üst öğe seçimi Ön Sayfa menüsüne götürdü.

Function setup_theme_admin_menus () (add_menu_page ("Tema ayarları", "Örnek tema", "manage_options", "tut_theme_settings", "theme_settings_page"); add_submenu_page ("tut_theme_settings", "Ön Sayfa Öğeleri", "Ön Sayfa", "manage_options" , "tut_theme_settings", "theme_front_page_settings");) işlev theme_settings_page () ()

Şimdiden daha iyi görünüyor. Menü grubunuzun sunumunu yine de iyileştirmek istiyorsanız, add_menu_page işlevinde iki ek alan kullanabilirsiniz. Yöntem çağrısındaki işlev adından sonra değerleri eklemeniz yeterlidir:

• $ icon_url - Üst düzey menünün simge URL'sini belirtir.
• $ konum - menü grubunuzun menü listesindeki konumunu tanımlar. Değer ne kadar yüksekse menüdeki konum o kadar düşük olur.

Adım 3. Ayarlar sayfaları için bir HTML formu oluşturun.

Artık ayarlar sayfasını oluşturduğumuza ve kenar çubuğunda görüntülendiğine göre, ona biraz içerik eklemeye başlama zamanı. Ayarlar listesine geri dönelim ve bunları düzenlemek için bir sayfa tasarlayalım.

Bu eğitimde, bir satırda kaç öğenin görüntülenmesi gerektiğini belirlemek için bir alana ve mevcut öğeleri tanımlamak için bir listeye ihtiyacımız var. Daha basit bir şeyle başlayalım: bir satırdaki öğe sayısı için bir metin kutusu oluşturalım. Ayarlar sayfasının işlevini düzenleyelim:

İşlev theme_front_page_settings () (?\u003e

Ayarlar sayfasını yeniden yüklediğinizde ilk alanı göreceksiniz:

Ayarlar sayfanızın mevcut WordPress deneyiminizle eşleşmesini sağlamak ve eklentinizin profesyonel görünmesini sağlamak için, WordPress'in temel ayar sayfalarını oluşturmak için kullandığı CSS sınıflarını ve stillerini kullanmanız gerekir. Bunu yapmanın harika bir yolu, ayarlar sayfasına gidip kaynağını analiz etmektir.

İşimizin en önemli kısmı, ayarlar sayfasını bir sarmalama sınıfıyla bir div içine kaydırmaktır. Bu div öğesinde başlıklar, düğmeler ve form öğeleri için önceden tanımlanmış çok sayıda stil kullanabilirsiniz. Ayarlar sayfamızın başlığını şekillendirelim:

• Sayfa için bir h2 oluşturacağız (h2'den h6'ya kadar başlıkları kullanabilirsiniz).
• Başlığın önünde ayarlar sayfası simgesini görüntüleyeceğiz (screen_icon işlevini kullanarak önceden tanımlanmış WordPress simgelerini kullanabilirsiniz. İşlev şu parametrelerden birini alır: dizin, düzenleme, yükleme, bağlantı yöneticisi, sayfalar, yorumlar, temalar, eklentiler, kullanıcılar, araçlar veya seçenekler- genel).
• Form tablo sınıfına sahip bir forma ve tabloya bir girdi öğesi koyacağız.

function theme_front_page_settings () (?\u003e

Ön sayfa öğeleri

Bir satırdaki öğelerin sayısı:

Bunu yapmak için jQuery kullanıyoruz, çünkü jQuery, sıfırdan bir şey oluştururken Javascript'ten çok daha kolay ve WordPress ile birlikte geliyor. Daha önce jQuery kullandıysanız, aşağıdakileri göz önünde bulundurmanız yeterlidir: jQuery'de genellikle kullandığınız $ notasyonu WordPress'te çalışmaz - bunun yerine jQuery kelimesinin tamamını kullanmanız gerekir.

İlk olarak, ana sayfanın bir bloğunun ayarlarını düzenlemek için, kullanıcı tarafından eklenen öğeler için bir şablon görevi görecek bir öğe oluşturacağız. Bu kodu, kapanış tablosu etiketi ile kapanış formu etiketi arasına ekleyin.

Öne çıkan yayın: yazı başlığı; ?\u003e Kaldırmak

Şimdi aşağıdakileri göreceğiz:

Artık bir şablonumuz olduğuna göre, onu gizleme ve yeni popüler gönderi satırları oluştururken şablonu kullanmak için Javascript oluşturma zamanı. Li öğesinin görüntüleneceği stili ayarlayın: yok;

Ardından, ana sayfa öğelerini eklendikçe yakalamak için bir liste ve kullanıcının yeni öğeler eklerken tıklayacağı bir bağlantı oluşturacağız. Değişikliklerin nerede gerçekleştiğini görebilmeniz için HTML kodunun tamamını sağladım:

Ön sayfa öğeleri

Bir satırdaki öğelerin sayısı:

Öne çıkan gönderiler

Öne çıkan yayın ekle

Öne çıkan yayın: !}yazı başlığı; ?\u003e Kaldırmak