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

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

Yayınlanan: 2017-05-03

Divi'nin Blog Gönderisi Formatlarına Özel Stiller Ekleme serimizin 2. 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.

Dün, yerel bir WordPress yüklemesi oluşturmak için Desktopserver'ı nasıl kullanacağınız konusunda size yol gösterdim. Ayrıca size bir çocuk temasının nasıl kurulacağını da gösterdim. Bunların her ikisi de üzerinde çalıştığınız herhangi bir proje için harika bir temeldir ve bugün ve yarın yapacaklarımız için mükemmeldir.

Bugün, blog yazı formatlarınız için tamamen benzersiz bir düzen elde etmek için Divi'nin single.php dosyasındaki bazı PHP kodlarını düzenleyeceğiz. PHP'ye zaten aşina değilseniz, endişelenmeyin. Çok fazla değil ve yapması zor değil. Size tam olarak hangi koda ihtiyacınız olduğunu ve nereye koyacağınızı anlatacağım.

Single.php dosyamızı düzenledikten sonra nihayet serimizin son bölümüne hazır olacağız. Yarın tamamen stil ve blog gönderisi biçimlerinin blogunuzda ne kadar havalı görünebileceğini bulmakla ilgili.

Başlayalım.

Bu Eğitim İçin Neye İhtiyacınız Var?

Bugünün öğreticisiyle birlikte izlemeniz gerekenler:

  • Atom, Sublime, Brackets veya Notepad + + gibi bir kod düzenleyici (hangisini tercih ederseniz)
  • DesktopServer kullanan bir Yerel WordPress Kurulumu (en son sürüm) (zaten bir tane yoksa)
  • Dünün gönderisinden eklenen üç dosyayla (style.css, functions.php ve single.php) yüklü ve aktif bir Divi Çocuk Teması

Divi'nin Single.php Şablonunu Özelleştirme

Yeni Kahraman Bölümü Ekleme

Metin düzenleyicinizi kullanarak alt temanızın single.php dosyasını açın. Dosyanızla birlikte ana temadaki (Divi) single.php kodunun tamamını kopyaladığınızdan emin olun.

Dosyanın üst kısmında, "ana içerik" kimliğine sahip açılış div'ini bulun. 

<div id=”main-content”>

Ardından, "ana içerik" açılış div'inin hemen altına aşağıdakini girin: 

<?php $featured_image_src = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_ID() ), 'full' ); ?>
	
	<div class="hero-section" style="background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url('<?php printf ($featured_image_src[0])?>');">
	
	<h1 class="entry-title"><?php the_title(); ?></h1>
	
	<?php et_divi_post_meta(); ?>
	
	</div>

İşte bu kodun single.php dosyanıza yaptığı şey.

İlk olarak, "$featured_image_src" adlı bir değişkene, gönderiye atanan öne çıkan resim için resim kaynağını (resmin url'si olan) "alacak" bir değer atanır.

Bir sonraki kod, yeni div'i "hero-section" adı verilen özel bir sınıf ve birbirinin üzerine yığılmış iki arka plan görüntüsü oluşturmak için bazı satır içi stiller ile açan bir html ve php kombinasyonudur.

İlk görüntü, öne çıkan görüntü için karanlık bir kaplama görevi gören doğrusal bir gradyan olarak tanımlanır. 

Linear-gradient (rgba(0,0,0,0.3), rgba(,0,0,0,0.3))

Ve ikinci görüntü (özellikli görüntü) bir virgülle ayrılır ve varsayılan olarak ilk görüntünün arkasına yığılır. 

url('<?php printf ($featured_image_src[0])?>')

Daha önce tanımlanan Notice değişkeni, öne çıkan görüntüyü “kahraman bölümünün” arka planı olarak ayarlamak için kullanılır.

Listelenen ikinci görüntü, otomatik olarak ilk görüntünün arkasına yığıldığından, bu kombinasyon, kahraman bölümü görüntüsünün üzerinde koyu renkli bir kaplama oluşturur.

Artık, gönderinize öne çıkan bir resim eklediğinizde, otomatik olarak koyu bir kaplama uygulanacaktır.

Bir sonraki kod parçası, gönderinizin başlığını yeni kahraman bölümü div'inizin içine ekler. 

<h1 class="entry-title"><?php the_title(); ?></h1>

Son kod parçası, meta içeriğini başlığın altına ve kahraman bölümü div'inin içine ekler. 

<?php et_divi_post_meta(); ?>

İşte bu yeni bölüm ve stil, yarınki gönderide başarmamıza izin verecek:

İhtiyacınız Olmayan Şeyleri Çıkarmak

Öne çıkan görseliniz, gönderi başlığınız ve gönderi metanız için yeni bir bölümünüz olduğundan, varsayılan olarak öne çıkan görselinizi, gönderi başlığınızı ve gönderi metanızı görüntülemek için kullanılan üç kod bölümünü çıkarmanız gerekir.

Gönderi başlığını gösteren h1 etiketini çıkarmanız gerekecek: 

<h1 class="entry-title"><?php the_title(); ?></h1>

Yazı metasını görüntüleyen kodu çıkarmanız gerekecek: 

<?php et_divi_post_meta(); ?>

Ve kodu çıkarmanız ve öne çıkan resmin küçük resmini görüntülemeniz gerekecek: 

print_thumbnail( $thumb, //$thumbnail["use_timthumb"], $titletext, //$width, $height );

İşte yeni single.php dosyasının tüm kodu. Sıkışırsanız kopyalayıp yapıştırmaktan çekinmeyin.

Not: Bu, kayan bir kod kutusudur. Hepsini almak için seçip sürüklemeniz gerekecek. 

<?php

get_header();

$show_default_title = get_post_meta( get_the_ID(), '_et_pb_show_title', true );

$is_page_builder_used = et_pb_is_pagebuilder_used( get_the_ID() );

?>

<div id="main-content">

<?php $featured_image_src = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_ID() ), 'full' ); ?>
	
	<div class="hero-section" style="background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url('<?php printf ($featured_image_src[0])?>');">
	
	<h1 class="entry-title"><?php the_title(); ?></h1>
	
	<?php et_divi_post_meta(); ?>
	
	</div>


	<div class="container">
		<div id="content-area" class="clearfix">
			<div id="left-area">
			<?php while ( have_posts() ) : the_post(); ?>
				<?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 the_ID(); ?>" <?php post_class( 'et_pb_post' ); ?>>
					<?php if ( ( 'off' !== $show_default_title && $is_page_builder_used ) || ! $is_page_builder_used ) { ?>
						<div class="et_post_meta_wrapper">
					<!-- h1 was here -->

						<?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["thumb"];

								$post_format = et_pb_post_format();

								if ( 'video' === $post_format && false !== ( $first_video = et_get_first_video() ) ) {
									printf(
										'<div class="et_main_video_container">
											%1$s
										</div>',
										$first_video
									);
								} else if ( ! in_array( $post_format, array( 'gallery', 'link', 'quote' ) ) && 'on' === et_get_option( 'divi_thumbnails', 'on' ) && '' !== $thumb ) {
	
	
	
								} else if ( 'gallery' === $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 'audio' :
										printf(
											'<div class="et_audio_content%1$s"%2$s>
												%3$s
											</div>',
											esc_attr( $text_color_class ),
											$inline_style,
											et_pb_get_audio_player()
										);

										break;
									case 'quote' :
										printf(
											'<div class="et_quote_content%2$s"%3$s>
												%1$s
											</div> <!-- .et_quote_content -->',
											et_get_blockquote_in_content(),
											esc_attr( $text_color_class ),
											$inline_style
										);

										break;
									case 'link' :
										printf(
											'<div class="et_link_content%3$s"%4$s>
												<a href="%1$s" class="et_link_main_url">%2$s</a>
											</div> <!-- .et_link_content -->',
											esc_url( et_get_link_url() ),
											esc_html( et_get_link_url() ),
											esc_attr( $text_color_class ),
											$inline_style
										);

										break;
								}

							endif;
						?>
					</div> <!-- .et_post_meta_wrapper -->
				<?php  } ?>

					<div class="entry-content">
					<?php
						do_action( 'et_before_content' );

						the_content();

						wp_link_pages( array( 'before' => '<div class="page-links">' . esc_html__( 'Pages:', 'Divi' ), 'after' => '</div>' ) );
					?>
					</div> <!-- .entry-content -->
					<div class="et_post_meta_wrapper">
					<?php
					if ( et_get_option('divi_468_enable') == 'on' ){
						echo '<div class="et-single-post-ad">';
						if ( et_get_option('divi_468_adsense') <> '' ) echo( et_get_option('divi_468_adsense') );
						else { ?>
							<a href="<?php echo esc_url(et_get_option('divi_468_url')); ?>"><img src="<?php echo esc_attr(et_get_option('divi_468_image')); ?>" alt="468" class="foursixeight" /></a>
				<?php 	}
						echo '</div> <!-- .et-single-post-ad -->';
					}
				?>

					<?php if (et_get_option('divi_integration_single_bottom') <> '' && et_get_option('divi_integrate_singlebottom_enable') == 'on') echo(et_get_option('divi_integration_single_bottom')); ?>

					<?php
						if ( ( comments_open() || get_comments_number() ) && 'on' == et_get_option( 'divi_show_postcomments', 'on' ) ) {
							comments_template( '', true );
						}
					?>
					</div> <!-- .et_post_meta_wrapper -->
				</article> <!-- .et_pb_post -->

			<?php endwhile; ?>
			</div> <!-- #left-area -->

			<?php get_sidebar(); ?>
		</div> <!-- #content-area -->
	</div> <!-- .container -->
</div> <!-- #main-content -->

<?php get_footer(); ?>

Bugünlük bu kadar!

Şimdi tüm sıkı çalışma tamamlandı ve çerçeve, stilimizi yazı formatlarımıza eklememiz için hazır. Yarın, az önce oluşturduğumuz single.php şablonunu kullanarak 6 blog yazısı formatının hepsini ayarlayacağım ve şekillendireceğim.

Lütfen yorumlarınızı aşağıya gönderin, yaşayabileceğiniz sorunları çözmek için elimden geleni yapacağım. Mümkünse, olası çakışmaları önlemek için lütfen WordPress ve Divi'nin en son sürümünün yeni bir yüklemesine sahip olduğunuzdan emin olun.

Yarına kadar!