Divi Blog Gönderi formatına özel bir şablon ve tasarım nasıl eklenir (Bölüm 2/3)
Divi Blog Gönderi formatına nasıl özel stil ekleyeceğinizle ilgili serimizde 3’ün 2. gününe hoş geldiniz. Varsayılan olarak Divi, altı blog yayın formatı ile birlikte gelir: standart, video, ses, alıntı, galeri ve bağlantılar. Bu seride size PHP ve CSS olarak nasıl ayarlayacağınızı öğretiyoruz.
Dün, yerel bir WordPress kurulumu oluşturmak için bir DesktopServer kullanarak size rehberlik ettim. Ayrıca nasıl bir çocuk teması hazırlayacağımı da gösteriyorum. Bu iki şey üzerinde çalıştığınız herhangi bir proje için iyi bir temeldir ve bugün ve yarın yapacağımız şey için çok uygundur.
Bugün blog yazısı formatınız için gerçekten benzersiz bir düzen almak için single.php divi dosyasında birkaç php kodunu düzenleyeceğiz. PHP’ye alışık değilseniz endişelenmeyin. Çok fazla değil ve yapmak zor değil. Hangi koda ihtiyacınız ve nereye koyacağınız konusunda size rehberlik edeceğim. Single.php dosyası düzenlendikten sonra, nihayet serimizin son bölümüne hazır olacağız. Yarın, blog yayın formatının blogunuzda ne kadar havalı olduğunu organize etmek ve bulmakla ilgilidir. Başlayalım. Bu öğretici için ihtiyacınız olan şey, bugünün öğreticisiyle birlikte takip etmeniz gereken şeydir:
Atomlar, yüce, parantez veya not defteri ++ gibi kod editörleri (ne istersen)
Desktopserver kullanarak yerel WordPress kurulumu (en son sürüm) (zaten sahip olmadığınız sürece)
Divi Children’ın temaları, dünkü yayından üç dosya eklenerek yüklü ve etkin (style.css, function.php ve single.php)
Single.php Divi Şablonu Ayarlama Metin düzenleyicinizi kullanarak yeni bir kahraman bölümü ekler, single.php dosyasını açın çocuk temanızı. Tüm Single.php kodunu ana temadan (DIVI) dosyanızla kopyaladığınızdan emin olun. Dosyanın üst kısmında, “Ana İçerik” kimliği ile Open Div’i ziyaret edin.
Sonra “ana içeriğin” hemen altına aşağıdakileri girin:
<div class = "kahraman kesimi" style = "arka plan-image: lineer-gradyan (RGBA (0.0.0.0.3), RGBA (0.0.0.0.3)), url (' ‘); “>
Bu kodun single.php dosyanızda yaptığı şey budur.
İlk olarak, “$ featured_image_src” adlı değişkene, yazıya ayarlanan üstün görüntü için görüntünün kaynağını (resme url olan) “alan” bir değer verilir.Bir sonraki kod, “Parçalar” adlı özel bir sınıfa sahip yeni bir div açan HTML ve PHP’nin bir kombinasyonu ve birbirinin üstünde istiflenmiş iki arka plan görüntüsü yapmak için bazı satırlar. İlk görüntü, üstün görüntüler için karanlık bir kaplama görevi gören doğrusal bir gradyan olarak tanımlanır. Doğrusal Sınıf (RGBA (0,0,0,0,3), RGBA (, 0,0,0,0,3)) Ve ikinci resim (üstün görüntü) virgülle ayrılır ve varsayılan olarak ilk görüntünün arkasına istiflenir.
Url (”)
Daha önce belirlenen bildirim değişkeni, üstün görüntüyü “kahraman bölümü” nin arka planı olarak ayarlamak için kullanılır. Kayıtlı ikinci görüntü ilk görüntünün arkasına otomatik olarak biriktirdiğinden, bu kombinasyon kahramanın resminin üzerinde karanlık bir kaplama oluşturur. Şimdi, gönderinize her üstün görüntüler eklediğinizde, karanlık streç otomatik olarak uygulanacaktır. Bir sonraki kod snippet, yeni kahramanınızın Div’indeki yayınınıza başlığı ekler. Kodun son görüntüleri, Meta POS içeriğini başlık altına ve Div the Hero bölümüne ekler. Yarın bu yeni bölümde ve stilde başaracağımız şey budur: İhtiyacınız olmayan şeyi alın çünkü üstün resimler, yayın başlıkları ve yayınlarınız için yeni bir bölümünüz var, varsayılan olarak üstün resminizi, yayın başlığınızı ve meta postanızı görüntülemek için kullanılan kodun üç bölümünü almanız gerekir. Gönderi başlıkını görüntüleyen bir H1 etiketi yayınlamanız gerekir: Meta yayınını görüntüleyen bir kod yayınlamanız gerekir:
Ve bir kod yayınlamanız ve bir amiral gemisi resim resmini görüntülemeniz gerekir: print_thumbnail ($ thumb, // $ thumbnail [“use_timthumb”], $ titlext, // $ genişlik, $ yükseklik);
İşte yeni single.php dosyası için kodun tamamı. Kilitlenirseniz kopyalamak ve yapıştırmaktan çekinmeyin. Not: Bu bir yuvarlanma kodu kutusu. Her şeyi almak için seçmeli ve sürüklemelisiniz.
<? Php
get_header();$show_default_title = get_post_meta( get_the_ID(), ‘_et_pb_show_title’, true );
$ IS_PAGE_BUILDER_USSED = ET_PB_IS_PAGEBUILDER_USSED (get_the_id ());
?>
<div class = "kahraman kesimi" style = "arka plan-image: lineer-gradyan (RGBA (0.0.0.0.3), RGBA (0.0.0.0.3)), url (' ‘); “>
<?php if (et_get_option('divi_integration_single_top') ” && et_get_option(‘divi_integrate_singletop_enable’) == ‘on’) echo(et_get_option(‘divi_integration_single_top’)); ?>
<article id="post-” >
<? Php
if ( ! post_password_required() ) :
//et_divi_post_meta();
$thumb = '';
$width = (int) apply_filters( 'et_pb_index_blog_image_width', 1080 );
$height = (int) apply_filters( 'et_pb_index_blog_image_height', 675 );
$classtext = 'et_featured_image';
$titletext = get_the_title();
$thumbnail = get_thumbnail( $width, $height, $classtext, $titletext, $titletext, false, 'Blogimage' );
$ thumb = $ thumbnail ["başparmak"]; $ post_format = et_pb_post_format ();
if ('video' === $ Post_format && false! == ($ first_video = et_get_first_video ()) {
printf (
'
%1 $ s
‘,
$ first_video
);
} else if (! in_array ($ post_format, dizi (‘galeri’, ‘link’, ‘quote’, ‘quote’) && ‘=== et_get_option (‘ divi_thumbnails ‘,’ on ‘) &&’! == $ başparmak) {
} else if (‘galeri’ === $ Post_format) {
et_pb_gallery_images ();
}
?>
<? Php
$ text_color_class = et_divi_get_post_text_color ();
$ inline_style = et_divi_get_post_bg_inline_style ();
Switch ($ Post_format) {
Case 'Ses':
printf (
'
%3 $ s
‘,
ESC_ATTR ($ text_color_class),
$ inline_style,
et_pb_get_audio_player ()
);
kırmak;
Case ‘Alıntı’:
printf (
‘
%1 $ s
‘,
et_get_blockquote_in_content (),
ESC_ATTR ($ text_color_class),
$ inline_style
);
kırmak;
Durum ‘bağlantı’:
printf (
‘
%2 $ s
‘,
ESC_URL (ET_GET_LINK_URL ()),
ESC_html (ET_GET_LINK_URL ()),
ESC_ATTR ($ text_color_class),
$ inline_style
);
kırmak;
}
Endif;
?>
‘
‘. ESC_HTML __ (‘sayfalar:’, ‘divi’), ‘=>’ ‘);>) ;>
<? Php
if (et_get_option ('divi_468_enable') == 'açık') {
echo '
';
if (et_get_option ('divi_468_adsense') ”) echo (et_get_option (‘divi_468_adsense’));
else {?>
<a href="<?
<? Php}
echo ' ‘;
}
?>
<? Php if (et_get_option ('divi_integration_single_bottom') ” && et_get_option (‘divi_integrat_singlebottom_enable’) == ‘on’) echo (‘divi_integrasyon_single_bottom’); ?>
Hepsi bugün için!Şimdi sıkı çalışma bitti ve çerçeve tarzımızı yazı formatımıza eklememize hazır.Yarın 6 blog yayın formatının tamamını yeni yaptığımız tek bir.php şablonunu kullanarak hazırlayacağım ve düzenleyeceğim. Lütfen yorumlarınızı aşağıya gönderin ve sahip olabileceğiniz sorunların üstesinden gelmek için en iyisini deneyeceğim.Mümkünse, potansiyel çatışmayı önlemek için WordPress ve Divi’nin en son sürümünü yüklediğinizden emin olun.Yarın görüşürüz!
