Mafunzo ya WordPress: Jinsi ya Kujenga Plugin ya ajabu ya Flip Plugin

Kifungu kilichoandikwa na:
  • Inbound Masoko
  • Iliyasasishwa Septemba 15, 2014

Kumbuka: Hatuunga mkono Plugin hii ya WP kama mwandishi hayuandiki kwa sasa.

Kuanzia leo, kila wiki tutajumuisha mafunzo ya kuandika coding, kukufundisha jinsi ya kufanya mambo ya desturi kwa kutumia WordPress, kutoka kwa msingi hadi ya juu. Leo tutaunda Plugin (hivyo utajifunza hatua za msingi juu ya hili) ili kuzalisha nyumba ya sanaa "ukurasa wa flip", ukitumia JS.

Mimi beta umeona mojawapo ya wale katika siku zako za kwanza za wavuti, lakini hizo zimefanyika kwa kutumia flash, ambayo sasa imepungua (bado ina thamani yake, lakini sio chaguo bora zaidi kwa aina hii ya kitu tena).

Utendaji wa msingi utaunda mpya aina ya nyumba ya sanaa kulingana na picha ndogo na ukubwa wake, kupitia shortcode.

Hebu tuanze basi!

Zip & Weka

Njia bora ya kuiona katika hatua ni kuiweka mwenyewe. Unaweza kushusha ni hapa. Sakinisha na kuamsha Plugin, basi yote unayohitaji kufanya ni kuongeza shortcode kwenye ukurasa, kama hii:

[flip_book ids = "78 79 78 79 79 78 78 79 79" upana = "78" urefu = "300" kuonyesha = "mara mbili"]

Angalia Preview

Na hii ndiyo aina ya matokeo ambayo utapata:

Flipbook Athari

Lakini ni aina gani ya uchawi mweusi inayoendelea huko? Naam, ni rahisi sana. Hebu tujifunze jinsi ya kuunda kitu kama hiki.

Kichwa

Awali ya yote unahitaji kuunda folda mpya na faili mpya ya .php. Kwa hatua hii itakuwa ya kushangaza ikiwa una mazingira ya mtihani, hivyo unaweza kuvunja na kupima vitu.

Faili na folda zinapaswa kuwa na jina rahisi na la kipekee, kwa hiyo utaweza kuepuka migogoro na programu zilizopo. Kisha maudhui ya msingi ya faili yetu ni kitu kama hiki:

Jina la Plugin: FlipBook Nyumba ya sanaa Maelezo: Unda shortcode kwa nyumba za flipbook. Toleo: 1.0 Mwandishi: License Blog ya Revenue Web: GPL2 * /

Nzuri sana, huh? Mara baada ya kuunda faili hii utaona Plugin yako katika orodha chini ya WP admin> Plugins, na unaweza kuifungua (lakini ikiwa una maudhui haya katika faili yako haitababadilisha tovuti yako).

Inaandika scripts

Sasa tunahitaji kuingiza mali muhimu za nje hapa. Faili zilizohitajika nje za utendaji wa msingi ni:

  • jQuery (1.9 +)
  • Toleo la Turn.js
  • Piga mtindo wa msingi

Ikiwa unatia tu vitambulisho vya script na mtindo huko utakuwa na masuala fulani. Kwa mfano, wito wa jQuery mara mbili utavunja tovuti yako. Pia WordPress yenyewe haiwezi "kujua" kwamba umetengeneza vitu hivi, hivyo kama wito wa plugin tofauti tena tena au styling tofauti itabidi kuvunja tovuti yako.

Ndiyo sababu tunapaswa kutumia kila wakati kazi ya wp_enqueue_script na wp_enqueue_style. Hapa ni matumizi ya msingi:

kazi plugin_scripts () {wp_enqueue_script ('jquery'); wp_enqueue_script ('turn', plugins_url ('js / turn.js', __FILE__), safu ('jquery'), '1.3', uongo); wp_enqueue_style ('turnCSS', plugins_url ('css / style.css', __FILE__), uongo, '1.3', 'wote'); }

Tunaita vitu vya nje katika njia tofauti za 3, hapa ni:

  • Kuita kitu kilichopo: jQuery - Hatuna haja ya kupitisha vigezo vingi ikiwa tunajua kwa hakika kwamba WordPress tayari imesababisha script hii, tunamwambia tu "Dude, script hii inapaswa kuwa hapa vinginevyo msimbo wetu hauwezi kazi "
  • Kuunda script mpya - utahitaji kupitisha sifa fulani kama jina, eneo la faili, vitu vinavyotakiwa (katika kesi hii inahitaji jQuery), toleo, na ikiwa imefungwa kwenye footer au kichwa (uongo = kichwa, kweli = footer)
  • Kujenga mtindo mpya - Bora sana sawa na uliopita, na tofauti ndogo katika sifa ya mwisho, ambayo inasema ni vyombo vya habari vinavyotengeneza mtindo huu kama kwa

Moja ya mambo muhimu unayopaswa kuzingatia unapopiga maandiko ya nje ni kama kuna msimbo zaidi ambao utategemea Plugin hii. Hiyo ni nini hasa kinachofafanua kama faili yako itaitwa kwenye kichwa au mchezaji.

Kwa upande wetu, tuna baadhi ya maandiko ya ziada ili kuanzisha nyumba ya sanaa tu wakati HTML yake imeundwa, na hiyo itaongezwa kwenye mwili. Hii ndiyo sababu tunapaswa kuongeza script hii kichwa, vinginevyo wakati msimbo wetu unaitwa "kazi" haipo bado.

Baada ya kanuni hii nzuri tunahitaji kuwaambia WordPress kupakia wale kama scripts, hatua "wp_enqueue_scripts" itafanya hivi:

add_action ('wp_enqueue_scripts', 'plugin_scripts');

Shortcode

Hebu tuanze na hatua ya kuunda shortcode. Ni rahisi sana, unahitaji tu kuongeza kichwa cha shortcode, na kazi ambayo itafanywa:

add_shortcode ("flip_book", "fungua_flip_book");

Sasa tunahitaji kujenga kazi yetu na kupata sifa zetu. Lakini baadhi ya sifa zinaweza kuwa ya hiari, ambayo ina maana kwamba tutahitaji kujenga maadili ya msingi kwao. Tunaweza kuunda mengi ikiwa kuna upimaji ikiwa sifa hazipo tupu, lakini hii ni moja ya matukio ambapo operesheni ya ternari ni bora kuliko simu ya kawaida.

Shughuli za Ternari ni aina ya maneno kama moja kwa moja katika thamani ya kutofautiana. Ikiwa ifuatavyo muundo huu:

$ variable = (CONDITION)? "VALUE IF CONDITION IS TRUE": "VALUE IF CONDITION IS FALSE";

Unaweza kuwaona katika hatua katika sehemu ya kwanza ya kazi yetu:

kazi create_flip_book ($ attr) {// Kuandaa vitambulisho vya kusindika $ $ ['ids'] = kupasuka ("", $ attr ['ids']); // display mode $ ['kuonyesha'] = tupu ($ attr ['kuonyesha'])? "moja": $ attr ['kuonyesha']; // standard value // width $ array ['width'] = tupu ($ attr ['width'])? 400: $ attr ['upana']; // urefu wa $ $ ['urefu'] = tupu ($ attr ['urefu'])? 300: $ attr ['urefu'];
    // HTML na kanuni zote zinakwenda hapa}

Halafu tutahitaji kuunda HTML, na simu ya msingi ya picha zetu. Jambo lingine muhimu hapa ni kurekebisha saizi ikiwa tunatumia mtindo wa gazeti (inapaswa kuwa 2x upana kwani tutakuwa na picha za 2 badala ya moja):

<? php kama ($ ['kuonyesha'] == "mara mbili") {$ array ['width'] = $ array ['width'] * 2; // HTML, JS na Black Magic?> <Div id = "flipbook"> <? Php kwa ($ i = 0; $ i <sizeof ($ array ['ids']); $ i ++) {?> < div> <? php echo wp_get_attachment_image ($ array ['ids'] [$ i], 'kamili'); ikiwa ($ kuonyesha ['kuonyesha'] == "moja") {?> <span> <? = "" ($ i + 1)?> / <? Echo "" .sizeof ($ array ['ids'])?> </ span> <? php} mwingine {?> <spanright ":" kushoto "),?>"> <? php echo "". ($ i + 1)? / / <? Echo "" .sizeof ($ safu ['ids']); </ span> <? php}?> </ div> <? php}?> </ div> <script type = "text / javascript"> jQuery ("# ​​flipbook") tembea ({upana: < ? php echo $ array ['upana'];?>, urefu: <? php echo $ array ['urefu'];?>, autoCenter: kweli, kuonyesha: '<? php echo $ array [' kuonyesha ']; ?> ', // moja ukurasa au kuongeza kasi ya ukurasa: kweli, gradients:! jQuery.isTuch,}); </ script>

Unafikiri?

Sasa unaweza tweak na kurekebisha hili kama unavyotaka, na kuongeza chaguo zaidi (angalia mifano yao ya kushangaza kwa msukumo zaidi), kurekebisha kile kisufanyi kazi kwako, au kuchanganya hii na programu nyingine.

Je! Una dhana yoyote ya WordPress unataka kujifunza kidogo zaidi? Labda unataka kujifunza jinsi ya kufanya? Hebu tujue kupitia maoni na tutafurahi kuingiza hii katika siku zijazo!

Kuhusu Rochester Oliveira

Mimi ni mtengenezaji wa mtandao na mjasiriamali kutoka Itajubá (MG), Brasil. Ninapenda kuandika kuhusu mada ya wazi na kufanya mambo mengine ya baridi.

Kuungana: