WordPress handleiding: Hoe om ‘n fantastiese bladsy-flip-inprop te skep

Opmerking: ons ondersteun nie meer hierdie WP-inprop nie, aangesien die skrywer vir nou nie vir ons skryf nie. 


Vandag begin ons elke week met ‘n ongelooflike koderingstutoriaal, wat u leer hoe om aangepaste dinge te doen met WordPress, van basies tot gevorderd. Vandag sal ons ‘n inprop skep (sodat u die basiese stappe hiervan sal leer) om ‘n “bladsy-flip” -galery te genereer met behulp van JS.

Ek is seker ek het gesien dat een van u in u vroeë webdae gesien is, maar dit is meestal gedoen met behulp van flits, wat nou heeltemal afgeneem is (dit het steeds sy waarde, maar dit is nie meer die beste opsie vir hierdie soort ding nie).

Die basiese funksionaliteit is om ‘n nuwe soort gallery op grond van ‘n paar beelde en hul groottes te skep, via ‘n kortkode.

Laat ons dan begin!

zip & installeer

Die beste manier om dit in aksie te sien, is om dit self te installeer. U kan dit hier aflaai. Installeer en aktiveer die inprop, dan hoef u net die kortkode op ‘n bladsy soos hierdie te voeg:

[flip_book ids = "78 79 78 79 79 78 78 79 79 78" width ="300" hoogte ="225" vertoning ="dubbel"]

Vinnige voorskou

En dit is die soort resultaat wat u sal kry:

Flipboek-effek

Maar watter soort swart magie is daar? Wel, dit is eintlik baie eenvoudig. Kom ons leer hoe om so iets te skep.

Die kop

In die eerste plek sal u ‘n nuwe gids en ‘n nuwe .pp-lêer moet skep. Op hierdie punt sou dit wonderlik wees as u ‘n toetsomgewing het, sodat u dinge kan breek en toets.

Die lêer en lêergids moet ‘n eenvoudige en unieke naam hê, sodat u konflik met bestaande inproppe vermy. Dan is die basiese inhoud van ons lêer so:

/ *
Inpropnaam: FlipBook-gallery
Beskrywing: Skep ‘n kortkode vir flipboekgalerye.
Weergawe: 1.0
Skrywer: Webinkomsteblog
Lisensie: GPL2
* /

Nogal eenvoudig, nè? Sodra u hierdie lêer geskep het, sal u u inprop in die lys onder WP-admin sien > Plugins, en u kan dit aktiveer (maar as u slegs die inhoud in u lêer het, sal dit nie u webwerf baie verander nie).

Skripte bel

Nou moet ons ‘n paar belangrike eksterne bates hier insluit. Die vereiste eksterne lêers vir basiese funksies is:

  • jQuery (1.9+)
  • Turn.js-skrif
  • Verander basiese stilering

As u bloot die skrif- en styletikette daarby voeg, sal u probleme hê. Byvoorbeeld, die dubbele jQuery-oproep sal u webwerf waarskynlik verbreek. WordPress self sal ook nie “weet” dat u hierdie items geskep het nie, so as ‘n ander inprop weer turn.js noem of ‘n ander styling doen, sal dit u werf breek.

Daarom moet ons altyd die wp_enqueue_script- en wp_enqueue_style-funksies gebruik. Hier is die basiese gebruik:

funksie plugin_scripts () {
wp_enqueue_script ( ‘jQuery’);
wp_enqueue_script (‘draai’, plugins_url (‘js / turn.js’, __FILE__), skikking (‘jquery’), ‘1.3’, onwaar);
wp_enqueue_style (‘turnCSS’, plugins_url (‘css / style.css’, __FILE__), onwaar, ‘1.3’, ‘alles’);
}

Ons noem eksterne items op drie verskillende maniere: hier is dit:

  • Om ‘n bestaande item te noem: jQuery – ons hoef nie baie parameters deur te gee as ons met sekerheid weet dat WordPress hierdie skrip al laai nie, ons sê net vir hom: “Dude, hierdie script MOET hier wees, anders sal ons kode nie werk “
  • Die skep van ‘n nuwe skrip – u moet ‘n paar kenmerke soos naam, lêerligging, vereiste items (in hierdie geval benodig dit jQuery), weergawe, en as dit in die voettekst of koplys gelaai is (vals = kop, waar = voet)
  • Die skep van ‘n nuwe styl – min of meer dieselfde as die vorige, met ‘n klein verskil in die laaste attribuut, wat sê watter media hierdie styl tik as

Een van die belangrikste dinge wat u moet oorweeg as u eksterne skripte bel, is as daar meer kode is wat van hierdie inprop afhang. Dit is basies wat bepaal of u lêer in die kop- of voettekst genoem sal word.

In ons geval het ons ‘n paar bykomende skrifte om die gallery slegs op te stel as die HTML-vorm geskep is, en dit sal in die liggaam gevoeg word. Dit is waarom ons hierdie skrif in die kop MOET voeg, anders is ons kode nog nie daar as ons kode ‘die’ draai-funksie genoem word nie.

Na hierdie oulike kode moet ons vir WordPress sê om dit as skripte te laai, sal die aksie “wp_enqueue_scripts” dit doen:

add_action (‘wp_enqueue_scripts’, ‘plugin_scripts’);

Die kortkode

Begin met die aksie om die kortkode te skep. Dit is eenvoudig, u hoef net die kortkode-sneller en die funksie wat uitgevoer word, by te voeg:

add_shortcode ("flip_book","create_flip_book");

Nou moet ons ons funksie skep en ons eienskappe kry. Sommige van die kenmerke kan opsioneel wees, wat beteken dat ons standaardwaardes daarvoor moet skep. Ons kan baie of daar toetsings skep of die attribuut leeg is, maar dit is een van die gevalle waar ternêre werking beter is as die gewone as oproep.

Ternêre bedrywighede is soortgelyk as stellings direk in veranderlike waarde. As hierdie struktuur volg:

$ veranderlike = (TOESTAND) ? "WAARDE AS TOESTAND WAAR IS" : "WAARDE INDIEN TOESTAND ONWAAR IS";

U kan hulle in aksie sien in die eerste deel van ons funksie:

funksie create_flip_book ($ attr) {

// Die voorbereiding van die ID’s wat verwerk moet word
$ array [‘ids’] = ontplof (" ",$ Attr [ ‘ids’]);

// vertoonmodus
$ array [‘display’] = leeg ($ attr [‘display’]) ? "enkele" : $ attr [‘vertoning’]; // standaardwaarde

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

//hoogte
$ array [‘hoogte’] = leeg ($ attr [‘hoogte’])? 300: $ attr [‘hoogte’]; // HTML en die res van die kode is hier
}

Dan sal ons die HTML en die basiese oproep vir ons beelde moet skep. ‘N Verdere belangrike punt hier is om die grootte aan te pas as ons tydskrifstyl gebruik (dit moet 2x die breedte wees, want ons het twee prente in plaas van een):

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

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

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

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

<?php
}
?>

<?php
}
?>

jQuery ("#flipbook") Draai ({
breedte: <?php echo $ array [‘breedte’]; ?>,
hoogte: <?php echo $ array [‘hoogte’]; ?>,
autoCenter: waar,
vertoon: ‘<?php echo $ array [‘display’]; ?>’, // enkele bladsy of dubbelblad
versnelling: waar,
gradiënte:! jQuery.isTouch,
});

Wat dink jy?

Nou kan u dit aanpas en verander soos u wil, deur meer opsies by te voeg (kyk na hul ongelooflike voorbeelde vir meer inspirasie), aan te pas wat nie vir u werk nie, of dit met ander plugins te kombineer.

Het u enige WordPress-konsep wat u ‘n bietjie meer wil leer? Miskien iets wat u wil leer hoe om te doen? Laat weet ons dit via kommentaar, en ons sal dit graag in ‘n toekomstige pos insluit!

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