如何將自定義模板和設計添加到 Divi 的博客帖子格式(第 2 部分,共 3 部分)
已發表: 2017-05-03歡迎來到我們關於如何將自定義樣式添加到 Divi 的博客文章格式系列的第 2 天(共 3 天)。 默認情況下,Divi 提供六種博客文章格式:標準、視頻、音頻、引用、圖庫和鏈接。 在本系列中,我們將教您如何使用 php 和 css 自定義它們。
昨天,我向您介紹瞭如何使用 Desktopserver 創建本地安裝的 WordPress。 我還向您展示瞭如何設置子主題。 這兩者都是您正在從事的任何項目的良好基礎,並且非常適合我們今天和明天要做的事情。
今天我們將在 Divi 的 single.php 文件中編輯一些 PHP 代碼,以便為您的博客文章格式獲得一個完全獨特的佈局。 如果您還不熟悉 PHP,不用擔心。 這不是很多,也不難做到。 我將引導您準確了解您需要什麼代碼以及將它放在哪裡。
在我們編輯完 single.php 文件之後,我們終於為我們系列的最後一部分做好了準備。 明天是關於樣式和找出博客文章格式在您的博客上看起來有多酷。
讓我們開始吧。
本教程需要什麼
以下是您在今天的教程中需要遵循的內容:
- 代碼編輯器,例如 Atom、Sublime、Brackets 或 Notepad++(隨您喜歡)
- 使用 DesktopServer 的本地 WordPress 安裝(最新版本)(除非您已經擁有)
- 安裝並激活了 Divi 子主題,其中添加了昨天帖子中的三個文件(style.css、functions.php 和 single.php)
自定義 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)。

下一個代碼是 html 和 php 的組合,它使用一個名為“hero-section”的自定義類和一些內聯樣式打開新的 div,以創建兩個堆疊在彼此之上的背景圖像。

第一張圖像被定義為線性梯度,用作特徵圖像的深色疊加。
Linear-gradient (rgba(0,0,0,0.3), rgba(,0,0,0,0.3))
第二張圖片(特色圖片)用逗號分隔,默認情況下,堆疊在第一張圖片的後面。
url('<?php printf ($featured_image_src[0])?>')

前面定義的notice變量用於將特色圖片設置為“英雄部分”的背景。

因為列出的第二張圖片會自動堆疊在第一張圖片的後面,所以這種組合會在英雄部分圖片上創建深色疊加層。
現在,每當您在帖子中添加特色圖片時,都會自動應用深色疊加層。
下一段代碼在新的英雄部分 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,以避免任何潛在的衝突。
直到明天!
