Özelliklerle dolu mega temaların dönemi sona ererken, üçüncü taraf eklentilere destek sağlayan daha yalın temaların yükselişini görüyoruz. Bir sayfa oluşturucu için destek eklemek, kullanıcılarınıza ekstra güç vermenin harika bir yoludur. konu temalarınızla bir web sitesi oluşturmaya gelir. Eğer bu düşündüğünüz bir şeyse, sayfa oluşturucunuz olarak Beaver Builder'ı seçmenizi isteriz.

Beaver Builder, kutudan çıktığı haliyle hemen hemen her temayla harika çalışır. Şu ana kadar işe yaramayan tek bir tema duyduğumuzu sanmıyorum. Öyle olsa bile, daha iyi çalışmasını sağlamak için yapabileceğiniz birkaç şey var. En ince ayrıntılara girmeden önce, Beaver Builder'ın iyi bir seçim olduğunu düşünmemin bazı nedenleri var…

• WordPress.org'da tek bir dolar bile harcamadan kullanmaya başlayabilecekleri bir lite sürümü olduğundan, kullanıcılarınızın başlaması kolaydır.
• Özel modül kılavuzumuzu kullanarak temanıza eklenebilecek özel modüller oluşturabilirsiniz.
• Burada şişkinlik yok. Beaver Builder, her şeyi değil, yalnızca belirli bir sayfada ihtiyaç duyduğu komut dosyalarını ve stilleri yükler.
• Beaver Builder'ı kullanımı kolay olacak ve aynı zamanda işin yapılması için yeterli güce sahip olacak şekilde geliştirdik. Sadelik her zaman radarımızda olduğundan, özellikler konusunda aşırıya kaçtığımızı görmeyeceksiniz.
• Herhangi bir sorun çıkması durumunda kullanıcılarınız emin ellerde olacaktır. Gerçekten inanılmaz bir destek sağlıyoruz.

Temalarında Beaver Builder desteği sağlayan diğer harika örnekleri arıyorsanız, WebMan Design ve UpThemes'teki dostlarımızdan başkasına bakmayın. Sayfa oluşturucumuzu desteklemeyi seçmeleri bizi son derece gururlandırdı ve başkalarının da onları takip edeceğini umuyoruz.

Kulağa hoş geliyor mu? İşte bunu nasıl gerçekleştireceğiniz.

Yalnızca Beaver Builder Sayfalarında CSS ile Öğeleri Hedefleme

Bu yazı boyunca yapılması gerektiğini göreceğiniz en yaygın şeylerden biri, yalnızca Beaver Builder sayfalarındaki belirli öğeleri hedeflemektir. Başlığınız, içerik sarmalayıcınız, düğmeleriniz veya başka bir şey olsun, bu kolayca başarılabilir çünkü her Beaver Builder sayfasının gövdesinde fl-builder adında bir sınıf bulunur (Beaver Builder'ın ana şirketinin adı olduğundan tüm öğelerimizin önüne "fl" eklenir) FastLine Medya). Bu sınıfın gövdede olduğunu bilmek Beaver Builder sayfalarına özel CSS yazmanıza olanak sağlar.

Nasıl? Diyelim ki temanızın içerik sarmalayıcısını hedeflemek ve Beaver Builder sayfalarındaki tüm dolguları kaldırmak istiyorsunuz. Fl-builder gövde sınıfıyla bu kadar kolay…

 .fl-builder #my-content-wrapper { padding: 0; }

Bum! Tamamlamak. Beaver Builder sayfalarında dolgu yok. Bunun için daha sonra tartışacağımız birkaç özel kullanım durumu var, ancak temanızın benzersiz ihtiyaçlarına uygun olduğunuzda bu tekniği uygulamaktan çekinmeyin.

Varsayılan Sayfa Başlığını Devre Dışı Bırakma

Beaver Builder'ın aktif olduğu çoğu zaman varsayılan sayfa başlığına gerek yoktur. Genellikle sadece yolunuza çıkar. Kullanıcılarınız, Araçlar > Genel Ayarları Düzenle > Varsayılan Sayfa Başlığı'na gidip temanızdaki sayfa başlıkları için CSS seçiciye girerek bunu kendileri devre dışı bırakabilirler; ancak neden işleri onlar için kolaylaştırmıyorsunuz?

Biraz sihirle, bu kodu işlevler dosyanıza ekleyerek bu CSS seçicinin bizimki yerine temanız için varsayılan olmasını sağlayabilirsiniz.

 function my_form_defaults( $defaults, $form_type ) { if ( 'global' == $form_type ) { $defaults->default_heading_selector = '.my-heading-selector'; } return $defaults; // Must be returned! } add_filter( 'fl_builder_settings_form_defaults', 'my_form_defaults', 10, 2 );

Bu teknik, sayfa başlığını görsel olarak gizlemek için harikadır ancak onu işaretlemeden kaldırmaz. Bu sizin için endişeleniyorsa Beaver Builder sayfalarındaki sayfa başlığını tamamen kaldırmak için biraz daha kod eklemeniz gerekecektir. Öncelikle bu yardımcı fonksiyonu fonksiyon dosyanıza ekleyin…

 static public function my_theme_show_page_header() { if ( class_exists( 'FLBuilderModel' ) && FLBuilderModel::is_builder_enabled() ) { $global_settings = FLBuilderModel::get_global_settings(); if ( ! $global_settings->show_default_heading ) { return false; } } return true; }

Daha sonra, sayfa başlığınızı içeren dosyada (muhtemelen page.php), sayfa başlığınızı bu koda şu şekilde sarın…

 <?php if ( my_theme_show_page_header() ) : ?> <h1><?php the_title(); ?></h1> <?php endif; ?>

Bu kodla, Beaver Builder bir sayfa oluşturmak için kullanıldığında işaretlemede sayfa başlığına dair tek bir iz bile kalmayacaktır.

Kenar Boşluklarını ve Dolguyu Kaldırma veya Ayarlama

Beaver Builder'ın stil açısından temaya bıraktığı pek çok şey var, ancak bazı şeyleri kendisinin halletmesi gerekiyor. Bunlardan biri satırlar ve modüllerdeki dolgu ve kenar boşluklarıdır. Beaver Builder bunu hallettiği için temanızın içerik sarmalayıcısındaki herhangi bir dolgu veya kenar boşluğuna gerek kalmayacak ve hatta uçtan uca sıra arka planları gibi bazı şeylerin önüne geçebilecek.

Örneğin, Yirmi Oniki temasını kullanarak, oluşturucu düzeninin etrafında, arka plan fotoğrafının uçtan uca gitmesini engelleyen ekstra alan olduğunu görebilirsiniz…

Yukarıda bahsettiğim fl-builder sınıfını kullanarak birkaç CSS ayarlaması yaparak aşağıdaki gibi görünmesini sağladım…

Ne yazık ki, her tema kenar boşluklarını ve dolgularını farklı şekilde ele alacak. Burada her durumda işe yarayan bir çözüm sunamayacağım, ancak CSS'yi iyi anlıyorsanız aşağıdaki kod, uygulamak isteyeceğiniz şeye benzer…

 .fl-builder #my-content-wrapper { margin: 0; padding: 0; }

Tam Genişlikte Satırlar

Beaver Builder'ın temalarınızda desteklemek isteyebileceğiniz bir diğer popüler özelliği de tam genişlikte satırlardır. Tam genişlikteki satırlar yalnızca içerik sarmalayıcınızın kenarına değil, tarayıcının kenarına da gider. Harika!

Varsayılan olarak Beaver Builder'daki tüm satırların, genel ayarlarda ayarlanabilen ve daha küçük cihazlar için uygun şekilde ölçeklenebilen bir maksimum genişliği vardır. İçerik sarmalayıcınız tam genişlikte olsa bile satırlar ve içerikleri, aşağıdaki ekran görüntüsündeki gibi kutulu bir düzende yer almaya devam edecektir.

Kullanıcı, satır ayarlarında bir satırı tam genişlikte yapmayı seçtiğinde, maksimum genişlik kaldırılır ve bu satır, tüm alanı kenardan kenara şu şekilde doldurur:

Bu harika bir tekniktir ancak yalnızca temanızın içerik sarmalayıcısı tarayıcının kenarına da gittiğinde işe yarar.

Kenar boşlukları ve dolgular gibi, her tema içerik sarmalayıcının genişliğini farklı şekilde ele alacaktır. Tekrar ediyorum, size her durumda işe yarayan bir çözüm sunamayacağım, ancak CSS'yi iyi anlıyorsanız aşağıdaki kod uygulamak isteyeceğiniz şeye benzer…

 .fl-builder #my-content-wrapper { max-width: none; width: auto; }

Varsayılan Düğme Renkleri

Beaver Builder çok çeşitli düğme stilleri için mükemmel destek sağlar, ancak varsayılan ayar oldukça sıkıcıdır. Aşağıdaki CSS'yi temanıza eklemek ve tasarımınıza uyacak şekilde ayarlamak, Beaver Builder düğmelerine tarzınıza daha iyi uyan varsayılan bir görünüm verecektir.

 a.fl-button, a.fl-button:visited, .fl-builder-content a.fl-button, .fl-builder-content a.fl-button:visited { background: #fafafa; color: #333; border: 1px solid #ccc; } a.fl-button *, a.fl-button:visited *, .fl-builder-content a.fl-button *, .fl-builder-content a.fl-button:visited * { color: #333; }

Düğmenin varsayılan stillerinden çoğunu geçersiz kılmamaya dikkat edin, aksi takdirde düğme modülünün ayarlarını bozma riskiyle karşı karşıya kalırsınız.

Z Endekslerine Dikkat Edin

Büyük ihtimalle hayatınızda herhangi bir CSS yazdıysanız z-index sorunlarıyla karşılaşmışsınızdır. Özellikle neden bahsediyorum? Bazı şeyleri erişilmez kılan diğer şeylerin üstüne çıkan şeyler. Ne var?

Beaver Builder'ın arayüzünün tüm sayfanın üstünde yer alması gerekiyor, üzerinde hiçbir şey olmamalıdır. Bu nedenle, z-endeksini gülünç derecede yüksek bir değere ayarladık, ancak aynı zamanda çok da yüksek değil. Yılların deneyiminden sonra tavsiyem z-endekslerinizi mümkün olduğunca düşük tutmanızdır. Bunun her zaman mümkün olmadığını biliyorum, bu yüzden onları en azından 100000'in altında tutmaya çalışırsanız sorun olmaz.

TGM Eklentisi ile Tavsiye Edin

Geçmişte tema geliştiricileri, kullanıcılarına sunmak için üçüncü taraf eklentileri doğrudan temalarının içinde bir araya getirmek zorundaydı. O zamanlar bunun harika bir çözüm gibi göründüğünden eminim ve birçoğu hala bunu yapıyor, ancak bugünlerde bunun neden harika bir fikir olmadığını hepimiz biliyoruz. Güvenlik ve güncellemeler!

Temanızla birlikte üçüncü taraf bir eklentiyi paketlerseniz ve bir güvenlik açığı ortaya çıkarsa ne olur? Ne oldu? Kullanıcılarınızın sitelerine bir güncelleme göndermek sizin sorumluluğunuzdadır; eklenti geliştiricisi, eklenti tema dizininizde bulunduğundan bunu yapamaz. Bu daha önce de oldu ve benim tahminim, tema geliştiricileri bu uygulamayı durdurana kadar tekrar yaşanacağı yönünde.

Bunun yanı sıra, en son güncellemeleri kullanıcılarınıza iletmekten de sorumlu olacaksınız. Yoğun hayatınızda düşünmeniz gereken bir şey daha var. Beaver Builder ilk yılında 50 güncelleme yayınladı ve orada durmayı planlamıyoruz. Gerçekten bunun sorumluluğunu almak istiyor musun?

Artık üçüncü taraf eklentileri temalarınıza yerleştirme konusundaki tanrı korkusunu da ortaya koyduğuma göre, size oldukça popüler hale gelen bir alternatiften bahsetmek istiyorum.

TGM Eklenti Aktivasyonu: WordPress temaları (ve diğer eklentiler) için eklenti gerektirmenin ve önermenin en iyi yolu. Kendi web sitelerinden…

TGM Eklenti Etkinleştirmesi, WordPress temalarınız (ve eklentileriniz) için eklentileri kolayca talep etmenize veya önermenize olanak tanıyan bir PHP kitaplığıdır. Kullanıcılarınızın yerel WordPress sınıflarını, işlevlerini ve arayüzlerini kullanarak eklentileri tekil veya toplu olarak yüklemelerine ve hatta otomatik olarak etkinleştirmelerine olanak tanır. Önceden paketlenmiş eklentilere, WordPress Eklenti Havuzundaki eklentilere ve hatta internette başka bir yerde barındırılan eklentilere başvurabilirsiniz.

Kısacası kullanıcılarınıza üçüncü taraf eklentileri yükleme seçeneğini sunmalısınız. Eğer karar verirlerse, güncellemeyi size değil, WordPress çekirdeğine ve eklenti yazarına bırakabilirsiniz.

Biraz Para Kazanın

Diğer geliştiricilerin çalışmalarımızı övmelerinden ve hatta kendi ürünleri içinde destek sağlayacak kadar ileri gitmelerinden gurur duyuyoruz. Bundan o kadar mutluyuz ki, temaları için Beaver Builder desteği sağlayanlara bir teşekkür mesajı ekledik.

Bu küçük teşekkür, lite sürümündeki yükseltme bağlantılarımızı ortaklık bağlantınızla değiştirmenize olanak tanıyan bir filtredir; bu, aslında, temanızı kullanan birisi Beaver Builder'ın ücretli sürümüne yükseltmeye karar verdiğinde size para kazandırır.

Nasıl çalışır? Bağlı kuruluş bağlantınız ve presto ile YOUR_LINK_HERE yazan metni değiştirirken aşağıdaki kodu işlevler dosyanıza eklemeniz yeterlidir! Sen işin içindesin.

 function my_bb_upgrade_link() { return 'YOUR_LINK_HERE'; } add_filter( 'fl_builder_upgrade_url', 'my_bb_upgrade_link' );

Kapanış

Burada ve orada yapacağınız birkaç ayarlamayla, Beaver Builder için gelişmiş destekle temanızı çok kısa sürede çalışır hale getirebilirsiniz. Sorularınız varsa bize bildirmekten çekinmeyin ve temanızı Beaver Builder için optimize etmeye karar verirseniz veya bu yazıda bir şeylerin eksik olduğunu düşünüyorsanız paylaşmaktan çekinmeyin. Sizi de aramızda görmekten mutluluk duyarız!