如何将自定义模板和设计添加到 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,以避免任何潜在的冲突。

直到明天!