{"id":28951,"date":"2021-05-31T11:53:00","date_gmt":"2021-05-31T08:53:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=28951"},"modified":"2021-10-17T04:30:11","modified_gmt":"2021-10-17T01:30:11","slug":"hur-man-bygger-anpassad-elementor-widget","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/sv\/hur-man-bygger-anpassad-elementor-widget\/","title":{"rendered":"Hur man bygger anpassad Elementor-widget"},"content":{"rendered":"

Elementor<\/a> \u00e4r en av de mest popul\u00e4ra sidbyggarna f\u00f6r WordPress. Det \u00e4r enkelt att bygga en WordPress-webbplats med Elementor och du kan spara massor av tid med detta popul\u00e4ra plugin. Elementor tillhandah\u00e5ller widgets f\u00f6r att skapa olika sektioner p\u00e5 dina sidor. Du beh\u00f6ver bara plocka upp en widget, konfigurera den s\u00e5 visas de genererade elementen p\u00e5 frontend.<\/p>\n

Det kan h\u00e4nda att du inte f\u00e5r widgets efter eget val. Du kanske letar efter en annan funktionalitet som inte \u00e4r m\u00f6jlig via Elementors standardwidgets. I s\u00e5dana scenarier beh\u00f6ver du en anpassad widget som uppfyller dina krav. Lyckligtvis \u00e4r Elementor l\u00e4tt att ut\u00f6ka och du kan bygga vilken typ av funktionalitet du vill genom att skapa ett Elementor-till\u00e4gg. Elementor-till\u00e4gg \u00e4r desamma som vanliga WordPress-plugins, de ut\u00f6kar den grundl\u00e4ggande funktionaliteten.<\/p>\n

I den h\u00e4r artikeln visar jag dig hur du bygger en anpassad Elementor-widget som bara \u00e4r ett Elementor-till\u00e4gg.<\/p>\n

F\u00f6r att se det praktiskt taget tar jag ett exempel p\u00e5 Bootstrap Carousel<\/a>. Vi bygger ett WordPress-plugin f\u00f6r den anpassade Elementor-widgeten. Denna widget ger dig m\u00f6jlighet att l\u00e4gga till Bootstrap-karusell p\u00e5 dina sidor.<\/p>\n

Syftet med denna handledning \u00e4r att g\u00f6ra dig bekant med Elementors utveckling av widgetar. Vi ska utveckla en Elementor-widget f\u00f6r Bootstrap Carousel. Med samma tillv\u00e4gag\u00e5ngss\u00e4tt kan du skapa dina egna widgets.<\/p>\n

Skapa ett till\u00e4gg f\u00f6r Elementor<\/h3>\n

F\u00f6r att komma ig\u00e5ng m\u00e5ste du ha installerat och aktiverat Elementor-plugin. Skapa sedan en mapp ’artisansweb-elementor-add-on’ i katalogen ’wp-content \/ plugins’. H\u00e4r till mappnamnet och i n\u00e4sta del av koden anv\u00e4nder jag termen ’artisansweb’ f\u00f6r att beh\u00e5lla unika referenser. Du kan \u00e4ndra denna term beroende p\u00e5 vad du vill.<\/p>\n

Skapa en fil i v\u00e5rt plugin artisansweb-elementor-add-on.php<\/code>. Den h\u00e4r filen inneh\u00e5ller en kod som skapar en f\u00f6rl\u00e4ngning av Elementor.<\/p>\n

Du kommer att f\u00e5 pannplattan f\u00f6r att skapa till\u00e4gget i Elementors dokumentation<\/a>.<\/p>\n

Genom att f\u00f6lja dokumentationen skrev jag en nedanst\u00e5ende kod som du ska l\u00e4gga till i artisansweb-elementor-add-on.php<\/code>filen.<\/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
I ovanst\u00e5ende kodinsatsmetod init_widgets()<\/code>inkluderade jag en artisansweb-testimonial-widget.php<\/code>fr\u00e5n katalogen ” widgets ”. Det betyder att du m\u00e5ste skapa en "widgets" -mapp och inuti den skapa en artisansweb-testimonial-widget.php<\/code>fil.<\/p>\n
Jag lade till JS- och CSS-filerna fr\u00e5n Bootstrap fr\u00e5n enqueue_scripts<\/code>funktionen. Observera att jag har angett en CDN-s\u00f6kv\u00e4g f\u00f6r dessa filer direkt. Anv\u00e4ndaren kan beh\u00e5lla dessa filer i plugin-mappen och inkludera den genom att ers\u00e4tta ovanst\u00e5ende CDN-s\u00f6kv\u00e4g.<\/p>\n
I detta skede b\u00f6r du se plugin-namnet visas p\u00e5 sidan Plugins-> Installerade plugins<\/strong>.<\/p>\n
Aktivera inte plugin. Vi m\u00e5ste skriva mer kod f\u00f6r att f\u00e5 det att fungera.<\/p>\n
Elementor Widget Structure<\/h3>\n
Vi \u00e4r klara med att inkludera de filer som kr\u00e4vs f\u00f6r v\u00e5r widget. N\u00e4sta del skapar en faktisk Elementor-widget. Elementors webbplats gav en widgetstruktur<\/a> som vi m\u00e5ste f\u00f6lja.<\/p>\n
L\u00e4gg till den grundl\u00e4ggande strukturen i artisansweb-testimonial-widget.php<\/code>filen enligt f\u00f6ljande.<\/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
Alla metoder som definieras i ovanst\u00e5ende klass har sitt eget ansvar. Du m\u00e5ste l\u00e4gga till ditt widgetnamn i metoden get_name()<\/code>, widgetikonen kommer in get_icon()<\/code>, frontend-delen kommer att visas fr\u00e5n render()<\/code>metoden och s\u00e5 vidare. Beskrivningarna av alla metoder finns tillg\u00e4ngliga i deras dokumentation<\/a>.<\/p>\n
Obs!<\/strong> Elementor g\u00f6r det m\u00f6jligt att anv\u00e4nda fantastiska ikoner f\u00f6r typsnitt, bara returnera klassnamnet som en str\u00e4ng. Jag l\u00e4gger till ikonen ’fa fa-sliders’ f\u00f6r v\u00e5r widget.<\/p>\n
L\u00e5t oss fylla i koden f\u00f6r alla metoder utom render()<\/code>. Eftersom vi m\u00e5ste ta en referens fr\u00e5n Bootstrap-karusellen, l\u00e4gger vi till koden f\u00f6r render()<\/code>funktion i den senare delen av sj\u00e4lvstudien.<\/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
Jag har anv\u00e4nt en Elementor-repeaterkontroll som l\u00e5ter dig bygga repeterbara f\u00e4ltblock. N\u00e4r vi skapar en karusell kommer den att ha flera f\u00e4lt. H\u00e4r gav jag alternativen f\u00f6r att l\u00e4gga till en bild och bildtext med en repeaterkontroll.<\/p>\n
Tillsammans med repeaterkontrollen anv\u00e4nde jag ocks\u00e5 text- och mediekontrollen. Klicka h\u00e4r f\u00f6r<\/a> att l\u00e4sa mer om Elementor-kontroller.<\/p>\n
Aktivera plugin-programmet och f\u00f6rs\u00f6k redigera din sida med Elementor. S\u00f6k efter ’Artisansweb Carousel’, l\u00e4gg till den h\u00e4r widgeten p\u00e5 sidan. Du kommer att se alternativen f\u00f6r att l\u00e4gga till bildtext och bilder som visas p\u00e5 sk\u00e4rmdumpen nedan.<\/p>\n
Bootstrap-karusell med anpassad Elementor-widget<\/h3>\n
Vi har alla planerat att bygga en karusell med Elementor-widgeten. Om du tittar p\u00e5 Bootstrap-karuselldokumentationen<\/a> har de tillhandah\u00e5llit HTML-koden f\u00f6r karusellen. Jag tar ett exempel p\u00e5 en karusell med bildtexter. F\u00f6r denna typ av karusell m\u00e5ste du anv\u00e4nda nedanst\u00e5ende HTML.<\/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
Ovanst\u00e5ende \u00e4r statisk HTML. N\u00e4r det g\u00e4ller Elementor-widgeten m\u00e5ste vi g\u00f6ra den dynamisk genom att anv\u00e4nda v\u00e4rdena som l\u00e4ggs till f\u00f6r titel och bild.<\/p>\n
S\u00e5 v\u00e5r render()<\/code>metod kommer att ha koden enligt f\u00f6ljande.<\/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
Det \u00e4r allt! L\u00e4gg till dina bilder och bildtexter s\u00e5 ser du att Bootstrap-karusellen visas p\u00e5 din sida.<\/p>\n
Det handlar om widgetutveckling i Elementor. P\u00e5 ett liknande s\u00e4tt kan du anpassa koden f\u00f6r att anv\u00e4nda olika Elementor-kontroller och generera de anpassade widgetarna enligt dina krav.<\/p>\n
Jag hoppas att du f\u00f6rst\u00e5r hur man bygger en anpassad Elementor-widget. Dela dina tankar och f\u00f6rslag i kommentarsektionen nedan.<\/p>\n
relaterade artiklar<\/h4>\n