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

滑块可能会引起争议-我们所有人都有坚持要求他们的客户，无论他们是否改善网站。但是他们确实有自己的位置。它们可以帮助突出关键内容，在视觉元素很重要的网站上显示图像，并使网站栩栩如生。

在大多数情况下，您可能会使用滑块来显示图像，这些图像可能会或可能不会与您网站上的内容相关联。但是，您也可以使用滑块在您的网站上显示文本。

在这两组教程中，我将向您展示如何创建具有有趣效果的文本滑块：它将使用自定义帖子类型在两个块中一个接一个地拉出一段文本，从而在页面顶部。这将覆盖在两个人的照片上，因此效果是两个人正在互相交谈。

您需要什么

要继续进行，您需要：

WordPress的开发安装
代码编辑器
安装了免费的响应式主题

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

在本教程中，我们将使用自定义帖子类型启动并运行滑块。具体来说，我们将：

为响应主题创建子主题
注册自定义帖子类型
使用我们的自定义帖子类型创建帖子
安装并设置插件以输出文本滑块
使用动作挂钩将滑块添加到网站标题

在下一部分中，我们将CSS添加到主题中，以正确放置文本，创建对话效果并设置样式。

因此，让我们开始吧！

创建儿童主题

首先，让我们创建“响应式”主题的子主题。之所以这样做，是因为我不想编辑自适应主题本身：如果这样做，那么下次更新主题时，您将失去工作。或者，您可以创建一个插件来执行此操作。

在wp-content/themes目录中，创建一个新的空文件夹。我打电话给我tutsplus-conversation-banner 。

在该文件夹中，创建一个名为style.css的文件并将其添加到其中：

/*
Theme Name:     Tutsplus Conversation banner Theme
Theme URI:      http://.tutsplus.com/tutorials/create-a-conversation-banner-with-revolving-text-using-a-custom-post-type--cms-25938
Description:    Theme for tuts+ tutorial on creating a conversation banner effect. Child theme for the Responsive theme.
Author:         Rachel McCollin
Author URI:     http://rachelmccollin.co.uk/
Template:       responsive
Version:        1.0
*/

@import url("../responsive/style.css");

编辑上面的代码，使自己成为作者并添加您自己的URI。

现在保存该文件并激活您的新主题。

添加自定义样式

因为这是一个真实的网站，所以我在子主题的样式表中为其添加了自定义样式。我不会详细介绍该内容，因为它不在本教程的讨论范围之内，但是您可以在本教程的代码包中看到样式。

添加滑块之前，我的网站外观如下：

标头中的图像在两个人的两边各有一个空格，我将对滑块进行样式设置，以便在人们的两边都显示文本，从而使他们指向他们的单词。

注册帖子类型

嵌套步骤是注册一个称为quote的帖子类型。在您的子主题文件夹中，创建一个名为functions.php的新文件。

注意：最好使用插件注册帖子类型，而不是将其添加到主题函数文件中。 我在这里使用功能文件将所有内容保存在一个地方，因此您需要下载代码包。

打开您的函数文件，并添加以下代码：

function tutsplus_create_post_type() {
    $labels = array( 
		'name' => __( 'Quotes' ),
		'singular_name' => __( 'Quote' ),
		'add_new' => __( 'New Quote' ),
		'add_new_item' => __( 'Add New Quote' ),
		'edit_item' => __( 'Edit Quote' ),
		'new_item' => __( 'New Quote' ),
		'view_item' => __( 'View Quote' ),
		'search_items' => __( 'Search Quotes' ),
		'not_found' =>  __( 'No Quotes Found' ),
		'not_found_in_trash' => __( 'No Quotes found in Trash' ),
	);
	$args = array(
		'labels' => $labels,
		'has_archive' => false,
		'public' => true,
		'hierarchical' => false,
		'supports' => array(
			'title', 
			'editor', 
			'excerpt', 
			'custom-fields', 
			'thumbnail',
			'page-attributes',
			'author'
		),
	);
	register_post_type( 'quote', $args );
} 
add_action( 'init', 'tutsplus_create_post_type' );

这将注册一个称为quote的新帖子类型。

您可以在我的网站上看到新的帖子类型，并添加了一些引号：

请注意，这些只是虚拟引号-我使用自定义帖子类型的事实使网站启动后，我的客户可以轻松添加自己的引号。他们每个人只有一个帖子标题，没有内容，因为如果有帖子内容，则插件会同时显示两者。

安装和配置滑块插件

下一步是安装和配置滑块插件。我使用的是Smooth Slider插件，该插件可让您选择要添加到滑块的帖子，并在滑块的设置屏幕中手动对帖子进行重新排序。

转到“ Smooth Slider”>“设置”并按如下方式配置：

默认标题文字 ：将此留空。
缩略图 ：取消选中所有复选框。
滑块内容-选择以下内容 ：选择内容。

我要在样式表中添加样式，因为我想使用Google字体，因此我不太担心字体的设置，但是您可能希望在设置屏幕中进行调整。

设置滑块

下一步是添加滑块，并在其中填充帖子。

创建滑块

我们需要添加两个滑块：两个人一个。转到“ 平滑滑块”>“滑块” ，然后单击“ 创建新滑块” 。我将这两个滑块称为“海德”和“伊恩”，因为它们是人们的名字。

将帖子添加到滑块

您可以从帖子编辑页面将帖子添加到滑块。打开您的一个帖子并向下滚动以查看将其添加到滑块的选项：

选择您想要添加帖子的滑块并保存。对每个帖子重复此操作，并将其添加到相关的滑块中。

订购滑块中的帖子

您可以手动编辑滑块显示帖子的顺序。转到“ 平滑滑块”>“滑块”，然后选择要使用的滑块。这是我的“海德”滑块：

向下滚动以将帖子拖动到正确的顺序：

完成此操作后，保存滑块。

将滑块添加到页面页眉

目前，我们有两个滑块，但是它们没有出现在网站上。该插件为您提供了可用于向站点添加滑块的短代码：由于我们将它们添加到主题文件中，因此我们将使用do_shortcode()函数。

Responsive主题为我们提供了一个名为responsive_in_header _in_header的钩子，该钩子使您可以向页面标题添加代码。这将显示在图像上方，但在标题中：我们将添加CSS，以将滑块正确放置在此分为两部分的教程的下一部分中。

打开主题的functions.php文件，并添加以下函数：

function tutsplus_slider() { ?>
    		
		<div class="tutsplus-sliders">
		
			<?php echo do_shortcode( '[smoothslider id="3"]' ); ?>
			<?php echo do_shortcode( '[smoothslider id="4"]' ); ?>
			
		</div>
			
<?php }
add_action( 'responsive_in_header', 'tutsplus_slider' );

这将创建一个带有tutsplus-sliders类的div ，我们将在以后定位该类，并使用短代码输出这两个滑块。

保存功能文件。

该站点现在看起来像这样：