{"id":25112,"date":"2021-05-31T12:06:00","date_gmt":"2021-05-31T09:06:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=25112"},"modified":"2021-10-17T20:31:05","modified_gmt":"2021-10-17T17:31:05","slug":"kuinka-luoda-mukautettu-elementti-widget","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fi\/kuinka-luoda-mukautettu-elementti-widget\/","title":{"rendered":"Kuinka luoda mukautettu elementti-widget"},"content":{"rendered":"

Elementor<\/a> on yksi WordPressin suosituimmista sivunrakentajista. WordPress-verkkosivuston rakentaminen Elementorin avulla on helppoa ja voit s\u00e4\u00e4st\u00e4\u00e4 paljon aikaa t\u00e4ll\u00e4 suositulla laajennuksella. Elementor tarjoaa widgetej\u00e4 eri osioiden luomiseen sivuillesi. Sinun tarvitsee vain poimia widget, konfiguroida se ja se n\u00e4ytt\u00e4\u00e4 luodut elementit k\u00e4ytt\u00f6liittym\u00e4ss\u00e4.<\/p>\n

Saattaa k\u00e4yd\u00e4 niin, ett\u00e4 et saa valitsemiasi widgettej\u00e4. Saatat etsi\u00e4 eri toimintoja, jotka eiv\u00e4t ole mahdollisia Elementorin oletuswidgetien kautta. T\u00e4llaisissa tilanteissa tarvitset mukautetun widgetin, joka t\u00e4ytt\u00e4\u00e4 vaatimuksesi. Onneksi Elementoria on helppo laajentaa, ja voit luoda mink\u00e4 tahansa haluamasi toiminnallisuuden luomalla Elementor-laajennuksen. Elementor-laajennukset ovat samat kuin tavalliset WordPress-laajennukset, ne laajentavat perustoimintoja.<\/p>\n

T\u00e4ss\u00e4 artikkelissa n\u00e4yt\u00e4n sinulle, kuinka voit luoda mukautetun Elementor-widgetin, joka ei ole muuta kuin Elementor-laajennus.<\/p>\n

Koska n\u00e4en sen k\u00e4yt\u00e4nn\u00f6ss\u00e4, otan esimerkin Bootstrap Carouselista<\/a>. Rakennamme WordPress-laajennuksen mukautetulle Elementor-widgetille. T\u00e4m\u00e4 widget antaa sinulle mahdollisuuden lis\u00e4t\u00e4 Bootstrap-karusellia sivuillesi.<\/p>\n

T\u00e4m\u00e4n opetusohjelman tarkoituksena on tutustuttaa sinut Elementor-widgetien kehitt\u00e4miseen. Aiomme kehitt\u00e4\u00e4 Elementor-widgetin Bootstrap Carouselille. Samaa l\u00e4hestymistapaa k\u00e4ytt\u00e4m\u00e4ll\u00e4 voit rakentaa omia vekottimia.<\/p>\n

Laajennuksen luominen Elementorille<\/h3>\n

Aloittamiseksi sinun on asennettava ja aktivoitava Elementor-laajennus. Luo t\u00e4m\u00e4n j\u00e4lkeen kansio ’artisansweb-elementor-add-on’ hakemistoon ’wp-content \/ plugins’. T\u00e4\u00e4ll\u00e4 kansion nimeen ja koodin seuraavassa osassa k\u00e4yt\u00e4n termi\u00e4 artisansweb pit\u00e4m\u00e4\u00e4n ainutlaatuisia viitteit\u00e4. Voit muuttaa t\u00e4t\u00e4 termi\u00e4 haluamallasi tavalla.<\/p>\n

Luo laajennuksemme sis\u00e4ll\u00e4 tiedosto artisansweb-elementor-add-on.php<\/code>. T\u00e4m\u00e4 tiedosto sis\u00e4lt\u00e4\u00e4 koodin, joka luo Elementorin laajennuksen.<\/p>\n

Saat laajennuksen luomisen kattilan Elementorin dokumentaatiosta<\/a>.<\/p>\n

Noudattamalla dokumentaatiota kirjoitin alla olevan koodin, joka sinun tulisi lis\u00e4t\u00e4 artisansweb-elementor-add-on.php<\/code>tiedostoon.<\/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
Yll\u00e4 olevaan koodin sis\u00e4iseen init_widgets()<\/code>menetelm\u00e4\u00e4n sis\u00e4llytin artisansweb-testimonial-widget.php<\/code>’widgetit’ -hakemistosta. Se tarkoittaa, ett\u00e4 sinun on luotava widget-kansio ja teht\u00e4v\u00e4 sen sis\u00e4ll\u00e4 artisansweb-testimonial-widget.php<\/code>tiedosto.<\/p>\n
Lis\u00e4sin Bootstrapin JS- ja CSS-tiedostot enqueue_scripts<\/code>toiminnosta. Huomaa, ett\u00e4 olen antanut n\u00e4iden tiedostojen CDN-polun suoraan. K\u00e4ytt\u00e4j\u00e4 voi pit\u00e4\u00e4 n\u00e4m\u00e4 tiedostot laajennuskansiossa ja sis\u00e4llytt\u00e4\u00e4 sen korvaamalla yll\u00e4 olevan CDN-polun.<\/p>\n
T\u00e4ss\u00e4 vaiheessa laajennuksen nimen pit\u00e4isi n\u00e4ky\u00e4 Plugins-> Installed Plugins<\/strong> -sivulla.<\/p>\n
\u00c4l\u00e4 aktivoi laajennusta. Meid\u00e4n on kirjoitettava lis\u00e4\u00e4 koodia saadaksemme sen toimimaan.<\/p>\n
Elementor-widgetin rakenne<\/h3>\n
Olemme valmiit sis\u00e4llytt\u00e4m\u00e4\u00e4n tarvittavat tiedostot widgetillemme. Seuraava osa on varsinaisen Elementor-widgetin luominen. Elementorin verkkosivusto tarjosi widget-rakenteen,<\/a> jota meid\u00e4n on noudatettava.<\/p>\n
Lis\u00e4\u00e4 perusrakenne artisansweb-testimonial-widget.php<\/code>tiedostoon seuraavasti.<\/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
Kaikilla yll\u00e4 olevassa luokassa m\u00e4\u00e4ritellyill\u00e4 menetelmill\u00e4 on oma vastuunsa. Sinun on lis\u00e4tt\u00e4v\u00e4 sinulle widgetin nimi menetelm\u00e4\u00e4n get_name()<\/code>, widget-kuvake menee sis\u00e4lle get_icon()<\/code>, k\u00e4ytt\u00f6liittym\u00e4n osa n\u00e4kyy render()<\/code>menetelm\u00e4st\u00e4 ja niin edelleen. Kaikkien menetelmien kuvaukset ovat saatavilla niiden dokumentaatiossa<\/a>.<\/p>\n
Huomaa:<\/strong> Elementor sallii k\u00e4ytt\u00e4\u00e4 fontti-mahtavia kuvakkeita, palauta vain luokan nimi merkkijonona. Lis\u00e4\u00e4n widgetimme kuvakkeen "fa fa-sliders".<\/p>\n
T\u00e4ytet\u00e4\u00e4n koodi kaikille menetelmille paitsi render()<\/code>. Koska meid\u00e4n on otettava viite Bootstrap-karusellista, lis\u00e4t\u00e4\u00e4n render()<\/code>toiminnon koodi opetusohjelman my\u00f6hemm\u00e4ss\u00e4 osassa.<\/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 k\u00e4ytt\u00e4nyt Elementor-toistinohjainta, jonka avulla voit rakentaa toistettavia kentt\u00e4lohkoja. Kun olemme luomassa karusellia, sill\u00e4 on useita kentti\u00e4. Annoin t\u00e4ss\u00e4 vaihtoehdot kuvan ja kuvatekstien lis\u00e4\u00e4miseksi toistimen ohjaimella.<\/p>\n
Toistimen ohjauksen ohella k\u00e4ytin my\u00f6s teksti- ja mediaohjainta. Napsauta t\u00e4t\u00e4<\/a> saadaksesi lis\u00e4tietoja Elementor-ohjaimista.<\/p>\n
Aktivoi laajennus ja yrit\u00e4 muokata sivua Elementorilla. Etsi artisansweb-karuselli, lis\u00e4\u00e4 t\u00e4m\u00e4 widget sivulle. N\u00e4et vaihtoehdot lis\u00e4t\u00e4 kuvatekstit alla olevien kuvien mukaisesti.<\/p>\n
Bootstrap-karuselli k\u00e4ytt\u00e4m\u00e4ll\u00e4 Custom Elementor -widgeti\u00e4<\/h3>\n
L\u00e4hdimme kaikki rakentamaan karusellin Elementor-widgetin avulla. Jos katsot Bootstrap-karusellidokumentaatiota<\/a>, he ovat toimittaneet karusellin HTML-koodin. Otan esimerkin karusellista, jossa on kuvatekstej\u00e4. T\u00e4m\u00e4n tyyppisess\u00e4 karusellissa sinun on k\u00e4ytett\u00e4v\u00e4 alla olevaa HTML-koodia.<\/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
Yll\u00e4 oleva on staattinen HTML. Kun kyse on Elementor-widgetist\u00e4, meid\u00e4n on teht\u00e4v\u00e4 siit\u00e4 dynaaminen k\u00e4ytt\u00e4m\u00e4ll\u00e4 otsikolle ja kuvalle lis\u00e4ttyj\u00e4 arvoja.<\/p>\n
Joten meid\u00e4n render()<\/code>menetelm\u00e4 on koodi seuraavasti.<\/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
Se siit\u00e4! Lis\u00e4\u00e4 kuvat ja kuvatekstit, ja nyt sinun pit\u00e4isi n\u00e4hd\u00e4 Bootstrap-karuselli ilmestyv\u00e4n sivullesi.<\/p>\n
Kyse on widgetien kehityksest\u00e4 Elementorissa. Samalla tavalla voit mukauttaa koodin k\u00e4ytt\u00e4m\u00e4\u00e4n erilaisia \u200b\u200bElementor-ohjaimia ja luoda mukautetut widgetit tarpeidesi mukaan.<\/p>\n
Toivon, ett\u00e4 ymm\u00e4rr\u00e4t, miten voit luoda mukautetun Elementor-widgetin. Jaa ajatuksesi ja ehdotuksesi alla olevassa kommenttiosassa.<\/p>\n
Aiheeseen liittyv\u00e4t artikkelit<\/h4>\n