Nota: Ja no admetem aquest complement WP, ja que l’autor no ens escriu per ara. 


A partir d’avui, cada setmana oferirem un fantàstic tutorial de codificació, que us ensenyarà a fer coses personalitzades mitjançant WordPress, des de bàsic fins a avançat. Avui crearem un complement (de manera que aprendràs els passos bàsics d’això) per generar una galeria de “pàgina de referència” mitjançant JS.

Aposto que n’heu vist una de les seves primeres pàgines web, però que es feien principalment amb el flaix, que ara és bastant obsolet (encara té el seu valor, però ja no és la millor opció per a aquest tipus de coses).

La funcionalitat bàsica serà crear un nou tipus de galeria basat en poques imatges i les seves mides, mitjançant codi curt.

Comencem llavors!

Cremallera & Instal·leu

La millor manera de veure-ho en acció és instal·lant-lo tu mateix. El podeu descarregar aquí. Instal·leu i activeu el complement, només cal que afegiu el codi curt a una pàgina, com ara:

[flip_book ids = "78 79 78 79 79 78 78 79 79 78" amplada ="300" alçada ="225" mostrar ="doble"]

Vista prèvia ràpida

I aquest és el tipus de resultat que obtindreu:

Efecte Flipbook

Però, quin tipus de màgia negra passa aquí? Bé, és molt senzill. Aprenem a crear una cosa així.

La capçalera

Primer de tot, haureu de crear una carpeta nova i un nou .php. En aquest moment, seria fantàstic si teniu un entorn de prova, de manera que podreu provar i provar coses.

El fitxer i la carpeta haurien de tenir un nom senzill i únic, de manera que evitareu conflictes amb els plugins existents. Aleshores, el contingut bàsic del nostre fitxer és així:

/ *
Nom del complement: Galeria FlipBook
Descripció: Creeu un codi curt per a galeries de flipbook.
Versió: 1.0
Autor: Web Revenue Blog
Llicència: GPL2
* /

Bastant simple, eh? Un cop creeu aquest fitxer, veureu el vostre complement a la llista sota administrador WP > Connectors i podeu activar-lo (però si només teniu aquest contingut al fitxer, no canviarà gaire el vostre lloc).

Scripts de trucada

Ara hem d’incloure alguns actius externs importants aquí. Els fitxers externs necessaris per a la funcionalitat bàsica són:

  • jQuery (1,9+)
  • Script de Turn.js
  • Converteix l’estil bàsic

Si simplement afegiu les etiquetes de script i estil, tindreu alguns problemes. Per exemple, probablement la doble trucada de jQuery trencarà el vostre lloc. A més, WordPress no “sabrà” que heu creat aquests elements, de manera que si un complement diferent truca a torns.js o un estil diferent, es trencarà el vostre lloc..

És per això que sempre hauríem d’utilitzar les funcions wp_enqueue_script i wp_enqueue_style. Aquí teniu l’ús bàsic:

function plugin_scripts () {
wp_enqueue_script (‘consulta’);
wp_enqueue_script (‘turn’, plugins_url (‘js / turn.js’, __FILE__), matriu (‘jquery’), ‘1.3’, fals);
wp_enqueue_style (‘turnCSS’, plugins_url (‘css / style.css’, __FILE__), fals, ‘1.3’, ‘tot’);
}

Truquem a articles externs de 3 maneres diferents, aquí estan:

  • Trucant a un element existent: jQuery: no hem de passar gaires paràmetres si sabem amb certesa que WordPress ja carrega aquest script, només li estem dient: “Amic, aquest script ha de ser aquí, en cas contrari, el nostre codi no serà així. treballar ”
  • Creeu un nou script: haureu de passar alguns atributs com el nom, la ubicació del fitxer, els elements obligatoris (en aquest cas requereix jQuery), la versió i si es carrega al peu de pàgina o a la capçalera (false = capçalera, true = footer)
  • Creació d’un estil nou – pràcticament el mateix que l’anterior, amb una petita diferència en l’últim atribut, que diu quins mitjans escriuen aquest estil en cas de

Una de les coses importants que heu de tenir en compte quan truqueu scripts externs és si hi ha més codi que dependrà d’aquest complement. Bàsicament, és el que defineix si el fitxer s’anomenarà a la capçalera o al peu de pàgina.

En el nostre cas, tenim alguns scripts addicionals per configurar la galeria només quan es crei el seu HTML i que s’afegiran al cos. És per això que N’HEM DE afegir aquest script al cap, en cas contrari quan el nostre codi s’anomena funció “torn” encara no hi és.

Després d’aquest bonic codi, hem de dir-li a WordPress que els carregui com a scripts, l’acció “wp_enqueue_scripts” farà això:

add_action (‘wp_enqueue_scripts’, ‘plugin_scripts’);

El codi curt

Comencem amb l’acció per crear el codi curt. És bastant senzill, només cal afegir el disparador de codi curt i la funció que s’executarà:

add_shortcode ("flip_book","create_flip_book");

Ara hem de crear la nostra funció i obtenir els nostres atributs. Però alguns dels atributs poden ser opcionals, cosa que significa que haurem de crear valors per defecte per a ells. Podríem crear moltes proves si hi hagi l’atribut buit, però és un dels casos en què l’operació ternària és millor que la de trucada habitual.

Les operacions ternàries són tipus d’informacions directament en el valor de la variable. Si segueix aquesta estructura:

$ variable = (CONDICIÓ) ? "VALOR SI LA CONDICIÓ ÉS VERDADORA" : "VALOR SI FALSA LA CONDICIÓ";

Podeu veure’ls en acció a la primera part de la nostra funció:

funció create_flip_book ($ attr) {

// Preparació dels ID a processar
$ array [‘ids’] = explotar (" ",$ attr [‘ids’]);

// mode de visualització
$ array [‘display’] = buit ($ attr [‘display’]) ? "solter" : $ attr [‘display’]; // valor estàndard

// amplada
$ array [‘width’] = buit ($ attr [‘ample’])? 400: $ attr [‘amplada’];

// alçada
$ array [‘height’] = buit ($ attr [‘altura’])? 300: $ attr [‘altura’]; // HTML i la resta del codi va aquí
}

Llavors haurem de crear l’HTML i la trucada bàsica per a les nostres imatges. Un altre punt important aquí és ajustar la mida si utilitzem l’estil de revista (hauria de ser 2x l’amplada ja que tindrem dues imatges en lloc d’una):

<?php
if ($ array [‘display’] == "doble" ) {
$ array [‘width’] = $ array [‘ample’] * 2;
}
// HTML, JS i Black Magic
?>

<?php
per ($ i = 0; $ i < sizeof ($ array [‘ids’]); $ i ++) {
?>

<?php
echo wp_get_attachment_image ($ array [‘ids’] [$ i], ‘complet’);
if ($ array [‘display’] == "solter" ) {
?>
<?="".($ i + 1)?>/<? ressò "".sizeof ($ array [‘ids’])?>
<?php
} més {
?>

<?php
ressò "".($ i + 1)?>/<? ressò "".sizeof ($ array [‘ids’]);
?>

<?php
}
?>

<?php
}
?>

jQuery ("#flipbook") .turn ({
amplada: <?php eco $ array [‘amplada’]; ?>,
alçada: <?php eco $ array [‘altura’]; ?>,
AutoCenter: cert,
mostrar: ‘<?php eco $ array [‘display’]; ?>’, // pàgina única o doble pàgina
acceleració: cert,
gradients:! jQuery.isTouch,
});

Què penses?

Ara podeu ajustar i modificar això com vulgueu, afegint més opcions (consulteu els seus exemples impressionants per obtenir més inspiració), ajustant el que no us serveix o combinant-ho amb altres complements..

Teniu algun concepte de WordPress que vulgueu aprendre una mica més? Potser alguna cosa que voleu aprendre a fer? Informem-ho mitjançant comentaris i estarem encantats d’incloure-ho en una publicació futura!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me