Dodaj niestandardowe widgety do paska bocznego WordPressa z łatwością

Jak dodać niestandardowy widget do paska bocznego WordPressa; Dodaj niestandardowy widget do paska bocznego WordPressa; Stwórz niestandardowy widget dla paska bocznego WordPressa; Dodaj dynamiczne widgety do paska bocznego WordPressa; Dostosuj pasek boczny WordPressa za pomocą widgetów; Samouczek dotyczący niestandardowego widgetu paska bocznego WordPressa; Kroki do dodania niestandardowego widgetu w WordPressie; Dostosowanie widgetów paska bocznego WordPressa; Jak stworzyć widget dla paska bocznego WordPressa; Przewodnik po konfiguracji widgetów paska bocznego WordPressa;

Objaśnienie

Aby dodać niestandardowy widget do paska bocznego WordPressa, musisz stworzyć klasę widgetu i zarejestrować ją w WordPressie. Ten fragment kodu robi dokładnie to.

Rejestrowanie Widgetu:

  • Funkcja wp_dudecom_load_custom_widget rejestruje twój niestandardowy widget w WordPressie.
  • Używa register_widget, aby udostępnić twój widget w obszarze administracyjnym WordPressa.

Tworzenie Klasy Widgetu:

  • Klasa wp_dudecom_custom_widget rozszerza klasę WP_Widget, co jest standardowym sposobem tworzenia widgetów w WordPressie.
  • Metoda __construct ustawia nazwę i opis widgetu.

Wyświetlanie na Front-Endzie:

  • Metoda widget obsługuje to, co użytkownicy widzą na stronie. Wyświetla tytuł oraz prostą wiadomość "Witaj, świecie!".
  • Używa $args, aby owinąć widget w HTML specyficzny dla motywu, zapewniając, że wygląda on spójnie z projektem twojej strony.

Formularz w Back-Endzie:

  • Metoda form tworzy formularz w obszarze administracyjnym WordPressa, w którym możesz ustawić tytuł widgetu.
  • Ten formularz wykorzystuje standardowe pola wejściowe HTML do zbierania danych od użytkownika.

Aktualizacja Widgetu:

  • Metoda update zapisuje ustawienia widgetu, gdy je aktualizujesz w obszarze administracyjnym.
  • Zapewnia, że tytuł jest oczyszczany pod kątem bezpieczeństwa przed zapisaniem.

Po dodaniu tego kodu do pliku functions twojego motywu lub do niestandardowej wtyczki, twój niestandardowy widget będzie dostępny do dodania do dowolnego paska bocznego za pośrednictwem ekranu administracyjnego Widgetów WordPressa.

Kod

<?php
// Register and load the widget
function wp_dudecom_load_custom_widget() {
    register_widget('wp_dudecom_custom_widget');
}
add_action('widgets_init', 'wp_dudecom_load_custom_widget');

// Creating the widget class
class wp_dudecom_custom_widget extends WP_Widget {

    // Construct the widget
    function __construct() {
        parent::__construct(
            'wp_dudecom_custom_widget', // Base ID
            __('WP DudeCom Custom Widget', 'wp_dudecom_domain'), // Name
            array('description' => __('A Custom Widget for WP DudeCom', 'wp_dudecom_domain'),) // Args
        );
    }

    // Creating the widget front-end
    public function widget($args, $instance) {
        $title = apply_filters('widget_title', $instance['title']);
        
        // Before and after widget arguments are defined by themes
        echo $args['before_widget'];
        if (!empty($title))
            echo $args['before_title'] . $title . $args['after_title'];

        // This is where you run the code and display the output
        echo __('Hello, World!', 'wp_dudecom_domain');
        echo $args['after_widget'];
    }

    // Widget Backend
    public function form($instance) {
        if (isset($instance['title'])) {
            $title = $instance['title'];
        } else {
            $title = __('New title', 'wp_dudecom_domain');
        }
        // Widget admin form
        ?>
        <p>
            <label for="<?php echo esc_attr($this->get_field_id('title')); ?>"><?php _e('Title:'); ?></label>
            <input class="widefat" id="<?php echo esc_attr($this->get_field_id('title')); ?>" name="<?php echo esc_attr($this->get_field_name('title')); ?>" type="text" value="<?php echo esc_attr($title); ?>" />
        </p>
        <?php
    }

    // Updating widget replacing old instances with new
    public function update($new_instance, $old_instance) {
        $instance = array();
        $instance['title'] = (!empty($new_instance['title'])) ? sanitize_text_field($new_instance['title']) : '';
        return $instance;
    }
}
?>

Instrukcja

Lokalizacja pliku: Dodaj kod do pliku functions.php swojego motywu lub stwórz plik własnej wtyczki.

Wymagania wstępne:

  • Upewnij się, że masz dostęp do plików swojego motywu WordPress lub wiesz, jak stworzyć własną wtyczkę.
  • Podstawowa znajomość nawigacji w panelu administracyjnym WordPress.

Kroki wdrożenia:

  1. Dostęp do plików WordPress:
    • Zaloguj się do swojego panelu administracyjnego WordPress.
    • Przejdź do Wygląd > Edytor motywu, jeśli edytujesz plik functions.php, lub użyj klienta FTP, aby uzyskać dostęp do plików WordPress, jeśli tworzysz własną wtyczkę.
  2. Dodaj kod:
    • Jeśli edytujesz functions.php, przewiń na dół pliku i wklej podany kod.
    • Jeśli tworzysz własną wtyczkę, stwórz nowy plik PHP w katalogu wp-content/plugins, wklej kod i zapisz plik.
  3. Aktywuj widget:
    • Jeśli stworzyłeś wtyczkę, przejdź do Wtyczki > Zainstalowane wtyczki i aktywuj swoją nową wtyczkę.
  4. Dodaj widget do paska bocznego:
    • Przejdź do Wygląd > Widgety w panelu administracyjnym WordPress.
    • Znajdź WP DudeCom Custom Widget na liście dostępnych widgetów.
    • Przeciągnij i upuść widget w wybranym obszarze paska bocznego.
    • Skonfiguruj ustawienia widgetu, takie jak tytuł, i zapisz zmiany.

Po zakończeniu tych kroków, twój własny widget będzie widoczny w pasku bocznym twojej strony. Jeśli potrzebujesz pomocy przy wdrożeniu lub bardziej zaawansowanej funkcjonalności, rozważ skorzystanie z usług wp-dude.com.