Yazara Göre Divi Blog Yazılarını Kodlama Nasıl Renklendirilir

Divi'nin ana hedeflerinden biri, web sitenizdeki her öğenin iyi görünmesini sağlamaktır ve blog gönderileri bir istisna değildir. Bununla birlikte, iyileştirme için her zaman yer vardır ve blog gönderilerinizi yazara göre renk kodlaması, kullanıcıların içeriğinizde daha verimli gezinmesi için bir yol sunar (ayrıca favori yazarlarını belirlemenin yanı sıra!).

Bu makalede, Divi blog yazılarınızı neden renk kodlamak isteyebileceğiniz ve bunu iki basit adımda nasıl yapacağınız hakkında daha fazla konuşacağız. Yeni bir kat boya zamanı!

Divi Blog Yazılarınızı Neden Renk Kodlaması Yapmalısınız?

Daha ileri gitmeden önce Divi blog yazılarınızı renk kodlamasıyla ne demek istediğimizi açıklayalım. Bir sonraki bölümde, yazarlarınızın her birine kendi gönderilerinin arka planı olarak görünecek bir rengi nasıl atayacağınızı öğreteceğiz. Bu örnekte, kendi gönderilerime ( yazar1 olarak) çok çekici bir açık mavi atadım :

Efektin kendisi nispeten basittir, ancak yazarları ayırt etmek için etkili bir yol sunar. Kullanıcılar, favori yazarlarının yeni eserlerini bir bakışta kolayca tanıyabilir. Elbette yazarın adını daha belirgin hale getirmek de aynı etkiyi yaratabilir ancak görsel olarak o kadar çarpıcı olmayabilir.

Bununla ilgili tek endişeniz renk seçiminiz. Örneğin, bu bölümün başındaki ekran görüntüsünü alın – Divi blog dizinimiz beyaz bir arka plan kullanıyor, bu nedenle yazarlarımızın gönderileri için açık pastel renkler kullanmaya karar verdik. Farklı bir renk şeması seçersek ne olacağını görelim:

Tabii ki, bu uç bir örnek, ancak amacımızı açıklamamıza yardımcı oluyor. Gönderilerinizi renklendirmek istiyorsanız, gerekirse yardımcı olacak uygun bir araç kullanarak paletinizi dikkatlice gözden geçirmeniz gerekir. Her gönderi arasındaki farkı vurgulamak için zıt renkler kullanmak, kullanıcıların yazarları hızlı bir şekilde tanımlamasına yardımcı olabilir, ancak aynı zamanda blogunuzun stiline zarar verebilir ve içeriğinizi okumayı zorlaştırabilir.

Yazara Göre Divi Blog Yazılarını Renklendirme (2 Adımda)

Şimdi teoriyi ele aldık, şimdi Divi blog gönderilerini nasıl renklendireceğimize geçme zamanı. Bu özellik etkinleştirildiğinde, sadece iki adım alır, ama başlamadan önce yapmak için bazı hususlar vardır.

Yeni başlayanlar için, değişiklik yaparken her zaman iyi bir fikir olan WordPress sitenizi yedeklemek isteyeceksiniz. İkinci olarak, bir Divi alt teması oluşturmak isteyeceksiniz, böylece tema güncellendikten sonra yaptığınız değişiklikler kalacaktır.

Son olarak, bir numaralı adım için bir FTP istemcisi kullanmanız gerekecek. FileZilla kullanacağız, ancak tercih ettiğiniz başka bir araç varsa, onun için gidin.

Adım 1: Alt Temanızın functions.php dosyasına bir Kod Parçacığı ekleyin

Bunu yapmak için FTP istemcinizi açmanız ve sitenizin sunucusunda oturum açmanız gerekir. Oradan public_html / wp-content/themes/ dizinine gidin, ardından alt temanızın klasörünü bulun. Public_html veya kök klasörün, barındırıcınıza bağlı olarak www veya sitenizin alan adından sonra adlandırılabileceğini unutmayın:

Alt temanızın klasörünü bulduktan sonra açın ve içindeki functions.php dosyasını arayın. Şimdi, üzerine sağ tıklayın ve View/Edit yazan seçeneğe basın:

Bu, dosyayı varsayılan metin düzenleyicinizle açmanızı ister. Bir alt temayla uğraştığımız için, function.php dosyanız, üst öğesinin işlevlerini sıraya koymak dışında çoğunlukla çıplak olmalıdır. Biz otomatik yazar- önek ile yazarların her biri için yeni bir sınıf yaratan bir ön bilgi eklemek için gidiyoruz. Örneğin, John adında bir WordPress kullanıcınız varsa, Author-john sınıfını kullanabilirsiniz. Bu, daha sonra bazı CSS kodları eklememizi sağlayacaktır.

Ardından, // END ENQUEUE PARENT ACTION satırından sonra aşağıdaki PHP parçacığını ekleyin:

function et_set_author_class( $classes ) {$classes[] = 'author-' . strtolower( str_replace( ' ', '-', get_the_author() ) );

return $classes;}

add_filter( 'post_class', 'et_set_author_class' );

Şimdi değişikliklerinizi kaydedin, düzenleyiciyi kapatın ve işiniz bitti! Hangi yazarla uğraşıyor olursanız olun, sınıfınızın çalışması için küçük harfli karakterler kullanmanız gerekeceğini unutmayın. Bu ikinci adım için önemli olacak.

Adım #2: Divi'nin Özel CSS Seçeneğini Kullanarak Her Yazar İçin Bir Renk Belirtin

Artık yeni fonksiyonumuz hazır, sonraki adım, yazarlarınızın her biri için bir renk belirlemek. Divi, Özel CSS özelliği ile bunu yapmanızı sağlar, çünkü oraya eklediğiniz herhangi bir kod tüm temanızı etkiler. Bulmak için WordPress panonuza gidin ve Divi > Tema Seçenekleri sekmesine gidin, ardından sayfanın sonundaki Özel CSS kutusuna gidin:

Yazarlarınızın her biri için bu alana yeni bir CSS satırı eklemeniz gerekecek. Örneğin, yazar1 kullanıcı adına sahip bir yazarınız varsa, onlar için belirli bir rengi şu şekilde ayarlarsınız:

.author-author1 {background-color: #C1F3FA !important;}

Unutmayın Kullanıcı adınızın ne olursa olsun, dersinize yazar- önek eklemek gerekmez. Bir arka plan rengi belirttikten sonra, kodun !important olduğunu bildirdiğinizden de emin olmanız gerekir. Basitçe söylemek gerekirse, bu koda daha fazla ağırlık verir ve ortaya çıkabilecek herhangi bir çakışmayı geçersiz kılar - onsuz bu özellik çalışmaz.

Son bir örnek üzerinden gidelim. Bunda iki yazara farklı renkler atayacağız. Divi özel CSS alanımıza eklediğimiz kod:

.author-author1 {background-color: #C1F3FA !important;}

.author-author2 {background-color: #F9FCB8 !important;}

Şimdi, ön uçtan nasıl göründüğü:

Renk seçiminizi bir kenara bırakırsak, Divi blog yazılarınızda yapabileceğiniz başka değişiklikler de var. Örneğin, blog alıntılarınızın uzunluğunu değiştirebilir veya posta 'kartlarınızı' birçok şekilde şekillendirebilirsiniz. Ana hedefiniz kendi blogunuz için mükemmel stili bulmak olmalıdır, bu nedenle Divi ile oynamaktan ve neler yapabileceğini görmekten korkmayın!

Çözüm

Blog gönderilerinizi yazarlarına göre renk kodlaması, kullanıcının içeriğinizde daha kolay gezinmesine yardımcı olabilecek basit bir özelliktir (özellikle kapsamlı bir arşiviniz varsa). Ayrıca, kullanıcılarınızın çoğu, en sevdikleri yazarın gönderilerini yalnızca renklerine göre tanıyabilmeyi muhtemelen takdir edecektir.

Dosyaları değiştirmeye başlamadan önce sitenizi yedeklemeyi ve bir alt tema ayarlamayı unutmayın, böylece değişiklikleriniz gelecekte de kalıcı olur. Bu yapıldıktan sonra, Divi blog gönderilerinizi yazara göre renk kodlamak için izlemeniz gereken iki adım şunlardır:

1. Alt temanızın functions.php dosyasını değiştirin.
2. Divi'nin özel CSS seçeneğini kullanarak yazarlarınızın her biri için bir renk belirleyin.

Divi blog gönderilerini yazara göre nasıl renklendireceğinizle ilgili sorularınız mı var? Aşağıdaki yorumlar bölümünde sorun!

RaZZers / Shutterstock.com'dan makale küçük resmi.