Jak zbudować niestandardowy widżet Elementor
Elementor jest jednym z najpopularniejszych kreatorów stron dla WordPress. Tworzenie witryny WordPress za pomocą Elementora jest łatwe i możesz zaoszczędzić mnóstwo czasu, korzystając z tej popularnej wtyczki. Elementor udostępnia widżety do tworzenia różnych sekcji na Twoich stronach. Wystarczy wziąć widget, skonfigurować go, a on wyświetli wygenerowane elementy na interfejsie.
Może się zdarzyć, że nie otrzymasz wybranych widżetów. Być może szukasz innej funkcjonalności, która nie jest możliwa dzięki domyślnym widżetom Elementora. W takich sytuacjach potrzebujesz niestandardowego widżetu, który spełnia Twoje wymagania. Na szczęście Elementor można łatwo rozszerzyć i możesz zbudować dowolną funkcjonalność, tworząc rozszerzenie Elementora. Rozszerzenia Elementora są takie same jak zwykłe wtyczki WordPress, rozszerzają podstawową funkcjonalność.
W tym artykule pokażę, jak zbudować niestandardowy widżet Elementora, który jest niczym innym jak rozszerzeniem Elementora.
Aby zobaczyć to praktycznie, biorę przykład Bootstrap Carousel. Zbudujemy wtyczkę WordPress dla niestandardowego widżetu Elementor. Ten widżet umożliwi Ci dodanie karuzeli Bootstrap do Twoich stron.
Celem tego samouczka jest zapoznanie się z tworzeniem widżetów Elementor. Zamierzamy opracować widżet Elementora dla karuzeli Bootstrap. Stosując to samo podejście, możesz tworzyć własne widżety.
Tworzenie rozszerzenia dla Elementora
Aby rozpocząć, musisz zainstalować i aktywować wtyczkę Elementor. Następnie utwórz folder „artisansweb-elementor-add-on" w katalogu „wp-content/plugins”. Tutaj do nazwy folderu oraz w dalszej części kodu używam terminu „artisansweb”, aby zachować unikalne odniesienia. Możesz zmienić ten termin, co chcesz.
Wewnątrz naszej wtyczki utwórz plik artisansweb-elementor-add-on.php. Ten plik będzie zawierał kod, który tworzy rozszerzenie Elementora.
Schemat tworzenia rozszerzenia otrzymasz w dokumentacji Elementora .
Postępując zgodnie z dokumentacją napisałem poniższy kod, który należy dodać do artisansweb-elementor-add-on.phppliku.
<?php
/*
Plugin Name: Elementor Widget - Bootstrap Carousel
Plugin URI: https://artisansweb.net
Description: Creates a Bootstrap Carousel.
Author: Artisans Web
Version: 1.0
Author URI: https://artisansweb.net
*/
if (! defined( 'ABSPATH')) {
exit; // Exit if accessed directly.
}
final class Artisansweb_Elementor_Extension {
const VERSION = '1.0';
const MINIMUM_ELEMENTOR_VERSION = '2.0.0';
const MINIMUM_PHP_VERSION = '7.0';
private static $_instance = null;
public static function instance() {
if (is_null( self::$_instance)) {
self::$_instance = new self();
}
return self::$_instance;
}
public function __construct() {
add_action( 'init', [ $this, 'i18n' ] );
add_action( 'plugins_loaded', [ $this, 'init' ] );
add_action( 'wp_enqueue_scripts', [ $this, 'enqueue_scripts' ], 11 );
}
public function init() {
// Check if Elementor installed and activated
if (! did_action( 'elementor/loaded')) {
add_action( 'admin_notices', [ $this, 'admin_notice_missing_main_plugin' ] );
return;
}
// Check for required Elementor version
if (! version_compare( ELEMENTOR_VERSION, self::MINIMUM_ELEMENTOR_VERSION, '>=')) {
add_action( 'admin_notices', [ $this, 'admin_notice_minimum_elementor_version' ] );
return;
}
// Check for required PHP version
if (version_compare( PHP_VERSION, self::MINIMUM_PHP_VERSION, '<')) {
add_action( 'admin_notices', [ $this, 'admin_notice_minimum_php_version' ] );
return;
}
// Add Plugin actions
add_action( 'elementor/widgets/widgets_registered', [ $this, 'init_widgets' ] );
}
public function i18n() {
load_plugin_textdomain( 'artisansweb-elementor-add-on' );
}
public function admin_notice_missing_main_plugin() {
if (isset( $_GET['activate'])) unset( $_GET['activate'] );
$message = sprintf(
/* translators: 1: Plugin name 2: Elementor */
esc_html__( '"%1$s" requires "%2$s" to be installed and activated.', 'artisansweb-elementor-add-on' ),
'<strong>'. esc_html__( 'Elementor', 'artisansweb-elementor-add-on' ). '</strong>'
);
printf( '<div class="notice notice-warning is-dismissible"><p>%1$s</p></div>', $message );
}
public function admin_notice_minimum_elementor_version() {
if (isset( $_GET['activate'])) unset( $_GET['activate'] );
$message = sprintf(
/* translators: 1: Plugin name 2: Elementor 3: Required Elementor version */
esc_html__( '"%1$s" requires "%2$s" version %3$s or greater.', 'artisansweb-elementor-add-on' ),
'<strong>'. esc_html__( 'Elementor', 'artisansweb-elementor-add-on' ). '</strong>',
self::MINIMUM_ELEMENTOR_VERSION
);
printf( '<div class="notice notice-warning is-dismissible"><p>%1$s</p></div>', $message );
}
public function admin_notice_minimum_php_version() {
if (isset( $_GET['activate'])) unset( $_GET['activate'] );
$message = sprintf(
/* translators: 1: Plugin name 2: PHP 3: Required PHP version */
esc_html__( '"%1$s" requires "%2$s" version %3$s or greater.', 'artisansweb-elementor-add-on' ),
'<strong>'. esc_html__( 'PHP 7.0', 'artisansweb-elementor-add-on' ). '</strong>',
self::MINIMUM_PHP_VERSION
);
printf( '<div class="notice notice-warning is-dismissible"><p>%1$s</p></div>', $message );
}
public function init_widgets() {
// Include Widget files
require_once( __DIR__. '/widgets/artisansweb-testimonial-widget.php' );
// Register widget
ElementorPlugin::instance()->widgets_manager->register_widget_type( new Artisansweb_Testmonial_Widget() );
}
public function enqueue_scripts() {
wp_register_style( "bootstrap-css", "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css", array(), false, "all" );
wp_enqueue_style( "bootstrap-css" );
wp_register_script("bootstrap-js", "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js", array(), false, true);
wp_enqueue_script("bootstrap-js");
}
}
Artisansweb_Elementor_Extension::instance();W powyższym kodzie inside init_widgets()umieściłem a artisansweb-testimonial-widget.phpz katalogu ‘widgets’. Oznacza to, że musisz stworzyć folder „widgety” i wewnątrz niego utworzyć artisansweb-testimonial-widget.phpplik.
Z funkcji dodałem pliki JS i CSS Bootstrapa enqueue_scripts. Zauważ, że bezpośrednio podałem ścieżkę CDN tych plików. Użytkownik może zachować te pliki w folderze wtyczki i dołączyć je, zastępując powyższą ścieżkę CDN.
Na tym etapie powinieneś zobaczyć nazwę wtyczki na stronie Wtyczki->Zainstalowane wtyczki.
Nie aktywuj wtyczki. Musimy napisać więcej kodu, aby to działało.
Struktura widżetu Elementora
Skończyliśmy z dołączaniem wymaganych plików dla naszego widżetu. Następną częścią jest stworzenie rzeczywistego widżetu Elementora. Witryna Elementor zapewniła strukturę widżetów, którą musimy przestrzegać.
Dodaj podstawową strukturę do artisansweb-testimonial-widget.phppliku w następujący sposób.
<?php
class Artisansweb_Testmonial_Widget extends ElementorWidget_Base {
public function get_name() {}
public function get_title() {}
public function get_icon() {}
public function get_categories() {}
protected function _register_controls() {}
protected function render() {}
protected function _content_template() {}
}Wszystkie metody zdefiniowane w powyższej klasie mają własną odpowiedzialność. Musisz dodać nazwę widżetu w metodzie get_name(), ikona widżetu wejdzie do środka get_icon(), wyświetli się część frontendowa z render()metody i tak dalej. Opisy wszystkich metod dostępne są w ich dokumentacji.
Uwaga: Elementor pozwala na używanie wspaniałych ikon, wystarczy zwrócić nazwę klasy jako ciąg znaków. Dodam ikonę ‘fa fa-sliders’ dla naszego widżetu.
Wypełnijmy kod dla wszystkich metod z wyjątkiem render(). Ponieważ musimy pobrać referencję z karuzeli Bootstrap, dodamy kod render()funkcji w dalszej części samouczka.
<?php
class Artisansweb_Testmonial_Widget extends ElementorWidget_Base {
public function get_name() {
return 'artisansweb-carousel';
}
public function get_title() {
return __( 'Artisansweb Carousel', 'artisansweb-elementor-add-on' );
}
public function get_icon() {
return 'fa fa-sliders';
}
public function get_categories() {
return [ 'general' ];
}
protected function _register_controls() {
$this->start_controls_section(
'content_section',
[
'label' => __( 'Content', 'artisansweb-elementor-add-on' ),
'tab' => ElementorControls_Manager::TAB_CONTENT,
]
);
$repeater = new ElementorRepeater();
$repeater->add_control(
'list_title', [
'label' => __( 'Title', 'artisansweb-elementor-add-on' ),
'type' => ElementorControls_Manager::TEXT,
'default' => __( 'List Title', 'artisansweb-elementor-add-on' ),
'label_block' => true,
]
);
$repeater->add_control(
'list_image',
[
'label' => __( 'Choose Image', 'artisansweb-elementor-add-on' ),
'type' => ElementorControls_Manager::MEDIA,
'default' => [
'url' => ElementorUtils::get_placeholder_image_src(),
],
]
);
$this->add_control(
'list',
[
'label' => __( 'Repeater List', 'artisansweb-elementor-add-on' ),
'type' => ElementorControls_Manager::REPEATER,
'fields' => $repeater->get_controls(),
'default' => [
[
'list_title' => __( 'Title #1', 'artisansweb-elementor-add-on' ),
'list_image' => __( 'Item image.', 'artisansweb-elementor-add-on' ),
],
[
'list_title' => __( 'Title #2', 'artisansweb-elementor-add-on' ),
'list_image' => __( 'Item image.', 'artisansweb-elementor-add-on' ),
],
],
'title_field' => '{{{ list_title }}}',
]
);
$this->end_controls_section();
}
protected function render() {
// generate the final HTML on the frontend using PHP
}
}Użyłem kontrolki wzmacniacza Elementor, która pozwala budować powtarzalne bloki pól. Ponieważ tworzymy karuzelę, będzie ona miała wiele pól. Tutaj podałem opcje dodawania obrazu i podpisu za pomocą kontrolki repeatera.
Wraz z kontrolką repeatera użyłem również kontrolki Text and Media. Kliknij tutaj, aby przeczytać więcej o kontrolkach Elementora.
Aktywuj wtyczkę i spróbuj edytować swoją stronę za pomocą Elementora. Wyszukaj „Artisansweb Carousel”, dodaj ten widżet do strony. Zobaczysz opcje dodawania podpisów i obrazów, jak pokazano na zrzucie ekranu poniżej.
Karuzela Bootstrap przy użyciu niestandardowego widżetu Elementor
Wszyscy postanowiliśmy zbudować karuzelę za pomocą widżetu Elementor. Jeśli spojrzysz na dokumentację karuzeli Bootstrap, dostarczyli oni kod HTML dla karuzeli. Podam przykład karuzeli z napisami. W przypadku tego typu karuzeli musisz użyć poniższego kodu HTML.
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
<h3>Caption here...</h3>
</div>
<div class="carousel-item">
<img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
<h3>Caption here...</h3>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>Powyższy to statyczny kod HTML. Jeśli chodzi o widżet Elementor, musimy uczynić go dynamicznym, używając wartości dodanych do tytułu i obrazu.
Tak więc nasza render()metoda będzie miała następujący kod.
<?php
protected function render() {
// generate the final HTML on the frontend using PHP
$settings = $this->get_settings_for_display();
if ($settings['list']) {
?>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<?php for($i=0; $i<count($settings['list']); $i++) { ?>
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="<?php echo ($i==0)? 'active':''; ?>"></li>
<?php } ?>
</ol>
<div class="carousel-inner">
<?php $i = 0; ?>
<?php foreach ( $settings['list'] as $item) { ?>
<div class="carousel-item <?php echo ($i==0)? 'active':''; ?>">
<img class="d-block w-100" src="<?php echo $item['list_image']['url']; ?>" alt="<?php echo $item['list_title']; ?>" />
<div class="carousel-caption d-none d-md-block">
<h3><?php echo $item['list_title']; ?></h3>
</div>
</div>
<?php $i++; ?>
<?php } ?>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<?php
}
}Otóż to! Dodaj swoje obrazy i podpisy, a na Twojej stronie powinna pojawić się karuzela Bootstrap.
Wszystko sprowadza się do tworzenia widżetów w Elementorze. W podobny sposób możesz dostosować kod, aby używać różnych kontrolek Elementora i generować niestandardowe widżety zgodnie z własnymi wymaganiami.
Mam nadzieję, że rozumiesz, jak zbudować niestandardowy widżet Elementora. Podziel się swoimi przemyśleniami i sugestiami w sekcji komentarzy poniżej.
Powiązane artykuły
- Integracja MailChimp z wtyczką Contact Form 7 7
- Jak dodać kod po tagu Body w WordPressie
- Jak wysłać wiadomość e-mail WordPress za pomocą serwera SMTP