Kuinka luoda mukautettu elementti-widget
Elementor on yksi WordPressin suosituimmista sivunrakentajista. WordPress-verkkosivuston rakentaminen Elementorin avulla on helppoa ja voit säästää paljon aikaa tällä suositulla laajennuksella. Elementor tarjoaa widgetejä eri osioiden luomiseen sivuillesi. Sinun tarvitsee vain poimia widget, konfiguroida se ja se näyttää luodut elementit käyttöliittymässä.
Saattaa käydä niin, että et saa valitsemiasi widgettejä. Saatat etsiä eri toimintoja, jotka eivät ole mahdollisia Elementorin oletuswidgetien kautta. Tällaisissa tilanteissa tarvitset mukautetun widgetin, joka täyttää vaatimuksesi. Onneksi Elementoria on helppo laajentaa, ja voit luoda minkä tahansa haluamasi toiminnallisuuden luomalla Elementor-laajennuksen. Elementor-laajennukset ovat samat kuin tavalliset WordPress-laajennukset, ne laajentavat perustoimintoja.
Tässä artikkelissa näytän sinulle, kuinka voit luoda mukautetun Elementor-widgetin, joka ei ole muuta kuin Elementor-laajennus.
Koska näen sen käytännössä, otan esimerkin Bootstrap Carouselista. Rakennamme WordPress-laajennuksen mukautetulle Elementor-widgetille. Tämä widget antaa sinulle mahdollisuuden lisätä Bootstrap-karusellia sivuillesi.
Tämän opetusohjelman tarkoituksena on tutustuttaa sinut Elementor-widgetien kehittämiseen. Aiomme kehittää Elementor-widgetin Bootstrap Carouselille. Samaa lähestymistapaa käyttämällä voit rakentaa omia vekottimia.
Laajennuksen luominen Elementorille
Aloittamiseksi sinun on asennettava ja aktivoitava Elementor-laajennus. Luo tämän jälkeen kansio ‘artisansweb-elementor-add-on’ hakemistoon ‘wp-content / plugins’. Täällä kansion nimeen ja koodin seuraavassa osassa käytän termiä artisansweb pitämään ainutlaatuisia viitteitä. Voit muuttaa tätä termiä haluamallasi tavalla.
Luo laajennuksemme sisällä tiedosto artisansweb-elementor-add-on.php. Tämä tiedosto sisältää koodin, joka luo Elementorin laajennuksen.
Saat laajennuksen luomisen kattilan Elementorin dokumentaatiosta.
Noudattamalla dokumentaatiota kirjoitin alla olevan koodin, joka sinun tulisi lisätä artisansweb-elementor-add-on.phptiedostoon.
<?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();Yllä olevaan koodin sisäiseen init_widgets()menetelmään sisällytin artisansweb-testimonial-widget.php‘widgetit’ -hakemistosta. Se tarkoittaa, että sinun on luotava widget-kansio ja tehtävä sen sisällä artisansweb-testimonial-widget.phptiedosto.
Lisäsin Bootstrapin JS- ja CSS-tiedostot enqueue_scriptstoiminnosta. Huomaa, että olen antanut näiden tiedostojen CDN-polun suoraan. Käyttäjä voi pitää nämä tiedostot laajennuskansiossa ja sisällyttää sen korvaamalla yllä olevan CDN-polun.
Tässä vaiheessa laajennuksen nimen pitäisi näkyä Plugins-> Installed Plugins -sivulla.
Älä aktivoi laajennusta. Meidän on kirjoitettava lisää koodia saadaksemme sen toimimaan.
Elementor-widgetin rakenne
Olemme valmiit sisällyttämään tarvittavat tiedostot widgetillemme. Seuraava osa on varsinaisen Elementor-widgetin luominen. Elementorin verkkosivusto tarjosi widget-rakenteen, jota meidän on noudatettava.
Lisää perusrakenne artisansweb-testimonial-widget.phptiedostoon seuraavasti.
<?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() {}
}Kaikilla yllä olevassa luokassa määritellyillä menetelmillä on oma vastuunsa. Sinun on lisättävä sinulle widgetin nimi menetelmään get_name(), widget-kuvake menee sisälle get_icon(), käyttöliittymän osa näkyy render()menetelmästä ja niin edelleen. Kaikkien menetelmien kuvaukset ovat saatavilla niiden dokumentaatiossa.
Huomaa: Elementor sallii käyttää fontti-mahtavia kuvakkeita, palauta vain luokan nimi merkkijonona. Lisään widgetimme kuvakkeen "fa fa-sliders".
Täytetään koodi kaikille menetelmille paitsi render(). Koska meidän on otettava viite Bootstrap-karusellista, lisätään render()toiminnon koodi opetusohjelman myöhemmässä osassa.
<?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
}
}Olen käyttänyt Elementor-toistinohjainta, jonka avulla voit rakentaa toistettavia kenttälohkoja. Kun olemme luomassa karusellia, sillä on useita kenttiä. Annoin tässä vaihtoehdot kuvan ja kuvatekstien lisäämiseksi toistimen ohjaimella.
Toistimen ohjauksen ohella käytin myös teksti- ja mediaohjainta. Napsauta tätä saadaksesi lisätietoja Elementor-ohjaimista.
Aktivoi laajennus ja yritä muokata sivua Elementorilla. Etsi artisansweb-karuselli, lisää tämä widget sivulle. Näet vaihtoehdot lisätä kuvatekstit alla olevien kuvien mukaisesti.
Bootstrap-karuselli käyttämällä Custom Elementor -widgetiä
Lähdimme kaikki rakentamaan karusellin Elementor-widgetin avulla. Jos katsot Bootstrap-karusellidokumentaatiota, he ovat toimittaneet karusellin HTML-koodin. Otan esimerkin karusellista, jossa on kuvatekstejä. Tämän tyyppisessä karusellissa sinun on käytettävä alla olevaa HTML-koodia.
<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>Yllä oleva on staattinen HTML. Kun kyse on Elementor-widgetistä, meidän on tehtävä siitä dynaaminen käyttämällä otsikolle ja kuvalle lisättyjä arvoja.
Joten meidän render()menetelmä on koodi seuraavasti.
<?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
}
}Se siitä! Lisää kuvat ja kuvatekstit, ja nyt sinun pitäisi nähdä Bootstrap-karuselli ilmestyvän sivullesi.
Kyse on widgetien kehityksestä Elementorissa. Samalla tavalla voit mukauttaa koodin käyttämään erilaisia Elementor-ohjaimia ja luoda mukautetut widgetit tarpeidesi mukaan.
Toivon, että ymmärrät, miten voit luoda mukautetun Elementor-widgetin. Jaa ajatuksesi ja ehdotuksesi alla olevassa kommenttiosassa.