Izveidot pielāgotu Elementor logrīku – attēlu salīdzināšanas soli pa solim rokasgrāmata
26 May 2024
No Comments
Create custom Elementor Widget – Image Comparison step by step guide
- Squoll
- 26 - 05 - 2024
- 14:45
Izveidot pielāgotu Elementor logrīku – attēlu salīdzināšanas soli pa solim rokasgrāmata
Laipni lūgti šajā pamācībā, kurā mēs iedziļināsimies sava pielāgota Elementor logrīka izveides procesā. Reālajos projektos bieži vien ir gadījumi, kad Elementor standarta logrīku komplekts, neatkarīgi no tā, vai tas ir bezmaksas vai Pro versijā, var pilnībā neatbilst jūsu dizaina vai funkcionālajām prasībām. Tieši šajā gadījumā nenovērtējama kļūst iespēja izveidot pielāgotus logrīkus, kas ļauj jums izstrādāt tieši jūsu vajadzībām pielāgotus izkārtojumus vai blokus.
Izpētīsim, kā izstrādāt pielāgotus Elementor logrīkus, sniedzot jums zināšanas, lai efektīvi orientētos šādās situācijās un uzlabotu jūsu vietnes veidošanas iespējas.
Izlasiet šo pamācību, un es jums parādīšu, kā tieši to izdarīt. Ticiet man, tas ir ļoti vienkārši.
Saturs
Izveidot Elementor logrīku - soli pa solim ceļvedis
Pirms mēs sāksim, ir dažas lietas, kas jums būs nepieciešamas:
- Pamata zināšanas par PHP un JavaScript: Lai gan ir rīki, kas atvieglo Elementor logrīku veidošanu, šo divu valodu pamatzināšanas padarīs procesu daudz raitāku.
- Testēšanas tīmekļa vietne: Jums būs nepieciešama vieta, kur testēt savus logrīkus, kad tos izveidojat. Es izvēlos izmantot InstaWp, jo tas ir vienkārši un viegli. Jūs varat izveidot testēšanas WordPress vietni pilnīgi bez maksas. Labāk testēt kodēšanu tur, nevis savā tīmekļa vietnē, jo tur var notikt kļūda..
- Instalēts Elementor spraudnis: Diezgan pašsaprotami, vai ne?
- Teksta redaktors: jums būs nepieciešams kaut kas, kurā rakstīt kodu. Es ieteiktu kaut ko tādu kā VSCode vai Notepad++.
Pielāgota Elementor logrīku izstrāde
Mēs izveidosim pielāgotu spraudni, lai turētu mūsu logrīku. Jūs jautājat, kāpēc spraudnis? Tāpēc, ka Elementor, meklējot logrīkus, ko pievienot savai bibliotēkai, lasa no spraudņu kataloga.
WordPress spraudņu direktorijā (wp-content/plugins) izveidojiet jaunu mapi savam spraudnim. Jūs varat to nosaukt, kā vien vēlaties. Es savu nosaucu par image-comparison.
Jaunajā spraudņa direktorijā izveidojiet jaunu PHP failu ar tādu pašu nosaukumu kā jūsu mapei (piemēram, image-comparison.php). Tas būs galvenais spraudņa fails, kurā mēs rakstīsim sākotnējo kodu.
Tā iekšpusē ievietosim spraudņa deklarāciju, lai WordPress varētu atpazīt šo spraudni.
<?php
/**
* Plugin Name: Before | After picture slider
* Description: Slider that show before and after on a picture
* Plugin URI: https://standigital.lv
* Version: 1.0
* Author: StanDigital
* Author URI: https://standigital.lv
* Text Domain: image-comparison-elementor-widget
*
* Elementor tested up to: 3.19.3
* Elementor Pro tested up to: 3.19.3
*/
Tagad sadalīsim, ko šis kods dara. Pirmkārt, tajā tiek iestatīta pamatinformācija par spraudni, piemēram, tā nosaukums, apraksts, versija, autors un citi dati. Šī informācija ir svarīga spraudņa identificēšanai un pārvaldīšanai WordPress ekosistēmā.
Tātad tagad, ja paneļa vadības panelī atveriet sadaļu Iespraudņi, redzēsiet, ka mūsu spraudnis ir šeit.
Mēs izveidojām pielāgotu WordPress Elementor logrīku spraudni
Forši, jā. Mēs tikko izveidojām spraudni. Tagad ir pienācis laiks rakstīt kodu.
Pirmkārt, es piemēroju ļoti vienkāršu pārbaudi, lai neviens nepiekļūtu spraudnim tieši, tas ir drošības labad.
// Exit if accessed directly
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly
}
Tagad pārejam pie galvenajām lietām.
Tagad mēs reģistrēsim mūsu pielāgoto Elementor logrīku. Es vadīšos pēc šīs dokumentācijas no Elementor vietnes.
Tātad ielieciet šo.
// Register Widget
function register_image_comparison_widget( $widgets_manager ) {
require_once( __DIR__ . '/widgets/image-comparison-widget.php' );
$widgets_manager->register( new \Elementor_Image_Comparison_Widget() );
}
add_action( 'elementor/widgets/register', 'register_image_comparison_widget' );
// Enqueue Scripts and Styles
function enqueue_image_comparison_widget_scripts() {
wp_enqueue_style( 'image-comparison-widget-style', plugins_url( 'style.css', __FILE__ ) );
wp_enqueue_script( 'image-comparison-widget-script', plugins_url( 'script.js', __FILE__ ), array('jquery'), false, true );
}
add_action( 'wp_enqueue_scripts', 'enqueue_image_comparison_widget_scripts' );
Šis koda fragments kalpo diviem galvenajiem mērķiem:
- Reģistrēties logrīku: Koda pirmā daļa reģistrē pielāgotu Elementor logrīku ar nosaukumu “Attēlu salīdzināšanas logrīks”. Tas tiek panākts, izmantojot funkciju register_image_comparison_widget, kas savienota ar darbību elementor/widgets/register. Šīs funkcijas iekšpusē:
Tas ietver failu, kurā ir logrīka klase (image-comparison-widget.php), izmantojot require_once.
Tad tas reģistrē Elementor_Image_Comparison_Widget klases gadījumu, izmantojot $widgets_manager->register(). Šī klase jādefinē iekļautajā PHP failā.
- Enqueue Skripti un stili: Otrajā koda daļā tiek pierakstīti nepieciešamie stili un skripti, kas nepieciešami, lai logrīks darbotos pareizi. To veic funkcija enqueue_image_comparison_widget_scripts, kas savienota ar darbību wp_enqueue_scripts. Šīs funkcijas iekšpusē:
Tas pieprasa CSS failu (style.css), izmantojot wp_enqueue_style. Šajā failā ir ietverts pielāgotajam logrīkam raksturīgais stils.
Tas pieprasa JavaScript failu (script.js), izmantojot wp_enqueue_script. Šajā failā ir ietvertas logrīkam nepieciešamās JavaScript funkcijas, un tas ir atkarīgs no jQuery, kā norādīts array(‘jquery’).
Pēdējais wp_enqueue_script parametrs true norāda, ka skripts jāielādē lapas apakšā, kas bieži vien ir ieteicams, lai uzlabotu veiktspēju.
Elementor pielāgotu logrīku spraudnis pilns kods
Tagad spraudņa galvenā faila “image-comparison.php” pilni kodi ir šādi.
<?php
/**
* Plugin Name: Before | After picture slider
* Description: Slider that show before and after on a picture
* Plugin URI: https://standigital.lv
* Version: 1.0
* Author: StanDigital
* Author URI: https://standigital.lv
* Text Domain: image-comparison-elementor-widget
*
* Elementor tested up to: 3.19.3
* Elementor Pro tested up to: 3.19.3
*/
// Exit if accessed directly
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly
}
// Register Widget
function register_image_comparison_widget( $widgets_manager ) {
require_once( __DIR__ . '/widgets/image-comparison-widget.php' );
$widgets_manager->register( new \Elementor_Image_Comparison_Widget() );
}
add_action( 'elementor/widgets/register', 'register_image_comparison_widget' );
// Enqueue Scripts and Styles
function enqueue_image_comparison_widget_scripts() {
wp_enqueue_style( 'image-comparison-widget-style', plugins_url( 'style.css', __FILE__ ) );
wp_enqueue_script( 'image-comparison-widget-script', plugins_url( 'script.js', __FILE__ ), array('jquery'), false, true );
}
add_action( 'wp_enqueue_scripts', 'enqueue_image_comparison_widget_scripts' );
Izveidojiet pielāgotu Elementor logrīku
Tagad izveidosim mūsu Elementor logrīku.
Izveidosim mapi “widgets” un tad tajā izveidosim mūsu iekļauto logrīka failu “image-comparison-widget.php”.
Mēs veidojam logrīka failu mapes “widgets” iekšpusē, jo šo “/widgets/card-widget.php” esam ierakstījuši spraudņa galvenajā failā “image-comparison.php”.
Tagad sāciet rakstīt mūsu logrīka kodu faila iekšpusē.
Vispirms mēs uzrakstīsim ļoti vienkāršu drošības pārbaudi, lai neviens nevarētu piekļūt failam tieši.
<?php
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly.
}
Tālāk mēs uzrakstīsim savu logrīku klasi.
class Elementor_Image_Comparison_Widget extends Widget_Base {
public function get_name() {
return 'image-comparison-widget';
}
public function get_title() {
return __( 'Image Comparison', 'image-comparison-widget' );
}
public function get_icon() {
return 'eicon-image-before-after';
}
public function get_categories() {
return [ 'basic' ];
}
- Klases deklarācija: Ir definēta klase Elementor_Image_Comparison_Widget, kas paplašina Elementor piedāvāto Widget_Base klasi. Tas nozīmē, ka tā manto funkcionalitāti un īpašības no Widget_Base, kas ir būtiski, lai izveidotu pielāgotus Elementor logrīkus.
- get_name() metode: Šī metode atgriež logrīka nosaukumu. Šajā gadījumā tā atgriež ‘image-comparison-widget’. Šis nosaukums tiks izmantots logrīka iekšējai identifikācijai Elementor.
- get_title() metode: Šī metode atgriež logrīka nosaukumu, kas tiek parādīts Elementor redaktorā, pievienojot jaunus logrīkus. Šajā gadījumā tiek atgriezts “Attēlu salīdzinājums”. Otrais parametrs (“image-comparison-widget”) ir teksta domēns, ko izmanto tulkošanas vajadzībām.
- get_icon() metode: Šī metode atgriež logrīka ikonu. Ikona tiek parādīta blakus logrīka nosaukumam Elementor redaktorā. Šajā gadījumā tā atgriež “eicon-image-before-after”, kas ir Elementor ikona, kas attēlo attēlu pirms un pēc salīdzināšanas. Elementor ikonas var atrast šeit
- get_categories() metode: Šī metode atgriež to kategoriju masīvu, pie kurām pieder logrīks. Kategorijas tiek izmantotas, lai organizētu logrīkus Elementor redaktorā. Šajā gadījumā logrīks ir piešķirts kategorijai “basic”. Visu logrīku kategorijas skatījums šeit.
Elementor pielāgotā logrīka vadības funkcija
Labi, tagad ir visinteresantākā daļa, kurā mēs sāksim kodēt mūsu logrīku laukus.
Tātad, mēs uzrakstīsim aizsargātu funkciju “register_controls()”.
protected function _register_controls() {
$this->start_controls_section(
'content_section',
[
'label' => __( 'Content', 'plugin-name' ),
'tab' => Controls_Manager::TAB_CONTENT,
]
);
$this->add_control(
'background_image',
[
'label' => __( 'Background Image', 'plugin-name' ),
'type' => Controls_Manager::MEDIA,
'default' => [
'url' => \Elementor\Utils::get_placeholder_image_src(),
],
]
);
$this->add_control(
'foreground_image',
[
'label' => __( 'Foreground Image', 'plugin-name' ),
'type' => Controls_Manager::MEDIA,
'default' => [
'url' => \Elementor\Utils::get_placeholder_image_src(),
],
]
);
$this->add_control(
'slider_position',
[
'label' => __( 'Slider Position', 'plugin-name' ),
'type' => Controls_Manager::SLIDER,
'size_units' => [ '%' ],
'range' => [
'%' => [
'min' => 0,
'max' => 100,
'step' => 1,
],
],
'default' => [
'unit' => '%',
'size' => 50,
],
]
);
$this->end_controls_section();
}
Elementor vietnē atradīsiet visas vadības ierīces, piemēram, teksta laukus, teksta apgabala laukus u. c., ko varat deklarēt.
- $this->start_controls_section(): Šī funkcija uzsāk jaunu vadības elementu sadaļu. Tā iegūst divus parametrus:
- ‘content_section’: Tas ir sadaļas ID. Tas tiek izmantots, lai iekšēji identificētu sadaļu.
Masīvs ar sadaļas iestatījumiem:
- “label”: : sadaļas rādītā etiķete. Šeit tas ir iestatīts uz “Saturs”.
- ‘tab’: Norāda, kurai cilnei pieder sadaļa. Šajā gadījumā tas ir iestatīts uz Controls_Manager::TAB_CONTENT, kas to iekļauj cilnē Saturs.
- $this->add_control(): Šī funkcija pievieno jaunu kontroli (iestatījumu) pašreizējai sadaļai. Tā pieņem divus parametrus:
- ‘background_image’, ‘foreground_image’ un ‘slider_position’: Šie ir vadības elementu ID. Tie tiek izmantoti, lai identificētu kontrolierīces iekšēji.
Masīvs ar vadības ierīces iestatījumiem:
- “label”: : vadības elementa rādītā etiķete. Tā apraksta, kam šī vadības rūtiņa ir paredzēta.
- “type”: Kontroles veids. Šeit tiek izmantots “MEDIA” un “SLIDER”, kas norāda, ka lietotāji var attiecīgi izvēlēties multivides (attēlus) un regulēt slīdni.
- “default”: : vadības elementa noklusējuma vērtība. Attēliem attēla aizstājējattēla avotu nosaka, izmantojot \Elementor\Utils::get_placeholder_image_src().
Lai pielāgotu vadības elementu uzvedību un izskatu, ir nodrošināti papildu iestatījumi, kas raksturīgi katram vadības elementu tipam, piemēram, “size_units”, “range” un “default”.
- $this->end_controls_section(): Šī funkcija pabeidz pašreizējo vadības elementu sadaļu
Elementor logrīka satura sadaļa zem satura cilnes, kad tā ir galīga
Pielāgota Elementor logrīka renderēšanas funkcija
Sīkāk izstrādāsim kodu, kas iedzīvinās mūsu logrīku priekšpusē. Mēs izveidosim render() funkciju, kas ir atbildīga par logrīka vizuālā izvadījuma ģenerēšanu jūsu vietnes priekšpusē.
protected function render() {
$settings = $this->get_settings_for_display();
?>
<div class="acontainer">
<div id="comparison">
<figure data-bg="" class="rocket-lazyload" style=" ?>');">
<div id="handle"></div>
<div data-bg="" class="rocket-lazyload" id="divisor" style=" ?>');"></div>
</figure>
<input type="range" min="0" max="100" value="<?php echo esc_attr($settings['slider_position']['size']); ?>" id="slider" oninput="moveDivisor()">
</div>
</div>
<?php
}
protected function _content_template() {
?>
<#
var bgImage = settings.background_image.url;
var fgImage = settings.foreground_image.url;
var sliderPos = settings.slider_position.size;
#>
<div class="acontainer">
<div id="comparison">
<figure data-bg="http://%20bgImage%20" class="rocket-lazyload" style="">
<div id="handle"></div>
<div data-bg="http://%20fgImage%20" class="rocket-lazyload" id="divisor" style=""></div>
</figure>
<input type="range" min="0" max="100" value="{{ sliderPos }}" id="slider" oninput="moveDivisor()">
</div>
</div>
<?php
}
}
- funkcija render():
- Šī funkcija ir atbildīga par logrīka izvades ģenerēšanu priekšpusē.
- Sākot ar lietotāja konfigurēto iestatījumu iegūšanu Elementor redaktorā, izmantojot funkciju $this->get_settings_for_display().
- Pēc tam tas izvada logrīka HTML marķējumu, izmantojot PHP echo izteikumus.
- HTML atzīmes iekšpusē:
- Tiek izveidots konteiners <div> ar klasi acontainer.
- Šī konteinera iekšpusē ir vēl viens <div> ar id salīdzinājumu.
- Salīdzinājuma <div> ietvaros fona attēla attēlošanai tiek izmantots elements <figure>.
- Rādītāja <figure> iekšpusē ir pievienoti divi elementi <div>:
- Viens ar id rokturi, kas atveido slīdņa rokturi.
- Vēl viens ar dalītāju id, kas attēlo priekšplāna attēlu.
- Turklāt ir iekļauts <input> tipa diapazona elements, lai lietotāji varētu pielāgot slīdņa pozīciju..
- Iekļautie stili tiek izmantoti, lai, pamatojoties uz lietotāja konfigurētajiem iestatījumiem, iestatītu fona attēlus figūrai un dalītājam <div>s..
- _content_template() funkcija:
- Šī funkcija nosaka logrīka satura veidni Elementor redaktorā.
- Tas ir rakstīts JavaScript (izmantojot Underscore.js šablonu) un PHP kombinācijā.
- Šablona iekšpusē:
- JavaScript mainīgajiem (bgImage, fgImage, sliderPos) tiek piešķirtas vērtības no logrīka iestatījumiem.
- Pēc tam šie mainīgie tiek izmantoti HTML marķējumā, lai dinamiski ģenerētu logrīka priekšskatījumu Elementor redaktorā.
- Ņemiet vērā, ka iestatījumu vērtībām var piekļūt, izmantojot iestatījumi.property_name.
<?php
use Elementor\Widget_Base;
use Elementor\Controls_Manager;
class Elementor_Image_Comparison_Widget extends Widget_Base {
public function get_name() {
return 'image-comparison-widget';
}
public function get_title() {
return __( 'Image Comparison', 'image-comparison-widget' );
}
public function get_icon() {
return 'eicon-image-before-after';
}
public function get_categories() {
return [ 'basic' ];
}
protected function _register_controls() {
$this->start_controls_section(
'content_section',
[
'label' => __( 'Content', 'plugin-name' ),
'tab' => Controls_Manager::TAB_CONTENT,
]
);
$this->add_control(
'background_image',
[
'label' => __( 'Background Image', 'plugin-name' ),
'type' => Controls_Manager::MEDIA,
'default' => [
'url' => \Elementor\Utils::get_placeholder_image_src(),
],
]
);
$this->add_control(
'foreground_image',
[
'label' => __( 'Foreground Image', 'plugin-name' ),
'type' => Controls_Manager::MEDIA,
'default' => [
'url' => \Elementor\Utils::get_placeholder_image_src(),
],
]
);
$this->add_control(
'slider_position',
[
'label' => __( 'Slider Position', 'plugin-name' ),
'type' => Controls_Manager::SLIDER,
'size_units' => [ '%' ],
'range' => [
'%' => [
'min' => 0,
'max' => 100,
'step' => 1,
],
],
'default' => [
'unit' => '%',
'size' => 50,
],
]
);
$this->end_controls_section();
}
protected function render() {
$settings = $this->get_settings_for_display();
?>
<div class="acontainer">
<div id="comparison">
<figure data-bg="" class="rocket-lazyload" style=" ?>');">
<div id="handle"></div>
<div data-bg="" class="rocket-lazyload" id="divisor" style=" ?>');"></div>
</figure>
<input type="range" min="0" max="100" value="<?php echo esc_attr($settings['slider_position']['size']); ?>" id="slider" oninput="moveDivisor()">
</div>
</div>
<?php
}
protected function _content_template() {
?>
<#
var bgImage = settings.background_image.url;
var fgImage = settings.foreground_image.url;
var sliderPos = settings.slider_position.size;
#>
<div class="acontainer">
<div id="comparison">
<figure data-bg="http://%20bgImage%20" class="rocket-lazyload" style="">
<div id="handle"></div>
<div data-bg="http://%20fgImage%20" class="rocket-lazyload" id="divisor" style=""></div>
</figure>
<input type="range" min="0" max="100" value="{{ sliderPos }}" id="slider" oninput="moveDivisor()">
</div>
</div>
<?php
}
}
Izveidot CSS style.css galvenajā spraudņa mapē
Tagad ļauj izveidot style.css galvenajā spraudņa mapē. Šajā failā tiks saglabāti visi mūsu Image Comprasion logrīka būtiskie stili.
.acontainer {
max-width: 800px;
}
#comparison {
width: 100%;
padding-bottom: 100%;
overflow: hidden;
position: relative;
}
figure {
position: absolute;
background-size: cover;
font-size: 0;
width: 100%;
height: 100%;
margin: 0;
}
#divisor {
background-size: cover;
position: absolute;
width: 50%;
box-shadow: 0 5px 10px -2px rgba(0, 0, 0, 0.3);
bottom: 0;
height: 100%;
&::before,
&::after {
content: "";
position: absolute;
right: -2px;
width: 4px;
height: calc(50% - 25px);
background: white;
z-index: 3;
}
&::before {
top: 0;
box-shadow: 0 -3px 8px 1px rgba(0, 0, 0, 0.3);
}
&::after {
bottom: 0;
box-shadow: 0 3px 8px 1px rgba(0, 0, 0, 0.3);
}
}
#handle {
position: absolute;
height: 50px;
width: 50px;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
z-index: 1;
&::before,
&::after {
content: "";
width: 0;
height: 0;
border: 6px inset transparent;
position: absolute;
top: 50%;
margin-top: -6px;
}
&::before {
border-right: 6px solid white;
left: 50%;
margin-left: -17px;
}
&::after {
border-left: 6px solid white;
right: 50%;
margin-right: -17px;
}
}
input[type="range"] {
-webkit-appearance: none;
-moz-appearance: none;
position: absolute;
top: 50%;
left: -25px;
transform: translateY(-50%);
background-color: transparent;
width: calc(100% + 50px);
z-index: 2;
&:focus,
&:active {
border: none;
outline: none;
}
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
border: none;
height: 50px;
width: 50px;
border-radius: 50%;
background: transparent;
border: 4px solid white;
box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.3);
}
input[type="range"]::-moz-range-track {
-moz-appearance: none;
height: 15px;
width: 100%;
background-color: transparent;
position: relative;
outline: none;
}
Izveidot script.js galvenajā spraudņa mapē
Ir pienācis laiks pievienot mūsu koda pēdējo daļu. Lai logrīks darbotos, mums ir jāievada JavaScript kods, tāpēc, kad lietotājs velk mūsu slīdni, tas maina attēlu. Failam jābūt izveidotam galvenajā spraudņa mapē.
document.addEventListener('DOMContentLoaded', function() {
var divisor = document.getElementById("divisor"),
handle = document.getElementById("handle"),
slider = document.getElementById("slider");
function moveDivisor() {
handle.style.left = slider.value + "%";
divisor.style.width = slider.value + "%";
}
slider.addEventListener('input', moveDivisor);
moveDivisor();
});
Galīgais rezultāts. Pēc | Pirms attēlu salīdzināšanas slīdnis
Lejupielādēt Image Comparsion widget for Elementor
Lejupielādējiet mūsu attēlu salīdzināšanas spraudni Elementor tagad un uzlabojiet savas vietnes vizuālo pievilcību! Izmantojot šo jaudīgo rīku, varat bez piepūles izveidot satriecošus attēlu salīdzinājumus pirms un pēc, lai aizrautu savu auditoriju. Palieliniet lietotāju iesaisti un demonstrējiet savu darbu kā vēl nekad agrāk. Sāciet darbu jau šodien un atraisiet visu savas Elementor darbinātās vietnes potenciālu!
Lasīt vairāk
