Divi의 블로그 게시물 형식에 사용자 지정 템플릿 및 디자인을 추가하는 방법(3/2부)

게시 됨: 2017-05-03

Divi의 블로그 게시물 형식에 사용자 정의 스타일을 추가하는 방법에 대한 시리즈의 2/3일차에 오신 것을 환영합니다. 기본적으로 Divi에는 표준, 비디오, 오디오, 견적, 갤러리 및 링크의 6가지 블로그 게시물 형식이 제공됩니다. 이 시리즈에서는 php와 css를 사용하여 사용자 정의하는 방법을 알려줍니다.


어제 Desktopserver를 사용하여 WordPress의 로컬 설치를 만드는 방법을 안내했습니다. 또한 하위 테마를 설정하는 방법을 보여 주었습니다. 이 두 가지는 현재 진행 중인 모든 프로젝트의 훌륭한 기반이 되며 현재와 미래에 수행할 작업에 완벽합니다.

오늘 우리는 블로그 게시물 형식에 대해 완전히 독특한 레이아웃을 얻기 위해 Divi의 single.php 파일 내에서 일부 PHP 코드를 편집할 것입니다. PHP에 익숙하지 않더라도 걱정할 필요가 없습니다. 많지도 않고 어렵지도 않습니다. 정확히 어떤 코드가 필요한지, 어디에 넣어야 하는지 안내해 드리겠습니다.

single.php 파일을 편집하고 나면 마침내 시리즈의 마지막 부분을 준비할 것입니다. 내일은 스타일을 지정하고 블로그에서 멋진 블로그 게시물 형식을 볼 수 있는 방법을 찾는 것입니다.

시작하자.

이 튜토리얼에 필요한 것

오늘의 튜토리얼과 함께 따라야 할 사항은 다음과 같습니다.

  • Atom, Sublime, Brackets 또는 Notepad ++와 같은 코드 편집기(원하는 모든 것)
  • DesktopServer를 사용한 로컬 WordPress 설치(최신 버전)(이미 설치하지 않은 경우)
  • 어제 게시물(style.css, functions.php 및 single.php)에서 추가된 3개의 파일과 함께 설치되고 활성화된 Divi 하위 테마

Divi의 Single.php 템플릿 사용자 정의

새로운 영웅 섹션 추가

텍스트 편집기를 사용하여 자식 테마의 single.php 파일을 엽니다. 파일과 함께 상위 테마(Divi)의 모든 single.php 코드를 복사했는지 확인합니다.

파일 상단에서 ID가 "main-content"인 여는 div를 찾습니다.

<div id=”main-content”>

그런 다음 "main-content" 여는 div 바로 아래에 다음을 입력합니다.

<?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>

다음은 이 코드가 single.php 파일에 대해 수행하는 작업입니다.

먼저 "$featured_image_src"라는 변수에 게시물에 할당된 추천 이미지의 이미지 소스(이미지에 대한 URL)를 "가져오는" 값이 할당됩니다.

다음 코드는 "hero-section"이라는 사용자 정의 클래스와 인라인 스타일을 사용하여 새 div를 여는 html과 php의 조합으로 서로 위에 쌓인 두 개의 배경 이미지를 생성합니다.

첫 번째 이미지는 추천 이미지의 어두운 오버레이 역할을 하는 선형 그라데이션으로 정의됩니다.

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

그리고 두 번째 이미지(특집 이미지)는 쉼표로 구분되며 기본적으로 첫 번째 이미지 뒤에 쌓입니다.

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

앞서 정의한 주의 변수는 추천 이미지를 "영웅 섹션"의 배경으로 설정하는 데 사용됩니다.

나열된 두 번째 이미지는 첫 번째 이미지 뒤에 자동으로 쌓이기 때문에 이 조합은 영웅 섹션 이미지 위에 어두운 오버레이를 만듭니다.

이제 게시물에 추천 이미지를 추가할 때마다 어두운 오버레이가 자동으로 적용됩니다.

다음 코드 스니펫은 새 영웅 섹션 div 안에 게시물의 헤드라인을 추가합니다.

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

코드의 마지막 스니펫은 헤드라인 아래와 영웅 섹션 div 내에 포스트 메타 콘텐츠를 추가합니다.

<?php et_divi_post_meta(); ?>

다음은 이 새로운 섹션과 스타일을 통해 내일 포스트에서 달성할 수 있는 것입니다.

필요하지 않은 것 꺼내기

추천 이미지, 게시물 제목 및 게시물 메타에 대한 새 섹션이 있으므로 기본적으로 추천 이미지, 게시물 제목 및 게시물 메타를 표시하는 데 사용되었던 세 개의 코드 섹션을 제거해야 합니다.

게시물 제목을 표시하는 h1 태그를 제거해야 합니다.

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

게시물 메타를 표시하는 코드를 제거해야 합니다.

<?php et_divi_post_meta(); ?>

그리고 코드를 꺼내서 추천 이미지 썸네일을 표시해야 합니다.

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

다음은 새로운 single.php 파일의 전체 코드입니다. 막히면 복사하여 붙여 넣으십시오.

참고: 이것은 스크롤되는 코드 상자입니다. 모두 가져오려면 선택하고 드래그해야 합니다.

<?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(); ?>

오늘은 여기까지입니다!

이제 모든 작업이 완료되었으며 포스트 형식에 스타일을 추가할 수 있는 프레임워크가 준비되었습니다. 내일 저는 방금 만든 single.php 템플릿을 사용하여 6개의 블로그 게시물 형식을 모두 설정하고 스타일을 지정할 것입니다.

아래에 귀하의 의견을 게시해 주시면 귀하가 겪을 수 있는 문제를 해결하기 위해 최선을 다할 것입니다. 가능한 경우 잠재적인 충돌을 방지하기 위해 최신 버전의 WordPress 및 Divi를 새로 설치했는지 확인하십시오.

내일까지!