WordPress-zelfstudie: een geweldige plug-in voor het omslaan van pagina’s maken

Opmerking: we ondersteunen deze WP-plug-in niet langer omdat de auteur voorlopig niet voor ons schrijft. 


Vanaf vandaag bieden we elke week een geweldige codeerhandleiding aan, die je leert hoe je op maat gemaakte dingen kunt doen met WordPress, van eenvoudig tot geavanceerd. Vandaag maken we een plug-in (zodat u de basisstappen hierover leert) om een ​​galerij met “pagina-omslaan” te genereren met behulp van JS.

Ik wed dat je een van die in je vroege webdagen hebt gezien, maar die waren meestal gedaan met flash, die nu behoorlijk verouderd is (het heeft nog steeds zijn waarde, maar het is niet meer de beste optie voor dit soort dingen).

De basisfunctionaliteit is het creëren van een nieuw type galerij op basis van een paar afbeeldingen en hun afmetingen, via shortcode.

Laten we dan beginnen!

Zip & Installeren

De beste manier om het in actie te zien, is door het zelf te installeren. Je kunt het hier downloaden. Installeer en activeer de plug-in, het enige dat u hoeft te doen is de shortcode op een pagina toevoegen, zoals deze:

[flip_book ids = "78 79 78 79 79 78 78 79 79 78" breedte ="300" hoogte ="225" display ="dubbele"]

Snel voorbeeld

En dit is het soort resultaat dat je krijgt:

Flipbook-effect

Maar wat voor soort zwarte magie gebeurt daar? Nou, het is eigenlijk heel simpel. Laten we leren hoe we zoiets kunnen maken.

De koptekst

Allereerst moet u een nieuwe map en een nieuw .php-bestand maken. Op dit moment zou het geweldig zijn als je een testomgeving hebt, zodat je dingen kunt breken en testen.

Het bestand en de map moeten een eenvoudige en unieke naam hebben, zodat u conflicten met bestaande plug-ins voorkomt. Dan is de basisinhoud van ons bestand zoiets als dit:

/ *
Plugin-naam: FlipBook Gallery
Beschrijving: Maak een shortcode voor flipboekgalerijen.
Versie: 1.0
Auteur: Web Revenue Blog
Licentie: GPL2
* /

Vrij eenvoudig, hè? Zodra u dit bestand heeft gemaakt, ziet u uw plug-in in de lijst onder WP-beheerder > Plug-ins, en je kunt het activeren (maar als je alleen deze inhoud in je bestand hebt, zal het je site niet veel veranderen).

Calling scripts

Nu moeten we hier enkele belangrijke externe activa opnemen. De vereiste externe bestanden voor basisfunctionaliteit zijn:

  • jQuery (1.9+)
  • Turn.js script
  • Draai de basisstijl

Als je daar eenvoudig het script en de stijltags toevoegt, heb je een aantal problemen. Zo zal de dubbele jQuery-aanroep waarschijnlijk uw site verbreken. Ook weet WordPress zelf niet dat je die items hebt gemaakt, dus als een andere plug-in turn.js opnieuw aanroept of een andere vormgeving, zal je site kapot gaan.

Daarom moeten we altijd de functies wp_enqueue_script en wp_enqueue_style gebruiken. Hier is het basisgebruik:

functie plugin_scripts () {
wp_enqueue_script (‘jquery’);
wp_enqueue_script (‘turn’, plugins_url (‘js / turn.js’, __FILE__), array (‘jquery’), ‘1.3’, false);
wp_enqueue_style (‘turnCSS’, plugins_url (‘css / style.css’, __FILE__), false, ‘1.3’, ‘all’);
}

We noemen externe items op 3 verschillende manieren, hier zijn ze:

  • Een bestaand item aanroepen: jQuery – We hoeven niet veel parameters door te geven als we zeker weten dat WordPress dit script al laadt, we vertellen hem gewoon “Kerel, dit script MOET hier zijn, anders zal onze code niet werk”
  • Een nieuw script maken – u moet een aantal kenmerken doorgeven, zoals naam, bestandslocatie, vereiste items (in dit geval vereist het jQuery), versie en als het in de voettekst of koptekst is geladen (false = header, true = footer)
  • Een nieuwe stijl creëren – Vrijwel hetzelfde als de vorige, met een klein verschil in het laatste attribuut, dat zegt welke media deze stijl typen als voor

Een van de belangrijkste dingen waarmee u rekening moet houden wanneer u externe scripts aanroept, is of er meer code is die afhangt van deze plug-in. Dat is eigenlijk wat bepaalt of uw bestand wordt aangeroepen in de koptekst of voettekst.

In ons geval hebben we enkele aanvullende scripts om de galerij alleen in te stellen wanneer de HTML is gemaakt en die in de body wordt toegevoegd. Dit is waarom we dit script in het hoofd MOETEN toevoegen, anders is onze code, wanneer de code wordt aangeroepen, nog niet aanwezig.

Na deze mooie code moeten we WordPress vertellen om die als scripts te laden, de actie “wp_enqueue_scripts” zal dit doen:

add_action (‘wp_enqueue_scripts’, ‘plugin_scripts’);

De shortcode

Laten we beginnen met de actie om de shortcode te maken. Het is vrij eenvoudig, u hoeft alleen de shortcode-trigger toe te voegen en de functie die wordt uitgevoerd:

add_shortcode ("flip_book","create_flip_book");

Nu moeten we onze functie creëren en onze attributen krijgen. Maar sommige kenmerken kunnen optioneel zijn, wat betekent dat we er standaardwaarden voor moeten maken. We kunnen veel if’s-er-testen maken als het attribuut leeg is, maar dit is een van de gevallen waarin de ternaire werking beter is dan de normale als aanroep.

Ternaire operaties zijn soort if-statements die rechtstreeks in de waarde van variabelen staan. Als volgt deze structuur:

$ variable = (CONDITION) ? "WAARDE ALS DE VOORWAARDE WAAR IS" : "WAARDE INDIEN CONDITIE ONJUIST is";

Je kunt ze in actie zien in het eerste deel van onze functie:

functie create_flip_book ($ attr) {

// De ID’s voorbereiden die moeten worden verwerkt
$ array [‘ids’] = exploderen (" ",$ attr [‘ids’]);

// weergavemodus
$ array [‘display’] = leeg ($ attr [‘display’]) ? "single" : $ attr [‘display’]; // standaardwaarde

//breedte
$ array [‘width’] = leeg ($ attr [‘width’])? 400: $ attr [‘width’];

//hoogte
$ array [‘height’] = leeg ($ attr [‘height’])? 300: $ attr [‘hoogte’]; // HTML en de rest van de code komt hier
}

Vervolgens moeten we de HTML maken en de basisoproep voor onze afbeeldingen. Een ander belangrijk punt hier is om de grootte aan te passen als we tijdschriftstijl gebruiken (het moet 2x de breedte zijn omdat we 2 afbeeldingen hebben in plaats van één):

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

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

<?php
echo wp_get_attachment_image ($ array [‘ids’] [$ i], ‘full’);
if ($ array [‘display’] == "single" ) {
?>
<?="".($ i + 1)?>/<? echo "".sizeof ($ array [‘ids’])?>
<?php
} anders {
?>

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

<?php
}
?>

<?php
}
?>

jQuery ("#flipbook").beurt({
breedte: <?php echo $ array [‘width’]; ?>,
hoogte: <?php echo $ array [‘height’]; ?>,
autoCenter: waar,
Scherm: ‘<?php echo $ array [‘display’]; ?>’, // enkele pagina of dubbele pagina
acceleratie: waar,
hellingen:! jQuery.isTouch,
});

Wat denk je?

Nu kun je dit aanpassen en aanpassen zoals je wilt, meer opties toevoegen (bekijk hun geweldige voorbeelden voor meer inspiratie), aanpassen wat niet werkt voor jou, of dit combineren met andere plug-ins.

Heb je een WordPress-concept dat je een beetje meer wilt leren? Misschien iets dat je wilt leren doen? Laat het ons weten via reacties en we nemen dit graag op in een toekomstige post!

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