Using WordPress og Flash Sammen
Del
Del
13
Del
Dette Cyber mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
Selv om å lage et nettsted fullstendig basert på Flash er ikke slik en god idé for en rekke årsaker, det betyr ikke at du må ikke bruke Flash i det hele tatt. Jeg liker å tenke på Flash som et krydder. Sette litt krydder her og der kunne forbedre smaken av nettstedet ditt som gjør det mer behagelig og engasjerende for de besøkende. Selvfølgelig, som vi alle vet, å sette for mange krydder i vår rett kan føre til problemer. Så bør Flash brukes med måte. La oss se hvordan dette kan gjøres.
Innledning
Målet for hvert nettsted er innhold som folk kan lese og nyte, og som også er forstått av søkemotorer og roboter. Så, er noen Flash nesten alltid fine. Men for mye Flash er mindre nyttig for søkemotorer, i forhold til HTML. Flash media kan inkluderes hvor som helst i et WordPress tema: i overskriften, i et innlegg eller en side, i en sidelinje, eller i bunnteksten. Det er helt opp til deg og dine personlige preferanser og behov. Den virkelig viktige her er ikke hvor du skal bruke det i stedet for hvordan du vil bruke den. Og dette er målet for denne opplæringen. For å vise deg forskjellige måter å integrere Flash medier i din WordPress drevet nettsider og hvordan du utfører disse metodene skal. La oss begynne med det mest essensielle ene, som er en base for de andre.
Trinn 1 SWFObject Oversikt
SWFObject er en Javascript-bibliotek som tilbyr to optimalisert metoder for å legge ned SWF-filer til websider - en markering basert tilnærming og en metode som er avhengig av Javascript. Den bruker diskret Javascript for å oppdage Flash Player og unngå ødelagt SWF-innhold, og er designet for å gjøre innebygging SWF-filer så enkelt som mulig. Den støtter bruk av alternativt innhold til å vise innhold til folk som surfer på nettet uten plugins, for å hjelpe søkemotorene indeksere innholdet ditt, eller å peke besøkende til Flash Player nedlastingssiden. Alt dette er drevet av en liten Javascript-fil.
SWFObject er den mest populære og effektive Flash embedding metoden tilgjengelig i dag. Den er mye brukt av høyt profilerte nettsteder som YouTube, Microsoft Windows, og Skype.
Trinn 2 Nedlasting SWFObject og SWFObject Generator
Fordi du trenger å finne ut hvilke markup og Javascript kode for å bruke kan være en kjedelig jobb, gir SWFObject deg en ekstra SWFObject Generator for å gjøre dette arbeidet for deg. Du kan finne de nyeste versjonene av SWFObject og SWFObject Generator på Google Code. Last ned SWFObject og HTML-versjonen av SWFObject Generator. Den største forskjellen mellom HTML og AIR versjonen er at den siste som har kopiere til utklippstavlen funksjonalitet og kan lagre HTML-side på harddisken.
Når du pakke ut innholdet i swfobject_2_2.zip Også kan du laste ned SWF-fil som vi kommer til å bruke hele resten av opplæringen på Free Flash animasjoner. Gi det nosmoke.swf OK. Alt er klart. La oss gå videre. Nå må du laste opp alle nødvendige filer på serveren din. Dette er swfobject.js For å skape og sette inn den nødvendige koden i WordPress følgende:. Koden generator skaper koden for deg, basert på de valgene du gjør. Det genererer koden i den grunnleggende struktur av en HTML-side. Koden som genereres er webstandarder kompatibel og støtter inkorporering av alternativt innhold. Javascript-elementer i < head > delen av .html nå nosmoke.swf Statisk publisering bruker markup å legge ned både SWF-innhold og alternativt innhold, og benytter diskret Javascript for å løse en rekke problemer som ikke kan løses med markup alene. Det fremmer selve forfatter av standard kompatibel markup og vil derfor spesielt appellere til webstandarder utviklere. Denne mekanismen for å bygge Flash-innhold ikke er avhengig av et skriptspråk, slik at Flash-innhold kan nå et betydelig større publikum. Hvis du har Flash plug-in installert, men har deaktivert Javascript eller bruker en nettleser som ikke støtter Javascript, vil du fortsatt kunne se Flash-innhold. Dynamic publisering bruker markup å definere alternative innhold bare og benytter diskret Javascript for å erstatte dette med SWF hvis minimal Flash Player versjon er installert og tilstrekkelig støtte for Javascript er tilgjengelig. Dynamisk publisering er mindre detaljert enn statisk publisering og integrerer godt med skriptede programmer. Hvis du har Flash plug-in installert, men har deaktivert Javascript eller bruker en nettleser som ikke støtter Javascript, vil du se alternativt innhold i stedet for den innebygde Flash-innhold. Du må bestemme hva som er bedre løsning for deg, avhengig av dine mål og behov. Adobe Hurtiginstallasjon er en mekanisme som er bygd inn i Flash Player som gjør det mulig å laste ned den nyeste versjonen av Flash plug -I direkte uten å måtte bla til Adobes nettsted. Uttrykke Installer er en valgfri funksjon for web forfattere og viser en standardisert nedlasting dialogboks når en besøkende har allerede installert Flash Player 6.0.65 eller høyere på Win eller Mac-plattformer, men en senere plug-in versjon kreves. Uttrykke Installer bruker en pop-up bekreftelsesvinduet, og er derfor en tilleggsfunksjon som kan aktiveres ved web forfattere. Hvis du klikker Ja, Express Install vil åpne en dialog boks for nedlasting med anmodning om å lukke alle nettleservinduer. Etter å ha installert Flash Player, vil det åpne nettleservinduet og omdirigere deg til siden der Express Install ble igangsatt. Hvis du klikker Nei, vil SWFObject gå tilbake til alternativt innhold. Du kan aktivere Express Installer ved å sjekke Adobe Express Install boksen og ved å justere banen til expressInstall.swf Meldingen forteller deg at at innholdet krever Adobe Flash Player 11.1, fordi dette er faktisk den nyeste versjonen av plugin (for øyeblikket) og versjon 14.0 ikke finnes ennå. I SWFObject Generator kan du finne en haug med ekstra attributter og parametere som er tilgjengelige for deg. De er skjult som standard. Så, for å få tilgang til dem bare klikk på "mer" nederst i SWF definisjonen området. Etter det skal du se følgende: Avhengig av valgene som er gjort her Flash-innhold vil oppføre seg og se annerledes ut. For en beskrivelse om hva en bestemt egenskap eller parameteren, bare holde musepekeren over navnet. Navnet attributtet er nyttig når du trenger å referere Flash filmen ved hjelp av skriptspråk. Som jeg sa før du må kanskje legge til ekstra styling til Flash-innhold. For å gjøre dette bare legge en verdi for klassen attributt som "Flashmovie". Denne klassen vil bli lagt til objektet tag element i generert kode. Så nå trenger du bare å legge til følgende stil regel inn ditt tema stilark: Det er en annen enkel måte å få den nødvendige deteksjon kode - ved hjelp av en online generator. En god en kan bli funnet på embed-swf.org. Det er basert på SWFObject HTML og Javascript Generator. For å behandle følgende: Hvis du trenger du kan gjenopprette standardinnstillingene når som helst ved å klikke på linken i øvre venstre hjørne. Også du har en mulighet til å eksportere /importere lagrede innstillinger for enkel gjenbruk. Du trenger ikke å bekymre deg for swfobject.js Ifølge sin nettside Kimili Flash Embed er: Nå for å legge til flash-innhold i dine innlegg eller sider gjør du følgende: Kimili Flash Embed Tag Generator er en modifisert versjon av SWFObject to HTML og Javascript Generator og er integrert tett inn i WordPress ., noe som gjør det svært enkelt å bygge KFE tags med riktig formatering Legge Flash via KFE Tag Generator: Du kan konfigurere standardinnstillingene i Admin menyen. Velg Innstillinger > Kimili Flash Embed. Alternativene her er ganske mye det samme, bortsett fra disse for Javascript nederst. Du kan endre det første alternativet til "Nei", hvis du allerede har swfobject.js I disse dager de ledende søkemotorleverandører som Google og Yahoo kan indeksere tekstlig innhold og koblinger i SWF-filer mens blar gjennom en søknad stater, som om de var virkelige besøkende. Så hvorfor da du fortsatt må bruke alternativt innhold for å hjelpe søkemotorene indeksere innholdet ditt? Dette er for et par grunner. For eksempel kan du gjøre følgende, for å skape bedre alternativ innhold: Som standard publiserer SWFObject to Generator følgende alternative innhold: Dette resulterer i en "Get Adobe Flash Player" for å peke besøkende til hvor de kan laste ned plugin. For å teste dette må du deaktivere Flash Player plugin. I Firefox gå til Add-ons > Plugins. Finn Shockwave Flash og klikk "Deaktiver" -knappen. Nå når du har lastet inn siden bør du se følgende: Du kan bytte ut standardkoden med denne: Nå hvis besøkende bla siden uten Flash-plugins de vil se et bilde i stedet for selve animasjonen: Søkemotorer og besøkende som surfer på nettet i en tekstbasert nettleser eller med bilder deaktivert vil se innholdet som i dette skjermbilde: Hvis du har et banner med flere stater kan du ta et bilde for hver enkelt av dem, og deretter sette disse bildene som alternativt innhold. Det kan se slik ut: For en animasjon eller videoinnhold du kan bruke det samme prinsippet. Du kan ta flere nøkkelbilder og bruke dem til å beskrive innholdet i animasjon /video. Her er basisordningen: Folk uten Flash plug-in vil se en bildesekvens med beskrivelse, og folk som surfer på nettet i en tekstbasert nettleser eller med bilder deaktivert vil se en nummerert sett beskrivelser En annen måte å gjøre dette på er å inkludere en video miniatyrbilde pluss tekstlig beskrivelse av filmen. Dessuten kan du legge til et par linjer med kopi til din alternativt innhold som forklarer at den tiltenkte interaktiv eller audiovisuelle brukeropplevelse krever den nyeste versjonen av Flash Player, med en link til nedlastingssiden. Du kan også være lurt å opprette flere stilregler for å sikre at den visuelle identiteten eller utformingen av en nettside er fortsatt intakt. Bare tenk på alternativt innhold som en mulighet til å kommunisere med målgruppen, selv om de kanskje ikke har den målrettede teknisk støtte. Det var det. Nå kan du vite hvordan du bygger inn Flash-innhold i din WordPress drevet nettsted enkelt og riktig. Innholdet kan være alt - animasjon, program, film, spill og hva du ønsker og trenger å. Med litt fantasi kan du gjøre nettstedet ditt kult, på den ene siden, og likevel nyttig, på den andre.
du vil få en mappe som heter SWFObject
som inneholder følgende filer:
expressInstall.swf Anmeldelser - denne inneholder standard funksjonaliteten SWFObject for Adobe Express Installer
swfobject.js Anmeldelser -.. dette er minified SWFObject to Javascript-bibliotek som skal brukes i produksjon
index.html
, < em> index_dynamic.html
, og test.swf Anmeldelser - disse inngår som en referanse test gjennomføring
src Anmeldelser mappe -. her kan du finne swfobject.js plakater (unminified og fullstendig dokumentert SWFObject to Javascript-fil), expressInstall.fla Hotell og expressInstall.as
(kildefilene til expressInstall.swf
file). Disse er kun slik at utviklere kan studere SWFObject kildekode eller opprette en tilpasset versjon for å passe sine egne behov.
for kort.
Trinn 3 Bruke SWFObject og SWFObject Generator
, expressInstall.swf Hotell og nosmoke.swf
. Plassere dem i din aktive tema-mappen. I dette tilfellet er dette twentyeleven
tema-mappen. Hvis du har mange .swf
filer du kan sette dem i en undermappe
< li> Extract og åpne index.htm filen plassert inne swfobject_generator_1_2_html.zip
For SWFObject konfigurasjonsområdet la standardinnstillingene for SWFObject (JS) som swfobject.js og for Publishing metode som Static publisering. Endre Detect Flash versjon til versjon av Flash Player passer for din animasjon. Kryss av i boksen for Adobe Express Install og la filnavnet som det er.
For SWF definisjon delen, endre navnet på Flash (.swf) til navnet på .swf fil. Du må bruke en absolutt bane å referere SWF, ikke en slektning en. Du trenger ikke å ta med ditt nettsteds URL. Bare banen til filen begynner med /, som denne - (/wordpress/wp-content/themes/twentyeleven/nosmoke.swf). Mål må endres til bredden og høyden på .swf fil. Flash-innhold id kan bo som standard.
Klikk på Generer knappen for å generere den nødvendige Flash deteksjon kode. Deretter må du kopiere /lim inn koden fra Generert utgangsområdet til riktig sted i den valgte malen i WordPress. Din koden skal se ut som følgende: <! DOCTYPE html PUBLIC "- //W3C //DTD XHTML 1.0 Strict //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict. dtd "> < html xmlns = "http://www.w3.org/1999/xhtml" lang = "no" xml: lang = "no" > < head > < title > < /title > < meta http-equiv = "Content-Type" content = "text /html; charset = iso-8859-1" /> < script type = "text /javascript" src = "swfobject.js" > < /script > < script type = "text /javascript" > swfobject.registerObject ("myFlashContent", "9.0.0", "expressInstall.swf"); < /script > < /head > < body > < div > < objekt classid = "CLSID: D27CDB6E-AE6D-11cf-96B8-444553540000" width = "350" height = "350" id = "myFlashContent" > < param name = "movie" value = "/wordpress /wp-content /themes /twentyeleven /nosmoke.swf" /> <! - [if IE!] > - > < objekt type = "application /x-shockwave-flash" data = "/wordpress /wp-content /themes /twentyeleven /nosmoke.swf" width = "350" height = "350" > <! - <! [endif] - > < a href = "http://www.adobe.com/go/getflashplayer" > < img src = "http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt = "Get Adobe Flash player" /> < /a > <! - [if IE!] > - > < /object > <! - <! [endif] - > < /object > < /div > < /body > < /html >
Velg den < div > tag i kroppen delen av koden. Alt fra < div > til < /div > blir valgt. Kopiere den. < div > < objekt classid = "CLSID: D27CDB6E-AE6D-11cf-96B8-444553540000" width = "350" height = "350" id = "myFlashContent" > < param name = "movie" value = "/wordpress /wp-content /themes /twentyeleven /nosmoke.swf" /> <! - [if IE!] > - > < objekt type = "application /x-shockwave-flash" data = "/wordpress /wp-content /themes /twentyeleven /nosmoke.swf" width = "350" height = "350" > <! - <! [endif] - > < a href = "http://www.adobe.com/go/getflashplayer" > < img src = "http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt = "Get Adobe Flash player" /> < /a > <! - [if IE!] > - > < /object > <! - <! [endif] - > < /object > < /div >
I sidepanelet i din WordPress Dashboard, klikker du på pilen til høyre for Utseende. Deretter klikker du på Editor.
fil (i dette tilfellet footer.php
). Dette laster det i Temaredigering.
mal
For hodet innhold, velge og kopiere følgende: < script type = "text /javascript" src = "swfobject.js" > < /script > < script type = "text /javascript" > swfobject.registerObject ("myFlashContent", "9.0.0", "expressInstall.swf"); < /script >
Tilbake i WordPress, åpne opp header.php
ved å klikke på Utseende > Editor > header.php
. Lim inn valgt tekst i hodet delen ovenfor < /head > tag.
generert HTML utgang tilgang til swfobject.js
fil. Dette er et bibliotek med Javascript nødvendig for Flash Player versjon søkeprosessen skal foregå. Javascript-elementer også registrere ditt .swf
fil med biblioteket og fortelle det hvilken versjon av Flash Player er nødvendig. I kroppen delen av dokumentet, en < div > tag er opprettet som holder objektet og nestet objekt informasjon /metode som avtegner som .swf
er å bli spilt, riktig Flash Player versjon er ikke den bredden og høyden på det, og hva alternativt innhold som skal vises hvis funnet. Legg merke til den spesielle koding benyttes for regnskapsføring for behovene til Internet Explorer, for eksempel: < - [if IE!] ≫ - >.
Trinn 4 SWFObject konfigurasjon forklart
Statiske vs. Dynamic Publishing
Ved hjelp av Adobe Express Install
fil, hvis trengte. For å teste om denne funskjonen fungerer og se den i aksjon bare gjøre dette lille trikset - endre ønsket Flash-versjon til noe større enn den nyeste Flash Player versjon (for eksempel 14.0.0). Og du vil få dette resultatet:
Trinn 5 SWFObject Definition Forklart
object.flashmovie {//din css kode her}
Trinn 6 Bruke Embed SWF Online Generator
Åpne Configurator. Grensesnittet er delt inn i fem kategorier.
Klikk på fanen Export. Her kan du velge en eksport mal. Hvis du ønsker å bruke din egen HTML-mal velge Custom. Hvis du vil vite hvordan du oppretter en, sjekk dokumentasjonen.
fil. Bare la standardalternativet for SWFObject som vil bruke swfobject.js
fil hos Google.
Trinn 7 Bruke Kimili Flash Embed
Opprett ny post /side eller åpne eksisterende
< li> Bytt til HTML-visning
Nå for å legge til en Flash-animasjon, kan du bruke følgende snarvei, erstatte banen, y og x parametere med respektive bane, høyde og bredde på swf: [kml_flashembed film = "/path/to/your/movie.swf" height = "y" width = "x" /]
Filmen parameter er den eneste som kreves - høyde og bredde er valgfritt. Selv om det er mest effektivt å størrelsen din .swf
under eksport, høyde og bredde parametere vil endre størrelsen på en .swf
fil. Hvis du gjør det, sørg for å holde tallene i forhold skala for å unngå forvrengning.
For å starte Tag Generator, en wizard-lignende grensesnitt som vil hjelpe deg med å skape den nødvendige KFE kode, klikker du på knappen med Flash Player-ikonet. (du må bytte til Visual modus for å se det)
Et vindu som ligner på SWFObject Generator vil dukke opp
Alt du trenger å gjøre er å fylle nødvendige parameterne og klikk deretter generere < .no>
blir referert andre steder i koden. Hvis du velger å bruke Kimili Flash Embed å opprette en referanse til swfobject.js
ved å sjekke "Ja", du har da to alternativer fra hvor du skal referere til filen - Google Ajax Library eller intern. Klikk på "hva er dette?" for å se hva forskjellene er. Når du er klar klikker oppdateringsalternativer.
Trinn 8 Tilby alternative innholdet
Bruk eksakt samme kopien og linker som i Flash-innhold
Legg til bilder og tekstlig beskrivelse til Flash-innhold
Legg eksemplar å forklare hvor Flash Player kan lastes ned
Legg CSS til stil og plassere HTML for å bevare nettsiden visuelle identitet.
< a href = "http://www.adobe.com/go/getflashplayer" > < img src = "http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt = "Get Adobe Flash player" /> < /a >
< img src = "nosmoke.jpg" alt = "No Smoking Animation" />
< ol > < li > < img src = "frame1.jpg" alt = "" /> descrition av ramme 1 < /li > < li > < img src = "frame2.jpg" alt = "" /> descrition ramme 2 < /li > < li > < img src = "frame3.jpg" alt = "" /> descrition ramme 3 < /li > < /ol >.
Konklusjon