26 Ocak 2020 Pazar

How to Create a Custom WordPress Theme (without Any Code)


Sıfırdan özel bir WordPress teması oluşturmak ister misiniz?

Geçmişte, WordPress kodeksini takip etmeniz ve özel bir WordPress teması oluşturmak için iyi bir kodlama bilgisine sahip olmanız gerekiyordu. Ancak yeni WordPress tema jeneratörleri sayesinde, artık herkes bir saat içinde tamamen özel bir WordPress teması oluşturabilir (kodlama bilgisi gerekmez).

Bu makalede, herhangi bir kod yazmadan kolayca özel bir WordPress temasının nasıl oluşturulacağını göstereceğiz.

Kod yazmadan özel bir WordPress teması oluşturma

Yeni Başlayanlar İçin Özel WordPress Teması Oluşturma


Unlike static HTML sites, WordPress themes are a set of template files written in PHP, HTML, CSS, and JavaScript. Typically, you would need to have a decent understanding of all these web design languages or hire a web developer to create a custom WordPress theme.

If you hired a developer or agency, then the cost of a custom WordPress theme can reach thousands of dollars.

Since many small business owners couldn’t afford the high costs of a custom WordPress theme, a lot of them just settled for the default themes that came with WordPress.

Those who didn’t want to settle and wanted customizations either used a drag & drop WordPress page builder, or they used a theme framework to build a custom theme.

While WordPress theme frameworks made building a WordPress theme easier, they are a solution for developers, not an average website owner.

Öte yandan, WordPress sayfa oluşturucu eklentileri sürükle ve bırak arayüzü kullanarak özel sayfa mizanpajları oluşturmayı süper kolaylaştırdı, ancak bunlar yalnızca mizanpajlarla sınırlıydı. Bununla özel temalar oluşturamazsınız.

En iyi WordPress sayfa oluşturucu eklentilerinden biri olan Beaver Builder'a kadar, bu sorunu Beaver Themer adlı eklentisiyle çözmeye karar verdiler.

Beaver Builder en iyi WordPress sayfa oluşturucu eklentisi

Beaver Themer, bir sürükle bırak arayüzü kullanarak ve kodlamayı öğrenmeden özel tema düzenleri oluşturmanıza izin veren bir site oluşturucu eklentisidir.

Kolayca bir WordPress teması oluşturmak için Beaver Themer'in nasıl kullanılacağına bakalım.

Video öğretici







Videoyu beğenmediyseniz veya daha fazla talimat gerekiyorsa okumaya devam edin.

Özel Tema Oluşturmak için Beaver Themer'ı Ayarlama


Beaver Themer, Beaver Builder için bir eklenti eklentisidir, bu nedenle bu makale için her iki eklentiye de ihtiyacınız olacaktır.

İlk olarak, Beaver Builder ve Beaver Themer eklentilerini kurmanız ve etkinleştirmeniz gerekir. Daha fazla ayrıntı için bir WordPress eklentisinin nasıl kurulacağına ilişkin adım adım kılavuzumuza bakın.

Beaver Themer, özel bir tema oluşturmanıza izin verir, ancak yine de başlamak için bir temaya ihtiyacınız olacaktır. Başlangıç ​​temanız olarak hareket etmek için tam genişlikte bir sayfa şablonu içeren hafif bir tema kullanmanızı öneririz.

Bu gibi birçok temayı WordPress.org tema dizininde bulabilirsiniz. Modern WordPress temalarının çoğu tam genişlikte bir şablon içerir. En iyi seçimlerimiz:

  • Astra - Beaver Builder için yerleşik destekle birlikte gelen ücretsiz, hafif, çok amaçlı bir WordPress teması.

  • OeanWP - Tam sayfa oluşturucu desteği ile gelen bir başka popüler ücretsiz çok amaçlı WordPress teması.

  • StudioPress temaları - Tüm temaları Beaver Builder ile uyumludur ve Beaver Themer ile harika çalışır.
Bu öğretici uğruna, hafif ve özelleştirilmesi kolay WordPress teması olan Astra'yı kullanacağız.

Temanızı Beaver Themer için Ayarlama


Beaver Themer ile özel bir WordPress teması oluştururken, Beaver Themer'ın sayfanın tüm gövdesine (kenardan kenara) erişebildiğinden emin olmak önemlidir.

Bu varsayılan Astra düzenidir. Gördüğünüz gibi bu düzende Beaver Themer kullanırken çalışması zor olan bir kenar çubuğu var.

Kenar çubuğuyla varsayılan tema düzeni

Bunu web sitenizin yönetici panelini ziyaret edip Görünüm »Özelleştir sayfasına giderek değiştirebilirsiniz . Buradan Düzen »Kenar Çubukları sekmesine geçmeniz gerekir .

Temanızdaki kenar çubuklarını kapatma

Bir kez orada, varsayılan düzen seçeneği altında 'Kenar Çubuğu Yok' seçeneğini seçin ve değişikliklerinizi kaydetmek için Yayınla düğmesine tıklayın.

Temanız artık kenar çubuğu olmayan bir düzen kullanmaya başlayacak. Bu, Beaver Themer ile kullanmak için en iyi düzen.

Kenar çubuğu olmayan tema düzeni

Bu tam sayfa düzeni, Beaver Themer'in ekranın her bir inçini kullanmasına izin verir, böylece güzel bir uçtan uca görsel deneyim oluşturabilirsiniz.

Çoğu WordPress teması, tam genişlikte sayfalar için bir şablon dosyası içerir. Başka bir tema kullanıyorsanız, tema ayarlarınızda kenar çubuklarını kaldırma seçeneği bulabilirsiniz.

Bulamazsanız, tema geliştiricinize başvurun ve size bu konuda yardımcı olabilirler.

Temanızı tam genişlikte bir düzene ayarladıktan sonra, Beaver Themer kullanarak özel WordPress temanızı oluşturmaya hazırsınız.

Hızlı Kunduz Themer Temelleri


Beaver Themer, Beaver Builder'ın üstünde çalışır. Bir sayfa oluşturucu eklentisi olarak Beaver Builder, özel düzenler oluşturmak için öğeleri bir sayfaya sürükleyip bırakmanıza olanak tanır.

Düzenlerinizde kullanabileceğiniz aşağıdaki öğeler vardır:

  • Şablon: Tüm sayfa düzenini oluşturan sütun satırları ve modülleri koleksiyonu.

  • Sütunlar: İçeriği yatay olarak hizalamaya yardımcı olan dikey düzen modülleri.

  • Sıralar: Birden fazla modülün yatay olarak toplanması

  • Modül: Başlık, metin bloğu, tablo, galeri vb. Gibi belirli bilgileri çıktılayan bir öğe.
Beaver Builder'da bir sayfayı düzenleyin ve ardından sağ üst köşedeki ekle düğmesine tıklayın. Daha sonra sütunları, satırları, modülleri sayfanıza sürükleyip bırakabilir ve hemen düzenlemeye başlayabilirsiniz.

Beaver Builder'ı kullanma

Sıfırdan başlamak istemiyorsanız, başlamak için önceden hazırlanmış şablonlar listesinden seçim yapın.

Beaver Builder şablonları

Beaver Builder ayrıca mizanpajlarınızı kaydetmenize ve daha sonra bunları şablon olarak kullanmanıza olanak tanır.

Daha fazla bilgi edinmek için Beaver Builder'ı kullanarak özel sayfa düzeni oluşturma hakkındaki makalemize bakın.

Ancak, yalnızca sayfa mizanpajları oluşturmak istemiyoruz. Eksiksiz bir özel tema oluşturmak istiyoruz.

Beaver Themer devreye giriyor.

Beaver Builder'a 'Themer Layout' adlı başka bir öğe ekler.

Themer Düzeni

Themer düzenleri, üstbilgi, altbilgi, içerik alanları, 404 sayfası ve diğer şablon parçaları için özel düzenler oluşturmanıza olanak tanır.

Bunlar tüm WordPress temalarının yapı taşlarıdır ve bunları kullanarak ihtiyaçlarınıza uyan özel bir tema oluşturabilirsiniz.

Özel bir WordPress Teması Oluşturmak için Beaver Themer Şablonlarını Kullanma


Aşağıdaki talimatlarda, en popüler özel tema öğelerini oluşturmak için gereken adımlarda size yol göstereceğiz. İşiniz bittiğinde, temel temanızı tamamen özel bir WordPress alt temasına dönüştürdünüz.

Temanız için Özel Bir Başlık Oluşturma


Web sitenizin başlık alanından başlayalım. Özel bir başlık, bir temanın önemli bir bileşenidir ve geleneksel yöntemler kullanılarak zor olabilir.

Neyse ki, Beaver Themer'de yerleşik başlık özellikleri var. Önceden oluşturulmuş şablonu kullanabilir veya iki sütunlu bir düzenle menü ve görüntü modüllerini kullanabilirsiniz.

Bu başlık alanına ulaşmak için önce Beaver Themer'de bir başlık düzeni ayarlamamız gerekecek. Beaver Builder »Yeni sayfa ekle sayfasını ziyaret edin ve başlığınız için bir başlık girin.

Özel bir başlık düzeni oluşturma

Bundan sonra, tür olarak 'Themer Layout' seçeneğini ve düzen seçeneği olarak 'Header' seçeneğini belirleyin. İşiniz bittiğinde, devam etmek için 'Themer Layout Ekle' düğmesini tıklayın.

Bu sizi düzen ayarları sayfasına götürecektir. Buradan, başlık şablonunun görüntüleneceği konum olarak 'Tüm Site'yi seçmeniz gerekir.

Düzen ayarları

Ardından, oluşturucu arayüzünü açmak için 'Beaver Builder'ı Başlat' düğmesine tıklayın.

Beaver Builder, başlangıç ​​noktası olarak temel bir tek sütun ve iki satır başlık düzeniyle başlayacaktır.

Üstbilgi düzeni

Arka planı, renkleri, metni vb. Değiştirmek için aynı Beaver Builder sürükle ve bırak araçlarını kullanabilirsiniz. Sağ üst taraftaki ekle düğmesini tıklayarak başka modüller ekleyebilir, önceden hazırlanmış şablonlar yükleyebilir ve satır / sütun ekleyebilirsiniz. köşe.

Tasarımdan memnun olduğunuzda, düzeninizi kaydetmek veya yayınlamak için Bitti düğmesini tıklayın.

Artık özel tema başlığınızı çalışırken görmek için web sitenizi ziyaret edebilirsiniz. Gördüğünüz gibi başlık düzenini özel temamıza uyguladık.

Özel temanızdaki özel başlık

Üstbilginin yanı sıra, henüz herhangi bir içerik göstermezsiniz ve büyük olasılıkla temel temanızın altbilgi alanını görürsünüz.

Bunu değiştirelim.

Temanız için Özel Bir Altbilgi Oluşturma


Tıpkı özel bir başlık oluşturduğunuz gibi Beaver Themer'ı kullanarak temanız için özel bir altbilgi oluşturabilirsiniz.

Başının üzerinde Yeni Ekle »Beaver Builder sayfanızı ve altbilgi düzeni için bir başlık. Ardından, tür olarak 'Themer Layout' (Düzenleyici Düzeni) 'ni, düzen seçeneği olarak' Footer '(Altbilgi)' yi seçin.

Altbilgi düzeni

Devam etmek için 'Themer Layout Ekle' düğmesine tıklayın.

Bu sizi düzen ayarları sayfasına götürecektir. Buradan, şablonun görüntüleneceği konum olarak 'Tüm Site'yi seçmeniz gerekir.

Altbilgi düzeni ayarları

Bundan sonra, oluşturucu arayüzünü açmak için 'Beaver Builder'ı Başlat' düğmesine tıklayın.

Beaver Builder üç sütun kullanarak bir altbilgi düzeniyle başlayacaktır. Bu düzeni başlangıç ​​noktası olarak kullanabilir ve düzenlemeye başlayabilirsiniz.

Altbilgi düzeninizi düzenleme

Modüller, metin blokları veya istediğiniz herhangi bir şeyi ekleyebilirsiniz. Her zaman renkleri, yazı tiplerini değiştirebilir, arka plan resmi ekleyebilir ve daha fazlasını yapabilirsiniz.

Tasarımdan memnun olduğunuzda, düzeninizi kaydetmek veya yayınlamak için Bitti düğmesini tıklayın.

Yazı ve Sayfalar için İçerik Alanı Oluşturma


Artık web sitesindeki her sayfa ve yayın için üstbilgi ve altbilgi oluşturduğumuza göre, yayın veya sayfa gövdesini (içerik alanı) oluşturma zamanı.

Yeni Ekle sayfasına 'Tekil' düzeni ekleyerek üstbilgi ve altbilgiyi oluşturduğumuz gibi başlayacağız.

Yayınlar ve sayfa düzenleri oluşturma

Ardından, bu mizanpajın nerede görüntüleneceğini seçeceksiniz. Tüm tekli yayınlar ve sayfalar için kullanmak üzere tekil seçebilir veya yayınları veya yalnızca sayfaları seçebilirsiniz.

Tekil düzen ayarları

Bundan sonra, oluşturucu arayüzünü açmak için 'Beaver Builder'ı Başlat' düğmesine tıklayın.

Tekil düzeni düzenleme

Beaver Builder, üstte yazı / sayfa başlığı ve ardından içerik, yazar biyo kutusu ve yorum alanı içeren örnek tekil bir düzen yükleyecektir.

Bu öğelerin herhangi birini düzenlemek için işaretleyebilir ve tıklayabilir veya gerektiğinde yeni modüller, sütunlar ve satırlar ekleyebilirsiniz.

Düzenden memnun olduğunuzda, değişikliklerinizi kaydetmek ve yayınlamak için Bitti düğmesini tıklayın.

Artık web sitenizi ziyaret ederken görmek için web sitenizi ziyaret edebilirsiniz.

İçerikli tema düzeni

Özel Temanız için Arşiv Düzenleri Oluşturma


Özel temanız şekillenmeye başladığına göre, web sitenizin diğer bölümleri için mizanpajlar oluşturabilirsiniz. Arşiv sayfaları, WordPress'in kategorilerinizi, etiketlerinizi, yazarınızı ve aylık arşivlerinizi görüntülediği yerdir.

Özel temanızdaki arşiv sayfaları için bir düzen oluşturalım.

Beaver Builder »Yeni sayfa ekle'yi ziyaret edip arşiv düzeniniz için bir başlık sağlayarak işe başlayacaksınız .

Özel temanız için bir arşiv düzeni oluşturma

Bundan sonra, tür olarak 'Themer Layout' seçeneğini ve düzen seçeneği olarak 'Archive'ı seçin. Devam etmek için 'Themer Layout Ekle' düğmesine tıklayın.

Bu sizi düzen ayarları sayfasına götürecektir. Buradan, şablonun görüntüleneceği konum olarak 'Tüm Arşiv'i seçmeniz gerekir. Ayrıca her bir arşiv türü için tarih, arama sonuçları, kategori, etiketler vb. Gibi ayrı mizanpajlar da oluşturabilirsiniz.

Arşiv düzeni ayarları

Bundan sonra, oluşturucu arayüzünü açmak için 'Beaver Builder'ı Başlat' düğmesine tıklayın.

Beaver Builder temel bir tek sütun arşiv düzeniyle başlayacaktır. Arşiv başlığını en üstte, ardından da yazılar takip eder.

Temanız için Arşiv düzenini düzenleme

Özelliklerini düzenlemek için herhangi bir öğeyi işaret edebilir ve tıklayabilirsiniz. Ayrıca gerektiğinde yeni modüller, satırlar ve sütunlar ekleyebilirsiniz.

Bundan sonra, değişikliklerinizi kaydetmek ve yayınlamak için 'Bitti' düğmesini tıklayın.

Özel WordPress Temanız için Diğer Düzenler Oluşturma


Beaver Themer ayrıca, şablon hiyerarşisindeki diğer sayfalar için, örneğin 404 sayfası, şablon parçaları, arama sonuçları sayfası ve benzeri düzenler oluşturmanıza olanak tanır.

Beaver Builder'ın yerleşik sürükle ve bırak işlevini kullanarak, kod yazmadan sıfırdan kendi özel WordPress temanızı kolayca oluşturabilirsiniz. Bu gerçekten var olan en başlangıç ​​dostu WordPress tema geliştirme yöntemidir.