Code cơ bản
Để tạo một div thông báo trên website có thể tắt được, chúng ta có thể sử dụng html, css, javascript như sau:
HTML
<div class="notification" id="notification">
<span>Đây là thông báo của bạn!</span>
<button class="close-btn" id="close-btn">×</button>
</div>
<script src="scripts.js"></script>
CSS
/* CSS cho div thông báo */
.notification {
background-color: #ebf6e0; /* Màu nền của thông báo */
padding: 15px; /* Khoảng cách trong thông báo */
border-radius: 5px; /* Bo tròn góc của thông báo */
margin: 15px 0; /* Khoảng cách phía trên và dưới thông báo */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Đổ bóng nhẹ cho thông báo */
border: none; /* Không có viền */
}
/* CSS cho nút tắt */
.notification .close-btn {
position: absolute;
top: 10px;
right: 10px;
background: none;
border: none;
font-size: 18px;
color: #721c24;
cursor: pointer;
}
/* CSS cho nút tắt khi di chuột qua */
.notification .close-btn:hover {
color: #f5c6cb; /* Màu khi di chuột qua nút tắt */
}
JS
<script>
document.addEventListener('DOMContentLoaded', function () {
var notice = document.getElementById('custom-notice');
var closeBtn = notice.querySelector('.close-btn');
// Kiểm tra nếu thông báo đã bị tắt trước đó
if (localStorage.getItem('dismissedNotice')) {
notice.style.display = 'none';
}
// Thêm sự kiện khi nhấn vào nút đóng
closeBtn.addEventListener('click', function () {
notice.style.display = 'none';
localStorage.setItem('dismissedNotice', true); // Lưu trạng thái tắt thông báo
});
});
</script>
Sử dụng Child Theme
Đối với trường hợp sử dụng Child Theme thì chúng ta có thể tạo 3 file như sau:
notification.php chèn vào vị trí muốn đặt thông báo (Ví dụ: header.php)
custom-style.css lưu thông tin CSS (Enqueue vào functions.php)
custom-scripts.js lưu thông tin JS (Enqueue vào functions.php)
Thêm mã để enqueue file CSS và JS trong file functions.php
của child theme như sau:
function enqueue_custom_styles() {
wp_enqueue_style('custom-style', get_stylesheet_directory_uri() . '/custom-style.css');
}
add_action('wp_enqueue_scripts', 'enqueue_custom_styles');
function enqueue_custom_scripts() {
wp_enqueue_script('custom-scripts', get_stylesheet_directory_uri() . '/custom-scripts.js', array(), null, true);
}
add_action('wp_enqueue_scripts', 'enqueue_custom_scripts');
Hoặc
function enqueue_custom_styles_and_scripts() {
wp_enqueue_style('custom-style', get_stylesheet_directory_uri() . '/custom-style.css');
wp_enqueue_script('custom-scripts', get_stylesheet_directory_uri() . '/custom-scripts.js', array(), null, true);
}
add_action('wp_enqueue_scripts', 'enqueue_custom_styles_and_scripts');
?>
Tạo thêm trang Custom trong thư mục Setting của trang quản trị
Để tiện cho việc thay đổi nội dung thông báo chúng ta có thể tạo trang Custrom trong thư mục Setting của Admin trang như sau:
1. Thêm trang cài đặt “Custom Sky” bằng cách mở tệp functions.php
của child theme và thêm mã sau:
<?php
// functions.php
// Tạo trang cài đặt mới
function custom_sky_settings_menu() {
add_options_page(
'Custom Sky Settings', // Tiêu đề trang
'Custom Sky', // Tiêu đề menu
'manage_options', // Quyền truy cập
'custom-sky-settings', // Slug
'custom_sky_settings_page' // Hàm hiển thị nội dung trang
);
}
add_action('admin_menu', 'custom_sky_settings_menu');
// Hàm hiển thị nội dung trang cài đặt
function custom_sky_settings_page() {
?>
<div class="wrap">
<h1>Custom Sky Settings</h1>
<form method="post" action="options.php">
<?php
// Cung cấp mã bảo mật
settings_fields('custom_sky_settings_group');
// Hiển thị các trường cài đặt
do_settings_sections('custom-sky-settings');
// Hiển thị nút lưu cài đặt
submit_button();
?>
</form>
</div>
<?php
}
// Khai báo các cài đặt, trường và phần
function custom_sky_settings_init() {
// Đăng ký nhóm cài đặt
register_setting('custom_sky_settings_group', 'custom_sky_text', array(
'type' => 'string',
'sanitize_callback' => 'wp_kses_post',
'default' => ''
));
// Thêm phần
add_settings_section(
'custom_sky_settings_section',
'Custom Sky Settings',
'custom_sky_settings_section_callback',
'custom-sky-settings'
);
// Thêm trường
add_settings_field(
'custom_sky_text',
'Notification Text',
'custom_sky_text_callback',
'custom-sky-settings',
'custom_sky_settings_section'
);
}
add_action('admin_init', 'custom_sky_settings_init');
// Callback hiển thị phần
function custom_sky_settings_section_callback() {
echo '<p>Enter the text for the notification.</p>';
}
// Callback hiển thị trường với TinyMCE
function custom_sky_text_callback() {
$value = get_option('custom_sky_text', '');
wp_editor($value, 'custom_sky_text', array('textarea_name' => 'custom_sky_text', 'media_buttons' => false));
}
?>
2. Hiển thị thông báo trên frontend, cập nhật tệp notification.php để lấy nội dung từ cài đặt mới:
<?php
// notification.php
$notification_text = get_option('custom_sky_text', 'Đây là thông báo của bạn!');
?>
<div class="notification" id="notification">
<div><?php echo wp_kses_post($notification_text); ?></div>
<button class="close-btn" id="close-btn">×</button>
</div>