Tipuri Avansate de Câmpuri Pentru Setările Modulului

Notă! Unele linkuri de pe această pagină pot fi linkuri afiliate, ceea ce înseamnă că, dacă alegeți să efectuați o achiziție, pot câștiga un mic comision fără costuri suplimentare pentru dvs. Apreciez foarte mult sprijinul dvs.!

Loading

Tipuri Avansate de Câmpuri

Tipuri Avansate de Câmpuri Pentru Setările Modulului. Aflați despre tipurile de câmpuri avansate pentru setările modulului.

Notă:
Această serie de tutoriale este destinată utilizatorilor avansați. Este necesară cel puțin o înțelegere de bază a codării în PHP și JavaScript.

Câmpurile avansate sunt adăugate automat la toate modulele care sunt compatibile cu cea mai recentă versiune a Divi Builder, cu excepția cazului în care se renunță în mod specific. Cele mai avansate câmpuri sunt configurabile. Configurația pentru câmpurile avansate poate fi definită în metoda get_advanced_fields_config() a clasei PHP a modulului. Pentru a renunța la un câmp avansat, pur și simplu setați cheia acestuia în matrice la false.

Fundal (fundal)

Câmpul de fundal permite utilizatorilor să seteze culoarea de fundal, gradientul, imaginea și/sau videoclipul modulului.

Configurare Câmp de Fundal

  • css (array) — Configurare stil CSS
    • important (bool) — Dacă stilurile ar trebui să includă sau nu !important
    • main (string) — Selector CSS pentru elementul principal al modulului
  • opțiuni (array) — Parametrul definiției câmpului înlocuiește
    • module_setting_slug (array)
      • parameter_1 (mixed) — Valoarea parametrului
      • parameter_2 (mixed) — Valoarea parametrului
  • setări (array)
    • disable_toggle (bool) — Nu adăugați un grup de comutare de fundal la modulul de setări
    • tab_slug (string) — Slug modal de tab
    • toggle_slug (string) — slug de comutare a grupului de setări ale filei modale
  • use_background_color (bool|string) — Afișează fila de culoare de fundal
  • use_background_color_gradient (bool|string) — Afișează fila gradient de fundal
  • use_background_image (bool|string) — Afișează fila imagine de fundal
  • use_background_video (bool|string) — Afișează fila video de fundal

Valorile acceptate pentru use_background_color, use_background_color, use_background_gradient, use_background_image și use_background_video sunt:

  • true — Afișează câmpurile din setările modulului și gestionează marcajul frontend
  • false — Nu afișați câmpuri în setările modulului și nu gestionați marcajul frontend
  • fields_only — Afișează câmpurile în setările modulului, dar nu se ocupă de marcajul frontend

Exemple de Configurare a Câmpurilor de Fundal

<?php

class SIMP_SimpleHeader extends ET_Builder_Module {

// Example 1: Include Background Field using its default configuartion
public function get_advanced_fields_config() {
return array();
}

// Example 2: Include Background Field using a custom configuartion
public function get_advanced_fields_config() {
return array(
'background' => array(
'options' => array(
'background_color' => array(
'default' => et_builder_accent_color(),
),
),
), 
);
}

// Example 3: Do not include Background Field
public function get_advanced_fields_config() {
return array(
'background' => false,
);
}
}

Chenare (chenare)

Câmpul chenar permite utilizatorilor să seteze stilul, culoarea, lățimea și raza chenarului modulului.

Configurarea Câmpului de Chenar

Modulele pot aplica margini nu numai pentru elementul lor exterior de container, ci și pentru elementele din interiorul acestuia. Fiecare cheie din configurație reprezintă un element separat care va avea setări de chenar reglabile. Configurația câmpului de margine pentru elementul container cel mai exterior al modulului este setată sub cheia default.

În timp ce mai jos sunt afișați numai parametrii specifici câmpurilor de borduri, toți parametrii comuni ai câmpului sunt acceptați.

  • default (array)
    • css (array) — Configurare stil CSS
      • main (array) — selectoare CSS pentru elementul principal al modulului
        • border_radii (string) — selector CSS pentru a fi utilizat pentru stilurile de rază de bord
        • border_styles (string) — selector CSS pentru a fi utilizat pentru stilurile de chenar
      • defaults (array)
        • border_radii (string) — Valoarea implicită pentru raza chenarului.
        • Format: link|sus-stânga|sus-dreapta|jos-dreapta|jos-stânga
        • Exemplu: on|3px|3px|3px|3px
        • border_styles (array) — Valori implicite pentru proprietățile stilului de chenar
          • width (string) — Valoarea implicită pentru lățimea chenarului
          • color (string) — Valoarea implicită pentru culoarea chenarului
          • style (string) — Valoarea implicită pentru stilul de chenar
        • label_prefix (string) — Text de afișat în fața etichetei de setare (localizat)
        • suffix (string) — Sufix de atașat la setarea slug. Nu este necesar pentru câmpul de chenar implicit

Exemple de Configurare a Câmpului Borders

<?php

class SIMP_SimpleHeader extends ET_Builder_Module {

// Example 1: Include Borders Field using its default configuartion
public function get_advanced_fields_config() {
return array();
}

// Example 2: Include Borders Field using a custom configuartion
public function get_advanced_fields_config() {
return array(
'borders' => array(
'default' => array(
'css' => array(
'main' => array(
'border_styles' => "{$this->main_css_element}.simp-custom-class",
),
),
'defaults' => array(
'border_radii' => 'on|3px|3px|3px|3px',
),
),
),
);
}

// Example 3: Do not include Borders Field
public function get_advanced_fields_config() {
return array(
'borders' => false,
);
}
}

Box Shadow (box_shadow)

Câmpul umbră a casetei permite utilizatorilor să seteze umbra casetei modulului (evident? ).

Configurația Câmpului Umbră Casetă

Modulele pot aplica umbre de casetă nu numai elementului lor exterior de container, ci și elementelor din interiorul acestuia. Fiecare tastă din configurație reprezintă un element separat care va avea setări de umbră reglabile. Configurația câmpului umbră casetă pentru elementul container cel mai exterior al modulului este setată sub cheia default.

În timp ce mai jos sunt afișați numai parametrii specifici câmpului umbră casetei, toți parametrii comuni ai câmpului sunt acceptați.

  • Default (array)
    • css (array) — Configurare stil CSS
      • custom_style (bool) — Utilizați generarea de stiluri personalizate în loc de cea implicită
      • important (bool) — Dacă stilurile ar trebui să includă sau nu !important
      • main (string) — selector CSS pentru elementul principal al modulului
      • show_if (array) — Stiluri de ieșire dacă anumite setări au anumite valori
        • setting_slug (mixed) — Valoare de setare
      • show_if_not (array) — Stiluri de ieșire dacă anumite setări nu au anumite valori
        • setting_slug (mixed) — Valoare de setare
      • suffix (string) — Sufix de atașat la setarea slug. Nu este necesar pentru câmpul implicit.

Exemple de Configurare a Câmpului Umbră Casetă

<?php

class SIMP_SimpleHeader extends ET_Builder_Module {

        // Example 1: Include Box Shadow Field using its default configuartion

        public function get_advanced_fields_config() {

                 return array();

        }

        // Example 2: Include Box Shadow Field using a custom configuartion

        public function get_advanced_fields_config() {

                 return array(

                         'box_shadow' => array(

                                  'default' => array(

                                          'css' => array(

                                                   'main' => "{$this->main_css_element}.simp-custom-class",

                                          ),

                                  ),

                         ),

                 );

        } 

        // Example 3: Do not include Box Shadow Field

        public function get_advanced_fields_config() {

                 return array(

                         'box_shadow' => false,

                 );

        }

}

Buton (buton)

Câmpul pentru butoane gestionează toate setările diferite pentru personalizarea stilului butoanelor incluse într-un modul de pe front-end. Spre deosebire de celelalte tipuri de câmpuri avansate, câmpul Button nu este adăugat la un modul decât dacă modulul se înscrie în mod specific prin includerea acestuia în configurația avansată a câmpurilor.

Configurația Câmpului Buton

Modulele pot include unul sau mai multe butoane în stil Divi în ieșirea lor HTML pe front-end. Fiecare tastă din configurație reprezintă un buton separat care poate fi personalizat în setările modulului. În timp ce mai jos sunt afișați numai parametrii specifici câmpului de buton, toți parametrii comuni ai câmpului sunt acceptați.

  • button_slug (array)
    • box_shadow (array) — Vezi câmpul umbră casetă pentru structura matricei
    • css (array) — Configurare stil CSS
      • alignment (string) — selector CSS pentru stilurile de aliniere
      • main (string) — selector CSS pentru elementul principal al modulului
      • plugin_main (string) — La fel ca principalul de mai sus, dar se aplică numai cu Plugin-ul Divi Builder
    • disable_toggle (bool) — Nu adăugați un grup de comutare Buton la modulul de setări
    • no_rel_attr (bool) — Nu afișați câmpul pentru personalizarea atributului rel al link-ului butonului
    • use_alignment (bool) — Afișează setarea de aliniere a butonului

Exemple de Configurare a Câmpului de Buton

<?php

class SIMP_SimpleHeader extends ET_Builder_Module {

        // Example 1: Include Button Field using its default configuartion

        public function get_advanced_fields_config() {

                 return array();

        }

        // Example 2: Include Button Field using a custom configuartion

        public function get_advanced_fields_config() {

                 return array(

                         'button' => array(

                                  'primary_button' => array(

                                          'box_shadow'    => array(

                                                   'css' => array(

                                                           'main' => "{$this->main_css_element} .simp-button--primary",

                                                   ),

                                          ),

                                          'css'           => array(

                                                   'plugin_main' => "{$this->main_css_element} .simp-button--primary",

                                                  'alignment'   => "{$this->main_css_element} .simp-button-wrapper",

                                          ),

                                          'label'         => esc_html__( 'Primary Button', 'simp-simple' ),

                                          'use_alignment' => true,

                                  ),

                         ),

                 );

        }      

        // Example 3: Do not include Button Field

        public function get_advanced_fields_config() {

                 return array(

                         'button' => false,

                 );

        }

}

Filtre (filtre)

Câmpul filtre permite utilizatorilor să controleze filtrele CSS pentru modul.

Configurarea Câmpului Filtrelor

  • child_filters_target (array) — Configurația câmpului filtrelor elementului copil
    • depends_show_if (mixed) — Afișează câmpul numai când dependența are această valoare
    • tab_slug (string) — Slug modal de tab
    • toggle_name (string) — Nume de afișare a grupului de comutare modal (localizat)
    • toggle_slug (string) — Slug de grup de comutare modal
  • tab_slug (string) — Slug modal de tab
  • toggle_name (string) — Nume de afișare a grupului de comutare modal (localizat)
  • toggle_slug (string) — Slug de grup de comutare modal

Exemple de Configurare a Câmpurilor de Filtre

<?php

class SIMP_SimpleHeader extends ET_Builder_Module {

        // Example 1: Include Filters Field using its default configuartion

        public function get_advanced_fields_config() {

                 return array();

        }

        // Example 2: Include Filters Field using a custom configuartion

        public function get_advanced_fields_config() {

                 return array(

                         'filters' => array(

                                  'child_filters_target' => array(

                                          'tab_slug'    => 'advanced',

                                          'toggle_slug' => 'image',

                                  ),

                                  'css'                  => array(

                                          'main' => '%%order_class%%',

                                  ),

                         ),

                 );

        }       

        // Example 3: Do not include Filters Field

        public function get_advanced_fields_config() {

                 return array(

                         'filters' => false,

                 );

        }

}

Fonturi (fonturi)

Câmpul fonturi se ocupă de toate setările legate de personalizarea stilurilor pentru textul care apare în modulul de pe frontend.

Configurarea Câmpului Fonturilor

Modulele permit ca stilurile de text să fie ajustate nu numai la elementul lor de container cel mai exterior, ci și la elementele din interiorul acestuia. Fiecare tastă din configurație reprezintă un element separat care va avea setări de stil de text reglabile. Configurația câmpului fonturilor pentru elementul container cel mai exterior al modulului este setată sub cheia module.

Deși doar parametrii specifici câmpului fonturilor sunt afișați mai jos, toți parametrii comuni ai câmpului sunt acceptați.

  • module (array)
    • defaults (array) — Valori implicite pentru setări
      • setting_slug_1 (mixed) — Valoare implicită
      • setting_slug_2 (mixed) — Valoare implicită
    • depends_show_if (mixed) — Afișează setările numai când dependența are această valoare
    • disable_toggle (bool) — Nu adăugați un grup de comutare la modulul de setări
    • font (array) — Definiția câmpului familiei de fonturi (acceptă parametri comuni de câmp)
      • sub_toggle (string) — Slug de grup sub-toggle modal
    • font_size (array) — Definiția câmpului pentru dimensiunea fontului (acceptă parametri comuni de câmp)
      • sub_toggle (string) — Slug de grup sub-toggle modal
    • header_level (array) — Definirea câmpului la nivel de antet (acceptă parametri comuni de câmp)
      • sub_toggle (string) — Slug de grup sub-toggle modal
    • hide_font (bool) — Nu afișați setarea familiei de fonturi
    • hide_font_size (bool) — Nu afișați setarea pentru dimensiunea fontului
    • hide_letter_spacing (bool) — Nu afișați setarea de spațiere a literelor
    • hide_line_height (bool) — Nu afișați setarea înălțimii liniei
    • hide_text_color (bool) — Nu afișați setarea pentru culoarea textului
    • hide_text_shadow (bool) — Nu afișați setarea de umbră a textului
    • letter_spacing (array) — Definiția câmpului de spațiere a literelor (acceptă parametri comuni de câmp)
      • sub_toggle (string) — Slug de grup sub-toggle modal
    • line_height (array) — Definirea câmpului pentru înălțimea liniei (acceptă parametri comuni de câmp)
      • sub_toggle (string) — Slug de grup sub-toggle modal
    • sub_toggle (string) — Slug de grup sub-toggle modal
    • text_color (array) — Definiția câmpului pentru culoarea textului (acceptă parametri comuni de câmp)
      • sub_toggle (string) — Slug de grup sub-toggle modal
    • text_shadow (array) — Definiția câmpului umbră text (acceptă parametri comuni de câmp)
      • sub_toggle (string) — Slug de grup sub-toggle modal

Exemple de Configurare a Câmpului Fonturilor

<?php

class SIMP_SimpleHeader extends ET_Builder_Module {

        // Example 1: Include Fonts Field using its default configuartion

        public function get_advanced_fields_config() {

                 return array();

        }

        // Example 2: Include Fonts Field using a custom configuartion

        public function get_advanced_fields_config() {

                 return array(

                         'fonts' => array(

                                  'body'   => array(

                                          'css'   => array(

                                                   'line_height' => "{$this->main_css_element} p",

                                                   'plugin_main' => "{$this->main_css_element} p",

                                                   'text_shadow' => "{$this->main_css_element} p",

                                          ),

                                          'label' => esc_html__( 'Body', 'simp-simple' ),

                                  ),

                                  'header' => array(

                                          'css'          => array(

                                                   'main'      => "{$this->main_css_element} h2, {$this->main_css_element} h1, {$this->main_css_element} h3, {$this->main_css_element} h4, {$this->main_css_element} h5, {$this->main_css_element} h6",

                                                   'important' => 'all',

                                          ),

                                          'header_level' => array(

                                                   'default' => 'h2',

                                          ),

                                          'label'        => esc_html__( 'Title', 'simp-simple' ),

                                  ),

                         ),

                 );

        }       

        // Example 3: Do not include Fonts Field

        public function get_advanced_fields_config() {

                 return array(

                         'fonts' => false,

                 );

        }

}

Margin și Padding (margin_padding)

Câmpul margine și padding gestionează setările pentru marginea și padding-ul modulului.

Configurarea Câmpului de Margin și Padding

  • custom_margin (array) — Suprascrierea parametrilor de definire a câmpului de marjă
    • parameter_1 (mixed) — Valoarea parametrului
    • parameter_2 (mixed) — Valoarea parametrului
  • custom_padding (array) — suprascrie parametrii de definire a câmpului de padding
    • parameter_1 (mixed) — Valoarea parametrului
    • parameter_2 (mixed) — Valoarea parametrului
  • disable_toggle (bool) — Nu adăugați un grup de comutare la modulul de setări
  • use_margin (bool) — Afișează setările de marjă
  • use_padding (bool) — Afișează setările de padding

Exemple de Configurare a Câmpurilor de Margin și Padding

<?php

class SIMP_SimpleHeader extends ET_Builder_Module {

        // Example 1: Include Margin & Padding Field using its default configuartion

        public function get_advanced_fields_config() {

                 return array();

        }

        // Example 2: Include Margin & Padding Field using a custom configuartion

        public function get_advanced_fields_config() {

                 return array(

                         'margin_padding' => array(

                                  'css' => array(

                                          'important' => 'all',

                                  ),

                         ),

                 );

        }       

        // Example 3: Do not include Margin & Padding Field

        public function get_advanced_fields_config() {

                 return array(

                         'margin_padding' => false,

                 );

        }

}

Lățimea Maximă (max_width)

Câmpul pentru lățimea maximă gestionează setările pentru lățimea maximă și alinierea modulului.

Configurația Câmpului cu Lățimea Maximă

  • options (array) — Parametrul definiției câmpului înlocuiește
    • module_setting_slug (array)
      • parameter_1 (mixed) — Valoarea parametrului
      • parameter_2 (mixed) — Valoarea parametrului
    • toggle_priority (int) — Prioritatea pentru grupul de comutare modal
    • toggle_title (string) — Numele afișat pentru grupul de comutare modal (localizat)
    • use_max_width (bool) — Afișează setarea lățimii maxime
    • use_module_alignment (bool) — Afișează setarea de aliniere

Exemple de Configurare a Câmpului cu Lățimea Maximă

<?php

class SIMP_SimpleHeader extends ET_Builder_Module {

        // Example 1: Include Max Width Field using its default configuartion

        public function get_advanced_fields_config() {

                 return array();

        }

        // Example 2: Include Max Width Field using a custom configuartion

        public function get_advanced_fields_config() {

                 return array(

                         'max_width' => array(

                                  'css' => array(

                                          'module_alignment' => "{$this->main_css_element}.simp-custom-class",

                                  ),

                         ),

                 );

        }      

        // Example 3: Do not include Max Width Field

        public function get_advanced_fields_config() {

                 return array(

                         'max_width' => false,

                 );

        }

}

Exemple de Configurare a Tuturor Câmpurilor Avansate

<?php

class SIMP_SimpleHeader extends ET_Builder_Module {

// Example 1: Include all advanced fields using their default configuartion

public function get_advanced_fields_config() {

return array();

}

// Example 2: Include all advanced fields using custom configuartions

public function get_advanced_fields_config() {

return array(

'background'     => array(

'options' => array(

'background_color' => array(

'default'          => et_builder_accent_color(),

),

),

),

'borders'        => array(

'default' => array(

'css'      => array(

'main' => array(

'border_styles' => "{$this->main_css_element}.simp-custom-class",

),

),

'defaults' => array(

'border_radii' => 'on|3px|3px|3px|3px',

),

),

),

'box_shadow'     => array(

'default' => array(

'css' => array(

'main' => "{$this->main_css_element}.simp-custom-class",

),

),

),

'button'         => array(

'primary_button' => array(

'box_shadow'    => array(

'css' => array(

'main' => "{$this->main_css_element} .simp-button--primary",

),

),

'css'           => array(

'plugin_main' => "{$this->main_css_element} .simp-button--primary",

'alignment'   => "{$this->main_css_element} .simp-button-wrapper",

),

'label'         => esc_html__( 'Primary Button', 'simp-simple' ),

'use_alignment' => true,

),

),

'filters'        => array(

'child_filters_target' => array(

'tab_slug'    => 'advanced',

'toggle_slug' => 'image',

),

'css'                  => array(

'main' => '%%order_class%%',

),

),

'fonts'          => array(

'body'   => array(

'css'   => array(

'line_height' => "{$this->main_css_element} p",

'plugin_main' => "{$this->main_css_element} p",

'text_shadow' => "{$this->main_css_element} p",

),

'label' => esc_html__( 'Body', 'simp-simple' ),

),

'header' => array(

'css'          => array(

'main'      => "{$this->main_css_element} h2, {$this->main_css_element} h1, {$this->main_css_element} h3, {$this->main_css_element} h4, {$this->main_css_element} h5, {$this->main_css_element} h6",

'important' => 'all',

),

'header_level' => array(

'default' => 'h2',

),

'label'        => esc_html__( 'Title', 'simp-simple' ),

),

),

'margin_padding' => array(

'css' => array(

'important' => 'all',

),

),

'max_width'      => array(

'css' => array(

'module_alignment' => "{$this->main_css_element}.simp-custom-class",

),

),

);

}

// Example 3: Do not include any advanced fields

public function get_advanced_fields_config() {

return array(

'background'     => false,

'borders'        => false,

'box_shadow'     => false,

'button'         => false,

'filters'        => false,

'fonts'          => false,

'margin_padding' => false,

'max_width'      => false,

);

}

}

 

Notă! Cea mai populară temă WordPress din lume și cel mai bun generator de pagini WordPress. Comunitatea WordPress mulțumește dezvoltatorului Elegant Themes în sprijinul acordat pentru realizarea acestor tutoriale în limba română! Cumpără acuma Tema WordPress Divi.

Articole recomandate:

S-ar putea să te intereseze și:

Despre Admin Staff

Comunitatea WordPress este un Blog strict Educativ pentru utilizatorii de WordPress. Nu este Agenție de WEB, Publicitate sau Marketing! Dacă sunteți firmă și aveți nevoie de sfaturi vă ajut cu plăcere, pentru contracte de colaborare, vă rog contactați agenții specializate, care vă pot oferi documentația fiscală necesară. Sunt pasionat de WordPress și tot ce se leagă de mediul online din 2011, scriu din pasiune și-mi place să ajut, doar prin prisma acestui fapt că-mi place să fac bine oamenilor care au aceeași pasiune. Blog-ul este monetizat prin link-uri de afiliere și Google Adsense, unde se plătesc taxe legale de către platformele respective. Dacă dorești să susții acest blog, sunt deschis pentru donații. Vă mulțumesc pentru înțelegere! George CRIȘAN , Administrator Comunitatea WordPress!

Lasă un comentariu