在WordPress中使用旋转文字创建“会话”横幅：第2部分-CSDN博客

在这两套教程中，我们将创建一个滑块来显示自定义帖子类型的帖子，从而在图像中的两个说话者之间创建对话效果。

在上一部分中，我们注册了帖子类型，设置了滑块并将其添加到我们的网站标题中。现在我们需要放置文本并添加样式。

您需要什么

要继续进行，您需要：

WordPress的开发安装
代码编辑器
安装了免费的响应式主题
上一部分的“响应式”子主题

我正在处理的示例是我正在为客户开发的真实世界站点，该站点正在运行“响应式”主题的子主题。我已经创建了Responsive主题的子代，并为其添加了自定义样式以及该主题的functions.php文件中的functions.php 。您可以将其添加到自己的主题中，也可以像我一样创建Responsive的子主题。

当前的滑块

该网站现在的外观如下：

滑块在那里，但是它们在错误的位置，需要样式。

因此，在本教程中，我们将执行以下操作：

添加滑块的位置，将其放置在适当的扬声器旁边。
使用Google字体注册一种字体并将其添加到文本中。
在文本周围添加引号。
添加媒体查询以解决较小屏幕上的所有布局问题。

请注意，对于每个引用，我刚刚添加了一个帖子标题作为要显示的文本。如果您还添加了帖子内容，那么该内容也会显示出来，因此请确保您的引文中只有标题，没有内容。

放置滑块

让我们向滑块添加位置，以将其覆盖在图像上。

添加绝对定位

打开您的子主题的style.css文件，并添加以下内容：

.tutsplus-sliders {
    position: relative;
	max-width: 1000px;
	margin: 0px auto;
}
.smooth_slider {
	position: absolute;
}

这使我们创建的div包含滑块的相对位置，而滑块本身在该div绝对位置。它还为我们的div设置了正确的宽度，使其与图像居中。

现在，滑块位于图像上方：

问题在于它们彼此重叠，并且需要与相关人员相邻。让我们修复它。

将滑块放在扬声器旁边

Smooth Slider插件在标记中为每个滑块提供了唯一的ID。因此，“ Heide”滑块的ID为#smooth_slider_3 ，而“ Iain”滑块的ID为#smooth_slider_4 。我们可以将其定位为正确定位每个滑块。

将此添加到您的样式表：

#smooth_slider_3 {
    top: 70px;
	right: 90px;
	text-align: right;
	width: 250px;
}
#smooth_slider_4 {
	top: 10px;
	left: 90px;
	width: 250px;
}

您需要通过检查输出标记来检查插件为每个滑块提供的ID：它们可能与我的不同。

现在我的滑块在正确的位置：

看起来好多了。现在添加一些样式。

设置文字样式

我想更改字体并在文本周围添加引号。

更改字体和字体大小

首先，让我们使用Google字体注册一种字体。返回主题的functions.php文件并添加以下内容：

function tutsplus_add_google_fonts() {
    wp_register_style( 'googleFonts', 'http://fonts.googleapis.com/css?family=Droid+Serif');
	wp_enqueue_style( 'googleFonts');
}
add_action( 'wp_enqueue_scripts', 'tutsplus_add_google_fonts' );

注意：在源代码中有两种字体入队，因为我在网站的其他位置使用了另一种Google字体，但没有用于滑块。

保存您的函数文件并返回到样式表。添加此：

.smooth_slider h2 {
    font-size: 19px !important;
	font-family: 'Droid Serif', serif  !important; 
	color: #666633 !important;
	line-height: 26px !important;
}

我必须在每行中添加!important ，否则它不会覆盖插件添加的样式。如果需要，您可以使用设置屏幕来编辑字体：我没有，因为那不能让我使用我的Google字体。

现在我们的字体看起来好多了：

添加引号

最后，我想在每段文本周围添加引号，以强调图像中的人应该在说话的事实。为此，我使用了before和after 伪元素。

在样式表中，添加以下内容：

.smooth_slider h2::before {
  content: open-quote;
}
.smooth_slider h2::after {
  content: close-quote;
}

这会将我们的h2元素括在双引号中。

注意：某些较旧的浏览器不支持此功能，因为它们不支持伪元素。 但是，我对此并不担心，因为滑块对于内容来说并不是必不可少的，并且使用这些浏览器的人数现在非常少。

现在保存您的样式表并检查站点：

太棒了！现在，我的文本放在正确的位置，并用引号引起来。我的客户现在可以根据需要添加任意数量的报价，将其分配给适当的滑块，然后对话将继续。

添加媒体查询

因为我使用了绝对定位，所以文本的位置会在较小的屏幕上显示；字体大小也必须太小，以使文本不可读。因此，我将添加一个媒体查询以在较小的屏幕上隐藏滑块。

首先，我将检查布局中断点：大约900像素宽。因此，我需要向小于900像素宽的目标屏幕添加媒体查询。

在样式表的底部，添加媒体查询：

@media screen and (max-width: 900px) {
    .tutsplus-sliders {
		display: none;
	}
}

现在，滑块在较小的屏幕上消失了：

如果需要，可以在媒体查询中为中型屏幕添加其他样式，从而使字体大小变小并放置合适的文本。

摘要

使用文本滑块可以帮助您在网站中添加有趣的效果：在这里，我添加了一个对话效果，该效果叠加在两个人的图像上。

在这两套教程中，您已经学会了如何通过以下方法来创建这种效果：

注册帖子类型
安装滑块插件并为其分配帖子
使用挂钩到主题提供的动作挂钩的函数在标题中显示滑块
将文字放在两个扬声器旁边
设置文字样式并在其周围添加语音标记
使用媒体查询删除较小屏幕上的文本

您可以使用此技术在页面上的任意位置创建弹出式文本-发挥创意！

翻译自: https://code.tutsplus.com/tutorials/create-a-conversation-banner-with-revolving-text-in-wordpress-part-2--cms-25939