如何在 WordPress 中创建新闻行情

已发表: 2021-04-26

如果您已经有一个用于杂志、报纸或阅读博客的 WordPress 网站……,您可能很难将访问者的注意力吸引到优秀的帖子上,因为您的网站塞满了太多信息。 为了解决这个问题,新闻行情绝对是一个完美的功能,可以让您的阅读网站更具可读性、信息量和出色!

目录隐藏
  1. 1.什么是新闻快讯?
  2. 2.为什么要使用新闻代码?
  3. 3.如何在 WordPress 中添加新闻行情?
    1. 3.1. 第 1 步:添加新的新闻代码
    2. 3.2. 第 2 步:配置新闻自动收报机
    3. 3.3. 第 3 步:显示新闻代码
  4. 4.遗言

在这篇文章中,我们将向您展示什么是新闻自动收报机,我们为什么要使用它们,以及如何通过几个简单的快速步骤创建一个令人印象深刻的新闻自动收报机

让我们开始吧!

什么是新闻代码?

在某些类型的网站(如在线杂志、在线报纸)上,您可能会看到一些新闻幻灯片在底部或页眉、页脚或侧边栏滚动。 这些新闻幻灯片看起来像电视新闻节目中的幻灯片。

通过浏览电视新闻节目或杂志网站上的新闻行情,观众可以获得最热门、最引人注目的信息。 在一个新闻自动收报机中,通常有很多条信息,称为滴答声

如下面的 gif 所示,您是否看到正在运行的头条新闻? 这就是新闻自动收报机的工作原理。

新闻自动收报机在标题 WordPress 网站中运行。

WordPress 中的新闻自动收报机示例

我们为什么要使用新闻代码?

新闻行情对不同类型的网站有各种好处:

  • 对于杂志,新闻行情帮助您突出显示要注意的信息和帖子。
  • 对于作品集,它们将招聘人员的注意力吸引到您显着的工作经验和奖励上。
  • 对于其他类型的网站,新闻行情本身将成为网站的亮点,例如,使您的博客更具吸引力和专业性。

因此,新闻自动收报器显然是网站所有者的有用工具。 更重要的是,将新闻行情添加到您的 WordPress 网站非常容易。 让我们进入下一部分,为自己准备一个吧!

如何在 WordPress 中添加新闻行情?

有很多方法可以添加新闻自动收报机。

您可以在开始时使用带有新闻行情预先构建主题; 那将是最简单的。 只需仔细阅读主题的文档。

但是,并非每个主题都有这样的预制新闻自动收报机。 因此,在这些情况下,您可以考虑使用页面构建器或插件。

在这篇文章中,我们将使用一个名为Ditty News Ticker plugin的免费插件。 它是免费的,非常易于使用高度可定制。 您只需要在 Dashboard 上下载并激活它。

您可以在此处阅读有关如何安装插件的更多信息。

Ditty News Ticker 是一个免费插件,可帮助您制作新闻行情。

现在,让我们不再犹豫,按照我们的 3 个步骤在您的网站上拥有一个惊人的新闻自动收报机:

第 1 步:添加新的新闻代码

首先,转到News Ticker > Add New

添加新的新闻代码

在下一个屏幕上,您将看到以下 5 个选项卡:添加标题、简码、代码模式、代码类型和全局设置。 这些选项卡用于配置和显示您的新闻行情。

这些选项卡用于在您的 WordPress 网站中配置和显示您的新闻行情。

你觉得有太多的事情要记住吗? 别担心,我们会为您简明扼要地说明:

首先,给你的股票起一个名字。 在“添加标题”选项卡中键入名称。 标题通常显示在代码的顶部,所以尽量想出一个有吸引力的名字来吸引访问者的注意力。

为您的新闻代码命名

之后,单击Ticker Type ,然后在Ticker Text部分添加要显示在新闻代码中的内容(如有必要,带有链接)。

正如我上面提到的,您的新闻自动收报机可能包含许多滴答声。 只需单击 ( + ) 按钮添加一个,然后单击 ( x ) 按钮删除。

自定义新闻代码中的滴答数量。

第 2 步:配置新闻自动收报机

有了新的新闻快报后,还需要通过配置让它更加醒目。

首先,选择您的新闻代码的显示方式。 单击Ticker Mode ,您将看到 3 个选项: Scroll、RotateList 。 事实上, Scroll是最常见的选项,但您可以决定哪种方式最适合您的网站。

选择您的新闻代码的显示方式

选择上述三个选项之一后,您可以通过下面的各种选项卡调整代码的行为。

就个人而言,我选择了滚动模式,所以我会调整滚动动作。 有两件重要的事情需要注意: Scroll SpeedTick Space 。 实际上,您必须多次尝试才能找到最合适的参数。 对我来说,我更喜欢 8 的滚动速度和 10 像素的刻度空间。

此外,我还勾选了鼠标悬停时暂停选项,这样当我想点击一个勾时,新闻自动收报机就会停止移动。

股票将在点击时停止移动。

此外,当点击全局设置 时,您将看到一些其他选项来自定义代码。 例如,如果您希望股票代码的标题位于它们的顶部,请勾选Display title 。 或者,如果您想在没有刻度时隐藏代码,请勾选下图所示的选项。

单击全局设置时,您将看到一些其他选项来自定义代码

现在您的新闻快报已准备好显示!

第 3 步:显示新闻代码

让我们回到屏幕顶部的Shortcode选项卡:

简码选项卡位于屏幕顶部

新闻自动收报机将显示在您插入此短代码的位置。 您可以将其添加到任何位置:主页的页脚、帖子、侧边栏小部件、...

通常,我们不会在帖子的内容中使用新闻代码。 如果您将新闻代码放在页眉、页脚或侧边栏上会更好。 我可以举一个侧边栏新闻自动收报机的例子。 首先,我选择一个随机页面,转到它的Preview > Customize > Widget

转到小部件

然后,转到侧边栏>添加小部件。 您将看到许多其他侧边栏的选项,如音频、日历……选择文本,然后您将看到一个小框来添加侧边栏的名称并粘贴您的短代码:

将您的短代码粘贴到文本框中。

你已经做了很多步骤了吧? 但是如果你想让你的新闻行情更漂亮,自定义颜色、字体大小、不透明度……,你还有一些工作要做。 此插件的免费版本不支持用户调整这些参数。 所以我们只有如下 gif 的结果:

这是新闻行情显示。

新闻行情看起来不太漂亮,所以我用 CSS 对其进行了一些设计。 转到自定义>附加 CSS

通过 CSS 样式新闻行情

在那里您将看到一个用于添加代码的小框。 这些代码将改变您的新闻行情的外观。

我正在使用带有蓝色和白色主调色板的记忆主题。 因此,我添加了这个 CSS 以获得蓝色的新闻摘要:

 .mtphr-dnt-tick-contents a {
	颜色:var(--main-color);
}

.mtphr-dnt-tick-contents a:hover {
	颜色:#000;
}

点击Publish ,看看我们有什么:

造型的结果。

这里只是给你一个简单的例子。 我相信你可以自己制作一个更令人惊叹的新闻自动收报机。 试一试吧!

最后的话

这就是通过 Ditty News Ticker plugin 向您的 WordPress 网站添加新闻自动收报机的全部内容。 我们已尽力使其简短明了,因此我们希望这篇文章对您有用。

也许您对我们的教程有一些疑问或疑问,请随时在评论部分告诉我们。 我们愿意向您展示有关此插件中高级选项的更详细教程,或其他无需使用插件即可添加新闻行情的方法。 因此,不要忘记联系我们!