Divi'nin Blog Gönderi Formatlarına Özel Şablonlar ve Tasarım Nasıl Eklenir (Bölüm 1/3)

Divi'nin Blog Gönderisi Formatlarına Özel Stiller Ekleme serimizin 3. Gününe hoş geldiniz. Varsayılan olarak Divi, altı blog yazısı biçimiyle gelir: Standart, Video, Ses, Alıntı, Galeri ve Bağlantı. Bu seride size bunları php ve css ile nasıl özelleştireceğinizi öğretiyoruz.

Önümüzdeki 3 gün boyunca Divi'nin tüm blog gönderisi biçimlerini özelleştirme konusunda size yol göstereceğim: Standart, Alıntı, Bağlantı, Video, Ses ve Galeri. Bunların hepsini düzenlemek (aklımdaki tasarımlar için) single.php şablon dosyasını düzenlemeyi gerektiriyor. Bunu düzgün bir şekilde yapmak için, değiştirilmiş Single.php şablon dosyamızı içerecek bir Divi alt teması oluşturmalıyız. Ve bunu yapmadan önce, Desktopserver kullanarak yerel bir WordPress kurulumu da oluşturmalıyız. Bu, canlı bir web sitesinde hiçbir şeyi riske atmadan oynamamız için güvenli bir geliştirme alanı sağlayacaktır.

Bu yazının başlığından da anlaşılacağı gibi, başından sonuna kadar her şeyi kapsamak için üç güne ihtiyacımız olacak. Bugün size Desktopserver kullanarak yerel bir WordPress yüklemesinin nasıl oluşturulacağını ve değiştirilmiş Blog Gönderi Formatlarımızı barındırmak için kullanacağımız alt temayı nasıl oluşturacağınızı göstereceğim.

Bu serinin burada yayınlanan öğreticilerin çoğundan daha "ileri" olduğunu düşünürdüm. Ancak, yeni başlayan biriyseniz, bu seri aslında geliştirme becerilerinizi geliştirmeniz ve güvenli, ücretsiz, rehberli bir yazı dizisinde yeni bir şeye dalmanız için harika bir fırsat.

Başlayalım!

Ne Olacağına Kısa Bir Bakış

İşte bu seride gerçekleştireceğimiz tasarımlara hızlı bir bakış. Bugünkü gönderide onlar için zemin hazırladıktan sonra, single.php dosyasını (tüm blog yazısı formatlarımızın şablonu) nasıl düzenleyeceğinizi ve ardından bu şablonu CSS ile her bir format için nasıl daha fazla stillendireceğinizi göstereceğim. Oldukça uzun bir yolculuk olacak!

Geliştirme Varlıklarınızı Hazırlama

İşte bugünün öğreticisi ve önümüzdeki 2 gün için oluşturduğum öğreticilerle birlikte izlemeniz gerekenler:

• Atom, Sublime, Brackets veya Notepad + + gibi bir kod düzenleyici (hangisini tercih ederseniz)
• DesktopServer kullanarak Yerel WordPress Kurulumu (zaten yoksa)
• Bizim yaratacağımız bir Divi Çocuk Teması!

Bu seriyi takip edecekseniz, bunu yalnızca test ve geliştirme için ayarlanmış bir WordPress kurulumunda yapmanızı şiddetle tavsiye ederim. İstediğim son şey, insanların canlı web sitelerini denemeleri ve bir şeyleri karıştırmaları.

WordPress'in yerel geliştirme kurulumunu nasıl kuracağınızdan emin değilseniz, masaüstü sunucusunun ücretsiz sürümünü kullanmanızı öneririm. Sadece birkaç dakika içinde yerel bir WordPress kurulumu ile çalışır duruma gelmeniz gerekir (abartmadan).

Bilgisayarınızda DesktopServer Kurulumu

İşte DesktopServer'ı kullanmaya başlamak için birkaç adım.

Web sitelerini ziyaret edin ve sağ sütundaki “Ücretsiz – Sepete Ekle” düğmesine tıklayarak Ücretsiz Sürümü indirin.

Ödeme sayfasında kişisel bilgilerinizi girin, şartlarını kabul edin ve satın al'a tıklayın.

Satın Alma Onayı sayfasında, işletim sisteminiz için doğru indirmeyi seçin. Mac veya Windows'un en son sürümünü yüklemenizi öneririm.

İndirdiğiniz dosyayı açın ve uygulamanın Kurulumunu bilgisayarınızda çalıştırın.

Artık DesktopServer uygulamasını Yerel Disk (C:) Sürücünüzün kökünde “xampplite” adlı bir klasörde bulabilirsiniz.

Desktopserver'ı kurduktan sonra, yerel wordpress kurulumunuzu kurmaya başlamanıza yardımcı olacak talimatlarını okuyun.

Bu Seri İçin Divi Çocuk Temanızı Oluşturma

Divi alt teması oluşturmak için WordPress tema dosyalarınıza erişmeniz gerekir. DesktopServer'ı kurarken varsayılanları izlediyseniz, tema dosyalarınız “Web Siteleri” etiketli bir klasör içindeki belgeler klasörünüzde bulunmalıdır.

Temalar klasörünü bulun ve “alt” adlı yeni bir klasör ekleyin.

Şimdi style.css dosyanızı alt tema klasörünüze ekleyeceksiniz. Bu, alt temanızı oluşturacak 3 dosyadan ilkidir.

Metin düzenleyicinizi açın ve belgenin en üstünde aşağıdaki CSS başlığıyla yeni bir dosya oluşturun.

/*
 Theme Name:     Divi Child
 Theme URI: 
 Description:	   Divi Child Theme
 Author:
 Author URI:   
 Template:       Divi
 Version:        1.0.0
 License:  
 License URI:  
 Tags:  
 Text Domain: 
*/

Alt tema CSS üstbilgisi için geri kalan bilgileri sitenize gerektiği gibi sığdırmak için ekleyebilirsiniz.

Yeni dosyanızı "style.css" adı ve uzantısıyla kaydedin. Ve onu alt tema klasörüne ekleyin:

Alt tema klasörünüze eklemeniz gereken bir sonraki dosya, functions.php dosyasıdır.

Metin düzenleyicinize geri dönün ve başka bir yeni dosya oluşturun ve aşağıdaki php kodunu belgenin en üstüne ekleyin:

<?php 
function my_theme_enqueue_styles() {
    $parent_;
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

Dosyayı tam adı ve uzantısı "functions.php" ile kaydedin ve alt klasörünüze ekleyin:

Alt temanız için ihtiyacınız olan son dosya Divi'nin single.php dosyasıdır. Alt tema style.css dosyanıza yeni CSS eklemenin yanı sıra, farklı gönderi türlerinin düzenini düzenlemek için Divi'nin single.php dosyasının bir kopyasını kullanacağız.

Single.php dosyasını bulmak için Divi (ana) tema klasörüne gidin.

Single.php dosyasını kopyalayın ve alt tema klasörünüze yapıştırın:

Artık alt temanızın single.php dosyasında özelleştirmeler yapmaya hazırız.

Yeni Çocuk Temanızı Etkinleştirin

Single.php şablon dosyasını özelleştirmeye başlamadan önce, devam edin ve yeni alt temanızı etkinleştirin.

WordPress kontrol panelinden Görünüm → Temalar'a gidin ve Divi Child adlı yeni alt temanızda Etkinleştir düğmesini seçin.

Şimdilik bu kadar!

Bunun henüz çok heyecan verici olmadığını biliyorum ama umarım benimle kalırsın. Projeleriniz için doğru temeli atmak önemlidir ve bu yazı başlamak için harika bir yerdir.

Yarın Ne Var?

Artık yerel WordPress kurulumunuz ve alt temanız etkinleştirildiğinde, bu serinin bir sonraki bölümüne hazırsınız. Yarın size blog yazı formatlarınız için tamamen benzersiz bir düzen oluşturmak için Divi'nin single.php dosyasını nasıl düzenleyeceğinizi göstereceğim.

Geri bildiriminizi aşağıda okumak için sabırsızlanıyorum. Yerel bir sunucuda bir alt tema kurmak, ilk zamanlayıcılar için bazı sorunlara yol açabilir, bu yüzden elimden geldiğince soruları yanıtlamaya çalışacağım. Ancak, daha fazla teknik sorununuz varsa, destek ekibimiz de size yardımcı olmaya hazırdır. Desktop Server'daki insanlardan bahsetmiyorum bile!

Şerefe!