如何将假期通知添加到您的 WordPress 网站

庆祝活动即将来临，还有什么比在您的网站上张贴节日主题通知更好的传播欢乐的方式呢？您可能很快就要去度假，您可能想用一张特殊的卡片来迎接您的访客，或者您可能只想显示一条特殊的信息。

我们已经看过很多WordPress Christmas 插件，但是自己动手做如何？假期你有时间做一个简短的 WordPress 项目吗？继续学习如何通过文本小部件、粘性栏和计数器小部件向您的网站添加一些圣诞节通知。

60 多个最受欢迎的 WordPress 技巧和技巧（更新）

你有没有遇到过 WordPress 博客，看到你喜欢的东西，然后想到；他们是怎么做到的，… 阅读更多

创建文本小部件

抱歉，这里没有火箭科学！您可以添加一条快速消息并将其显示在小部件区域，方法是转到外观 > 小部件，将文本小部件拖动到侧边栏并在框中输入您的消息。您可以在其中使用 HTML，因此您可以根据需要使用图像来增添趣味。

我同意，这有点无聊，但它可能恰到好处地增加了节日气氛。许多更严肃的网站，如电子商务网站或个人投资组合会受到跳舞的圣诞老人的负面影响，但人们仍然喜欢节日的欢乐。

粘条

棒棒怎么样，类似于 Quick Notice 插件，但我们自己编写了一个？我们还可以轻松地将其粘在页面顶部。

第一步是创建一个插件，让我向您展示如何：

在您的插件目录中，创建一个名为“my-sticky-bar”的新文件夹。在该文件夹中创建一个名为“my-sticky-bar.php”的文件并将以下内容粘贴到其中：

1个
2个
3个
4个
5个
6个
7

<?php /**
 * Plugin Name: My Sticky Bar
 * Plugin URI: http://yourwebsite.com
 * Description: My Christmas Project - creating a sticky bar
 * Version: 1.0.0
 * Author: Your Name
 */

保存此文件后，您应该能够通过 WordPress 管理中的插件部分激活插件。它还没有做任何事情，但我们很快就会解决这个问题！

我们需要做两件事：使用PHP 和 HTML 输出消息并使用CSS 设置样式。

在“my-sticky-bar.php”文件中，使用以下代码在正确的位置添加必要的 HTML：

1个
2个
3个
4个

add_action( 'wp_footer', 'my_sticky_bar_display' );
function my_sticky_bar_display() {
  echo "<div id='my-sticky-bar'>Merry Christmas Everyone!</div>";
}

第一行是WordPress 钩子，它告诉 WordPress 在主体结束之前执行“my_sticky_bar_display”函数。可以在页面末尾为我们的栏加载 HTML。它不是那么重要，可以通过 CSS 重新定位。

在此阶段，您应该能够在站点底部看到您的消息，没有任何格式。要添加格式，我们必须通过排队来附加样式表。

在同一个文件中：

1个
2个
3个
4个

add_action( 'wp_enqueue_scripts', 'my_sticky_bar_styles' );
function my_sticky_bar_styles() {
  wp_enqueue_style( 'my-sticky-bar', plugin_dir_url( __FILE__ ) . '/my-sticky-bar.css');
}

排队是一种以模块化方式向 WordPress 添加脚本和样式的方法。不过不需要理解所有这些——如果你将它粘贴到插件文件中并创建“my-sticky-bar.css”文件，你就可以开始添加你的样式了。让我们现在就这样做。

1个
2个
3个
4个
5个
6个
7
8个
9
10
11

#my-sticky-bar {
  position: absolute;
  top: 0px;
  width: 100%;
  text-align: center;
  color: #fff;
  background: #810400;
  padding: 11px 0;
  text-transform: uppercase;
  letter-spacing: 2px;
}

最重要的是，如果您将“absolute”替换为“fixed”，则消息将固定在窗口顶部，并在用户滚动时跟随他们。

这种方法很棒，因为您可以完全控制一切！例如，让这个插件一直保持活动状态，但只在 12 月 25 日显示消息怎么样？没问题，my_sticky_bar_display稍微修改一下功能即可。

1个
2个
3个
4个
5个
6个

add_action( 'wp_footer', 'my_sticky_bar_display' );
function my_sticky_bar_display() {
  if( date( 'd' ) == 25 && date( 'm' ) == 12 ) {
    echo "<div id='my-sticky-bar'>Merry Christmas Everyone!</div>";
  }
}

计数器小部件

我们已经在我们的文本小部件中添加了一些简单的文本，但是如何为我们的用户创建一个倒计时呢？

第一步是让 WordPress 知道我们要创建一个自定义小部件。我们需要定义一个函数并将其挂接到widgets_init. 像以前一样创建一个新插件，并在主文件中粘贴以下内容：

1个
2个
3个
4个

add_action( 'widgets_init', 'christmas_countdown_widget' );
function christmas_countdown_widget() {
    register_widget( 'Christmas_Countdown_Widget' );
}

我们需要创建一个Christmas_Countdown_Widget以其中的一些函数命名的类。让我们从创建构造函数开始。将下面的所有内容也粘贴到主插件文件中。

1个
2个
3个
4个
5个
6个
7
8个
9
10
11

class Christmas_Countdown_Widget extends WP_Widget {
 
    function __construct() {
        parent::__construct(
            'christmas_countdown_widget',
            'Christmas Countdown Widget',
            array( 'description' => 'A simple Christmas countdown' )
        );
    }
 
}

构造函数包含一些用于构建小部件的重要信息。它包含小部件的 ID (christmas_countdown_widget)、将出现在后端 UI 中的名称 (Christmas Countdown Widget) 以及也显示的描述。

我们可以添加一个名为的函数form()，该函数可用于输出小部件的一些设置。我们不会在这里使用它，但在未来的项目中请记住它。我现在只添加一个空函数。

我们将使用该widget()函数将小部件输出到前端。现在让我们添加一个简单的倒计时。将以下代码粘贴到类中的函数下方__construct()。请注意，我form()现在还添加了空函数。

1个
2个
3个
4个
5个

function form() {}
 
function widget() {
    echo "Time to Christmas: " . human_time_diff( time(), mktime( 0, 0, 0, 12, 25, date( 'Y' ) ) );
}

我们使用human_time_diff()WordPress 提供的功能来计算今天和圣诞节之间的时间。这将显示如下内容：“距离圣诞节还有 5 天”。

这是非常基本的，但您可以使用任何类型的图像、文本、样式和 Javascript 来使它看起来很棒。我们的小部件的最终完整代码如下：

add_action( 'widgets_init', 'christmas_countdown_widget' );
function christmas_countdown_widget() {
    register_widget( 'Christmas_Countdown_Widget' );
}
 
class Christmas_Countdown_Widget extends WP_Widget {
 
    function __construct() {
        parent::__construct(
            'christmas_countdown_widget',
            'Christmas Countdown Widget',
            array( 'description' => 'A simple Christmas countdown' )
        );
    }
 
    function form() {}
 
    function widget() {
        echo "Time to Christmas: " . human_time_diff( time(), mktime( 0, 0, 0, 12, 25, date( 'Y' ) ) );
    }
 
 
}

节日快乐！

我希望我已经给了你一些想法，为你的网站增添一些圣诞气氛！如果你不庆祝圣诞节，你总是可以使用这些方法并将它们应用到你自己的文化中。

整个假期都在吃饭和庆祝？请务必阅读我们关于Christmas WordPress 插件的文章，以获取大量好主意并快速访问很棒的节日物品！