Cum se Creează un Modul Divi Builder
Cum se Creează un Modul Divi Builder? Aflați cum să creați un modul personalizat pentru Divi Builder.
Acest tutorial este destinat utilizatorilor avansați. Este necesară cel puțin o înțelegere de bază a codării în PHP și JavaScript.
Module Personalizate Divi Builder
Modulele Divi Builder constau din cod PHP, JavaScript, HTML și CSS. Fiecare modul este definit folosind o clasă PHP. Clasa definește toate setările modulului și este responsabilă pentru redarea ieșirii HTML a modulului pe front-end. În plus, fiecare modul are o clasă de componente ReactJS (în JavaScript) care se ocupă de redarea modulului în interiorul Divi Builder. În acest tutorial, veți învăța cum să creați un modul de antet personalizat. Modulul va fi complet funcțional în builder, atât pe front-end, cât și pe backend.
Modulele personalizate Divi Builder trebuie implementate într-o temă, o temă copil sau o extensie Divi. În acest tutorial vom implementa un modul personalizat într-o extensie Divi. Dacă nu ați făcut deja acest lucru, continuați și creați o extensie Divi.
Definiția Modulului
Modulele Divi Builder sunt definite folosind o clasă PHP. Uitați-vă în directorul extensiei dvs. și găsiți modulul exemplu situat în includes/modules. Îl vom folosi ca punct de plecare pentru a crea un modul de antet personalizat. Mai întâi, să redenumim directorul HelloWorld în SimpleHeader. Apoi, redenumiți HelloWorld.php în SimpleHeader.php, deschideți-l și apoi editați-l așa cum se arată mai jos:
<?php
class SIMP_SimpleHeader extends ET_Builder_Module {
public $slug = 'simp_simple_header';
public $vb_support = 'on';
public function init() {
$this->name = esc_html__( 'Simple Header', 'simp-simple-extension' );
}
public function get_fields() {
return array();
}
public function render( $unprocessed_props, $content, $render_slug ) {
}
}
new SIMP_SimpleHeader;Modulul va include doar câteva setări de bază care pot fi controlate din Divi Builder: titlu, conținut și fundal. Setările modulului sunt definite în metoda get_fields(). Să mergem mai departe și să facem asta acum:
<?php
class SIMP_SimpleHeader extends ET_Builder_Module {
public $slug = 'simp_simple_header';
public $vb_support = 'on';
public function init() {
$this->name = esc_html__( 'Simple Header', 'simp-simple-extension' );
}
public function get_fields() {
return array(
'heading' => array(
'label' => esc_html__( 'Heading', 'simp-simple-extension' ),
'type' => 'text',
'option_category' => 'basic_option',
'description' => esc_html__( 'Input your desired heading here.', 'simp-simple-extension' ),
'toggle_slug' => 'main_content',
),
'content' => array(
'label' => esc_html__( 'Content', 'simp-simple-extension' ),
'type' => 'tiny_mce',
'option_category' => 'basic_option',
'description' => esc_html__( 'Content entered here will appear below the heading text.', 'simp-simple-extension' ),
'toggle_slug' => 'main_content',
),
);
}
public function render( $unprocessed_props, $content, $render_slug ) {
}
}
new SIMP_SimpleHeader;Probabil ați observat că lipsește câmpul de fundal. L-am exclus din matricea de câmpuri, deoarece este unul dintre câteva câmpuri avansate care sunt adăugate automat de către constructor la toate modulele, cu excepția cazului în care se renunță în mod specific. Veți afla mai multe despre câmpurile avansate puțin mai târziu în această serie de tutoriale.
Definiția modulului este aproape completă. Trebuie doar să finalizăm implementarea metodei render(), astfel încât aceasta să genereze rezultatul HTML al modulului pe baza elementelor sale de props.
<?php
class SIMP_SimpleHeader extends ET_Builder_Module {
public $slug = 'simp_simple_header';
public $vb_support = 'on';
public function init() {
$this->name = esc_html__( 'Simple Header', 'simp-simple-extension' );
}
public function get_fields() {
return array(
'heading' => array(
'label' => esc_html__( 'Heading', 'simp-simple-extension' ),
'type' => 'text',
'option_category' => 'basic_option',
'description' => esc_html__( 'Input your desired heading here.', 'simp-simple-extension' ),
'toggle_slug' => 'main_content',
),
'content' => array(
'label' => esc_html__( 'Content', 'simp-simple-extension' ),
'type' => 'tiny_mce',
'option_category' => 'basic_option',
'description' => esc_html__( 'Content entered here will appear below the heading text.', 'simp-simple-extension' ),
'toggle_slug' => 'main_content',
),
);
}
public function render( $unprocessed_props, $content, $render_slug ) {
return sprintf(
'<h1 class="simp-simple-header-heading">%1$s</h1>
<p>%2$s</p>',
esc_html( $this->props['heading'] ),
$this->props['content']
);
}
}
new SIMP_SimpleHeader;Componenta React
Pentru ca modulul să fie disponibil și complet funcțional în cadrul Divi Builder, trebuie să creăm o clasă React Component care se ocupă de redarea modulului pe baza elementelor sale de props. Căutați în directorul modulului fișierul numit HelloWorld.jsx.
JSX este o extensie de sintaxă a JavaScript utilizată în React pentru a descrie cum ar trebui să arate interfața de utilizare.
Să redenumim HelloWorld.jsx în SimpleHeader.jsx, să-l deschidem și apoi să-l edităm după cum urmează:
// External Dependencies
import React, { Component, Fragment } from 'react';
// Internal Dependencies
import './style.css';
class SimpleHeader extends Component {
static slug = 'simp_simple_header';
render() {
return (
<div className="simp-simple-header">
{this.props.content()}
</div>
);
}
}
export default SimpleHeader;Apoi, să actualizăm declarațiile de import și export în includes/modules/index.js:
// Internal Dependencies import SimpleHeader from './SimpleHeader/SimpleHeader'; export default [ SimpleHeader, ];
Acum, să edităm metoda render() și să o facem să producă aceeași ieșire pe care am definit-o în metoda noastră PHP render().
// External Dependencies
import React, { Component, Fragment } from 'react';
// Internal Dependencies
import './style.css';
class SimpleHeader extends Component {
static slug = 'simp_simple_header';
render() {
return (
<Fragment>
<h1 className="simp-simple-header-heading">{this.props.heading}</h1>
<p>
{this.props.content()}
</p>
</Fragment>
);
}
}
export default SimpleHeader;Există două lucruri în metoda noastră render() de care să ținem cont. În primul rând, rețineți cum este gestionată setarea content a modulului. Setările modulului definite cu tipul de câmp tiny_mce (cum ar fi setarea de content din modulul nostru) necesită utilizarea unei componente speciale React. Constructorul instalează componenta necesară și apoi o transmite modulului ca valoare de setare. Deoarece valoarea nu este un șir sau un număr și este de fapt o componentă React, trebuie să o folosim ca atare în marcajul nostru JSX.
De asemenea, rețineți cum am împachetat rezultatul modulului nostru într-o componentă Fragment. Fragmentele vă permit să returnați mai multe elemente de nivel superior din metoda dvs. render() fără a adăuga de fapt un element suplimentar la pagina în sine.
Stiluri CSS
Stilurile pentru modulul nostru pot fi definite folosind fișierul style.css din directorul său. Modulul de antet personalizat este destul de simplu, așa că nu necesită mult stil. Deși ar trebui să adăugăm o marjă de jos pentru titlu, astfel încât să existe un spațiu între acesta și conținutul de sub el. Mai târziu, în seria noastră de tutoriale în profunzime pentru modulul Divi Builder, veți învăța cum să configurați marja și padding pentru titlu (sau orice element din ieșirea modulului) din setările modulului.
Deocamdată, să mergem mai departe și să actualizăm stilul.css al modulului nostru:
.simp-simple-header-heading {
margin-bottom: 20px;
}Testarea în Timpul Dezvoltării
Înainte de a putea testa modulul nostru personalizat în Divi Builder, trebuie să compilam codul JSX în JavaScript obișnuit. Pentru a face asta, pur și simplu rulați următoarea comandă în directorul pluginului dvs.:
yarn start
Cu condiția să nu existe erori de sintaxă în codul dvs., veți vedea următoarea ieșire:
Acum puteți lansa Divi Builder și puteți verifica modulul dvs. de antet simplu!
Trebuie să păstrați fereastra terminalului cu yarn start deschisă în timp ce vă dezvoltați modulul. Pe măsură ce modificați fișierele, JavaScript și CSS vor fi recompilate automat.
