WordPress Tutorial: Hur man skapar en fantastisk sidflip-plugin

Obs! Vi stöder inte längre detta WP-plugin eftersom författaren inte skriver för oss för tillfället. 


Från och med idag kommer vi varje vecka att presentera en fantastisk kodningshandledning som lär dig hur du gör anpassade saker med WordPress, från grundläggande till avancerade. Idag skapar vi ett plugin (så du lär dig de grundläggande stegen på detta) för att generera ett “sideflip” -galleri med JS.

Jag slår vad om att du har sett en av dem under dina tidiga webbdagar, men de gjordes mest med flash, som nu är ganska avskrivet (det har fortfarande sitt värde, men det är inte det bästa alternativet för den här typen längre).

Den grundläggande funktionaliteten är att skapa en ny typ av galleri baserat på några få bilder och deras storlekar via kortkod.

Låt oss komma igång då!

Blixtlås & Installera

Det bästa sättet att se det i aktion är att installera det själv. Du kan ladda ner den här. Installera och aktivera plugin, då behöver du bara lägga till kortkoden på en sida, så här:

[flip_book ids = "78 79 78 79 79 78 78 79 79 78" width ="300" höjd ="225" display ="dubbel-"]

Snabb förhandsvisning

Och detta är den typ av resultat som du får:

Flipbook-effekt

Men vilken typ av svart magi pågår där? Det är faktiskt ganska enkelt. Låt oss lära oss att skapa något liknande.

Header

Först måste du skapa en ny mapp och en ny .php-fil. Vid denna punkt skulle det vara fantastiskt om du har en testmiljö, så att du kan bryta och testa saker.

Filen och mappen bör ha ett enkelt och unikt namn, så att du undviker konflikt med befintliga plugins. Då är grundinnehållet i vår fil något liknande:

/ *
Plugin Namn: FlipBook Gallery
Beskrivning: Skapa en kortkod för bläddergallerier.
Version: 1.0
Författare: Web Revenue Blog
Licens: GPL2
* /

Ganska enkelt, va? När du skapar den här filen ser du din plugin i listan under WP-admin > Plugins, och du kan aktivera det (men om du bara har det här innehållet i din fil kommer det inte att ändra mycket på din webbplats).

Ringa skript

Nu måste vi ta med några viktiga externa tillgångar här. De externa filerna som krävs för grundläggande funktioner är:

  • jQuery (1.9+)
  • Turn.js-skript
  • Vänd grundläggande styling

Om du helt enkelt lägger till skript- och stiltaggarna har du några problem. Till exempel kommer det dubbla jQuery-samtalet troligen att bryta din webbplats. WordPress själv kommer inte att “veta” att du har skapat dessa objekt, så om en annan plugin ringer turn.js igen eller en annan styling kommer den att bryta din webbplats.

Det är därför vi alltid ska använda funktionerna wp_enqueue_script och wp_enqueue_style. Här är den grundläggande användningen:

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

Vi ringer externa föremål på tre olika sätt, här är de:

  • Ringa ett befintligt objekt: jQuery – Vi behöver inte lämna många parametrar om vi med säkerhet vet att WordPress redan laddar detta skript, vi berättar bara för honom ”Dude, detta skript MÅSTE vara här annars kommer inte vår kod arbete”
  • Skapa ett nytt skript – du måste skicka några attribut som namn, filplats, obligatoriska objekt (i detta fall kräver det jQuery), version och om det laddas i sidfot eller sidhuvud (falsk = sidhuvud, sant = sidfot)
  • Skapa en ny stil – Ganska mycket som den föregående, med en liten skillnad i det sista attributet, som säger vilken media typ denna stil om

En av de viktiga sakerna du bör tänka på när du ringer externa skript är om det finns mer kod som kommer att bero på det här insticksprogrammet. Det är i princip vad som definierar om din fil kommer att anropas i sidhuvud eller sidfot.

I vårt fall har vi några ytterligare skript för att ställa in galleriet endast när dess HTML skapas, och det kommer att läggas till i kroppen. Det är därför vi MÅSTE lägga till detta skript i huvudet, annars när vår kod kallas “turn” -funktionen är inte där ännu.

Efter den här fina koden måste vi berätta för WordPress att ladda dem som skript, åtgärden “wp_enqueue_scripts” gör detta:

add_action (‘wp_enqueue_scripts’, ‘plugin_scripts’);

Kortkoden

Låt oss börja med åtgärden för att skapa kortkoden. Det är ganska enkelt, du behöver bara lägga till kortkodutlösaren och funktionen som kommer att köras:

add_shortcode ("blädderbok","create_flip_book");

Nu måste vi skapa vår funktion och få våra attribut. Men några av attributen kan vara valfria, vilket innebär att vi måste skapa standardvärden för dem. Vi kan skapa en hel del om det finns testning om attributet är tomt, men detta är ett av fallen där ternär operation är bättre än den vanliga om samtalet.

Ternära operationer är typ av om uttalanden direkt i variabelns värde. Om följer denna struktur:

$ variabel = (CONDITION) ? "VÄRDE OM VILLKOR ÄR SANT" : "Värdet om villkoret är falskt";

Du kan se dem i handling i den första delen av vår funktion:

funktion create_flip_book ($ attr) {

// Förbereda ID: erna som ska behandlas
$ array [‘ids’] = explodera (" ",$ Attr [ ‘ids’]);

//visningsläge
$ array [‘display’] = tom ($ attr [‘display’]) ? "enda" : $ attr [‘display’]; // standardvärde

//bredd
$ array [‘bredd’] = tom ($ attr [‘bredd’])? 400: $ attr [‘bredd’];

//höjd
$ array [‘הייך’] = tom ($ attr [‘höjd’])? 300: $ attr [‘höjd’]; // HTML och resten av koden går här
}

Då måste vi skapa HTML och det grundläggande samtalet för våra bilder. En annan viktig punkt här är att justera storleken om vi använder magasinstil (det borde vara 2x bredden eftersom vi har två bilder istället för en):

<?php
if ($ array [‘display’] == "dubbel-" ) {
$ array [‘bredd’] = $ array [‘bredd’] * 2;
}
// HTML, JS och Black Magic
?>

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

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

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

<?php
}
?>

<?php
}
?>

jQuery ("#blädderbok").sväng({
bredd: <?php echo $ array [‘bredd’]; ?>,
höjd: <?php echo $ array [‘höjd’]; ?>,
autoCenter: sant,
display: ‘<?php echo $ array [‘display’]; ?>’, // enkel sida eller dubbel sida
acceleration: sant,
lutningar:! jQuery.isTouch,
});

Vad tror du?

Nu kan du finjustera och ändra detta som du vill, lägga till fler alternativ (kolla in deras fantastiska exempel för mer inspiration), justera vad som inte fungerar för dig eller kombinera det med andra plugins.

Har du något WordPress-koncept som du vill lära dig lite mer? Kanske något du vill lära dig att göra? Låt oss veta via kommentarer och vi kommer gärna att inkludera detta i ett framtida inlägg!

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