Dodaj niestandardowe widgety do paska bocznego WordPressa z łatwością
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:
- 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ę.
- 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.
- Jeśli edytujesz
- Aktywuj widget:
- Jeśli stworzyłeś wtyczkę, przejdź do Wtyczki > Zainstalowane wtyczki i aktywuj swoją nową wtyczkę.
- 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.