WordPress-opas: Kuinka luoda mahtava sivun kääntölaajennus

Huomaa: Emme enää tue tätä WP-laajennusta, koska tekijä ei kirjoita meille toistaiseksi. 


Tänään alkaen joka viikko meillä on mahtava koodausopetus, joka opettaa sinulle, kuinka tehdä mukautettuja juttuja WordPressin avulla, perusasteesta edistyneeseen. Tänään luomme laajennuksen (niin opit tämän perusvaiheet), jotta luodaan sivun kääntögalleria JS: n avulla.

Lyön vetoa, että olet nähnyt yhden niistä varhaisilla verkkoaikoillasi, mutta ne tehtiin pääosin salamalla, joka on nyt melko vanhentunut (sillä on silti arvo, mutta se ei ole enää paras tapa tällaisiin asioihin).

Perustoiminnot ovat uuden tyyppisen gallerian luominen muutaman kuvan ja niiden koon perusteella lyhytkoodin avulla.

Aloitetaan sitten!

Postinumero & Asentaa

Paras tapa nähdä se toiminnassa on asentaa se itse. Voit ladata sen täältä. Asenna ja aktivoi laajennus, sinun tarvitsee vain lisätä lyhytkoodi sivulle, kuten tämä:

[flip_book id = = "78 79 78 79 79 78 78 79 79 78" width ="300" height ="225" näyttö ="kaksinkertainen"]

Pikaesikatselu

Ja tämä on sellainen tulos, jonka saat:

Flipbook-efekti

Mutta millaista mustaa taikaa siellä tapahtuu? No, oikeastaan ​​se on melko yksinkertaista. Otetaan oppia luomaan jotain tällaista.

Otsikko

Ensinnäkin sinun on luotava uusi kansio ja uusi .php-tiedosto. Tässä vaiheessa olisi mahtavaa, jos sinulla on testiympäristö, joten voit rikkoa ja testata tavaraa.

Tiedostolla ja kansiolla tulisi olla yksinkertainen ja ainutlaatuinen nimi, joten vältät ristiriidat olemassa olevien laajennusten kanssa. Sitten tiedostomme perussisältö on jotain tällaista:

/ *
Laajennuksen nimi: FlipBook Gallery
Kuvaus: Luo lyhyt koodi flipbook-gallerioita varten.
Versio: 1.0
Kirjoittaja: Web Revenue Blog
Lisenssi: GPL2
* /

Aika yksinkertainen, vai mitä? Kun olet luonut tämän tiedoston, näet laajennuksesi luettelossa WP-järjestelmänvalvoja > Laajennukset, ja voit aktivoida sen (mutta jos tiedostossasi on vain tätä sisältöä, se ei muuta sivustosi paljon).

Soittaminen skripteihin

Nyt meidän on sisällytettävä tähän tärkeitä ulkoisia varoja. Perustoimintojen vaadittavat ulkoiset tiedostot ovat:

  • jQuery (1,9+)
  • Turn.js-skripti
  • Käännä perusmuoto

Jos lisäät vain komentosarjan ja tyylitunnisteet, sinulla on joitain ongelmia. Esimerkiksi kaksinkertainen jQuery-puhelu todennäköisesti tuhoaa sivustosi. Myös itse WordPress ei “tiedä”, että olet luonut kyseiset kohteet, joten jos eri plugin soittaa turn.js uudelleen tai erilainen muotoilu, se rikkoa sivustosi.

Siksi meidän on aina käytettävä wp_enqueue_script- ja wp_enqueue_style-toimintoja. Tässä on peruskäyttö:

toiminto plugin_scripts () {
wp_enqueue_script (jquery ‘);
wp_enqueue_script (‘käännös’, plugins_url (‘js / turn.js’, __FILE__), taulukko (‘jquery’), ‘1.3’, väärä);
wp_enqueue_style (‘turnCSS’, plugins_url (‘css / style.css’, __FILE__), false, ‘1.3’, ‘all’);
}

Me kutsumme ulkoisia tavaroita kolmella eri tavalla, tässä ne ovat:

  • Olemassa olevan kohteen soittaminen: jQuery – Meidän ei tarvitse siirtää paljon parametrejä, jos tiedämme varmasti, että WordPress lataa jo tämän komentosarjan, sanomme hänelle vain “Kaveri, tämän komentosarjan PITÄÄ olla täällä, muuten koodimme ei työ”
  • Uuden komentosarjan luominen – sinun on siirrettävä joitain määritteitä, kuten nimi, tiedoston sijainti, vaadittavat kohteet (tässä tapauksessa tarvitaan jQuery), versio ja jos se on ladattu alatunnisteeseen tai otsikkoon (false = otsikko, true = alatunniste)
  • Uuden tyylin luominen – melko sama kuin edellinen, pienellä erolla viimeisessä attribuutissa, joka kertoo mikä media kirjoittaa tämän tyylin, jos

Yksi tärkeistä asioista, jotka sinun tulee ottaa huomioon soitettaessa ulkoisia skriptejä, on jos on enemmän koodeja, jotka riippuvat tästä laajennuksesta. Se määrittelee periaatteessa, kutsutaanko tiedostoa otsikkoon tai alatunnisteeseen.

Tapauksessamme meillä on joitain ylimääräisiä skriptejä, joiden avulla galleria voidaan asettaa vasta, kun sen HTML luodaan, ja ne lisätään runkoon. Siksi meidän on TÄTÄ lisättävä tämä komentosarja päähän, muuten kun koodiamme kutsutaan käännökseksi -toimintoa ei ole vielä olemassa.

Tämän mukavan koodin jälkeen meidän on sanottava WordPressille, että ne ladataan komentosarjoiksi, toiminto “wp_enqueue_scripts” tekee tämän:

add_action (‘wp_enqueue_scripts’, ‘plugin_scripts’);

Lyhytkoodi

Aloitetaan toiminnolla, jolla luodaan lyhytkoodi. Se on melko yksinkertaista, sinun on vain lisättävä lyhytkoodiliipaisin ja suoritettava toiminto:

add_shortcode ("flip_book","create_flip_book");

Nyt meidän on luotava toiminto ja hankittava ominaisuuksemme. Jotkin määritteistä voivat kuitenkin olla valinnaisia, mikä tarkoittaa, että joudumme luomaan heille oletusarvot. Voisimme luoda paljon, jos siellä testataan, jos attribuutti on tyhjä, mutta tämä on yksi tapauksista, joissa kolmen osapuolen toiminta on parempi kuin tavallinen, jos puhelun.

Kolmiosaiset operaatiot ovat sellaisia, jos lauseet suoraan muuttujan arvossa. Jos seuraa tätä rakennetta:

$ muuttuja = (CONDITION) ? "ARVO, JOS EHDO on Tosi" : "ARVO, JOS EHDO ON Väärä";

Voit nähdä ne toiminnassa toiminnon ensimmäisessä osassa:

toiminto create_flip_book ($ attr) {

// Tunnisteiden valmistelu käsiteltäväksi
$ array [‘id’] = räjähtää (" ",$ Attr [Eidejä ‘]);

//näyttötila
$ array [‘display’] = tyhjä ($ attr [‘display’]) ? "yksittäinen" : $ attr [‘display’]; // vakioarvo

//leveys
$ matriisi [‘leveys’] = tyhjä ($ attr [‘leveys’])? 400: $ attr [‘leveys’];

//korkeus
$ matriisi [‘korkeus’] = tyhjä ($ attr [‘korkeus’])? 300: $ attr [‘korkeus’]; // HTML ja loput koodi siirretään tänne
}

Sitten meidän on luotava HTML ja peruskutsu kuvillemme. Toinen tärkeä asia on koon säätäminen, jos käytämme lehden tyyliä (sen tulisi olla 2x leveämpi, koska meillä on 2 kuvaa yhden sijaan):

<?php
if ($ array [‘display’] == "kaksinkertainen" ) {
$ matriisi [‘leveys’] = $ matriisi [‘leveys’] * 2;
}
// HTML, JS ja Black Magic
?>

<?php
varten ($ i = 0; $ i < sizeof ($ matriisi [‘id’]); $ i ++) {
?>

<?php
echo wp_get_attachment_image ($ array [‘id’] [$ i], ‘full’);
if ($ array [‘display’] == "yksittäinen" ) {
?>
<?="".($ I + 1)?>/<? kaiku "".sizeof ($ array [Eidejä ‘])?>
<?php
} muuta {
?>

<?php
kaiku "".($ I + 1)?>/<? kaiku "".sizeof ($ array [Eidejä ‘]);
?>

<?php
}
?>

<?php
}
?>

jQuery ("#flipbook").vuoro({
leveys: <?php echo $ -ryhmä [‘leveys’]; ?>,
korkeus: <?php echo $ -ryhmä [‘korkeus’]; ?>,
autoCenter: totta,
näyttö: ‘<?php echo $ array [‘näyttö’]; ?>’, // yksi sivu tai kaksisivu
kiihtyvyys: totta,
kaltevuudet:! jQuery.isTouch,
});

Mitä mieltä sinä olet?

Nyt voit mukauttaa ja muokata tätä haluamallasi tavalla, lisäämällä lisävaihtoehtoja (tutustu heidän mahtaviin esimerkkeihin saadaksesi lisää inspiraatiota), säätämällä sitä, mikä ei toimi sinulle, tai yhdistämällä se muihin laajennuksiin.

Onko sinulla WordPress-konseptia, jonka haluat oppia vähän lisää? Ehkä jotain, jonka haluat oppia tekemään? Kerro meille kommenttien kautta ja lisäämme mielellämme tämän tulevaan viestiin!

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