Թեմատիկ տեսքեր, view.tpl.php ձևանմուշների խմբագրում (դաշտեր, տողեր, բլոկներ, էջեր): EasySlider jquery պլագինի միացում:

Views մոդուլը Դրույպալի համար՝ կառուցվածքային հարցումների կազմող, հնարավորություն է տալիս ցուցադրել տարբեր բովանդակության տեսակների դաշտեր, մեկնաբանություններ, տերմիններ, օգտատերերի տեղեկություններ, այլ տվյալներ տվյալների բազայից։ Այս մոդուլը ունի գրաֆիկական ինտերֆեյս, որը թույլ է տալիս հեշտությամբ հարցումներ ստեղծել տվյալների բազային՝ մկնիկի միջոցով։

Ուշադրություն!!! Եթե ցանկանում եք անմիջապես օգտագործել easySlider-ը մեկ ժամվա ընթացքում, խորհուրդ եմ տալիս օգտագործել մոդուլը։ Այս հոդվածը հիմնականում նախատեսված է՝ աշխատելու համար Views մոդուլի շաբլոնների հետ և նրանց թեմիզացիան։ Եվ որպեսզի հետագայում կարգավորեք easySlider-ը, ձեզ անհրաժեշտ կլինի փոփոխել CSS-ը։

Այսպիսով, երբ մենք մուտք գործել ենք անհրաժեշտ դաշտերը, պետք է դրանք դասավորենք այնպես, ինչպես մեզ հարկավոր է։ Դրա համար նախատեսված են ցուցադրման շաբլոններ։ Ըստ անպայմանության, օգտագործվում են թեմայի ֆայլերը։

Ամենայն հավանականությամբ, մենք պատրաստվում ենք կարգավորել easySlider jQuery պլագինը՝ Views մոդուլի ցուցադրման համար։ Իհարկե, արդեն կա պատրաստի մոդուլ, որը ինտեգրված է Views-ի հետ՝ easySlider-ի ցուցադրման համար։ http://drupal.org/project/easySlider

Իհարկե, եթե ուզում եք նկարները ցուցադրել սլայդերի տեսքով, կարող եք տեղադրել մոդուլը, և այդ ամենը պատրաստ կլինի։ Այս հոդվածը կսովորեցնի աշխատել Views շաբլոնների հետ։

Հիմնականում, մենք պետք է տեղադրենք Views, CCK, Imagecache մոդուլները և ներբեռնենք easySlider պլագինի ֆայլերը՝ այստեղ կամ որևէ այլ կայքում, օգտագործելով որոնում։ Ինչպես տեղադրել պլագինը Drupal թեմայում, ես կգրեմ հետագայում՝ CCK դաշտերի կարգավորումից հետո։

Այսպիսով, մոդուլները տեղադրված են, սկսում ենք։

1. Ստեղծում ենք նոր բովանդակության տեսակ

Ավելացնում ենք նոր դաշտ՝ պատկերներ բեռնելու համար և սեղմում ենք պահպանել։ Դաշտի դիրքը կարող եք տեղափոխել վերև։

Դաշտի կարգավորումների մեջ ընտրեք անհամար պատկերներ բեռնելու հնարավորություն, ավելացրեք նկարների նկարագրությունները։

2. Ստեղծեք նոր նոդա (բովանդակություն)՝ բովանդակության տեսակ «Բաներ» և բեռնեք մի քանի լուսանկար, որպեսզի դրանք հայտնվեն բեների ցուցադրման համար։

3. Այժմ պետք է ստեղծենք preset (նախընտրական պարամետրեր) պատկերների համար, որոնք մենք կցուցադրենք։ Ես ընտրելու եմ 200x200 պիկսելներ, դուք կարող եք ընտրել այն չափը, որը ձեզ հարկավոր է։

Ավելացնում ենք պատկերների մշակումը՝ And scale And crop, կրկին նշեմ, որ իմ չափը 200x200 է, իսկ դուք կարող եք ընտրել ձեր չափերը։

4. Արդեն պատրաստ ենք, որպեսզի պատկերները ցուցադրենք (Views մոդուլի միջոցով) այս դաշտով՝ որպես ցուցակ՝ առանձին բլոկում։

Ավելացնում ենք նոր տեսք (view, դիտում, ցուցադրում)

Ավելացնում ենք պատկեր դաշտը

Այս կարգավորումների մեջ ընտրում ենք հետևյալը՝ հանում ենք արժեքների խմբավորումը, հանում ենք դաշտի վերնագիրը, պատկերների չափը դնում ենք այն, որի համար մենք ստեղծել ենք preset-ը։

Ֆիլտրերում դնում ենք:
Բովանդակություն: Հրապարակված - այո
Բովանդակություն: Տեսակ - Բաներ

Basic settings-ում:
Style: HTML List

Ավելացնում ենք ցուցադրում բլոկում։

Այժմ այսպիսի տեսք կունենանք:

Ներքևում պետք է նախադիտման մեջ ցուցադրվեն մեր պատկերները բեների համար։

5. Ավելացնում ենք բլոկը դիտման համար որոշակի տարածքում և տեսնում ինչպես է տեսք ստանում:

Որպեսզի դա նման լինի սլայդերին, մենք պետք է տեղադրենք easySlider։

6. Սեղմեք easySlider-ը, որը կարող եք ներբեռնել այս հոդվածում։ Պլագինի թղթապանակում կան օրինակներ, թե ինչպես է սլայդերը տեսք ունենում, կարծում եմ՝ վերցնենք երկրորդ օրինակին՝ 2.html-ից։ Դրանից հետո անհրաժեշտ է պատճենել CSS-ը style.css ձեր թեմայում, իսկ պատկերները՝ պլագինի images թղթապանակից՝ ձեր թեմայի images թղթապանակ։

7. Պլագինի js թղթապանակում կա easySlider1.5.js ֆայլը, այն նույնպես պետք է պատճենել Drupal թեմայի ներկայիս թղթապանակ, ավելի լավ է ստեղծել js թղթապանակ՝ JavaScript ֆայլերի համար։ Կապակցեք ֆայլը՝ ձեր թեմայի name_theme.info ֆայլում՝ ավելացնելով այսպիսի կոդ:

Թարմացրեք կոշտացումը և easySlider1.5.js ֆայլը պետք է միանա:

Այժմ նայենք մեր բլոկը՝ օգտագործելով firebug Firefox-ի համար, dragonfly Opera-ի համար, նաև կա DOM-inspector Chrome-ում: Ես օգտագործում եմ firebug՝ Firefox-ի համար, քանի որ դա ավելի հարմար է մյուսներից:

8. Եկեք վերադառնանք ստեղծված տեսքին և սեղմենք Theme: information հղմանը: Այնուհետև կծանուցվի շաբլոնների ցուցակը, որտեղ կարող ենք փոխել տվյալների ներկայացման ձևը:

Խնդրում եմ շարունակեք հարցումները:

Բառերով նշված են այն շաբլոնները, որոնց միջոցով տվյալները ցուցադրվում են ըստ անպայմանության: Այս շաբլոնները գտնվում են theme թղթապանակում Views մոդուլի։ Ընդ որում, նորմալ տառերով՝ հակառակն նշված են այն ֆայլերը, որոնց մեջ կարելի է վերագրանցել ստանդարտ շաբլոնը: Ուստի, որպեսզի վերագրանցեք շաբլոնը՝ պետք է ստեղծեք ֆայլ՝ համապատասխան անվանմամբ, օրինակ՝ views-view-fields--view-banner.tpl.php.

Եկեք նախ նայենք views-view-fields.tpl.php ֆայլի պարունակությունը:

Վերնագիրը պարունակում է ֆայլի մեկնաբանություն՝ կանաչ գույնով նշված։ Շաբլոնի ամբողջ ցուցադրումը փաթեթավորված է foreach ցիկլում, այդպես է ցուցադրվում յուրաքանչյուր գրառում մինչև բոլորի ցուցադրվելը։ Հաջորդը՝ $field->separator – բաժանարարներ, որոնք մեզ պետք չեն, ուստի դրանք հեռացնում ենք, բայց հեռացնում ենք դրանք ոչ views-view-fields.tpl.php ֆայլում, այլ ստեղծում ենք շաբլոն ֆայլ մեր տեսքի համար՝ views-view-fields--view-banner.tpl.php և պատճենում այն թեմայի թղթապանակում։ $field->label՝ մեր դաշտի վերնագիրն է, որը չկա, ուստի այն էլ հեռացնում ենք։ Հաջորդը՝ $field->inline_html, սովորաբար դա div է, որին փաթեթավորվում է յուրաքանչյուր գրառում, ջնջում ենք այդ div-ը և նաև ջնջում ենք վերևում գտնվող field->inline_html-ի փակվող տեգը:

<?php print $field->inline_html;?>

Այժմ պահպանում ենք այս շաբլոնը և թարմացնում Drupal-ի քեշը՝ կրկին դիտելու մեր ծածկագրի ելքը firebug-ի միջոցով:

<?php print $field->element_type; ?> class="field-content">

և

<?php print $field->element_type; ?>

Այժմ, պլանով տառերը մաքրելով, ես թողնում եմ հետևյալ ծածկագիրը:

Նույնքան քիչ մնաց դա ստանդարտ շաբլոնից, բայց մեզ բավարար է: Պահպանում ենք և տեսնում, թե ինչպես է հիմա երևում մեր ծածկագիրը:

<div class="view-content"><div class="item-list">

Այս բլոկը սահմանվում է views-view-list.tpl.php շաբլոնում, փոխարինում ենք այն views-view-list--view-banner.tpl.php շաբլոնով:

Այժմ, որպեսզի հեռացնենք մնացած ավելորդ div-երը, պետք է կոդ ավելացնենք block.tpl.php շաբլոնում: Եթե ձեր թեմայում այս շաբլոնը չկա, ապա վերցրեք այն Block մոդուլից և պատճենեք թեմայի մեջ, որպեսզի կարողանաք վերագրանցել այն՝ թեմայի համար:

Փոխենք այս շաբլոնի block.tpl.php ծածկագիրը՝ ավելորդ բլոկներից ազատվելու և միացնելով բլոկը id="slider" պայմանով if:

Նախատեսված փոփոխություն՝ $block->delta փոփոխականը՝ որը Drupal-ը գեներացնում է ըստ մոդուլի, որը ստեղծում է բլոկը: Մեր դեպքում այս փոփոխականը հետևյալն է (կապույտ գույնով նշված):

Այժմ մաքրում ենք քեշը և նայում ենք էջին՝ այն պետք է այսպիսի տեսք ունենա:

JavaScript-ը կարող եք ավելացնել ինչպես page.tpl.php ֆայլում, այնպես էլ այն տեղափոխել առանձին ֆայլ՝ օրինակ՝ js/custom.js