Նշում. Մենք այլևս չենք աջակցում այս WP plugin- ին, քանի որ հեղինակը մեզ համար այժմ չի գրում. 


Այսօրվանից սկսած, ամեն շաբաթ մենք կներկայացնենք կոդավորման դասընթացների հիանալի դասընթաց ՝ ձեզ սովորեցնելով, թե ինչպես վարվել պատվերով իրեր ՝ օգտագործելով WordPress- ը ՝ հիմնականից մինչև առաջադեմ: Այսօր մենք կստեղծենք մի plugin (այնպես որ դուք կսովորեք դրա վերաբերյալ հիմնական քայլերը) ՝ ստեղծելու համար «էջի մատով խցիկ» պատկերասրահ ՝ օգտագործելով JS.

Ես գրազ եմ, որ դուք տեսել եք դրանցից ոմանք ձեր առաջին վեբ օրերին, բայց դրանք հիմնականում արվել են Flash- ի միջոցով, որն այժմ բավականին արժեզրկված է (այն դեռ ունի իր արժեքը, բայց այլևս ամենալավ տարբերակն չէ այս տեսակի համար).

Հիմնական ֆունկցիոնալությունը կլինի պատկերասրահի նոր տիպի ստեղծում ՝ հիմնված մի քանի պատկերների և դրանց չափերի վրա, կարճ կոդով.

Սկսենք այդ ժամանակ!

Zip- ը & Տեղադրեք

Գործողության մեջ տեսնելու լավագույն միջոցը դա ինքներդ տեղադրելն է: Այն կարող եք ներբեռնել այստեղ: Տեղադրեք և ակտիվացրեք plugin- ը, այնուհետև ձեզ հարկավոր է ավելացնել էջի կարճ կոդը էջում, այսպիսին է.

[flip_book ids = "78 79 78 79 79 78 78 79 79 78" լայնությունը ="300" բարձրություն ="225" ցուցադրում ="կրկնակի"]

Արագ նախադիտում

Եվ սա այն արդյունքի այն տեսակն է, որը դուք կստանաք.

Flipbook- ի էֆեկտ

Բայց ի՞նչ տեսակի սև մոգություն է գնում այնտեղ: Դե, իրականում դա շատ պարզ է: Եկեք սովորենք, թե ինչպես ստեղծել նման բան.

Վերնագիր

Նախևառաջ պետք է ստեղծել նոր թղթապանակ և նոր .php ֆայլ: Այս պահին դա հիանալի կլինի, եթե դուք ունեք փորձարկման միջավայր, այնպես որ կարող եք կոտրել և փորձարկել իրերը.

Ֆայլը և թղթապանակը պետք է ունենան պարզ և եզակի անուն, այնպես որ դուք կխուսափեք կոնֆլիկտից առկա plugin- ների հետ: Այնուհետև մեր ֆայլի հիմնական բովանդակությունը նման բան է.

/ *
Plugin name: FlipBook պատկերասրահ
Նկարագրություն. Ստեղծեք կարճ կոդ ՝ flipbook պատկերասրահների համար.
Տարբերակ ՝ 1.0
Հեղինակ ՝ Վեբ եկամուտների բլոգ
Արտոնագիր ՝ GPL2
* /

Շատ պարզ, հա՞: Այս ֆայլը ստեղծելուց հետո ձեր plugin- ը կտեսնեք ցուցակում WP ադմինիստրացիայի ներքո > Plugins, և դուք կարող եք այն ակտիվացնել (բայց եթե ձեր ֆայլում ունեք միայն այս բովանդակությունը, ձեր կայքը շատ չի փոխի).

Զանգահարելով գրություններ

Այժմ մենք պետք է այստեղ ներառենք մի քանի կարևոր արտաքին ակտիվներ: Հիմնական ֆունկցիոնալության համար անհրաժեշտ արտաքին ֆայլերը հետևյալն են.

  • jQuery (1.9+)
  • Turn.js գրությունը
  • Անջատեն հիմնական ոճավորումը

Եթե ​​դուք պարզապես ավելացնեք սցենարն ու ոճային պիտակները, ապա ձեզ մի քանի խնդիրներ կունենան: Օրինակ, կրկնակի jQuery զանգը, հավանաբար, կկոտրի ձեր կայքը: Նաև WordPress- ը ինքը չի «գիտի», որ դուք ստեղծել եք այդ իրերը, այնպես որ, եթե մի այլ հավելյալ զանգի կրկին. Կրկին կամ այլ ոճավորմամբ, դա կկոտրի ձեր կայքը.

Ահա թե ինչու մենք միշտ պետք է օգտագործենք wp_enqueue_script և wp_enqueue_style գործառույթները: Ահա հիմնական օգտագործումը.

գործառույթի plugin_scriptts ()
wp_enqueue_script (‘jquery’);
wp_enqueue_script (‘հերթ’, plugins_url (‘js / turn.js’, __FILE__), զանգված (‘jquery’), ‘1.3’, կեղծ);
wp_enqueue_style (‘turnCSS’, plugins_url (‘css / style.css’, __FILE__), կեղծ ՝ ‘1.3’, ‘բոլոր’);
}

Մենք արտաքին իրեր ենք կանչում 3 տարբեր եղանակներով, ահա դրանք.

  • Զանգահարելով գոյություն ունեցող ապրանք. JQuery – Մենք պետք չէ շատ պարամետրեր անցնել, եթե հաստատ գիտենք, որ WordPress- ը արդեն բեռնում է այս սցենարը, մենք պարզապես ասում ենք նրան. «Եղբայր, այս գրությունը ՊԵՏՔ է լինի այստեղ, հակառակ դեպքում մեր ծածկագիրը չի լինի: աշխատել »
  • Ստեղծելով նոր սցենար `դուք պետք է փոխանցեք որոշ ատրիբուտներ, ինչպիսիք են անունը, ֆայլի գտնվելու վայրը, պահանջվող իրերը (այս դեպքում դա պահանջում է jQuery), տարբերակը և եթե այն բեռնված է ստորև կամ վերնագրում (կեղծ = վերնագիր, ճշգրիտ = ստորագիր)
  • Ստեղծելով նոր ոճ. Բավականին նույնը, ինչ նախորդը, վերջին հատկանիշի փոքր տարբերությամբ, որը ասում է, թե որ լրատվամիջոցն է գրում այս ոճը, եթե

Արտաքին սցենարներ կանչելիս կարևոր բաներից մեկը այն է, որ եթե կա ավելի շատ կոդ, որը կախված կլինի այս հավելվածից: Դա հիմնականում այն ​​է, ինչ սահմանում է, եթե ձեր ֆայլը կոչվի վերնագրում կամ վերնագրում.

Մեր պարագայում պատկերասրահը տեղադրելու համար մենք ունենք մի քանի այլ գրություններ միայն այն դեպքում, երբ դրա HTML- ն ստեղծվի, և դա կավելացվի մարմնում: Ահա թե ինչու մենք պետք է այս գրությունը ավելացնենք գլխում, հակառակ դեպքում, երբ մեր կոդն անվանում են «հերթ» գործառույթ, դեռ չկա.

Այս գեղեցիկ կոդից հետո մենք պետք է ասենք WordPress- ին `դրանք բեռնագրելով որպես սկրիպտեր,« wp_enqueue_scripts »գործողությունը կկատարի սա.

add_action (‘wp_enqueue_scriptts’, ‘plugin_scripts’);

Կարճ կոդ

Եկեք սկսենք այն կարճատև ծածկագիրը ստեղծելու գործողությունից: Դա միանգամայն պարզ է, պարզապես անհրաժեշտ է ավելացնել կարճուղղիչի ձգան և գործառույթ, որը կկատարվի.

add_shortcode ("flip_book","Ստեղծել_flip_book");

Այժմ մենք պետք է ստեղծենք մեր գործառույթը և ստանանք մեր ատրիբուտները: Բայց որոշ ատրիբուտներ կարող են լինել կամայական, ինչը նշանակում է, որ մենք պետք է դրանց համար նախնական արժեքներ ստեղծենք: Մենք կարող ենք շատ բան ստեղծել, եթե այնտեղ փորձարկումներ կան, եթե ատրիբուտը դատարկ է, բայց սա այն դեպքերից է, երբ զանգի.

Եռամյա գործողությունները մի տեսակ են, եթե ուղղակիորեն փոփոխական արժեքի հայտարարություններն են: Եթե ​​հետևում է այս կառուցվածքին.

$ փոփոխական = (CONDITION) ? "ԱՐԺԵՔ ԵԹԵ ՊԱՅՄԱՆՈՒՄ UEՇՇՏ է" : "ԱՐԺԵՔ ԵԹԵ ՊԱՅՄԱՆՈՒԹՅՈՒՆԸ Կեղծ է";

Դուք կարող եք տեսնել դրանք գործողության մեջ մեր գործառույթի առաջին մասում.

գործառույթ ՝ ստեղծում_flip_book ($ գրավ) {

// Մշակման համար հաստատող փաստաթղթերի պատրաստում
$ array [‘ids’] = պայթել (" ",$ზიდ [‘ids’]);

// ցուցադրման ռեժիմ
$ array [‘display’] = դատարկ ($ ներգրավում [‘ցուցադրում’]) ? "սինգլ" : $ზიდ [‘ցուցադրում’]; // ստանդարտ արժեք

// լայնությունը
$ array [‘width’] = դատարկ ($ ներգրավում [‘լայնություն]])? 400: $ზიდ [‘լայնություն’];

// բարձրություն
$ array [‘height’] = դատարկ ($ գրավ [‘բարձրություն’])? 300: $ზიდ [‘բարձրություն’]; // HTML և մնացած ծածկագիրն այստեղ է անցնում
}

Դրանից հետո մենք պետք է ստեղծենք HTML և մեր պատկերների հիմնական զանգը: Մեկ այլ կարևոր կետ այստեղ չափսի ճշգրտումն է, եթե մենք օգտագործում ենք ամսագրի ոճը (այն պետք է լինի 2x լայնություն, քանի որ մեկի փոխարեն կունենանք 2 պատկեր).

<?php
եթե ($ array [‘ցուցադրում’] == "կրկնակի" ) {
$ array [‘լայնություն]] = $ զանգված [‘ լայնություն]] * 2;
}
// HTML, JS և Black Magic
?>

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

<?php
echo wp_get_attachment_image ($ array [‘ids’] [$ i], ‘full’);
եթե ($ array [‘ցուցադրում’] == "սինգլ" ) {
?>
<?="".($ i + 1)?>/<? էխո "".sizeof ($ array [‘ids’])?>
<?php
} ուրիշ
?>

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

<?php
}
?>

<?php
}
?>

jQuery ("#flipbook") .շատել ({
լայնությունը: <?php echo $ array [‘լայնություն]]; ?>,
բարձրություն: <?php echo $ array [‘բարձրություն’]; ?>,
ավտոկենտրոն. ճշմարիտ,
ցուցադրում. ‘<?php echo $ array [‘ցուցադրում’]; ?>’, // մեկ էջ կամ երկտեղանոց էջ
արագացում. ճշմարիտ,
գրադիենտներ: jQuery.isTouch,
});

Ինչ ես մտածում?

Այժմ դուք կարող եք կսմթել և փոփոխել այն, ինչպես ցանկանում եք ՝ ավելացնելով ավելի շատ ընտրանքներ (ստուգեք դրանց հիանալի օրինակները `ավելի շատ ոգեշնչման համար), ճշգրտելով այն, ինչը ձեզ համար չի աշխատում, կամ այն ​​համատեղել այլ հավելումների հետ.

Ունեք WordPress- ի որևէ հայեցակարգ, որը ցանկանում եք մի փոքր ավելին սովորել: Միգուցե մի բան, որը ցանկանում եք սովորել, թե ինչպես անել: Տեղեկացրեք մեզ մեկնաբանությունների միջոցով և ուրախ կլինենք ներառել այն ապագա գրառման մեջ!

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