Hur man bygger anpassad Elementor-widget
Elementor är en av de mest populära sidbyggarna för WordPress. Det är enkelt att bygga en WordPress-webbplats med Elementor och du kan spara massor av tid med detta populära plugin. Elementor tillhandahåller widgets för att skapa olika sektioner på dina sidor. Du behöver bara plocka upp en widget, konfigurera den så visas de genererade elementen på frontend.
Det kan hända att du inte får widgets efter eget val. Du kanske letar efter en annan funktionalitet som inte är möjlig via Elementors standardwidgets. I sådana scenarier behöver du en anpassad widget som uppfyller dina krav. Lyckligtvis är Elementor lätt att utöka och du kan bygga vilken typ av funktionalitet du vill genom att skapa ett Elementor-tillägg. Elementor-tillägg är desamma som vanliga WordPress-plugins, de utökar den grundläggande funktionaliteten.
I den här artikeln visar jag dig hur du bygger en anpassad Elementor-widget som bara är ett Elementor-tillägg.
För att se det praktiskt taget tar jag ett exempel på Bootstrap Carousel. Vi bygger ett WordPress-plugin för den anpassade Elementor-widgeten. Denna widget ger dig möjlighet att lägga till Bootstrap-karusell på dina sidor.
Syftet med denna handledning är att göra dig bekant med Elementors utveckling av widgetar. Vi ska utveckla en Elementor-widget för Bootstrap Carousel. Med samma tillvägagångssätt kan du skapa dina egna widgets.
Skapa ett tillägg för Elementor
För att komma igång måste du ha installerat och aktiverat Elementor-plugin. Skapa sedan en mapp ‘artisansweb-elementor-add-on’ i katalogen ‘wp-content / plugins’. Här till mappnamnet och i nästa del av koden använder jag termen ‘artisansweb’ för att behålla unika referenser. Du kan ändra denna term beroende på vad du vill.
Skapa en fil i vårt plugin artisansweb-elementor-add-on.php. Den här filen innehåller en kod som skapar en förlängning av Elementor.
Du kommer att få pannplattan för att skapa tillägget i Elementors dokumentation.
Genom att följa dokumentationen skrev jag en nedanstående kod som du ska lägga till i artisansweb-elementor-add-on.phpfilen.
<?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();I ovanstående kodinsatsmetod init_widgets()inkluderade jag en artisansweb-testimonial-widget.phpfrån katalogen ” widgets ”. Det betyder att du måste skapa en "widgets" -mapp och inuti den skapa en artisansweb-testimonial-widget.phpfil.
Jag lade till JS- och CSS-filerna från Bootstrap från enqueue_scriptsfunktionen. Observera att jag har angett en CDN-sökväg för dessa filer direkt. Användaren kan behålla dessa filer i plugin-mappen och inkludera den genom att ersätta ovanstående CDN-sökväg.
I detta skede bör du se plugin-namnet visas på sidan Plugins-> Installerade plugins.
Aktivera inte plugin. Vi måste skriva mer kod för att få det att fungera.
Elementor Widget Structure
Vi är klara med att inkludera de filer som krävs för vår widget. Nästa del skapar en faktisk Elementor-widget. Elementors webbplats gav en widgetstruktur som vi måste följa.
Lägg till den grundläggande strukturen i artisansweb-testimonial-widget.phpfilen enligt följande.
<?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() {}
}Alla metoder som definieras i ovanstående klass har sitt eget ansvar. Du måste lägga till ditt widgetnamn i metoden get_name(), widgetikonen kommer in get_icon(), frontend-delen kommer att visas från render()metoden och så vidare. Beskrivningarna av alla metoder finns tillgängliga i deras dokumentation.
Obs! Elementor gör det möjligt att använda fantastiska ikoner för typsnitt, bara returnera klassnamnet som en sträng. Jag lägger till ikonen ‘fa fa-sliders’ för vår widget.
Låt oss fylla i koden för alla metoder utom render(). Eftersom vi måste ta en referens från Bootstrap-karusellen, lägger vi till koden för render()funktion i den senare delen av självstudien.
<?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
}
}Jag har använt en Elementor-repeaterkontroll som låter dig bygga repeterbara fältblock. När vi skapar en karusell kommer den att ha flera fält. Här gav jag alternativen för att lägga till en bild och bildtext med en repeaterkontroll.
Tillsammans med repeaterkontrollen använde jag också text- och mediekontrollen. Klicka här för att läsa mer om Elementor-kontroller.
Aktivera plugin-programmet och försök redigera din sida med Elementor. Sök efter ‘Artisansweb Carousel’, lägg till den här widgeten på sidan. Du kommer att se alternativen för att lägga till bildtext och bilder som visas på skärmdumpen nedan.
Bootstrap-karusell med anpassad Elementor-widget
Vi har alla planerat att bygga en karusell med Elementor-widgeten. Om du tittar på Bootstrap-karuselldokumentationen har de tillhandahållit HTML-koden för karusellen. Jag tar ett exempel på en karusell med bildtexter. För denna typ av karusell måste du använda nedanstående 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>Ovanstående är statisk HTML. När det gäller Elementor-widgeten måste vi göra den dynamisk genom att använda värdena som läggs till för titel och bild.
Så vår render()metod kommer att ha koden enligt följande.
<?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
}
}Det är allt! Lägg till dina bilder och bildtexter så ser du att Bootstrap-karusellen visas på din sida.
Det handlar om widgetutveckling i Elementor. På ett liknande sätt kan du anpassa koden för att använda olika Elementor-kontroller och generera de anpassade widgetarna enligt dina krav.
Jag hoppas att du förstår hur man bygger en anpassad Elementor-widget. Dela dina tankar och förslag i kommentarsektionen nedan.
relaterade artiklar
- MailChimp-integration med Plugin för kontaktformulär 7
- Så här lägger du till kod efter Body Tag i WordPress
- Hur du skickar WordPress-e-post med SMTP-server