Snippet

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

Jak dodać niestandardowy widget do paska bocznego WordPressaDodaj niestandardowy widget do paska bocznego WordPressaStwórz niestandardowy widget dla paska bocznego WordPressaDodaj dynamiczne widgety do paska bocznego WordPressaDostosuj pasek boczny WordPressa za pomocą widgetówSamouczek dotyczący niestandardowego widgetu paska bocznego WordPressaKroki do dodania niestandardowego widgetu w WordPressieDostosowanie widgetów paska bocznego WordPressaJak stworzyć widget dla paska bocznego WordPressaPrzewodnik 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

1<?php 2// Register and load the widget 3function wp_dudecom_load_custom_widget() { 4 register_widget('wp_dudecom_custom_widget'); 5} 6add_action('widgets_init', 'wp_dudecom_load_custom_widget'); 7 8// Creating the widget class 9class wp_dudecom_custom_widget extends WP_Widget { 10 11 // Construct the widget 12 function __construct() { 13 parent::__construct( 14 'wp_dudecom_custom_widget', // Base ID 15 __('WP DudeCom Custom Widget', 'wp_dudecom_domain'), // Name 16 array('description' => __('A Custom Widget for WP DudeCom', 'wp_dudecom_domain'),) // Args 17 ); 18 } 19 20 // Creating the widget front-end 21 public function widget($args, $instance) { 22 $title = apply_filters('widget_title', $instance['title']); 23 24 // Before and after widget arguments are defined by themes 25 echo $args['before_widget']; 26 if (!empty($title)) 27 echo $args['before_title'] . $title . $args['after_title']; 28 29 // This is where you run the code and display the output 30 echo __('Hello, World!', 'wp_dudecom_domain'); 31 echo $args['after_widget']; 32 } 33 34 // Widget Backend 35 public function form($instance) { 36 if (isset($instance['title'])) { 37 $title = $instance['title']; 38 } else { 39 $title = __('New title', 'wp_dudecom_domain'); 40 } 41 // Widget admin form 42 ?> 43 <p> 44 <label for="<?php echo esc_attr($this->get_field_id('title')); ?>"><?php _e('Title:'); ?></label> 45 <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); ?>" /> 46 </p> 47 <?php 48 } 49 50 // Updating widget replacing old instances with new 51 public function update($new_instance, $old_instance) { 52 $instance = array(); 53 $instance['title'] = (!empty($new_instance['title'])) ? sanitize_text_field($new_instance['title']) : ''; 54 return $instance; 55 } 56} 57?>

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.