Kuidas luua kohandatud elemendi vidinat
Elementor on WordPressi üks populaarsemaid lehtede loojaid. Elementori abil WordPressi veebisaidi loomine on lihtne ja selle populaarse pistikprogrammi abil saate säästa palju aega. Elementor pakub vidinaid teie lehtedele erinevate jaotiste loomiseks. Peate lihtsalt vidina kätte võtma, selle konfigureerima ja see kuvab loodud elemendid esipaneelil.
Võib juhtuda, et te ei saa enda valitud vidinaid. Võimalik, et otsite mõnda muud funktsionaalsust, mis pole Elementori vaikevidinate kaudu võimalik. Sellistes stsenaariumides vajate kohandatud vidinat, mis vastab teie nõudele. Õnneks on Elementorit lihtne laiendada ja saate luua mis tahes funktsionaalsuse, luues Elementori laienduse. Elementori laiendused on samad mis tavalistel WordPressi pistikprogrammidel, need laiendavad põhifunktsionaalsust.
Selles artiklis näitan teile, kuidas luua kohandatud Elementori vidinat, mis pole midagi muud kui Elementori laiendus.
Selle praktilise nägemise jaoks võtan näite Bootstrapi karussellist. Ehitame kohandatud vidina jaoks WordPressi pistikprogrammi. See vidin annab teile võimaluse lisada oma lehtedele Bootstrapi karussell.
Selle õpetuse eesmärk on tutvuda Elementori vidina arendusega. Arendame Bootstrapi karusselli jaoks Elementori vidina. Sama lähenemist kasutades saate luua oma vidinad.
Laiendi loomine elemendile Elementor
Alustamiseks peate olema installinud ja aktiveerinud Elementori pistikprogrammi. Pärast seda looge kataloogi ‘wp-content / plugins’ kaust ‘artisansweb-elementor-add-on’. Siit kausta nimeni ja koodi järgmises osas kasutan ainulaadsete viidete säilitamiseks terminit "artisansweb". Seda terminit saate muuta vastavalt soovile.
Looge meie pistikprogrammis fail artisansweb-elementor-add-on.php. See fail sisaldab koodi, mis loob Elementori laienduse.
Laienduse loomise katla saate Elementori dokumentatsioonist.
Dokumentatsiooni järgides kirjutasin allpool oleva koodi, mille peaksite artisansweb-elementor-add-on.phpfaili lisama .
<?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();Ülaltoodud koodisisesesse init_widgets()meetodisse artisansweb-testimonial-widget.phplisasin kataloogi ‘vidinad’ a. See tähendab, et peate looma kausta "vidinad" ja tegema selles artisansweb-testimonial-widget.phpfaili.
Lisasin enqueue_scriptsfunktsioonist Bootstrapi JS- ja CSS-failid. Pange tähele, et olen andnud nende failide CDN-tee otse. Kasutaja saab neid faile pistikprogrammi kaustas hoida ja lisada, asendades ülaltoodud CDN-i tee.
Selles etapis peaksite pistikprogrammi nime kuvama lehel Pluginad-> Installitud pistikprogrammid .
Ärge aktiveerige pistikprogrammi. Selle toimimiseks peame kirjutama rohkem koodi.
Elementori vidina struktuur
Oleme oma vidina jaoks vajalikud failid lisanud. Järgmine osa on tegeliku Elementori vidina loomine. Elementori veebisait pakkus vidina struktuuri, mida peame järgima.
Lisage artisansweb-testimonial-widget.phpfaili põhistruktuur järgmiselt.
<?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() {}
}Kõigil ülaltoodud klassis määratletud meetoditel on oma vastutus. Peate meetodisse lisama vidina nime get_name(), vidinaikoon läheb sisse get_icon(), esipaneeli osa kuvatakse render()meetodist ja nii edasi. Kõigi meetodite kirjeldused on saadaval nende dokumentatsioonis.
Märkus: Elementor lubab kasutada ägedate fontide ikoone, tagastades lihtsalt klassi nime stringina. Lisan meie vidina ikooni "fa fa-liugurid".
Täidame koodi kõigi meetodite jaoks, välja arvatud render(). Kuna peame võtma viite Bootstrapi karussellilt, lisame render()funktsiooni koodi juhendaja hilisemas osas.
<?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 kasutanud Elementori kordusjuhtimist, mis võimaldab teil ehitada korratavaid väljaplokke. Kuna me loome karusselli, on sellel mitu välja. Siinkohal andsin võimalused pildi ja pealdise lisamiseks repiiterjuhtimise abil.
Koos korduri juhtimisega kasutasin ka teksti ja meedia juhtimist. Elementori juhtnuppude kohta lisateabe saamiseks klõpsake siin.
Aktiveerige pistikprogramm ja proovige oma lehte Elementori abil muuta. Otsige ‘Artisansweb Carousel’, lisage see vidin lehele. Näete subtiitrite ja piltide lisamise võimalusi, nagu on näidatud alloleval ekraanipildil.
Bootstrapi karussell, kasutades kohandatud elementide vidinat
Asusime kõik koos Elementori vidina abil karusselli ehitama. Kui vaatate Bootstrapi karusselli dokumentatsiooni, on nad karusselli HTML-koodi esitanud. Võtan näiteks pealdistega karusselli. Seda tüüpi karusselli jaoks peate kasutama allolevat HTML-i.
<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>Ülalolev on staatiline HTML. Elementori vidina osas peame selle muutma dünaamiliseks, kasutades pealkirja ja pildi jaoks lisatud väärtusi.
Niisiis, meie render()meetodil on kood järgmine.
<?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
}
}See selleks! Lisage oma pildid ja pealdised ning peaksite nüüd nägema, et teie lehele ilmub Bootstrapi karussell.
See kõik on seotud Elementori vidinate arendamisega. Sarnasel viisil saate koodi kohandada erinevate Elementori juhtnuppude kasutamiseks ja luua kohandatud vidinaid vastavalt teie vajadustele.
Loodan, et saate aru, kuidas luua kohandatud Elementori vidinat. Palun jagage oma mõtteid ja ettepanekuid allpool olevas kommentaaride jaotises.