wordpress弹窗通知_如何将假期通知添加到您的WordPress网站

98 阅读 0 评论 65 点赞

我是靠谱客的博主俭朴鸭子，最近开发中收集的这篇文章主要介绍wordpress弹窗通知_如何将假期通知添加到您的WordPress网站，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

庆祝活动即将来临，还有什么比在您的网站上张贴节日主题的通知更好的方式来传播欢呼声？您可能即将休假，可能想用一张特殊的卡片向访客打招呼，或者只想显示一条特殊的消息。

我们已经研究了很多WordPress圣诞插件，但是如何自己做呢？在假期期间，您是否有时间进行简短的WordPress项目？继续学习如何通过文本小部件，粘性栏和计数器小部件向您的网站添加一些圣诞节通知。

创建一个文本小部件

很抱歉，这里没有火箭科学。您可以通过以下方法添加快速消息并将其显示在窗口小部件区域中： 外观>窗口小部件 ，将文本窗口小部件拖动到侧栏中，然后在框中输入消息。您可以在其中使用HTML，因此您可以根据需要添加图片的趣味性。

我同意，这有点无聊，但可能恰到好处。跳舞圣诞老人会给许多更严肃的网站（例如电子商务网站或个人档案）带来负面影响，但人们仍然会欣赏一点节日的欢呼声。

粘棒

类似于“快速通知”插件，但我们自己编写的棍子棒呢？我们还可以使其轻松地滚动到页面顶部。

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

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

<?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：

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重新定位。

在此阶段，您应该能够在网站底部看到您的消息，而无需进行任何格式化。要添加格式，我们必须通过加入样式表来附加样式表。

在同一文件中：

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”文件，则可以开始添加样式。现在开始吧。

#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;
}

最好的是，如果将“绝对”替换为“固定”，则消息将停留在窗口顶部，并在用户滚动时跟随用户。

这种方法很棒，因为您可以完全控制所有内容！例如，如何始终保持此插件处于活动状态，而仅在12月25日显示消息？没问题，只需稍微修改my_sticky_bar_display函数。

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 。像以前一样创建一个新插件，并在主文件中粘贴以下内容：

add_action( 'widgets_init', 'christmas_countdown_widget' );
function christmas_countdown_widget() {
    register_widget( 'Christmas_Countdown_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' )
        );
    }

}

构造函数包含一些用于构建窗口小部件的重要信息。它包含小部件的ID（christmas_countdown_widget），将在后端UI（圣诞节倒计时小部件）中显示的名称以及描述（也将显示）。

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

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

function form() {}

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

我们使用WordPress提供的human_time_diff()函数来计算今天和圣诞节之间的时间。这将显示如下内容：“圣诞节时间：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' ) ) );
    }


}