Thêm thanh trên cùng của thông báo vào chủ đề của bạn

Thêm thanh thông báo trên cùng vào chủ đề của bạn mà không cần sử dụng plugin. Tìm hiểu cách sử dụng một chút PHP, JavaScript và một số CSS để tạo thanh trên cùng không cần truy cập cơ sở dữ liệu WordPress (vì vậy nó nhanh) và cũng hỗ trợ nhiều ngôn ngữ, vì vậy nó hoạt động với WPML và PolyLang.

Chúng tôi cũng sẽ thêm nút Đóng / Loại bỏ để người dùng có thể loại bỏ thông báo. Chúng tôi sẽ lưu trữ thanh trên cùng có bị loại bỏ hay không trong cookie.

Đó là một yêu cầu chung của trang web và tôi đã xem xét một số plugin Top Bar, nhưng tôi thực sự muốn một thứ gì đó rất nhẹ, không có lệnh gọi cơ sở dữ liệu. Tôi cũng muốn toàn quyền kiểm soát nơi thanh trên cùng được hiển thị. Tất cả các thanh trên cùng mà tôi tìm thấy đều sử dụng hook action WordPress wp_body_open. Trong hầu hết các trường hợp, điều này là tốt, nhưng đôi khi không. Có thể một chủ đề kỳ quặc nào đó có nghĩa là bạn cần phải hiển thị nó bên dưới một thành phần màn hình, chẳng hạn như một menu dính.

Vì vậy, tôi quyết định viết của riêng tôi.

Trước khi bạn bắt đầu hướng dẫn này, hãy đảm bảo rằng bạn đang sử dụng một chủ đề con tùy chỉnh.

Sắp xếp cấu trúc

Chúng tôi sẽ xây dựng mô-đun bằng cách sử dụng một số PHP, một vài định nghĩa CSS và JavaScript phía máy khách (jQuery) để hiển thị / ẩn thanh và xử lý khi người dùng nhấp vào nút Đóng. Bởi vì chúng tôi đang xử lý một số tệp ở đây, chúng tôi sẽ bắt đầu bằng cách tạo một thư mục mới bên trong chủ đề con tùy chỉnh của chúng tôi - nơi chúng tôi có thể lưu trữ tất cả các tệp / nội dung của mình mà không làm cho thư mục chính của chủ đề con trở nên lộn xộn. Tạo một thư mục có tên hw-top-bar , sau đó tạo ba tệp văn bản mới / trống trong đó, để bạn có một thư mục giống như sau:

Chúng tôi sẽ tạo một hàm chính xuất ra HTML cho thanh trên cùng và chúng tôi sẽ thực hiện việc này mà không cần bất kỳ tham số nào. Điều này là để chúng ta có thể gọi hàm từ bất kỳ đâu trong mã của chúng ta (chẳng hạn như trong header.php hoặc có thể là page.php) hoặc chúng ta có thể kết nối trực tiếp nó với một trình xử lý hành động. Vì vậy… nếu chúng ta muốn mô-đun của mình hoạt động giống như tất cả các plugin Top Bar khác ngoài đó, chúng ta có thể gọi nó như thế này:

// Render the top bar just inside the document's  element.
add_action('wp_body_open', 'hwtb_render_top_bar');

Hoặc nếu chủ đề con của chúng tôi sử dụng tệp header.php tùy chỉnh, chúng tôi có thể tự chèn thanh trên cùng bằng cách thêm phần sau vào tệp header.php của chúng tôi:

// ...
// The bulk of our header.php file
// ...
?>>

   
   
<?php // Render the top bar. hwtb_render_top_bar(); ?>

Chúng tôi không muốn đặt một trang tùy chọn vào khu vực Quản trị viên WordPress của trang web của chúng tôi, chỉ để đặt nội dung HTML trên thanh trên cùng của chúng tôi. Chúng tôi muốn có thể làm điều gì đó như sau trong tệp function.php của chủ đề con tùy chỉnh của chúng tôi:

// Enable the site's top bar
define('HWTB_IS_ENABLED', true);
// HTML for our top bar (different languages)
define('HWTB_MESSAGE', array(
   '_default' => 'Hello World! More Info',
   'fr_FR' => 'Bounjour le Monde! Plus d\'infos...',
   'es_ES' => 'Hola Mundo! Más información...',
));

Bây giờ chúng tôi đã có ý tưởng về cách chúng tôi sẽ bố trí nó, đã đến lúc bắt đầu.

Hãy viết một số mã - Bit PHP

Trong thư mục hw-top-bar , chỉnh sửa tệp top-bar.php và dán phần sau vào đó.
/**
 * top-bar.php
 *
 * To enable the top bar, include this file from your function.php file.
 *
 * Then set the constants:
 *
 *    const HWTB_IS_ENABLED = true;
 *    const HWTB_MESSAGE = 'Notification Bar More info...';
 *
 * Call hwtb_render_top_bar() from somewhere, or connect it to wp_body_open
 * like this:
 *
 *    add_action('wp_body_open', 'hwtb_render_top_bar');
 */
// Block direct access.
if (!defined('WPINC')) {
   exit('Do NOT access this file directly.');
}
function hwtb_init() {
   $is_top_bar_enabled = hwtb_is_top_bar_enabled();
   $is_close_enabled = hwtb_is_close_button_enabled();
   if ($is_top_bar_enabled) {
      // Include JS/CSS.
      $base_dir = basename(dirname(__FILE__)); // 'login-page'
      $base_full_path = dirname(__FILE__);
      $theme_version = wp_get_theme()->get('Version');
      $stylesheet_file_name = 'top-bar.css';
      $stylesheet_full_path = trailingslashit($base_full_path) . $stylesheet_file_name;
      if (is_readable($stylesheet_full_path)) {
         $stylesheet_url = get_stylesheet_directory_uri() . '/' .
            $base_dir . '/' . $stylesheet_file_name;
         wp_enqueue_style('hw-top-bar-css', $stylesheet_url, false);
      }
      if ($is_close_enabled) {
         $javascript_file_name = 'top-bar.js';
         $javascript_full_path = trailingslashit($base_full_path) . $javascript_file_name;
         if (is_readable($javascript_full_path)) {
            $javascript_url = get_stylesheet_directory_uri() . '/' .
               $base_dir . '/' . $javascript_file_name;
            wp_enqueue_script('js-cookie',
               'https://cdn.jsdelivr.net/npm/js-cookie@rc/dist/js.cookie.min.js',
               false,
               '3.0.0',
               true
            );
            wp_register_script('hw-top-bar-js',
               $javascript_url,
               array('js-cookie'),
               $theme_version,
               true
            );
            if (current_user_can('administrator')) {
               wp_localize_script(
                  'hw-top-bar-js',
                  'hwtbState',
                  array('isCookieEnabled' => false)
               );
            }
            wp_enqueue_script('hw-top-bar-js');
         }
      }
   }
}
add_action('init', 'hwtb_init');
function hwtb_render_top_bar() {
   $is_top_bar_enabled = hwtb_is_top_bar_enabled();
   if ($is_top_bar_enabled) {
      $top_bar_html = hwtb_get_html();
      $is_close_enabled = hwtb_is_close_button_enabled();
      $top_bar_classes = apply_filters(
         'hwtb_container_classes',
         array('hwtb-top-bar-container')
      );
      $props = '';
      if ($is_close_enabled) {
         $props = 'style="display:none;"';
      }
      printf('
', implode(' ', $top_bar_classes), $props); echo ''; if ($is_close_enabled) { echo ''; echo ''; echo ''; //.hwtb-close-button } echo $top_bar_html; echo ''; // .hwtb-content echo '
'; // .hwtb-top-bar-container } } function hwtb_is_top_bar_enabled() { $is_enabled = (defined('HWTB_IS_ENABLED') && (HWTB_IS_ENABLED === true) && defined('HWTB_MESSAGE') && !empty(HWTB_MESSAGE)); return apply_filters('hwtb_is_top_bar_enabled', $is_enabled); } function hwtb_is_close_button_enabled() { $is_enabled = true; if (defined('HWTB_IS_CLOSE_BUTTON_ENABLED')) { $is_enabled = (HWTB_IS_CLOSE_BUTTON_ENABLED === true); } return apply_filters('hwtb_is_close_button_enabled', $is_enabled); } function hwtb_get_html() { $html = null; if (defined('HWTB_MESSAGE')) { if (is_string(HWTB_MESSAGE)) { $html = HWTB_MESSAGE; } elseif (is_array(HWTB_MESSAGE) && (count(HWTB_MESSAGE) > 0)) { // Get the default fall-back translation. if (array_key_exists('_default', HWTB_MESSAGE)) { $html = HWTB_MESSAGE['_default']; } // Look for a more specific translated HTML message. $locale = get_locale(); if (empty($locale)) { // No language set?! } elseif (!array_key_exists($locale, HWTB_MESSAGE)) { // No message found for our language. } else { // We found a language-specific message, so let's use it. $html = HWTB_MESSAGE[$locale]; } } else { // Unsupported data in HWTB_MESSAGE. } } if (empty($html)) { $html = 'HWTB_MESSAGE should be a string or an array.'; } return $html; }
Thực sự không có nhiều thứ ở đây. Về cơ bản, chúng tôi kết nối trình xử lý hành động init chính của WordPress để chúng tôi có thể thực hiện một số thiết lập. Sau đó, chỉ có hàm hwtb_render_top_bar () chính mà chúng ta có thể kết nối với một hành động hoặc gọi trực tiếp từ bất cứ nơi nào chúng ta muốn.

Kích hoạt mô-đun

Để kích hoạt thanh trên cùng, hãy chỉnh sửa tệp function.php của chủ đề con tùy chỉnh của bạn và dán phần sau vào đó.
// Comment-out this line (or set it to false) to disable the Top Bar.
const HWTB_IS_ENABLED = true;
const HWTB_MESSAGE = 'Notification Bar More info...';
/*
 * Render the Top Bar straight after the  element.
 * If you want more control of where the Top Bar is rendered, comment
 * this out and call hwtb_render_top_bar() from somewhere in your
 * theme - probably in your header.php file. Or maybe just connect it
 * to a different action hook.
 */
add_action('wp_body_open', 'hwtb_render_top_bar');
// Include the Headwall Top Bar module.
require_once 'hw-top-bar/top-bar.php';

Một số Bits đẹp

Khi chúng tôi kết xuất HTML, nó thực sự chỉ là một phần tử <div> với một số HTML trong đó - không có gì phức tạp. Nhưng… trên một số trang web, chúng tôi có thể muốn thêm một số lớp CSS bổ sung vào vùng chứa <div> để giúp tùy chỉnh dễ dàng hơn. Vì vậy, chúng tôi đã thêm bộ lọc đặc biệt của riêng mình vào đó:
$top_bar_classes = apply_filters(
   'hwtb_container_classes',
   array('hwtb-top-bar-container')
);
Điều này có nghĩa là chúng ta có thể thêm một cái gì đó trong functions.php chính của mình để thêm một số lớp CSS tùy chỉnh vào phần tử <div> của thanh trên cùng của chúng ta:
// This code could go in to your custom child theme's function.php file,
// if you want to add to the top bar's CSS classes.
function custom_top_bar_classes($classes) {
   // $classes is just an array of CSS class names.
   array_push($classes, 'custom-top-bar-class');
   return $classes;
}
add_filter('hwtb_container_classes', 'custom_top_bar_classes');
Chúng tôi cũng có thể sử dụng hwtb_is_top_bar_enabledhwtb_is_close_button_enabled bộ lọc để ghi đè hay không thanh trên cùng được kích hoạt, và có hoặc không có nút đóng được kích hoạt.

Mặc dù có một số thứ gọn gàng khác ở đây, nhưng điều đó sẽ làm được với những thứ PHP ngay bây giờ.

Thêm một số kiểu

Trong mô-đun của chúng tôi, chúng tôi muốn tạo ra một số kiểu đơn giản có vẻ chung chung và sẽ hoạt động ở mọi nơi. Trong thư mục hw-top-bar , hãy chỉnh sửa tệp top-bar.css , dán phần sau vào đó rồi lưu.
/*
 * Top Bar styles.
 *
 * See functions-top-bar.php
 */
.hwtb-top-bar-container {
   background-color:  #ff00ff;
   color:  white;
   text-align:  center;
   position:  relative;
   padding:  0.5em 2em 0.5em 2em;
}
.hwtb-content {
   line-height: 1.5em;
}
.hwtb-top-bar-container a.hwtb-button {
   background-color:  rgba( 255, 255, 255, 0.40 );
   color:  white;
   text-shadow: 0 0 0.125em black;
   font-weight: bolder;
   padding:  0.25em 0.5em 0.25em 0.5em;
   transition: 0.3s;
   margin: 0 1em 0 1em;
   border-radius: 0.25em;
}
.hwtb-top-bar-container a.hwtb-button:hover {
   text-decoration: none;
   box-shadow: 0 0 0.5em white, 0 0 0.5em white;
}
.hwtb-close-button {
   position: absolute;
   background-color: transparent;
   border:  none;
   color:  white;
   opacity: 0.80;
   font-size:  150%;
   right:  0.5em;
   top:  50%;
   transform: translateY(-50%);
   font-weight: normal;
   transition: 0.3s;
}
.hwtb-close-button:hover {
   color:  white;
   opacity: 1;
}
Tùy chỉnh Top Bar rất dễ dàng, nhưng đừng thay đổi bất kỳ điều gì trong top-bar.css, vì chúng tôi sẽ muốn sử dụng tệp này trong các dự án WordPress khác. Thay vào đó, nếu bạn muốn thay đổi màu của thanh trên cùng, hãy chỉnh sửa style.css trong chủ đề con tùy chỉnh của bạn và làm như sau:
/* Override key properties of our Top Bar */
.hwtb-top-bar-container {
   background-color:  blue;
}
Tạo kiểu cho thanh trên cùng là một việc dễ dàng.

Cuối cùng - Mã hóa Bit JavaScript

Bây giờ chúng ta hãy thực hiện công việc để xử lý việc đóng / loại bỏ thanh trên cùng và lưu trữ tùy chọn đó trong cookie. Trong thư mục hw-top-bar của chủ đề con tùy chỉnh của bạn , hãy mở tệp top-bar.js và dán phần sau vào đó.
/*
 * Top Bar client-side scripts.
 */
(function($) {
    'use strict';
    $(window).on('load', function() {
        // console.log('Top Bar');
        var cookieName = 'hwtb_is_hidden';
        var isFound = ($('.hwtb-top-bar-container').length > 0);
        var isCloseButtonFound = ($('a.hwtb-close-button').length > 0);
        var isCookieEnabled = isCloseButtonFound;
        if (typeof hwtbState !== 'undefined') {
            isCookieEnabled = hwtbState.isCookieEnabled;
        }
        if (isFound) {
            var isVisible = isFound && (
                !isCookieEnabled ||
                (isCookieEnabled && (Cookies.get(cookieName) != '1'))
            );
            // Show the top bar here.
            if (isVisible) {
                $('.hwtb-top-bar-container').slideDown();
            }
            $('a.hwtb-close-button').click(function() {
                $(this).closest('.hwtb-top-bar-container').slideUp();
                // 7 day expiration.
                if (isCookieEnabled) {
                    Cookies.set(
                        cookieName, '1', { expires: 7, sameSite: 'strict' }
                    );
                }
            });
        }
    });
})(jQuery);
Chúng tôi sẽ không đi quá sâu vào vấn đề này bởi vì JavaScript và jQuery theo đúng nghĩa của chúng là một con quái thú, nhưng đây là thông tin cơ bản về những gì đang xảy ra:

Sau khi tài liệu được tải…

  • Chúng tôi kiểm tra xem có bất kỳ phần tử nào với lớp hwtb-top-bar-container hay không .
    • Nếu có, thì có một thanh trên cùng của trang.
  • Chúng tôi kiểm tra xem có bất kỳ phần tử liên kết nào với nút đóng- lớp hwtb hay không .
    • Nếu có, thì có một nút đóng thanh trên cùng trên trang.
  • Quay lại tệp PHP, chúng tôi đã kiểm tra xem người dùng hiện tại có phải là quản trị viên hay không.
    • Nếu vậy, chúng tôi đã sử dụng wp_localize_script () để truyền một số dữ liệu vào đối tượng hwtbState.
    • Điều này có nghĩa là nếu chúng tôi đăng nhập vào trang web với tư cách là quản trị viên, chúng tôi không thể làm cho Top Bar biến mất. Nó hữu ích để nhắc chúng tôi rằng thanh trên cùng đã được bật… vì vậy chúng tôi đừng quên: S
  • Chúng tôi kiểm tra xem trước đó người dùng đã loại bỏ thanh trên cùng chưa (nếu cookie được bật).
    • Nếu họ chưa tắt nó thì chúng ta gọi slideDown () trên thanh trên cùng để nó hiển thị.
  • Cuối cùng, chúng tôi kết nối phương thức click () của nút đóng để nó ẩn thanh trên cùng với lệnh gọi đến slideUp () và lưu trữ số “1” trong cookie “hwtb_is_hiised”… để chúng ta có thể tránh gọi slideDown () tiếp theo thời gian chúng tôi tải một trang.

Kiểm tra cuối cùng

Bây giờ chúng tôi đã có tất cả ba tệp, bạn sẽ có thể tải lại trình duyệt của mình (đừng quên xóa / bỏ qua bộ nhớ cache) và… Boom! Bạn sẽ thấy thanh trên cùng mới sáng bóng của mình.

Ngôn ngữ bổ sung

Một tính năng nhỏ thú vị mà chúng tôi đã thêm là hỗ trợ nhiều ngôn ngữ. Chúng tôi thực hiện điều này trong top-bar.php, trong hàm hwtb_get_html (). Những gì chúng tôi làm là kiểm tra hằng số HWTB_MESSAGE . Nếu đó là một chuỗi, thì chúng tôi giả định rằng chuỗi đó là một số HTML và chúng tôi chỉ sử dụng nó. Tuy nhiên, nếu đó là một mảng, chúng tôi giả định rằng nó có cấu trúc như thế này:
define('HWTB_MESSAGE', array(
   '_default' => 'Hello World! More Info',
   'fr_FR' => 'Bounjour le Monde! Plus d'infos...',
   'es_ES' => 'Hola Mundo!' Más información...',
));
Bằng cách đưa các ngôn ngữ vào đây, dưới dạng các chuỗi thô trong PHP, chúng tôi tránh các cuộc gọi chậm / tốn kém đến cơ sở dữ liệu. Nó giữ cho mọi thứ sạch sẽ và đơn giản.

Kết thúc nó

Đó là về nó. Chúng tôi có ba tệp nhỏ trong một thư mục độc lập, vì vậy chúng tôi có thể thả mô-đun vào bất kỳ dự án WordPress nào trong tương lai của chúng tôi. Chúng tôi có thể ghi đè hành vi của thanh trên cùng bằng cách nối một vài bộ lọc trong tệp functions.php của chúng tôi. Chúng tôi có thể ghi đè giao diện của thanh trên cùng trong tệp style.css của chúng tôi.

… Và chúng tôi đã ảnh hưởng không đáng kể đến hiệu suất trang web của chúng tôi vì không có bất kỳ lệnh gọi cơ sở dữ liệu nào.

Bây giờ đó là những gì tôi gọi là ngăn nắp.