Interacció amb el tema del personalitzador de WordPress

  1. 1. Introducció al personalitzador de temes de WordPress
  2. 2. Actualment Llegint: Interacció amb el tema del personalitzador de WordPress
  3. 3. Planta de personalització del tema de WordPress
  4. 4. Ampliació de la placa de comandament personalitzada del tema de WordPress
  5. 5. Boilerplate del personalitzador del tema: opcions condicionals, temes infantils i complements

A la primera part de la sèrie de personalitzadors de temes de WordPress he esmentat que per interactuar amb el tema personalitzador, heu de carregar $ wp_customize objecte, que és una instància de WP_Customize_Manager classe. Per fer-ho, heu d’utilitzar personalitzar_registrar ganxo d’acció:


add_action ("personalitzar_register", "my_theme_customize_register");
function my_theme_customize_register ($ wp_customize) {

// Interacció amb l'objecte $ wp_customize

}

Podeu col·locar aquest codi a les funcions.php del vostre tema o a un fitxer que s’hi inclogui.

Afegir o eliminar elements del personalitzador de temes (seccions, configuracions i controls)

Un cop heu carregat $ wp_customize objecte que podeu utilitzar qualsevol dels seus mètodes per afegir, obtenir o eliminar configuració, controls i seccions (add_setting, get_setting, remove_setting, add_control … obtindreu el punt).

Per tant, si voleu aconseguir o traieu una secció, control o configuració, tot el que necessita és la seva identificació. Aquesta línia eliminarà la secció Colors (la col·loca dins de la funció my_theme_customize_register del fragment de primer codi):

$ wp_customize-> remove_section ("colors");

Si afegeix una secció, el control o la configuració és lleugerament diferent perquè requereixen alguns paràmetres més. No passaré per totes elles per dues raons:

  1. En realitat, aquest no és el propòsit d’aquesta sèrie, sinó que crearem una placa de cuina personalitzadora per temes que només podeu introduir al tema
  2. Alex Mansfield ja la va cobrir en el seu monstre de 6.000 paraules Tutorial personalitzador de temes que tots els desenvolupadors de temes de WordPress han de llegir i, a continuació, tuitejar (seriosament, si encara no ho heu fet, aneu a llegir-lo ara).

Però, anem a fer una ullada a com podeu afegir la vostra pròpia configuració amb un control en una nova secció Personalitzador de temes, així com alguns dels arguments. Com que és molt més fàcil treballar amb exemples reals, hi ha el que seguirem:

  • Una nova secció, etiquetada “Disseny”
  • Una configuració nova que emmagatzema la disposició del tema
  • Un nou control de ràdio amb dues opcions: la barra lateral a l’esquerra i la barra lateral a la dreta

El primer que cal afegir al personalitzador de temes és la secció “Disseny”:

$ wp_customize-> add_section (
// Identificació
"layout_section",
// Matriu d’arguments
matriu (
'title' => __ ('Disposició', 'my_theme'),
'capability' => 'edit_theme_options',
'description' => __ ('Permet editar la disposició del vostre tema.', 'my_theme')
)
);

Encara no proveu de veure-la en el personalitzador, no es mostrarà una secció tret que tingui una configuració i un control afegits. Afegim les dues coses:

$ wp_customize-> add_setting (
// Identificació
"my_theme_settings [layout_setting]",
// Matriu d’arguments
matriu (
'default' => 'barra lateral dreta',
'type' => 'opció'
)
);
$ wp_customize-> add_control (
// Identificació
'layout_control',
// Matriu d’arguments
matriu (
'type' => 'ràdio',
'label' => __ ('Disposició del tema', 'my_theme'),
'section' => 'layout_section',
'options' => matriu (
'left-sidebar' => __ ('Barra lateral esquerra', 'my_theme'),
'right-sidebar' => __ ('Barra lateral dreta', 'my_theme')
),
// Aquest darrer ha de coincidir amb l'ID de configuració des de dalt
'settings' => 'my_theme_settings [layout_setting]'
)
);

Si creieu que heu llegit les pàgines de tutorial i / o de Codex d’Alex, només hi ha un paràmetre a la matriu d’arguments add_setting (“tipus”) en la qual vull centrar-me. Aquí teniu dues possibilitats, “opció” i “tema_mod” i podeu recuperar-les mitjançant obtenir_opció i get_theme_mod, respectivament. Sempre faig servir “opció” simplement perquè et permet serialitzar els valors de la configuració del tema donant-los identificadors com my_theme_settings [settings_1], my_theme_settings [settings_2] etc D’aquesta manera, tots els valors s’emmagatzemaran com una entrada de base de dades a la taula wp_options.

I, finalment, després d’haver afegit aquests dos fragments de codi per funcionar personalitzar_registrar ganxo d’acció (primer fragment de codi en aquesta publicació), el personalitzador de temes s’ha personalitzat:

S'ha afegit una nova secció al personalitzador del tema

S’ha afegit una nova secció al personalitzador del tema

L’ús de valors de configuració del personalitzador del tema del tema

Després d’haver donat als usuaris la possibilitat d’emmagatzemar aquesta configuració, podeu agafar-ne el valor, connectar-vos-hi body_class filtrar ganxo i afegir-lo a la matriu de classes de cos existents:

add_filter ('body_class', 'my_theme_body_classes');
funció my_theme_body_classes ($ classes) {

/ *
* Ja que hem utilitzat "opció" en la matriu d'arguments add_setting
* recuperem el valor mitjançant la funció get_option
* /
$ my_theme_settings = get_option ("my_theme_settings");

$ classes [] = $ my_theme_settings ['layout_setting'];

tornar $ classes;

}

Això afegirà la barra .left-side o la .right-sidebar a les matèries de classes del cos del vostre tema. Si feu servir aquestes dues classes del fitxer style.css del vostre tema, podreu crear dos dissenys diferents. Per exemple:

/ * La barra lateral de la dreta a la disposició predeterminada * /
#content {
flotar: a l'esquerra;
amplada: 60%;
}
#sidebar {
surar: dret;
amplada: 30%;
}

/ * Utilitzant la classe de barra lateral .left per substituir el disseny predeterminat * /
.barra lateral esquerra #content {
surar: dret;
}
.barra esquerra #sidebar {
flotar: a l'esquerra;
}

El millor de tot és que, gràcies al personalitzador de temes de WordPress, els usuaris poden previsualitzar els dos dissenys abans de desar qualsevol cosa. Preneu-ho, pàgines de configuració del tema!

Resum i lectura posterior

La versió de TL; DR d’aquesta publicació seria així: Podeu obtenir l’objecte $ wp_customize i, a continuació, afegir alguna cosa (secció, configuració o control) o suprimir-ne. La resta resta de paràmetres de configuració.

La tercera part és on aquesta sèrie resulta interessant, ja que comencem a automatitzar tot el procés i treballarem en la placa de personalització de temes que podeu introduir al vostre tema i començar a utilitzar-lo de seguida. Estigueu atents!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map