{"id":25562,"date":"2021-05-31T11:49:00","date_gmt":"2021-05-31T08:49:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=25562"},"modified":"2021-10-17T18:34:19","modified_gmt":"2021-10-17T15:34:19","slug":"kuidas-luua-kohandatud-elemendi-vidinat","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/et\/kuidas-luua-kohandatud-elemendi-vidinat\/","title":{"rendered":"Kuidas luua kohandatud elemendi vidinat"},"content":{"rendered":"

Elementor<\/a> on WordPressi \u00fcks populaarsemaid lehtede loojaid. Elementori abil WordPressi veebisaidi loomine on lihtne ja selle populaarse pistikprogrammi abil saate s\u00e4\u00e4sta palju aega. Elementor pakub vidinaid teie lehtedele erinevate jaotiste loomiseks. Peate lihtsalt vidina k\u00e4tte v\u00f5tma, selle konfigureerima ja see kuvab loodud elemendid esipaneelil.<\/p>\n

V\u00f5ib juhtuda, et te ei saa enda valitud vidinaid. V\u00f5imalik, et otsite m\u00f5nda muud funktsionaalsust, mis pole Elementori vaikevidinate kaudu v\u00f5imalik. Sellistes stsenaariumides vajate kohandatud vidinat, mis vastab teie n\u00f5udele. \u00d5nneks on Elementorit lihtne laiendada ja saate luua mis tahes funktsionaalsuse, luues Elementori laienduse. Elementori laiendused on samad mis tavalistel WordPressi pistikprogrammidel, need laiendavad p\u00f5hifunktsionaalsust.<\/p>\n

Selles artiklis n\u00e4itan teile, kuidas luua kohandatud Elementori vidinat, mis pole midagi muud kui Elementori laiendus.<\/p>\n

Selle praktilise n\u00e4gemise jaoks v\u00f5tan n\u00e4ite Bootstrapi karussellist<\/a>. Ehitame kohandatud vidina jaoks WordPressi pistikprogrammi. See vidin annab teile v\u00f5imaluse lisada oma lehtedele Bootstrapi karussell.<\/p>\n

Selle \u00f5petuse eesm\u00e4rk on tutvuda Elementori vidina arendusega. Arendame Bootstrapi karusselli jaoks Elementori vidina. Sama l\u00e4henemist kasutades saate luua oma vidinad.<\/p>\n

Laiendi loomine elemendile Elementor<\/h3>\n

Alustamiseks peate olema installinud ja aktiveerinud Elementori pistikprogrammi. P\u00e4rast seda looge kataloogi ‘wp-content \/ plugins’ kaust ‘artisansweb-elementor-add-on’. Siit kausta nimeni ja koodi j\u00e4rgmises osas kasutan ainulaadsete viidete s\u00e4ilitamiseks terminit "artisansweb". Seda terminit saate muuta vastavalt soovile.<\/p>\n

Looge meie pistikprogrammis fail artisansweb-elementor-add-on.php<\/code>. See fail sisaldab koodi, mis loob Elementori laienduse.<\/p>\n

Laienduse loomise katla saate Elementori dokumentatsioonist<\/a>.<\/p>\n

Dokumentatsiooni j\u00e4rgides kirjutasin allpool oleva koodi, mille peaksite artisansweb-elementor-add-on.php<\/code>faili lisama .<\/p>\n

<?php\n\/*\nPlugin Name: Elementor Widget - Bootstrap Carousel\nPlugin URI: https:\/\/artisansweb.net\nDescription: Creates a Bootstrap Carousel.\nAuthor: Artisans Web\nVersion: 1.0\nAuthor URI: https:\/\/artisansweb.net\n*\/\n\u00a0\nif (! defined( 'ABSPATH')) {\n\u00a0\u00a0\u00a0\u00a0exit; \/\/ Exit if accessed directly.\n}\n\u00a0\nfinal class Artisansweb_Elementor_Extension {\n\u00a0\n\u00a0\u00a0\u00a0\u00a0const VERSION = '1.0';\n\u00a0\u00a0\u00a0\u00a0const MINIMUM_ELEMENTOR_VERSION = '2.0.0';\n\u00a0\u00a0\u00a0\u00a0const MINIMUM_PHP_VERSION = '7.0';\n\u00a0\n\u00a0\u00a0\u00a0\u00a0private static $_instance = null;\n\u00a0\n\u00a0\u00a0\u00a0\u00a0public static function instance() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (is_null( self::$_instance)) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0self::$_instance = new self();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return self::$_instance;\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0public function __construct() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0add_action( 'init', [ $this, 'i18n' ] );\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0add_action( 'plugins_loaded', [ $this, 'init' ] );\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0add_action( 'wp_enqueue_scripts', [ $this, 'enqueue_scripts' ], 11 );\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0public function init() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ Check if Elementor installed and activated\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (! did_action( 'elementor\/loaded')) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0add_action( 'admin_notices', [ $this, 'admin_notice_missing_main_plugin' ] );\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ Check for required Elementor version\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (! version_compare( ELEMENTOR_VERSION, self::MINIMUM_ELEMENTOR_VERSION, '>=')) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0add_action( 'admin_notices', [ $this, 'admin_notice_minimum_elementor_version' ] );\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ Check for required PHP version\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (version_compare( PHP_VERSION, self::MINIMUM_PHP_VERSION, '<')) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0add_action( 'admin_notices', [ $this, 'admin_notice_minimum_php_version' ] );\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ Add Plugin actions\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0add_action( 'elementor\/widgets\/widgets_registered', [ $this, 'init_widgets' ] );\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0public function i18n() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0load_plugin_textdomain( 'artisansweb-elementor-add-on' );\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0public function admin_notice_missing_main_plugin() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (isset( $_GET['activate'])) unset( $_GET['activate'] );\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$message = sprintf(\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/* translators: 1: Plugin name 2: Elementor *\/\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0esc_html__( '\"%1$s\" requires \"%2$s\" to be installed and activated.', 'artisansweb-elementor-add-on' ),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'<strong>'. esc_html__( 'Elementor', 'artisansweb-elementor-add-on' ). '<\/strong>'\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0printf( '<div class=\"notice notice-warning is-dismissible\"><p>%1$s<\/p><\/div>', $message );\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0public function admin_notice_minimum_elementor_version() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (isset( $_GET['activate'])) unset( $_GET['activate'] );\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$message = sprintf(\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/* translators: 1: Plugin name 2: Elementor 3: Required Elementor version *\/\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0esc_html__( '\"%1$s\" requires \"%2$s\" version %3$s or greater.', 'artisansweb-elementor-add-on' ),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'<strong>'. esc_html__( 'Elementor', 'artisansweb-elementor-add-on' ). '<\/strong>',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0self::MINIMUM_ELEMENTOR_VERSION\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0printf( '<div class=\"notice notice-warning is-dismissible\"><p>%1$s<\/p><\/div>', $message );\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0public function admin_notice_minimum_php_version() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (isset( $_GET['activate'])) unset( $_GET['activate'] );\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$message = sprintf(\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/* translators: 1: Plugin name 2: PHP 3: Required PHP version *\/\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0esc_html__( '\"%1$s\" requires \"%2$s\" version %3$s or greater.', 'artisansweb-elementor-add-on' ),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'<strong>'. esc_html__( 'PHP 7.0', 'artisansweb-elementor-add-on' ). '<\/strong>',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0self::MINIMUM_PHP_VERSION\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0printf( '<div class=\"notice notice-warning is-dismissible\"><p>%1$s<\/p><\/div>', $message );\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0public function init_widgets() {\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ Include Widget files\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0require_once( __DIR__. '\/widgets\/artisansweb-testimonial-widget.php' );\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ Register widget\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0ElementorPlugin::instance()->widgets_manager->register_widget_type( new Artisansweb_Testmonial_Widget() );\n\u00a0\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0public function enqueue_scripts() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0wp_register_style( \"bootstrap-css\", \"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.1.3\/css\/bootstrap.min.css\", array(), false, \"all\" );\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0wp_enqueue_style( \"bootstrap-css\" );\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0wp_register_script(\"bootstrap-js\", \"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.1.3\/js\/bootstrap.min.js\", array(), false, true);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0wp_enqueue_script(\"bootstrap-js\");\n\u00a0\u00a0\u00a0\u00a0}\n}\nArtisansweb_Elementor_Extension::instance();<\/code><\/pre>\n
\u00dclaltoodud koodisisesesse init_widgets()<\/code>meetodisse artisansweb-testimonial-widget.php<\/code>lisasin kataloogi ‘vidinad’ a. See t\u00e4hendab, et peate looma kausta "vidinad" ja tegema selles artisansweb-testimonial-widget.php<\/code>faili.<\/p>\n
Lisasin enqueue_scripts<\/code>funktsioonist Bootstrapi JS- ja CSS-failid. Pange t\u00e4hele, et olen andnud nende failide CDN-tee otse. Kasutaja saab neid faile pistikprogrammi kaustas hoida ja lisada, asendades \u00fclaltoodud CDN-i tee.<\/p>\n
Selles etapis peaksite pistikprogrammi nime kuvama lehel Pluginad-> Installitud<\/strong> pistikprogrammid .<\/p>\n
\u00c4rge aktiveerige pistikprogrammi. Selle toimimiseks peame kirjutama rohkem koodi.<\/p>\n
Elementori vidina struktuur<\/h3>\n
Oleme oma vidina jaoks vajalikud failid lisanud. J\u00e4rgmine osa on tegeliku Elementori vidina loomine. Elementori veebisait pakkus vidina struktuuri,<\/a> mida peame j\u00e4rgima.<\/p>\n
Lisage artisansweb-testimonial-widget.php<\/code>faili p\u00f5histruktuur j\u00e4rgmiselt.<\/p>\n
<?php\nclass Artisansweb_Testmonial_Widget extends ElementorWidget_Base {\n\u00a0\n\u00a0\u00a0\u00a0\u00a0public function get_name() {}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0public function get_title() {}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0public function get_icon() {}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0public function get_categories() {}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0protected function _register_controls() {}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0protected function render() {}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0protected function _content_template() {}\n\u00a0\n}<\/code><\/pre>\n
K\u00f5igil \u00fclaltoodud klassis m\u00e4\u00e4ratletud meetoditel on oma vastutus. Peate meetodisse lisama vidina nime get_name()<\/code>, vidinaikoon l\u00e4heb sisse get_icon()<\/code>, esipaneeli osa kuvatakse render()<\/code>meetodist ja nii edasi. K\u00f5igi meetodite kirjeldused on saadaval nende dokumentatsioonis<\/a>.<\/p>\n
M\u00e4rkus:<\/strong> Elementor lubab kasutada \u00e4gedate fontide ikoone, tagastades lihtsalt klassi nime stringina. Lisan meie vidina ikooni "fa fa-liugurid".<\/p>\n
T\u00e4idame koodi k\u00f5igi meetodite jaoks, v\u00e4lja arvatud render()<\/code>. Kuna peame v\u00f5tma viite Bootstrapi karussellilt, lisame render()<\/code>funktsiooni koodi juhendaja hilisemas osas.<\/p>\n
<?php\nclass Artisansweb_Testmonial_Widget extends ElementorWidget_Base {\n\u00a0\n\u00a0\u00a0\u00a0\u00a0public function get_name() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return 'artisansweb-carousel';\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0public function get_title() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return __( 'Artisansweb Carousel', 'artisansweb-elementor-add-on' );\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0public function get_icon() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return 'fa fa-sliders';\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0public function get_categories() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return [ 'general' ];\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0protected function _register_controls() {\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$this->start_controls_section(\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'content_section',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0[\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'label' => __( 'Content', 'artisansweb-elementor-add-on' ),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'tab' => ElementorControls_Manager::TAB_CONTENT,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0]\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$repeater = new ElementorRepeater();\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$repeater->add_control(\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'list_title', [\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'label' => __( 'Title', 'artisansweb-elementor-add-on' ),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'type' => ElementorControls_Manager::TEXT,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'default' => __( 'List Title', 'artisansweb-elementor-add-on' ),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'label_block' => true,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0]\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$repeater->add_control(\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'list_image',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0[\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'label' => __( 'Choose Image', 'artisansweb-elementor-add-on' ),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'type' => ElementorControls_Manager::MEDIA,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'default' => [\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'url' => ElementorUtils::get_placeholder_image_src(),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0],\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0]\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$this->add_control(\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'list',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0[\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'label' => __( 'Repeater List', 'artisansweb-elementor-add-on' ),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'type' => ElementorControls_Manager::REPEATER,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'fields' => $repeater->get_controls(),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'default' => [\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0[\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'list_title' => __( 'Title #1', 'artisansweb-elementor-add-on' ),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'list_image' => __( 'Item image.', 'artisansweb-elementor-add-on' ),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0],\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0[\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'list_title' => __( 'Title #2', 'artisansweb-elementor-add-on' ),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'list_image' => __( 'Item image.', 'artisansweb-elementor-add-on' ),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0],\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0],\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'title_field' => '{{{ list_title }}}',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0]\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$this->end_controls_section();\n\u00a0\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0protected function render() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ generate the final HTML on the frontend using PHP\n\u00a0\u00a0\u00a0\u00a0}\n}<\/code><\/pre>\n
Olen kasutanud Elementori kordusjuhtimist, mis v\u00f5imaldab teil ehitada korratavaid v\u00e4ljaplokke. Kuna me loome karusselli, on sellel mitu v\u00e4lja. Siinkohal andsin v\u00f5imalused pildi ja pealdise lisamiseks repiiterjuhtimise abil.<\/p>\n
Koos korduri juhtimisega kasutasin ka teksti ja meedia juhtimist. Elementori juhtnuppude kohta lisateabe saamiseks kl\u00f5psake siin<\/a>.<\/p>\n
Aktiveerige pistikprogramm ja proovige oma lehte Elementori abil muuta. Otsige ‘Artisansweb Carousel’, lisage see vidin lehele. N\u00e4ete subtiitrite ja piltide lisamise v\u00f5imalusi, nagu on n\u00e4idatud alloleval ekraanipildil.<\/p>\n
Bootstrapi karussell, kasutades kohandatud elementide vidinat<\/h3>\n
Asusime k\u00f5ik koos Elementori vidina abil karusselli ehitama. Kui vaatate Bootstrapi karusselli<\/a> dokumentatsiooni, on nad karusselli HTML-koodi esitanud. V\u00f5tan n\u00e4iteks pealdistega karusselli. Seda t\u00fc\u00fcpi karusselli jaoks peate kasutama allolevat HTML-i.<\/p>\n
<div id=\"carouselExampleIndicators\" class=\"carousel slide\" data-ride=\"carousel\">\n\u00a0\u00a0\u00a0\u00a0<ol class=\"carousel-indicators\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<li data-target=\"#carouselExampleIndicators\" data-slide-to=\"0\" class=\"active\"><\/li>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<li data-target=\"#carouselExampleIndicators\" data-slide-to=\"1\"><\/li>\n\u00a0\u00a0\u00a0\u00a0<\/ol>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"carousel-inner\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"carousel-item active\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<img class=\"d-block w-100\" src=\"...\/800x400?auto=yes&bg=777&fg=555&text=First slide\" alt=\"First slide\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<h3>Caption here...<\/h3>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"carousel-item\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<img class=\"d-block w-100\" src=\"...\/800x400?auto=yes&bg=666&fg=444&text=Second slide\" alt=\"Second slide\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<h3>Caption here...<\/h3>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<a class=\"carousel-control-prev\" href=\"#carouselExampleIndicators\" role=\"button\" data-slide=\"prev\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"carousel-control-prev-icon\" aria-hidden=\"true\"><\/span>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"sr-only\">Previous<\/span>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/a>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<a class=\"carousel-control-next\" href=\"#carouselExampleIndicators\" role=\"button\" data-slide=\"next\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"carousel-control-next-icon\" aria-hidden=\"true\"><\/span>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"sr-only\">Next<\/span>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/a>\n<\/div><\/code><\/pre>\n
\u00dclalolev on staatiline HTML. Elementori vidina osas peame selle muutma d\u00fcnaamiliseks, kasutades pealkirja ja pildi jaoks lisatud v\u00e4\u00e4rtusi.<\/p>\n
Niisiis, meie render()<\/code>meetodil on kood j\u00e4rgmine.<\/p>\n
<?php\nprotected function render() {\n\u00a0\u00a0\u00a0\u00a0\/\/ generate the final HTML on the frontend using PHP\n\u00a0\u00a0\u00a0\u00a0$settings = $this->get_settings_for_display();\n\u00a0\n\u00a0\u00a0\u00a0\u00a0if ($settings['list']) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div id=\"carouselExampleIndicators\" class=\"carousel slide\" data-ride=\"carousel\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<ol class=\"carousel-indicators\">\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php for($i=0; $i<count($settings['list']); $i++) { ?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<li data-target=\"#carouselExampleIndicators\" data-slide-to=\"0\" class=\"<?php echo ($i==0)? 'active':''; ?>\"><\/li>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php } ?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/ol>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"carousel-inner\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php $i = 0; ?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php foreach (\u00a0 $settings['list'] as $item) { ?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"carousel-item <?php echo ($i==0)? 'active':''; ?>\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<img class=\"d-block w-100\" src=\"<?php echo $item['list_image']['url']; ?>\" alt=\"<?php echo $item['list_title']; ?>\" \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"carousel-caption d-none d-md-block\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<h3><?php echo $item['list_title']; ?><\/h3>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php $i++; ?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php } ?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<a class=\"carousel-control-prev\" href=\"#carouselExampleIndicators\" role=\"button\" data-slide=\"prev\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"carousel-control-prev-icon\" aria-hidden=\"true\"><\/span>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"sr-only\">Previous<\/span>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/a>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<a class=\"carousel-control-next\" href=\"#carouselExampleIndicators\" role=\"button\" data-slide=\"next\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"carousel-control-next-icon\" aria-hidden=\"true\"><\/span>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"sr-only\">Next<\/span>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/a>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php\n\u00a0\u00a0\u00a0\u00a0}\n}<\/code><\/pre>\n
See selleks! Lisage oma pildid ja pealdised ning peaksite n\u00fc\u00fcd n\u00e4gema, et teie lehele ilmub Bootstrapi karussell.<\/p>\n
See k\u00f5ik on seotud Elementori vidinate arendamisega. Sarnasel viisil saate koodi kohandada erinevate Elementori juhtnuppude kasutamiseks ja luua kohandatud vidinaid vastavalt teie vajadustele.<\/p>\n
Loodan, et saate aru, kuidas luua kohandatud Elementori vidinat. Palun jagage oma m\u00f5tteid ja ettepanekuid allpool olevas kommentaaride jaotises.<\/p>\n
seotud artiklid<\/h4>\n