Com crear un complement de widget per a WordPress

WordPress és un sistema de gestió de contingut increïble que ofereix moltes funcions excel·lents, com ara ginys. En aquest tutorial us explicaré com crear els vostres propis ginys en un petit complement. Aquesta publicació tractarà alguns punts addicionals que cal comprendre abans de crear el propi giny. Aqui venim!


Pas 1: creeu el vostre complement de widget

Fa poc vaig crear un complement anomenat “Freelancer Widgets Bundle”, i algunes persones em van preguntar com crear aquest complement, així que vaig decidir escriure aquesta publicació. El primer pas és la creació del complement. I, com veureu, no és la part més difícil. Un complement és el codi addicional que s’afegeix a WordPress un cop el activeu. WordPress crea un llaç a través d’una carpeta per recuperar tots els complements disponibles i llistar-los a l’oficina posterior. Per crear el vostre complement, necessitareu un editor com Coda (Mac) o Dreamweaver (PC i Mac). Us recomano que creeu el vostre complement en una instal·lació local de WordPress, perquè en un servidor en viu pot causar problemes si cometeu un error. Per tant, espereu a provar el nostre plugin abans de col·locar-lo al vostre hosting.

Obriu ara la carpeta wp-content / plugins. Aquí on afegir el vostre plugin. Creeu un directori nou i anomeneu-lo “widget-plugin” (de fet, aquest nom pot ser el que vulgueu). Encara que el nostre plugin només tingui un sol fitxer, sempre serà millor utilitzar una carpeta per a cada complement. Al vostre directori, creeu un fitxer nou anomenat “widget-plugin.php” (aquest nom també es pot canviar) i obriu-lo. Estem a punt d’afegir les nostres primeres línies de codi. La definició d’un complement a WordPress segueix algunes regles que podeu llegir aquí al còdex. Aquí és com WordPress defineix un complement:

Per tant, hem de modificar aquest codi perquè s’ajusti a les nostres necessitats:

Desa el fitxer. Amb només afegir codi al fitxer widget-plugin.php, hem creat un complement. Bé, de moment el complement no fa res, però WordPress ho reconeix. Per assegurar-vos que sigui el cas, aneu a l'administració i aneu al menú "Complements". Si el vostre complement apareix a la llista de connectors, sou bé, assegureu-vos que heu seguit les meves instruccions i torneu-ho a provar. Ara podeu activar el complement.

Pas 2: crea el giny

Ara crearem el propi giny. Aquest giny serà una classe PHP que ampliarà la classe principal de WordPress WP_Widget. Bàsicament, el nostre widget quedarà definit d'aquesta manera:

// La classe de widgets
class My_Custom_Widget s'estén WP_Widget {

// Constructor principal
public function __construct () {
/ * ... * /
}

// El formulari de widget (per al backend)
formulari de funció pública ($ instància) {
/ * ... * /
}

// Actualitza la configuració del widget
actualització de la funció pública ($ new_instance, $ old_instance) {
/ * ... * /
}

// Mostra el giny
widget de funció pública ($ args, $ instància) {
/ * ... * /
}

}

// Registre el giny
function my_register_custom_widget () {
register_widget ('My_Custom_Widget');
}
add_action ("widgets_init", "my_register_custom_widget");

Aquest codi proporciona a WordPress tota la informació que el sistema necessita per poder utilitzar el giny:

  1. El constructor, per iniciar el giny
  2. El funció form () per crear el formulari de widget a l'administració
  3. El funció actualització (), per desar dades del widget durant l'edició
  4. I la widget () funció per visualitzar el contingut del widget al front-end

1 - El constructor

El constructor és la part del codi que defineix el nom del widget i els arguments principals, a continuació es mostra un exemple del que pot semblar.

// Constructor principal
public function __construct () {
pare :: __ construir (
"my_custom_widget",
__ ("El meu widget personalitzat", "text_domain"),
matriu (
'customize_selective_refresh' => true,
)
);
}

No utilitzeu __ () al voltant del nom del giny, aquesta funció la fa servir WordPress per a la traducció. Us recomano que l'utilitzeu sempre aquestes funcions, perquè el tema sigui traduïble. I l'ús del paràmetre "customize_selective_refresh" permet actualitzar el giny a Aparició> Personalitzar en editar el giny, de manera que en lloc de refrescar tota la pàgina, només el widget es torna a actualitzar en fer canvis.

2 - La funció form ()

Aquesta funció és la que crea la configuració de la forma de widget a l'àrea d'administració de WordPress (ja sigui a Aspecte> Ginys o Aparença> Personalitzar> Ginys). Això és si introduireu les vostres dades perquè es visualitzessin al lloc web. Per tant, explicaré com podeu afegir camps de text, àrees de text, seleccionar caselles i caselles de selecció a la configuració del formulari de widget.

// El formulari de widget (per al backend)
formulari de funció pública ($ instància) {

// Estableix els valors predeterminats del giny
$ per defecte = matriu (
'title' => '',
'text' => '',
'textarea' => '',
'checkbox' => '',
'select' => '',
);

// Analitza els paràmetres actuals amb els valors predeterminats
extracte (wp_parse_args ((matriu) $ instància, $ predeterminat)); ?>


"nom ="get_field_name ("casella de verificació")); ?> "type =" casella de selecció "value =" 1 " />

Aquest codi és simplement afegir 5 camps al giny (Títol, text, textura, selecció i casella de verificació). De manera que primer definiu els valors per defecte del vostre giny, i després la següent funció analitza els paràmetres predeterminats definits / desats per al vostre widget (de manera que qualsevol configuració que no existeixi tornaria a la predeterminada, com quan afegiu un widget primer a la barra lateral) I el darrer és el html de cada camp. Observeu l'ús de esc_attr () en afegir els camps de formulari, això es fa per motius de seguretat. Sempre que feu ressò d’una variable definida per l’usuari al vostre lloc, heu d’assegurar-vos que s’ha de sanejar per primera vegada.

3 - La funció d’actualització ()

La funció d’actualització () és realment senzilla. Com que els desenvolupadors bàsics de WordPress van afegir una API de widgets realment potent, només cal que afegim aquest codi per actualitzar cada camp:

// Actualitza la configuració del widget
actualització de la funció pública ($ new_instance, $ old_instance) {
$ instància = $ old_instance;
$ instance ['title'] = isset ($ new_instance ['title'])? wp_strip_all_tags ($ new_instance ['title']): '';
$ instance ['text'] = isset ($ new_instance ['text'])? wp_strip_all_tags ($ new_instance ['text']): '';
$ instance ['textarea'] = isset ($ new_instance ['textarea'])? wp_kses_post ($ new_instance ['textarea']): '';
$ instance ['checkbox'] = isset ($ new_instance ["casella de verificació"])? 1: fals;
$ instance ['select'] = isset ($ new_instance ['select'])? wp_strip_all_tags ($ new_instance ['seleccionar']): '';
retornar $ instància;
}

Com veieu, tot el que hem de fer és comprovar si hi ha qualsevol opció de configuració i, si no està buida, guardeu-la a la base de dades. Observeu l’ús de les funcions wp_strip_all_tags () i wp_kses_post (), que s’utilitzen per desinfectar les dades abans que s’afegeixin a la base de dades. Sempre que inseriu QUALSEVOL usuari enviat contingut a una base de dades, heu d'assegurar-vos que no té cap codi maliciós. La primera funció wp_strip_all_tags elimina tot, excepte el text bàsic, de manera que podeu utilitzar-lo per a qualsevol camp on el valor final sigui una cadena i la segona funció wp_kses_post () és la mateixa funció que s’utilitza per al contingut de la publicació i elimina totes les etiquetes a més d’html bàsics com els enllaços , extensions, divs, imatges, etc.

4 - La funció widget ()

La funció de widget () és la que emetrà el contingut al lloc web. El que veuran els vostres visitants. Aquesta funció es pot personalitzar per incloure classes CSS i etiquetes específiques per adaptar-se perfectament a la visualització del vostre tema. Aquí teniu el codi (no us podem modificar fàcilment aquest codi per adaptar-vos a les vostres necessitats):

// Mostra el giny
widget de funció pública ($ args, $ instància) {

extracte ($ args);

// Comproveu les opcions del widget
$ title = isset ($ instància ['títol'])? apply_filters ('widget_title', $ instància ['title']): '';
$ text = isset ($ instància ['text'])? $ instància ['text']: '';
$ textarea = isset ($ instància ['textarea'])? $ instància ['textarea']: '';
$ select = isset ($ instància ['seleccionar'])? $ instància ['seleccionar']: '';
$ checkbox =! buit ($ instància ["casella de selecció"])? $ instància ["casella de verificació"]: fals;

// Nucli de WordPress abans_widget hook (sempre inclou)
eco $ before_widget;

// Mostra el giny
ressò '
'; // Mostra el títol del giny si es defineix if ($ title) { eco $ abans_title. $ títol. $ després de_títol; } // Mostra el camp de text if ($ text) { ressò '

'. $ text. '

'; } // Mostra el camp de textura if ($ textarea) { ressò '

'. $ textarea. '

'; } // Mostra el camp de selecció if ($ select) { ressò '

'. $ selecciona. '

'; } // Mostra alguna cosa si la casella de verificació és certa if ($ checkbox) { ressò '

Alguna cosa impressionant

'; } ressò '
'; // Hoqueu de WordPress després de l’enllaç (inclòs sempre) eco $ after_widget; }

Aquest codi no és complex, l’únic que heu de recordar és comprovar si s’estableix una variable, si no ho voleu i si voleu imprimir-la, rebrà un missatge d’error..

Codi complet dels complements de widgets

Ara, si heu seguit correctament, el vostre complement ara hauria de ser totalment funcional i el podeu personalitzar per adaptar-lo a les vostres necessitats. Si no heu seguit la guia o voleu revisar el codi, podeu visitar la pàgina de Github per visualitzar el codi complet..

Vegeu el codi complet a Github

Conclusió

Vam veure que la creació d’un widget dins d’un plugin és molt interessant, ara heu de saber crear un complement senzill que conté un widget amb diferents tipus de camp i vau aprendre a anar una mica més usant tècniques avançades per personalitzar el widget. Enhorabona, heu fet una feina increïble!

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