Share
Acest tutorial vă va arăta cum să integrați cu succes rotatorul imaginii Piecemaker 3D Flash în tema WordPress. Vom discuta, de asemenea, înființarea unui panou de administrare personalizat, care va face foarte ușor pentru utilizatorii dvs. să facă personalizări pentru rotator.
Piecemaker este un excelent rotator de imagine 3D cu sursă deschisă, creat de Björn Crüger de la Modularweb. Aveți posibilitatea să examinați piecemaker în acțiune pe Sansation, prima temă WordPress premium de pe ThemeForest pentru a include Piecemaker.
Toate fișierele incluse în fișierul ZIP sunt deja modificate pentru dvs. Am inclus, de asemenea, un dosar care conține toate fișierele Piecemaker nemodificate implicit. Vă recomandăm să mergeți la site-ul Piecemaker și să vă familiarizați cu el înainte de a continua cu tutorialul.
Primul pas este să modificați acțiunea ActionScript astfel încât să se joace frumos cu WordPress. ActionScript-ul livrat împreună cu Piecemaker definește trei valori pe care Piecemaker o are pentru a funcționa corect:
Sursa XML definește diferitele setări ale Picemaker și vă permite să definiți imaginile și descrierile acestora. Fișierul CSS modelează panourile de descriere a piesei Piecemaker, iar directorul de imagini îi spune Piecemaker unde să tragă imaginile din.
Deschideți fișierul FLA numit "piecemakerNoShadow.fla" și deschideți fereastra Acțiuni. În cadrul 1 veți vedea acțiunile de mai jos. Rețineți că aveți nevoie de Flash CS4 pentru a deschide fișierul sursă.
Pentru ca Piecemaker să funcționeze corect în cadrul temei WordPress, trebuie să setăm dinamic aceste variabile. Pentru a realiza acest lucru, vom folosi FlashVars. FlashVars sunt variabile pe care le vom seta în cadrul șablonului de pagină WordPress care va fi transmis filmului flash atunci când se încarcă pagina. Mergeți mai departe și ștergeți acțiunile implicite în cadrul 1 al fișierului flash și înlocuiți-le cu următorul cod:
Accentsconagua
stage.scaleMode = StageScaleMode.NO_SCALE; // Trageți în Flashvars var allFlashVars: Object = LoaderInfo (this.root.loaderInfo) .parameters; // Setați variabilele necesare pentru piecemaker piecemaker.xmlSource = String (allFlashVars.xmlSource); piecemaker.cssSource = String (allFlashVars.cssSource); piecemaker.imageSource = String (toateFlashVars.imageSource); piecemaker.dispatchEvent (noul eveniment ("proprietăți")); Acțiunea ActionScript de mai sus se încarcă în FlashVars și apoi înlocuiește valorile implicite Piecemaker cu aceste variabile noi. Fișierul nostru Flash este acum setat să meargă. Publicați SWF și încărcați clientul dvs. FTP de alegere.
Următorul pas este să încărcați fișierele și folderele necesare în directorul temei WordPress. Acest tutorial presupune că veți încărca totul direct în directorul principal al temei. Iată o listă cu elementele necesare:
Următorul pas este să încorporați filmul SWF în șablonul de pagină WordPress. Vom folosi SWFObject 2 pentru a încorpora filmul și vom defini, de asemenea, cele trei FlashVar-uri pe care le-am referit în primul pas.
Mai întâi trebuie să faceți referire la swfobject în capul paginii. Pentru a face acest lucru, deschideți fișierul "header.php" al temei în editorul de cod ales (BBEdit al meu) și adăugați următorul cod în capul paginii:
Apoi, deschideți șablonul de pagină WordPress unde doriți să se afișeze Rotator 3D Piecemaker și introduceți următorul cod:
Trebuie să actualizați Flash Player-ul la versiunea 10 sau mai nouă.
Cea mai mare parte a codului este doar codul standard al swfobject folosit pentru a încorpora un film flash pe orice pagină Web. Lucrurile importante pe care trebuie să le facem în cauză sunt FlashVars:
flashvars.xmlSource = "/piecemakerXML.xml "; flashvars.cssSource ="/papercemakerCSS.css "; flashvars.imageSource ="/ imagini ";
Observați că am denumit FlashVars așa cum le-am definit în ActionScript la pasul 4. De asemenea, folosim funcția built-in bloginfo () WordPress pentru a face referire la locațiile exacte ale celor trei fișiere necesare.
Pașii de mai sus vă vor ajuta să implementați cu ușurință Piecemaker 3D Image Rotator în tema WordPress, dar o vom face un pas mai departe. În următorii pași, vom discuta cum să creați un panou de administrare personalizat care vă va permite să personalizați setările Piecemaker chiar de la back-end-ul WordPress.
Dacă nu sunteți interesat să configurați panoul de administrare, puteți accesa site-ul Piecemaker pentru a citi documentația și a începe să faceți niște animații cu adevărat minunate.
Nu vom acoperi modul de creare a întregului panou de administrare de la zero. În schimb, vom extinde pe un tutorial deja în profunzime aici pe Nettuts: Cum de a crea un WordPress mai bine Panel.
Odată ce ați urmat acest tutorial și ați instalat panoul de administrare, treceți la pasul următor.
Acum trebuie să adăugăm opțiuni suplimentare la panoul de administrare pe care tocmai l-ați creat în tutorial. Deschideți fișierul "functions.php" al temei și înlocuiți prima bucată de cod cu următoarele:
cat_ID] = $ category_list-> cat_name; array_unshift ($ wp_cats, "Alegeți o categorie"); $ tween_types = array ("liniar", "easeInSine", "easeOutSine", "easyInOutSine", "easyInCubic", "easeOutCubic", "easeInOutCubic", "easeOutInCubic", "easeInQuint" "easeOutInQuad", "easeInOutCirc", "easeOutInCirc", "easeInBack", "easeOutBack", "easeInOutBack", "easeOutInBack", "easeInQuad", "easeOutQuad", "easeInOutQuad" , "easeInQuart", "easeOutQuart", "easeInOutQuart", "easeOutInQuart", "easyInExpo", "easeOutExpo", "easyInOutExpo", "easeOutInExpo", "easeInElastic", "easeOutElastic" easeInBounce "," easeOutBounce "," easeInOutBounce "," easeOutInBounce "); Cea mai mare parte a codului de mai sus este identică cu tutorialul, dar am adăugat un nou matrice numit $ tween_types. Această matrice conține toate diferitele efecte de animație disponibile cu PieceMaker. Vom folosi această matrice pentru a genera o listă derulantă a diverselor efecte de animație din panoul nostru de opțiuni personalizate. Puteți verifica documentația Tweener pentru a revizui o reprezentare vizuală a diferitelor efecte de animație Piecemaker.
Acest lucru va crea un nou panou de opțiuni de alunecare similar cu cel pe care l-ați creat în tutorial. Este un cod de lungă durată, dar urmează aceeași logică exactă ca tutorialul. Pur și simplu creăm variabile pentru toate setările diferite pe care va trebui să le definim în fișierul XML al Piecemaker. Un lucru important este faptul că am stabilit că definim valorile implicite pentru fiecare opțiune (valorile din 'std' sunt valorile implicite). Există o cantitate decentă de setări pentru Piecemaker și nu vrem să forțăm utilizatorii noștri să configureze toate aceste opțiuni dacă nu doresc să.
array ("name" => "Segmente", "desc" => " > "Numărul segmentelor în care imaginea va fi tăiată", "id" => shortname. "_ Segmente", "type" => "text", "std" "=>" Tween Time "," desc "=>" Numărul de secunde pentru fiecare element care urmează să fie transformat "," id " => "3"), array ("name" => "Tween Delay", "desc" => "_tween_delay", "type" => "text", "std" => "0.1"), array ("name" => "Tween Type", "desc" "=>" Short Name "." tween_type "," type "=>" select "," options "=> $ tween_types," std " , "desc" => "în ce măsură cuburile se deplasează pe axa z când se completează. Valori negative care aduc cubul mai aproape de cameră, valori pozitive îl îndepărtează mai departe. ge este aproximativ între -200 și 700. "," id "=> shortname." _ z_distance "," type "=>" text "," std " Expand "," desc "=>" Către care etxend sunt cuburile mutate unul de celălalt atunci când se alăture. "," Id "=> $ shortname. > ""> "" Culoarea laturilor elementelor în valori hexagonale (de ex. "> 9"), array ("name" => "Inner Color" 0x000000 pentru negru) "," id "=> shortname." _ Interior_color "," tip "=>" text "," std "=>" 0x000000 ") "desc" => "Culoarea textului de descriere a fundalului în valori hexazecimal (de exemplu, 0xFF0000 pentru roșu)", "id" => $ shortname. "_text_background", " 0x666666 "), array (" name "=>" Text Distance "," desc "=>" Distanta textului info la marginea fundalului " "=>" text "," std "=>" 25 "), array (" name "=>" Darkness Shadow "," desc "=>" În ce direcție sunt laturile umbrite? ("std" => "25"), array (nu este întunecat), "id =" $ shortname. "nume" => "Redare automată", "desc" => "Numărul de secunde la următoarea imagine când este activată redarea automată" Setați 0, dacă nu doriți redarea automată "," id "=> shortname. _autoplay "," type "=>" text "," std "=>" 2 "), array (" type "=>" close "), În acest pas, trebuie să modificăm ușor șablonul de pagină WordPress din pasul trei. În loc să îndreptați xmlSource spre un fișier XML, trebuie să-l îndreptați către un fișier PHP. Folosind un fișier PHP în loc de un fișier XML, putem trage toate valorile stabilite de utilizator în panoul nostru de opțiuni personalizate. Este doar o singură linie de cod care trebuie înlocuită:
flashvars.xmlSource = "/piecemakerXML.php ";
Suntem aproape acolo! În acest pas, vom crea fișierul PHP pe care tocmai l-am referit în codul de mai sus. Acest fișier PHP va fi folosit pentru a trage toate valorile din panoul nostru de opțiuni personalizate și pentru a genera fișierul XML pe care Piecemaker o are pentru a funcționa corect. Codul este oarecum lung, așa că voi încerca să-l descompun în bucăți mai digerabile.
Creați un fișier gol PHP, numiți-l "piecemakerXML.php" și lipiți următorul cod la începutul fișierului:
Apoi, trebuie să setăm antetul de tip de conținut astfel încât browserul să știe că vom emite conținut XML mai degrabă decât textul / html implicit. Vom include, de asemenea, câteva etichete inițiale de setare Piecemaker.
830 360 „;
Acum vom emite variabilele pe care le-am stocat în etichetele lor corecte XML și vom închide eticheta setărilor Piecemaker.
echo "“. $ segmente. ' „; echo "“. $ tweentime. ' „; echo "“. $ tweendelay. ' „; echo "“. $ tweentype. ' „; echo "“. $ rezistă. ' „; echo "“. $ extinde. ' „; echo "“. $ interiorcolor. ' „; echo "“. $ textbackground. ' „; echo "“. $ textdistance. ' „; echo "". $ umbra. ' „; echo "". $ autoplay. ' „; echo "
Ultimul pas este de a scoate imaginile pe care le dorim să le includem în rotator împreună cu descrierile lor și vom închide de asemenea eticheta Piecemaker XML.
Textul descrierii Ӂ Aici puteți adăuga un text de descriere pentru fiecare singur diapozitiv. Ӂ Lorem ipsum dolor stați amet, consectetur adipiscing elit. Aliquam eu quam dolor, un venenatis nisl. Praesent scelerisque iaculis fringilla. Sed concege placerat elefend. ӁhyperlinksTextul descrierii Ӂ Aici puteți adăuga un text de descriere pentru fiecare singur diapozitiv. Ӂ Lorem ipsum dolor stați amet, consectetur adipiscing elit. Aliquam eu quam dolor, un venenatis nisl. Praesent scelerisque iaculis fringilla. Sed concege placerat elefend. ӁhyperlinksTextul descrierii Ӂ Aici puteți adăuga un text de descriere pentru fiecare singur diapozitiv. Ӂ Lorem ipsum dolor stați amet, consectetur adipiscing elit. Aliquam eu quam dolor, un venenatis nisl. Praesent scelerisque iaculis fringilla. Sed concege placerat elefend. Ӂhyperlinks„; ?> Textul descrierii Ӂ Aici puteți adăuga un text de descriere pentru fiecare singur diapozitiv. Ӂ Lorem ipsum dolor stați amet, consectetur adipiscing elit. Aliquam eu quam dolor, un venenatis nisl. Praesent scelerisque iaculis fringilla. Sed concege placerat elefend. Ӂhyperlinks
Sper că ați învățat ceva util în acest tutorial. Prin combinarea diferitelor tehnologii diferite, putem adăuga funcționalități puternice în temele noastre WordPress. Mai important, am făcut ușor pentru utilizatorul mediu să facă personalizări pentru tema noastră.
