南平公司网站设计:如何在Divi的博客文章格式中添加自定义模板和设计

2019.05.06 |
标签

昨天,我向您介绍了如何使用Desktopserver创建WordPress的本地安装。我还教你如何设置一个儿童主题。这两项都是您正在进行的任何项目的一个很好的基础,对于我们今天和明天将要做的事情来说,这都是完美的。

今天,我们南平公司网站设计将在Divi的single.php文件中编辑一些PHP代码,以便为您的博客文章格式获得一个完全独特的布局。如果您还不熟悉PHP,那么就不用担心了。这不是很多,也不难做到。我将向您详细介绍您需要的代码以及将其放在何处。

在编辑了single.php文件之后,我们将最终为我们系列的最后一部分做好准备。明天的一切都是关于造型和找出有多酷的博客帖子格式可以看你的博客。

我们开始吧。

本教程需要什么?

以下是您在今天的教程中需要遵循的内容:

  • 代码编辑器

    例如原子,崇高,括号或记事本+(你喜欢什么)
  • 本地WordPress安装(最新版本)

    DesktopServer

    (除非你已经有了)
  • 已安装和活动的Divi子主题,并添加了三个文件

    从昨天的邮报

    (style.css、function s.php和single.php)

定制Divi的Single.php模板

增加一个新的英雄组

使用文本编辑器,打开子主题的single.php文件。确保您使用文件从父主题(Divi)复制了所有single.php代码。

在文件的顶部,用id“main-content”找到开头的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文件所做的操作。

首先,为分配给POST的功能图像分配一个名为“$FeedureImagesrc”的变量,该变量为指定给POST的功能图像“获取”图像源(它是图像的url)。

下一段代码是html和php的组合,它使用一个名为“英雄部分”的自定义类和一些内联样式打开新的div,以创建相互叠加在一起的两个背景图像。

第一幅图像定义为线性梯度,作为特征图像的暗覆盖。

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中添加POST元内容。

<?php et_divi_post_meta(); ?>

以下是这个新的章节和造型将让我们在明天的文章中完成的事情:

拿出你不需要的东西

南平公司网站设计由于您已经为您的功能图像、POST标题和POST元设置了一个新的部分,因此您需要取出三部分代码,这些代码用于默认情况下显示您的功能图像、帖子标题和POST元数据。

您需要取出显示POST标题的H1标记:

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

您需要取出显示POST元的代码:

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

今天到此为止!

现在,辛苦的工作已经完成,框架已经准备好了,我们可以将样式添加到POST格式中。明天,我将使用我们刚刚创建的single.php模板来设置和样式所有6种博客帖子格式。

请在下面发表你的意见,我会尽力解决你可能遇到的任何问题。如果可能,请确保您有一个最新版本的WordPress和Divi的新安装,以避免任何潜在的冲突。


相关推荐

南平高端网站设计:用Sketch和Flinto创建iOS应用程序
 

南平高端网站设计:用Sketch和Flinto创建iOS应用程序

欢迎回来!您现在应该有在本教程的第一部分..做得好!现在让我们将原型工具Flinto(用于Mac)投入使用,并使我们的屏幕焕发生机。快速说明:我们将保持相对简单。在本教程中,并不是所有的东西都是可点击的。但是,老...
2019.05.31
南平做网站:如何创建新的一年内容营销策略
 

南平做网站:如何创建新的一年内容营销策略

南平做网站在这篇文章中,我将告诉你为什么和如何创建你自己的内容营销策略。你将更有效地进行市场营销,并从博客中消除猜测。这是双赢。什么是内容营销?让我们南平做网站从一开始就开始:定义内容营销。内容营销是...
2019.04.29
南平企业网站开发:使用Divi主题的17个教育网站示例
 

南平企业网站开发:使用Divi主题的17个教育网站示例

像大多数企业一样,教育提供者需要设计良好的网站,为潜在的学生提供他们需要了解的关于学校或课程的一切信息。这意味着互联网上有很多教育网站可以帮助你为自己的设计提供灵感,而且和大多数领域一样,有些网站是用...
2019.04.29
南平企业网站建设:本地WordPress开发的优秀工具
 

南平企业网站建设:本地WordPress开发的优秀工具

南平企业网站建设当谈到WordPress开发时,本地的测试站点是一件好事。他们可以让你修补新的功能,插件和主题,而不用担心破坏任何东西-这是非常棒的!它们唯一的缺点是,不管您的是什么,它们都可能是一种痛苦的设...
2019.04.29

最新文章

南平建站:概念在Web设计中的应用
 

南平建站:概念在Web设计中的应用

在平面设计中,南平建站在设计时使用一个概念通常是有用的。一个概念是一个想法,你建立你的网站周围。它会把你的网站变成一个故事。如你所知,人们喜欢故事.我在读这本书有一天,我惊讶地发现,除了设计之外,概念在...
2019.05.31
南平高端网站设计:用Sketch和Flinto创建iOS应用程序
 

南平高端网站设计:用Sketch和Flinto创建iOS应用程序

欢迎回来!您现在应该有在本教程的第一部分..做得好!现在让我们将原型工具Flinto(用于Mac)投入使用,并使我们的屏幕焕发生机。快速说明:我们将保持相对简单。在本教程中,并不是所有的东西都是可点击的。但是,老...
2019.05.31
南平网页设计:WordPress主题和插件设计者的草图资源
 

南平网页设计:WordPress主题和插件设计者的草图资源

素描很受欢迎,但令人遗憾的是,设计工具这是在过去几年里真正起飞的。虽然您可以将它用于各种设计,但设计师使用Sketch的方法之一是为WordPress主题和插件创建设计。南平网页设计为了帮助那些正在使用Sketch的W...
2019.05.14
南平公司网站设计:如何使用Typeform创建时尚调查表单网站
 

南平公司网站设计:如何使用Typeform创建时尚调查表单网站

如果有一件事网上调查不是以他们的风格而出名,而是他们的风格。它们往往是枯燥乏味的事情,你只是从一个问题跳到另一个问题。然而,你没有理由不能在你的身上增加一点才能。南平公司网站设计在那里型态进来。这个工...
2019.05.14
南平企业网站制作:20+奇异平面设计网站的WordPress主题
 

南平企业网站制作:20+奇异平面设计网站的WordPress主题

为您的下一个项目寻找一些平面设计WordPress主题?非常赞成!它的简约外观和注重可用性,平面设计是一个伟大的选择,您的下一个WordPress网站。但许多流行的WordPress主题仍然挂在浮华的三维设计上,这些设计与...
2019.05.06

热门推荐

选择您希望南平网站设计成品的风格偏好,让我们通过精确的分析与筛选,为您推荐合适的版式布局,
为此,您可以节省最基本的沟通时间,
让我们把有限的时间,充分的用在对行业的分析及您企业网站建设的自身分析上吧
联系电话 400-6065-301

建站咨询 星总监

投诉