วิธีเพิ่มเทมเพลตและการออกแบบที่กำหนดเองในรูปแบบโพสต์บล็อกของ Divi (ตอนที่ 2 จาก 3)
เผยแพร่แล้ว: 2017-05-03ยินดีต้อนรับสู่วันที่ 2 จาก 3 ในซีรีส์ของเราเกี่ยวกับวิธีเพิ่มสไตล์ที่กำหนดเองลงในรูปแบบโพสต์ในบล็อกของ Divi ตามค่าเริ่มต้น Divi มาพร้อมกับรูปแบบโพสต์บล็อกหกรูปแบบ: มาตรฐาน วิดีโอ เสียง ใบเสนอราคา แกลเลอรี และลิงก์ ในชุดนี้เราจะสอนวิธีปรับแต่งด้วย php และ css
เมื่อวานนี้ ฉันได้แนะนำคุณเกี่ยวกับวิธีใช้ Desktopserver เพื่อสร้างการติดตั้ง WordPress ในเครื่อง ฉันยังแสดงวิธีตั้งค่าธีมลูกให้คุณดูด้วย ทั้งสองสิ่งนี้เป็นรากฐานที่ยอดเยี่ยมสำหรับโครงการใดๆ ที่คุณกำลังทำ และมันสมบูรณ์แบบสำหรับสิ่งที่เราจะทำในวันนี้และพรุ่งนี้
วันนี้เราจะมาแก้ไขโค้ด PHP ในไฟล์ single.php ของ Divi เพื่อให้ได้เลย์เอาต์ที่ไม่เหมือนใครสำหรับรูปแบบโพสต์บล็อกของคุณ หากคุณยังไม่คุ้นเคยกับ PHP อยู่แล้ว ก็ไม่ต้องกังวล ไม่มากและก็ทำได้ไม่ยาก ฉันจะแนะนำคุณอย่างละเอียดว่าคุณต้องการรหัสอะไรและจะใส่ไว้ที่ไหน
หลังจากที่เราแก้ไขไฟล์ single.php แล้ว ในที่สุดเราก็พร้อมสำหรับส่วนสุดท้ายของซีรีส์ของเรา พรุ่งนี้เป็นเรื่องของการจัดสไตล์และค้นหาว่ารูปแบบโพสต์บล็อกที่ยอดเยี่ยมสามารถมองบนบล็อกของคุณได้อย่างไร
มาเริ่มกันเลย.
สิ่งที่คุณต้องการสำหรับบทช่วยสอนนี้
นี่คือสิ่งที่คุณจะต้องปฏิบัติตามพร้อมกับบทช่วยสอนของวันนี้:
- โปรแกรมแก้ไขโค้ด เช่น Atom, Sublime, Brackets หรือ Notepad + + (อะไรก็ได้ที่คุณต้องการ)
- การติดตั้ง Local WordPress (เวอร์ชันล่าสุด) โดยใช้ DesktopServer (ยกเว้นกรณีที่คุณมีอยู่แล้ว)
- ธีม Divi Child ติดตั้งและเปิดใช้งานโดยเพิ่มสามไฟล์จากโพสต์ของเมื่อวาน (style.css, functions.php และ single.php)
การปรับแต่งเทมเพลต Single.php ของ Divi
เพิ่มส่วนฮีโร่ใหม่
เปิดไฟล์ single.php ของธีมลูกโดยใช้โปรแกรมแก้ไขข้อความ ตรวจสอบให้แน่ใจว่าคุณได้คัดลอกโค้ด single.php ทั้งหมดจากธีมหลัก (Divi) พร้อมไฟล์ของคุณ
ที่ด้านบนของไฟล์ ให้ค้นหา div เปิดที่มีรหัส "เนื้อหาหลัก"
<div id=”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 ของรูปภาพ) สำหรับรูปภาพเด่นที่กำหนดให้กับโพสต์

โค้ดถัดไปคือการรวมกันของ html และ php ที่เปิด div ใหม่ด้วยคลาสที่กำหนดเองที่เรียกว่า "hero-section" และการจัดรูปแบบอินไลน์เพื่อสร้างภาพพื้นหลังสองภาพที่วางซ้อนกัน

ภาพแรกถูกกำหนดให้เป็นการไล่ระดับสีเชิงเส้นซึ่งทำหน้าที่เป็นภาพซ้อนทับสีเข้มสำหรับภาพเด่น
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(); ?>
แค่นี้แหละสำหรับวันนี้!
ตอนนี้งานหนักเสร็จเรียบร้อยแล้ว และกรอบงานก็พร้อมสำหรับเราในการเพิ่มสไตล์ของเราลงในรูปแบบโพสต์ของเรา พรุ่งนี้ฉันจะตั้งค่าและจัดรูปแบบโพสต์บล็อกทั้ง 6 รูปแบบโดยใช้เทมเพลต single.php ที่เราเพิ่งสร้างขึ้น

กรุณาโพสต์ความคิดเห็นของคุณด้านล่างและฉันจะพยายามอย่างดีที่สุดเพื่อแก้ไขปัญหาที่คุณอาจมี หากเป็นไปได้ โปรดตรวจสอบให้แน่ใจว่าคุณได้ติดตั้ง WordPress และ Divi เวอร์ชันล่าสุดเพื่อหลีกเลี่ยงความขัดแย้งที่อาจเกิดขึ้น
จนกว่าจะถึงพรุ่งนี้!
