3 Basit Adımda Kodlamadan WordPress Teması Nasıl Oluşturulur

Sayfa oluşturucu çağından önce, bir tema oluşturmak programlama becerisine sahip olmayan bir WordPress kullanıcısı için yalnızca bir hayaldi. Bir WordPress teması oluşturmak için en azından PHP, HTML ve CSS'ye hakim olmanız gerekir. Karmaşık bir WordPress teması oluşturmak istiyorsanız (Themeforest'ta satılanlar gibi), JavaScript'te uzmanlaşmak için de bir ön koşuldur.

Bu daha sonra.

Bugün, hiç kodlama bilginiz olmasa bile bir WordPress teması oluşturabilirsiniz. Elementor dahil olmak üzere bazı WordPress sayfa oluşturucu eklentileri, herhangi bir tek satır kod yazmadan bir WordPress teması oluşturmanıza olanak tanıyan bir tema oluşturucu özelliği ile birlikte gelir. Sürükle ve bırak görsel düzenleyicisini kullanarak bir WordPress teması oluşturabilirsiniz.

Daha ileri gitmeden önce, bilmeniz gereken bir şey var. Bir WordPress teması tipik olarak üç ana bölümden oluşur: üstbilgi, altbilgi ve tek bir gönderi şablonu. Elementor'un Tema Oluşturucu özelliği, bu üç bölümü oluşturmanıza olanak tanır. Ayrıca özel bir 404 sayfası, arşiv sayfaları, yazar sayfası vb. oluşturabilirsiniz.

Not: Tema Oluşturucu yalnızca Elementor Pro'da mevcuttur.

Elementor'un Tema Oluşturucusu nasıl çalışır?

Elementor'un Tema Oluşturucu özelliği, etkin temanızın parçalarını değiştirerek çalışır. Örneğin, Elementor ile bir başlık oluşturup yayınlarsanız, bu yeni başlık o anda aktif olan temanızın başlığının yerini alacaktır. Altbilgi, tek gönderi şablonu, 404 sayfa, arşiv sayfaları vb.

Normalde, bir web sitesi tüm gönderilerde ve sayfalarda aynı üstbilgi ve altbilgi şablonuna sahiptir. Elementor'da, yalnızca belirli sayfalara veya gönderilere uygulamak için bir üstbilgi/altbilgi şablonu ayarlamak için görüntüleme koşulunu ayarlayabilirsiniz. Elbette, tüm web sitesine uygulamak için bir üstbilgi/altbilgi şablonu ayarlayabilirsiniz.

Bir şey.

Elementor ile oluşturduğunuz WordPress temasını, genel olarak WordPress temaları gibi tek bir ZIP'ye kaydedemezsiniz. Temanızı kaydetmek istiyorsanız, her bir parçayı dışa aktarabilir ve tek bir klasörde bir araya getirebilirsiniz. Elementor, tema bölümlerinizi (ve diğer şablonları) bir JSON formatında saklayacaktır.

Elementor ile kodlama yapmadan bir WordPress teması nasıl oluşturulur

Yukarıda daha önce belirtildiği gibi, bir WordPress tipik olarak üç ana bölümden oluşur: üstbilgi, altbilgi ve tek gönderi şablonu. Bu parçaları oluşturma adımlarında size yol göstereceğiz. Başlayalım.

# Başlık şablonunu oluşturun

• Öncelikle, WordPress kontrol paneline giriş yapın ve Templates -> Theme Builder'a gidin.

• Tema Oluşturucu sayfasında, yeni bir başlık şablonu oluşturmak için Başlık sekmesini ve ardından Yeni Ekle düğmesini tıklayın.

• Başlık şablonunuza bir ad verin ve ŞABLON OLUŞTUR düğmesini tıklayın.

• Elementor, aralarından seçim yapabileceğiniz birkaç kullanıma hazır başlık şablonu sunar. İstediğinizi seçin ve kullanmak için EKLE düğmesine tıklayın.

• Bir şablon kullanmak yerine sıfırdan başlamak istiyorsanız, doğrudan Elementor düzenleyicisine gitmek için şablon kitaplığını kapatmanız yeterlidir. Bu eğitimde, başlığı sıfırdan oluşturacağız. Oluşturacağımız başlık iki bölümden oluşmaktadır; ana başlığın üzerinde yer alan alt başlık ve ana başlığın kendisi. Sosyal medya simgeleri, iletişim bilgileri vb. şeyleri yerleştirmek için alt başlığı kullanacağız. Ana başlık ise site logosunu ve menüsünü görüntülemek için kullanılacaktır.

## Alt başlık

• Oluşturacağımız alt başlık iki sütundan oluşmaktadır. Bu nedenle, Elementor düzenleyicide, yeni bir bölüm oluşturmak için artı düğmesine tıklayın ve iki sütunlu yapı seçeneğini seçin.

• Dilerseniz Style sekmesine tıklayarak bölümün arka planını değiştirebilirsiniz. Arka Plan bölümünde arka planı değiştirebilirsiniz.

• Bir widget eklemek için, istediğiniz widget'ı sol panelden tuval alanına sürüklemeniz yeterlidir. Bu örnekte eklemek istediğimiz ilk widget Simge Listesi'dir. Telefon numarasını ve e-posta adresini görüntülemek için bu widget'ı kullanacağız.

• Yeni eklediğiniz widget'ı sol panelden düzenleyebilirsiniz. Düzeni değiştirebilir, varsayılan simgeyi değiştirebilir veya metin rengini/stilini değiştirebilirsiniz. Metni veya simgeyi her özelleştirmek istediğinizde Stil sekmesine geçin. (Bir widget'ı düzenleme moduna dönüştürmek için widget tutamacına tıklayabilirsiniz). Ayrıca Navigator'da widget'ı da tıklayabilirsiniz.

• İkinci sütuna başka bir widget ekleyin. Bu örnekte, Sosyal Simgeler pencere aracını ekliyoruz.

• Yine bu widget'ı sol taraftaki sol panelden düzenleyebilirsiniz. Sosyal medya simgelerinizi özelleştirmek için bu panelle oynayın.

## Ana başlık

• Ana başlık için de iki sütun kullanacağız. İlk sütun (soldaki) site logosunu yerleştirmek için ve ikinci sütun (sağdaki) site menüsünü yerleştirmek için. Yeni bir bölüm eklemek ve iki sütunlu yapı seçeneğini belirlemek için Elementor düzenleyicisindeki artı düğmesine tıklayın.

• Site Logosu widget'ını sol panelden tuval alanına sürükleyin. Bu widget'ı (Site Logosu) SİTE bölümünde bulabilirsiniz. Elementor, site logonuzu otomatik olarak yükleyecektir.

• Hizalamayı ve boyutu ayarlayın. Boyutu ayarlamak için Stil sekmesine geçebilir ve genişlik değerini değiştirebilirsiniz.

• İkinci sütuna başka bir pencere öğesi (Gezinme Menüsü) ekleyin. Bu widget'ı SİTE bölümünde de bulabilirsiniz.

• Yine, menünüzü özelleştirmek için sol panelle de oynayabilirsiniz. Metin rengi, vurgulu renk, vurgulu genişlik ve benzeri gibi şeyleri ayarlayabilirsiniz. Elementor, ana navigasyonu bu menüye otomatik olarak yükleyecektir. WordPress sitenizde birden fazla menünüz varsa, İçerik sekmesinin altındaki Menü bölümündeki açılır menüyü tıklayarak hangisini görüntülemek istediğinizi belirleyebilirsiniz.

• Dilerseniz menünüzü yapışkan olarak da ayarlayabilirsiniz. Bunu yapmak için üst bölümü (alt başlık) seçin ve Gelişmiş sekmesine gidin. Yapışkan seçeneğini Hareket Efektleri seçeneğinde bulabilirsiniz.

• Yukarıdaki adımları ikinci bölümde (ana başlık) tekrarlayın. İsterseniz, arama kutusu gibi başka widget'lar da ekleyebilirsiniz. Sonuçtan memnun kalana kadar biraz oynayın. İşiniz bittiğinde, YAYINLA düğmesine tıklayın. Ayrıca göz simgesine tıklayarak sonucu önizleyebilirsiniz.

• Bir görüntüleme koşulu eklemeniz istenecektir. Bir tane eklemek için DURUM EKLE düğmesini tıklamanız yeterlidir.

• Başlığınızı tüm web sitesinde etkinleştirmek istiyorsanız, varsayılan olarak başlık şablonunuz tüm web sitesine uygulanacağından, KAYDET ve DEVAM ET düğmesini tıklamanız yeterlidir. Tersine, başlığınızı yalnızca belirli bir sayfaya (veya gönderiye) uygulamak istiyorsanız, açılır menüden istediğiniz sayfayı seçebilirsiniz. Tamamlandığında, KAYDET ve DEVAM ET düğmesini tıklayın.

# Altbilgiyi oluşturun

Üstbilgiyle aynı şekilde, Elementor ayrıca size zaman kazandırmak için kullanıma hazır altbilgi şablonları sağlar. Bu örnekte, altbilgiyi sıfırdan oluşturacağız. Oluşturacağımız altbilgi tek bir bölümden oluşmaktadır. Hakkında sayfası, iletişim sayfası, kullanım koşulları ve gizlilik politikası gibi sayfaların yanı sıra sosyal medya simgeleri ekleyeceğiz.

• Başlamak için Şablonlar – >Tema Oluşturucu'ya gidin.

• Tema Oluşturucu sayfasında Altbilgi sekmesini seçin ve Yeni Ekle düğmesini tıklayın.

• Şablonunuza bir ad verin ve ŞABLON OLUŞTUR düğmesine tıklayın.

• Altbilgiyi sıfırdan oluşturmak istediğimizden, Elementor düzenleyicisini açmak için şablon kitaplığını kapatın.

• Yeni bir bölüm eklemek için tuval alanındaki artı düğmesine tıklayın. İki sütunlu yapı seçeneğini seçin.

• Sosyal Simgeler pencere aracını sol panelden düzenleyicideki sütunlardan birine sürükleyin. Eklendikten sonra, simgeleri özelleştirmek için sol panelle oynayabilirsiniz.

• Site sayfalarını (hakkında sayfa, iletişim sayfası, kullanım koşulları ve gizlilik politikası) görüntülemek için Simge Listesi widget'ını kullanacağız. Bu nedenle, bu widget'ı düzenleyicideki başka bir sütuna sürükleyin.

• Bu örnekte, düzeni Inline olarak değiştiriyoruz. Bu, simge listesini yatay moda çevirecektir.

• Metin alanındaki varsayılan metni istediğiniz gezinme etiketiyle değiştirin (“hakkında”, “iletişim” “kullanım koşulları” vb.) ve Bağlantı alanına bağlantıyı ekleyin. İsterseniz simgeyi de kaldırabilirsiniz. Bu örnekte simge kullanmıyoruz.

• Simge Listesi widget'ını özelleştirmek için sol panelle oynayın. İşiniz bittiğinde, YAYINLA düğmesine tıklayabilirsiniz.

• Altbilgi şablonunu uygulamak istediğiniz yeri ayarlamak için DURUM EKLE düğmesini tıklayın.

• Altbilgi şablonunuzu tüm web sitesinde etkinleştirmek istiyorsanız, varsayılan olarak altbilgi şablonunuz tüm web sitesine uygulanacağından KAYDET ve DEVAM ET düğmesini tıklamanız yeterlidir. Tersine, altbilginizi yalnızca belirli bir sayfaya (veya gönderiye) uygulamak istiyorsanız, açılır menüden istediğiniz sayfayı seçebilirsiniz. Tamamlandığında, KAYDET ve DEVAM ET düğmesini tıklayın.

# Tek gönderi şablonunu oluşturun

Elementor ayrıca tek bir gönderi için özel bir şablon oluşturmanıza da olanak tanır. Bu örnekte, dört bölümden oluşan tek bir gönderi şablonu oluşturacağız.

1. Birinci bölüm: öne çıkan görseli yerleştirmek ve meta göndermek için.
2. İkinci bölüm: gönderi içeriğini, sosyal paylaşım butonlarını, yazar kutusunu ve kenar çubuğunu hızlandırmak için.
3. Üçüncü bölüm: e-posta abonelik formunu yerleştirmek için.
4. Dördüncü bölüm: gönderi navigasyonunu ve gönderi yorumunu yerleştirmek için.

Tek gönderi şablonunu oluşturmaya başlamak için aşağıdaki adımları izleyin.

• WordPress panosunda Şablonlar -> Tema Oluşturucu'ya gidin.

• Tema Oluşturucu sayfasında, Tek sekmesine gidin ve Yeni Ekle düğmesini tıklayın.

• Şablonunuza bir ad verin. Gönderi Türünü Seç bölümünde Gönder'i seçin. Elementor düzenleyicisine gitmek için ŞABLON OLUŞTUR düğmesine tıklayın.

• Aralarından seçim yapabileceğiniz kullanıma hazır şablonlardan bazılarını sunan bir açılır pencere belirecektir. Tek gönderi şablonunu sıfırdan oluşturmak istediğimiz için bu açılır pencereyi kapatmanız yeterlidir.

## Birinci bölüm

• Yeni bir bölüm oluşturmak için Elementor düzenleyicisindeki artı düğmesine tıklayın. Tek sütunlu yapı seçeneğini seçin.

• Sol paneldeki Stil sekmesine tıklayın. Arka Plan bölümünün altındaki Arka Plan Türü seçeneğinde Klasik öğesini seçin. Resmi Öne Çıkan Resim olarak ayarlayın.

• Boyutu Kapak olarak ayarlayın. Tekrar seçeneğinde Tekrar yok'u seçin.

• Gönderi Başlığı pencere öğesini düzenleyiciye sürükleyin.

• Özelleştirmek için Stil sekmesine gidin. Kenar boşluğu ve dolgu gibi gelişmiş ayarları yapmak için Gelişmiş sekmesine de gidebilirsiniz. Bu örnekte, sol kenar boşluğunu 30 olarak ayarladık.

• Gönderi Bilgileri pencere öğesini düzenleyiciye sürükleyin.

• Gereksiz öğeleri kaldırın ve özelleştirmek için Stil sekmesine gidin. Sol kenar boşluğunu 30'a ayarlamak için Gelişmiş sekmesine de gidin.

## İkinci bölüm

• Yeni bir bölüm eklemek için düzenleyicideki artı düğmesine tıklayın. İki sütunlu yapı seçeneğini seçin. Yaklaşık %68:32'lik bir karşılaştırma ile sütunların genişliğini ayarlayın.

• Paylaş Düğmeleri widget'ını yeni eklediğiniz bölümdeki sol sütuna sürükleyin.

• Gelişmiş sekmesine gidin ve kenar boşluğunu ayarlayın. Üst kenar boşluğunu 30'a, sol kenar boşluğunu 20'ye ve sağ kenar boşluğunu 50'ye ayarlayın (farklı değerleri kullanabilirsiniz).

• Düğmeyi özelleştirmek için Stil sekmesine gidebilirsiniz. İstediğiniz düğmeleri almak için biraz oynayın.

• İçerik Gönder widget'ını sol sütuna sürükleyin ve Paylaş Düğmelerinin altına yerleştirin.

• Gelişmiş sekmesine gidin ve kenar boşluğunu ayarlayın. Üst kenar boşluğunu 15'e, sol kenar boşluğunu 20'ye ve sağ kenar boşluğunu 50'ye ayarlayın (farklı değerleri kullanabilirsiniz).

• Tipografi stilini (yazı tipi stili, yazı tipi rengi ve yazı tipi boyutu gibi) ayarlamak için Stil sekmesine gidebilirsiniz.

• Yazar Kutusu pencere aracını ikinci sütuna (sağdaki) sürükleyin.

• Gelişmiş sekmesine gidin ve kenar boşluğunu ayarlayın. Üst kenar boşluğunu 20'ye, sol kenar boşluğunu 15'e ve sağ kenar boşluğunu 15'e ayarlayın (farklı olanı kullanabilirsiniz).

• Yine, bu widget'ı özelleştirmek için Stil sekmesine gidebilirsiniz. Görüntü boyutu, tipografi vb. gibi şeyleri ayarlayabilirsiniz. Sadece oyna.

• Kenar Çubuğu pencere aracını ikinci sütuna sürükleyin ve Yazar Kutusunun altına yerleştirin.

• Sol panele dönün ve görüntülemek istediğiniz bir kenar çubuğu (bir WordPress kenar çubuğu) seçin.

• Gelişmiş sekmesine gidin ve kenar boşluğunu ayarlayın. Sol kenar boşluğunu 15'e ve sağ kenar boşluğunu 15'e ayarlayın (farklı değerleri kullanabilirsiniz).

• Sağ sütunu etkinleştirin (seçin) ve Stil sekmesine gidin (işinizi kolaylaştırmak için Gezgini kullanabilirsiniz). Arka planını beyaz olarak değiştirin.

• Hala ikinci sütunda, Gelişmiş sekmesine geçin ve üst kenar boşluğunu -85 olarak ayarlayın.

## Üçüncü bölüm

• Elementor düzenleyicisindeki artı düğmesine tıklayın ve tek sütunlu yapı seçeneğini seçin.

• İç Bölüm widget'ını yeni eklediğiniz bölüme sürükleyin ve sütunların genişliğini yaklaşık %68:32'lik bir karşılaştırmayla ayarlayın.

• İlk sütunu (soldaki) etkinleştirin (seçin) ve arka planını griye (veya istediğiniz herhangi bir renge) değiştirmek için Stil sekmesine gidin.

• Form pencere aracını sol sütuna sürükleyin. Bu formu bir e-posta abonelik formu olarak kullanmak istediğimizden, e-posta dışındaki tüm form öğelerini kaldırın.

• Form widget'ı seçiliyken, kenar boşluğunu ayarlamak için Gelişmiş sekmesine gidin. Sağ kenar boşluğunu 15'e, sol kenar boşluğunu 15'e ve alt kenar boşluğunu 15'e ayarlayın (isterseniz farklı kenar boşluğu değerlerini kullanabilirsiniz).

• Formunuzu özelleştirmek için Stil sekmesine gidin. Sonuçtan memnun kalana kadar oynayın.

• Başlık widget'ını ilk sütuna sürükleyin ve formun üzerine yerleştirin ve “Bu makaleyi beğendiniz mi? Bültenimize katılarak haberdar olun!”.

• Başlık pencere öğesi seçiliyken, kenar boşluğunu ayarlamak için Gelişmiş sekmesine gidin. Üst kenar boşluğunu 15'e, sağ kenar boşluğunu 15'e ve sol kenar boşluğunu 15'e ayarlayın.

• Yine, başlığınızı özelleştirmek için Stil sekmesine de gidebilirsiniz.

## Dördüncü bölüm

• Elementor düzenleyicisindeki artı düğmesine tıklayın ve tek sütunlu yapı seçeneğini seçin.

• İç Bölüm widget'ını yeni eklediğiniz bölüme sürükleyin ve sütunların genişliğini yaklaşık %68:32'lik bir karşılaştırmayla ayarlayın.

• Gezinme Sonrası widget'ını ilk sütuna (soldaki) sürükleyin.

• Gezinme Sonrası seçiliyken, kenar boşluğunu ayarlamak için Gelişmiş sekmesine gidin. Üst kenar boşluğunu 10'a ve alt kenar boşluğunu 10'a ayarlayın.

• Yorum Gönder widget'ını ilk sütuna sürükleyin ve Gönderi Gezintisinin altına yerleştirin.

• İşiniz bittiğinde, tıklayın Şablonunuzu yayınlamak için YAYINLA düğmesi.

• Varsayılan olarak, tek gönderi şablonunuz web sitenizdeki tüm gönderilere uygulanacaktır. Belirli bir gönderiye veya kategoriye uygulanmasını istiyorsanız, açılır menüyü tıklayarak görüntüleme koşulunu ayarlayabilirsiniz. Tamamlandığında, KAYDET ve KAPAT'ı tıklayın.