WordPress tema tasarımını değiştirmenin 5 yolu
Web siteniz için mükemmel WordPress temasını bulduğunuzda, en çok sevdiğiniz tasarımla, belki de harekete geçme zamanı. Ancak WordPress temasının tasarımını değiştirecek kadar emin değilseniz, doğru yere geldiğinizden emin olabilirsiniz. Bu yazıda, WordPress temasının tasarımını çok basit bir şekilde başlayarak değiştirmenin 5 ana yolunu tartışacağız ve orta bir çözümle bitiyor. 1. Küçük Tasarım Değişiklikleri – WordPress Ayarlamaları
Temanızın tasarımını değiştirmek istediğinizde görmeniz gereken ilk yer, WP’nin ayarlanmasıdır.Temaya bağlı olarak, renk şemasını değiştirebilir, temadaki farklı metin parçalarından yazı tiplerini değiştirebilir, başlık görüntüleri ekleyebilir veya silebilir, site logosunu ayarlayabilir ve hatta statik sayfalar için özel bir içerik bölümünü doldurabilirsiniz. WP panosunun içinden hızlı ve ağrı olmadan. WordPress Ayarında Standart Bölüm, bu sitenin kimliğinin temaya bakılmaksızın, sitenin başlığını ve sloganını değiştirdiğiniz ve genellikle bir logo eklediğiniz varsayılan katılım olduğu birkaç standart parça vardır. Renk/renk şeması oldukça açıktır, bu, farklı temaların rengini değiştirebileceğiniz yaygın bir kısımdır.
Başlık görüntüsünü ekleyebileceğiniz/değiştirebileceğiniz ve bazen nereye yerleştirildiğini veya hangi boyutta kontrol edebileceğiniz gölgelik görüntüsü. Bu statik ön sayfa, web sitenizin ana sayfasını görüntülemek istediğinizi seçtiğiniz yerdir. En son yayınları/makaleleri görüntülemek ister misiniz yoksa sayfalarınızdan birini görüntülemek mi istiyorsunuz? Davranış, bir tema üzerinde hızlı tasarım değişiklikleri yapmak için çok uygundur, ancak dezavantaj, her temanın ayarlamada birçok seçenek sunmamasıdır. Bu bizi bir sonraki seçeneğe götürür. 2. Küçük Tasarım Değişikliği Onarım Eklentisi Tasarımın sizi rahatsız eden sadece bir veya birkaç özel yönü var, ancak bu özel şeyleri WP özelleştiricisinde ayarlama seçeneği yok mu? Belki sorunu tek başına çözmek için tasarlanmış bir eklenti vardır. Örneğin, temada sevmediğiniz bazı renkler varsa, kullandığınız temanın renk şemasını değiştirmek için tema tweaker gibi eklentileri kullanabilirsiniz. Temanız, değiştiremeyeceğiniz standart bir başlık görüntüsü ile donatılmışsa veya farklı sayfalarda/kategorilerde farklı bir başlık görüntüsü istiyorsanız, bunun için bir eklenti de vardır. Buna benzersiz başlık denir, sayfalar, kategoriler ve etiketler ve daha fazlası için benzersiz başlıklar ayarlamak için kullanabilirsiniz. Hızlı bir onarım eklentisi kullanmanın bir problemi, özellikle birkaç şey için birkaç tema kullanıyorsanız, performans üzerinde olumsuz bir etkiye sahip olabilmeleridir. 3. Küçük tasarımdaki değişiklikler – sayfaların eklenti üreticisi
Eklenti bizi sayfa üreticisine götürür. Bugünün sayfa yapımcıları, Divi veya WPMU’nun üst kısmı gibi yapı kısa çizik temalarından (seçilecek çeşitli düzenlerle birlikte gelen) değişir. Daha sonra size sayfada veya yayınlamada içeriğin tam kontrolünü sağlayan bir sayfa üreticimiz var, ancak çevresinde görsel besteci veya Beaver Builder gibi gerçek bir tema yok. Mevcut tasarımınızı ve tonlarınızı gerçekten seviyorsanız, bu sizin için en iyi seçim olabilir, ancak web siteniz için gerçekten ilginç bir dinamik sayfa oluşturmak istiyorsanız. Temanın kendisi sadece birini destekler. Ayrıca, karmaşık sayfalar oluşturmak için kolayca doldurabileceğiniz farklı karmaşık düzenlerle birlikte gelirler. Bu, portföy sayfaları, sayfalar, ilginç sayfalar ve daha fazlası gibi sayfalar oluşturmayı kolaylaştırır. Ayrıca, yayınınıza daha fazla formatlarda medya eklemeyi mümkün kılarak hikayeleri daha kolay etkileşimli hale getirir. Hangi sayfa yapımcılarını göreceğinizi merak ediyorsanız, WPKube’da 6 sayfa yapımcı eklentisinin yan yana karşılaştırma yaptık. Freddy Muriuki de Beaver Builder eklentisi hakkında iyi yazdı. Bir sayfa üreticisi kullanmanın dezavantajı, performansı olumsuz etkilediği bilinmektedir. Neyse ki, statik bir HTML sayfası görüntülemek için W3 Total Cache veya WP Super Cache gibi bir önbellek eklentisi kullanarak bunu aşabiliriz. Başka bir zayıflık, içerik depolamak için standart WordPress veritabanı yordamının dışında tüm içeriği depolarsanız, belirli sayfalardan geçmenin zor olabileceğidir. 4. Orta Tasarımdaki Değişiklikler – Eklenti kullanarak CSS Değiştirme Şimdi bazı gerçek kodlamaya ulaştık. CSS, şimdi gördüğümüz bir web sitesi üretmek için HTML ile birlikte çalışan bir programlama dilidir.
HTML temelde bir iskelet gibi çalışır, genel olarak nerede olması gerektiğini söyler ve metin, resim ve diğer içerik ekler. CSS her şeyi düzenler, eti kemiğe koyar ve bitmiş ürünün nasıl görüleceğine karar verir. Bunun için basit bir özel CSS eklentisi kullanabilir veya Jetpack’ten CSS Düzenleyici bölümünü kullanabilirsiniz. Yapmak istediğiniz ilk şey, bazı temel HTML/CSS öğrenmektir. Code Academy’de kurs alarak ücretsiz olarak yapabilirsiniz veya W3Schools’taki öğreticiyi takip edebilirsiniz. (Ya da Treehouse gibi ücretli bir seçenek görebilirsiniz.)
Daha sonra özel bir CSS eklentisiyle çalışmaya başlamadan önce, iki şeyin nasıl yapılacağını, stil yapmak istediğiniz öğelerin sınıfını nasıl bulacağınızı ve duyarlı temada değişiklik yapmak için bunları nasıl doğru hedefleyeceğinizi bilmeniz gerekir. Chrome’da yapmanız gereken tek şey kontrol etmek istediğiniz alanı vurgulamak, sağ tıklayın ve kontrolü tıklayın. Örneğin, WordPress sitemdeki yayın başlığını kontrol etmek isteyebilirsiniz. Bu bölümle ilgili olan HTML ve CSS’yi gösterecektir, bu durumda bize gönderme başlığı için HTML ve CSS gösterir. Dikkat edilmesi gereken önemli şey, CSS’de herhangi bir medya sorgusu görüyorsanız. (Medya sorguları, CSS’de ekran boyutları gibi şeylere bağlı olarak belirli stilleri uygulamak için kullanılan işlevlerdir. En çok web sitelerini daha duyarlı hale getirmek için kullanılır.) Bu örnekte, şunları söyleyen bir medya sorgusu vardır: @media ekranı ve (min -genişlik : 61.5625em) ve aşağıdaki kuvveti. yazı tipi boyutu: 40px;
Yazı tipi boyutu: 2.5Rem;
Çizgi yüksekliği: 1.225;
Marj-Alt: 1.05EM; Bu, stilin yalnızca ekran (veya tarayıcı penceresi) 61.5625EM’den (veya 985px) daha genişse uygulandığı anlamına gelir. Bu nedenle, belirli bir ekranda özel olarak bir şeyin görünümünü değiştirmek istiyorsanız, medya sorgularını eklemeniz gerekir. Yazı tipi boyutunu sadece bir bilgisayar ekranı için değiştirmek istediğimizi söyleyin, bu yüzden aynı kesme noktasını kullanmalı ve özel CSS eklentimizde böyle bir şey yazmalıyız.
@Media ekran ve (min genişliği: 61.5625em) {
.Entry-title {
yazı tipi boyutu: 200px;
}
} Doğru kodu yazdığımı onaylamak için ekran boyutu arasındaki kontrastı kolayca görebilmemiz için aptal bir yazı tipi boyutu girişinin başlığını veriyorum. Büyük ekranda, girişimin başlığı şimdi şöyle görünüyor: ama cep telefonunun/tabletin boyutuna gidersem, girişimin başlığı hala değişmedi. İstediğin bu.
Tasarımınızın tutarlı ve uyumlu kalmasını istiyorsanız, bir tema için tüm kesme noktalarını görmek ve onlarla çalışmak çok önemlidir. 5. Tasarımda önemli değişiklikler – Çocuk temalarını kullanın Temada önemli değişiklikler yapmak istiyorsanız, çocuğun temasını kullanmak istersiniz. Bu şekilde, temayı güncelleseniz bile (veya WordPress bunu otomatik olarak yaparsanız), yaptığınız herhangi bir değişikliği veya eklemeyi kaybetmezsiniz. Bir çocuğun temasıyla çalışmak için ilk adım, kademeli bir site hazırlamalı veya yerel bir geliştirme ortamı hazırlamalıdır. Ardından, bu kılavuzla çocuğun temasını hızlı bir şekilde nasıl yöneteceğiniz ve çalıştıracağınız veya bununla biraz daha derinlemesine çalışabileceğiniz hakkında daha fazla bilgi edinebilirsiniz. İlgili yönergeler ve öğreticiler:
Yeni widget alanını temaya ekleyin
WP ayarına site logo seçenekleri nasıl eklenir
Bir sayfa şablonu ile nasıl çalışılır
