Share
Selv om å lage et nettsted som er helt basert på Flash, er ikke en god ide av flere grunner, betyr det ikke at du ikke må bruke Flash i det hele tatt. Jeg liker å tenke på Flash som et krydderi. Å sette noen krydder her og der kan forbedre smaken på nettstedet ditt slik at det blir mer behagelig og interaktivt for dine besøkende. Selvfølgelig, som vi alle vet, kan det føre til problemer med å sette for mange krydder i vår tallerken. Så, Flash bør brukes i moderasjon. La oss se hvordan dette kan gjøres.
Målet med hvert nettsted er innhold som folk kan lese og nyte, og som også forstås av søkemotorer og roboter. Så, noen Flash er nesten alltid bra. 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 toppteksten, i et innlegg eller en side, i en sidebar eller i bunnteksten. Det er helt opp til deg og dine personlige preferanser og behov. Den virkelig viktige tingen her er ikke hvor du vil bruke den i stedet for hvordan du vil bruke den. Og dette er målet med denne opplæringen. Å vise deg ulike måter å legge inn Flash-medier i WordPress-drevne nettsteder og hvordan du utfører disse metodene riktig. La oss begynne med det mest essensielle, som er en base for de andre.
SWFObject er et JavaScript-bibliotek som tilbyr to optimaliserte metoder for å legge inn SWF-filer i websider - en oppsummeringsbasert 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 innebygde SWF-filer så enkelt som mulig. Den støtter bruk av alternativt innhold for å vise innhold til personer som surfer på nettet uten plugins, for å hjelpe søkemotorer å 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-innlemmingsmetoden som er tilgjengelig i dag. Den brukes mye av profilerte nettsteder som YouTube, Microsoft Windows og Skype.
Fordi du må finne ut hvilken markering og JavaScript-kode som skal brukes, 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. Hovedforskjellen mellom HTML og AIR-versjonen er at den siste har funksjonalitet til kopi-til-utklippstavler og kan lagre HTML-siden din på harddisken din.
Når du trekker ut innholdet av swfobject_2_2.zip Du får en mappe som heter SWFObject som inneholder følgende filer:
Du kan også laste ned SWF-filen som vi skal bruke gjennom resten av opplæringen ved Free Flash Animasjoner. Gi nytt navn til nosmoke.swf for kort.
OK. Alt er klart. La oss gå videre.
Nå må du laste opp alle nødvendige filer på serveren din. Disse er swfobject.js, expressInstall.swf og nosmoke.swf. Plasser dem i din aktive temamappe. I dette tilfellet er dette twentyeleven tema mappe. Hvis du har mange .swf filer du kan sette dem i en undermappe.
For å opprette og sette inn nødvendig kode i WordPress, følg disse trinnene:
Accentsconagua
tag i kroppsdelen av koden. Alt fra til blir valgt. Kopier den.
- I sideglasset til WordPress Dashboard klikker du på pilen til høyre for Utseende. Deretter klikker du på redigeringsprogrammet.
- På høyre side av skjermen har du nå en liste over alle maler som er i rotmappen i temomappen. Klikk på tittelen på ønsket .php fil (i dette tilfellet footer.php). Dette laster det i Theme Editor.
- Lim inn koden du kopierte fra kodegeneratoren til riktig malfil. I dette eksemplet rett over
- For hodet innhold, velg og kopier følgende:
- Tilbake i WordPress, åpne opp header.php ved å klikke på Utseende> Editor> header.php. Lim inn den valgte teksten i hovedenheten over
Kodegeneratoren lager koden for deg basert på valgene du lager. Det genererer koden i grunnstrukturen på en HTML-side. Koden som genereres, er kompatibel med webstandarder og støtter innlemmelsen av alternativt innhold. JavaScript-elementene i tag er opprettet som inneholder objektet og nestet objektinformasjon / metode som avgrenser hvilke .swf skal spilles, bredden og høyden av det, og hvilket alternativ innhold som skal vises hvis den aktuelle Flash Player-versjonen ikke er funnet. Legg merke til at spesiell koding brukes til å ta hensyn til behovene til Internet Explorer, for eksempel: Nå nosmoke.swf animasjon vil dukke opp på hver side under bunnteksten. Selvfølgelig er dette et dummy eksempel, men jeg bruker det bare for presentasjonsformål fordi det kan gjøres raskere og enklere. Åpenbart må du legge til noen stilregler for å få bedre utseende. Du vil se så kort tid.
Trinn 4 SWFObject-konfigurasjon forklart
Statisk vs dynamisk publisering
Statisk publisering bruker markering for å legge inn både SWF-innhold og alternativt innhold, og bruker ikke-påtrengende JavaScript for å løse en rekke problemer som ikke kan løses med oppslag alene. Den fremmer den faktiske forfatteren av standarder som er kompatibelt, og vil derfor spesielt appellere til webstandardutviklere. Denne mekanismen for å legge inn Flash-innhold er ikke avhengig av et skriptspråk, så Flash-innholdet ditt kan nå et betydelig større publikum. Hvis du har Flash-plugin-modulen installert, men har JavaScript deaktivert eller bruker en nettleser som ikke støtter JavaScript, vil du fortsatt kunne se Flash-innholdet ditt.
Dynamisk publisering bruker merking for å bare definere alternativt innhold og bruker ikke-påtrengende JavaScript for å erstatte dette med SWF hvis den minimale Flash Player-versjonen er installert og tilstrekkelig JavaScript-støtte er tilgjengelig. Dynamisk publisering er mindre ordentlig enn statisk publisering og integrerer veldig bra med skriptprogrammer. Hvis du har Flash-plugin-modulen installert, men har JavaScript deaktivert eller bruker en nettleser som ikke støtter JavaScript, vil du se det alternative innholdet i stedet for ditt innebygde Flash-innhold.
Du må bestemme hva som er den bedre løsningen for deg, avhengig av dine mål og behov.
Bruke Adobe Express Installer
Adobe Express Install er en mekanisme som er innebygd i Flash Player, som gjør at du kan laste ned den nyeste versjonen av Flash-plugin-modulen direkte uten å måtte bla til Adobe-nettstedet. Express Installer er en valgfri funksjon for webforfattere og viser en standardisert nedlastingsdialogboks når en besøkende allerede har installert Flash Player 6.0.65 eller høyere på Win- eller Mac-plattformer, men en senere plugin-versjon er nødvendig. Express Installer bruker et popup-bekreftelsesvindu og er derfor en valgfri funksjon som kan aktiveres av nettforfattere. Hvis du klikker Ja, åpner Express Installasjon en nedlastingsdialogboksen med forespørselen om å lukke alle nettleservinduer. Etter at du har installert Flash Player, vil den åpne nettleservinduet ditt og omdirigere deg til siden der Express Installer ble startet. Hvis du klikker Nei, vil SWFObject gå tilbake til det alternative innholdet.
Du kan aktivere Express Installer ved å merke av i Adobe Express Install-boksen og ved å justere banen til expressInstall.swf fil, om nødvendig. For å teste om denne funksjonen fungerer og se den i aksjon, bare gjør dette lille trikset - bytt den nødvendige Flash-versjonen til noe større enn den nyeste Flash Player-versjonen (for eksempel 14.0.0). Og du får dette resultatet:
Meldingen forteller deg at innholdet krever Adobe Flash Player 11.1, fordi dette faktisk er den nyeste versjonen av pluginet (for øyeblikket), og versjon 14.0 eksisterer ikke ennå.
Trinn 5 SWFObject Definisjon Forklaring
I SWFObject Generator kan du finne en haug med flere attributter og parametere som er tilgjengelige for deg. De er gjemt som standard. Så, for å få tilgang til dem, klikk bare "mer" nederst i SWF-definisjonsområdet. Deretter bør du se følgende:
Avhengig av hvilke valg du har gjort her, vil ditt Flash-innhold oppføre seg og se annerledes ut. For en beskrivelse om hva et bestemt attributt eller parameter gjør, må du bare holde over navnet.
Navneattributtet er nyttig når du trenger å referere til Flash-filmen din ved hjelp av skriptspråk. Som jeg sa før du må kanskje legge til ekstra styling til ditt Flash-innhold. For å gjøre dette bare legg til en verdi for klassen attributt som "flashmovie". Denne klassen vil bli lagt til elementet tag elementet i din genererte kode. Så, nå må du bare legge til følgende stilregel i tema stilarket:
object.flashmovie // din css kode her
Trinn 6 Bruke Embed SWF Online Generator
Det er en annen enkel måte å få den nødvendige gjenkjenningskoden på - ved hjelp av en online generator. En god en kan bli funnet på embed-swf.org. Den er basert på SWFObject HTML og JavaScript Generator. For å behandle, følg disse trinnene:
- Åpne konfiguratoren. Grensesnittet er delt inn i fem faner.
- Skriv inn de ønskede parameterne i hver kategori
- Klikk på Export-fanen. Her kan du velge en eksportmal. Hvis du vil bruke din egen HTML-mal, velg Tilpasset. For å lære hvordan du oppretter en, kontroller du dokumentasjonen.
- Klikk nå på Vis HTML-kode. HTML-koden din vises. Klikk Last ned for å lagre filen på harddisken.
Hvis du trenger, kan du gjenopprette standardinnstillingene til enhver tid ved å klikke på lenken øverst i venstre hjørne. Du har også mulighet til å eksportere / importere lagrede innstillinger for enkel gjenbruk.
Du trenger ikke å bekymre deg for swfobject.js fil. Bare legg standardalternativet for SWFObject som vil bruke swfobject.js Filen er vert for Google.
Trinn 7 Bruke Kimili Flash Embed
Ifølge nettstedet er Kimili Flash Embed:
... et plugin for populære open source blogging-systemer som lar deg enkelt plassere Flash-filmer på nettstedet ditt. Bygget på SWFObject JavaScript-koden, er det standard kompatibelt, søkemotor vennlig, svært fleksibel og fullverdig, samt enkel å bruke.
Det er enkelt å installere plugin:
- I Dashboard utvider du Plugins-menyen og klikker Legg til ny
- I søkelinjen skriver du "flash embed"
- Når du ser Kimili Flash Embed klikker du Installer
- Etter installasjonen, gå til Plugins og aktiver den, eller klikk på Aktiver nå
Nå for å legge til flashinnhold i dine innlegg eller sider gjør du følgende:
- Opprett nytt innlegg / side eller åpne eksisterende
- Bytt til HTML-visning
- Nå for å legge til en Flash-animasjon, bruk følgende shortcode, erstatte sti, y og x parametere med den respektive banen, høyden og bredden på swf-en din:
[kml_flashembed movie = "/ path / to / din / movie.swf" /]
- Filmparameteret er det eneste som kreves - høyde og bredde er valgfrie. Selv om det er mest effektivt å størrelsen din .swf Under eksport vil størrelsen på høyde og bredde endre størrelsen på a .swf fil. Hvis du gjør det, sørg for å holde tallene i målestokk for å unngå forvrengning.
Kimili Flash Embed Tag Generator er en modifisert versjon av SWFObject 2 HTML og JavaScript Generator og er integrert tett inn i WordPress, noe som gjør det veldig enkelt å bygge KFE-koder med riktig formatering.
Legge til Flash via KFE Tag Generator:
- For å starte Tag Generator, et veiviserlignende grensesnitt som vil hjelpe deg med å opprette den nødvendige KFE-taggen, klikker du på knappen med Flash Player-ikonet. (du må bytte til visuell modus for å kunne se den)
- Et vindu som ligner SWFObject Generator vil dukke opp
- Alt du trenger å gjøre er å fylle ut nødvendige parametere, og klikk deretter Generer
Du kan sette opp standardinnstillinger 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 blir referert andre steder i koden din. Hvis du velger å bruke Kimili Flash Embed å lage en referanse til swfobject.js ved å merke "Ja", har du to alternativer fra hvor du skal referere til filen - Google Ajax Library eller Internal. Klikk på "hva er dette?" for å se hva forskjellene er. Når du er klar, klikker du Oppdateringsalternativer.
Trinn 8 Gir alternativt innhold
Disse dager er de ledende søkemotorleverandørene som Google og Yahoo! kan indeksere tekstinnhold og koblinger inne i SWF-filer mens du surfer gjennom et programs stater, som om de var ekte besøkende. Så hvorfor trenger du fortsatt å bruke alternativt innhold for å hjelpe søkemotorer å indeksere innholdet ditt? Dette er av et par grunner.
- For det første er ikke alle søkemotorer i stand til å indeksere Flash-innhold.
- For det andre, fordi en SWF-fil vanligvis er full av multimedieinnhold, vil det fortsatt være mye innhold som vil forbli usynlig for søkemotorer. Du må fortsatt bruke alternativt innhold til å vise beskrivende materiale til personer med mindre teknisk støtte og for å hjelpe besøkende å finne nedlastingssiden for Flash Player.
- Og til slutt vil søkemotorer sannsynligvis indeksere både Flash-innhold og alternativt innhold. Selv om det fra en nettforfatters synspunkt er duplikat innhold, betraktes som en best praksis fordi det gjør at du kan lage webinnhold som er tilgjengelig for den bredeste målgruppen som er mulig, til søkemotorleverandører gir det noen vanskelige utfordringer, for eksempel hvordan å bestemme hvilke resultater som skal vises i søkemotoroppføringene. Når du lager søkemotor-vennlig innhold, bør du alltid holde denne dualiteten i tankene. Pass på at HTML-innholdet ditt er en ekte refleksjon av Flash-innholdet ditt, og la en søkemotor bestemme hvilket innhold som kan vises best som et søkeresultat.
For eksempel kan du gjøre følgende for å skape bedre alternativt innhold:
- Bruk nøyaktig samme kopi og koblinger som i Flash-innholdet ditt
- Legg til bilder og tekstbeskrivelse til Flash-innholdet
- Legg til kopi for å forklare hvor Flash Player kan lastes ned
- Legg til CSS i stil og plasser HTML-en din for å bevare websiden sin visuelle identitet.
Som standard publiserer SWFObject 2 Generator følgende alternative innhold:
Dette resulterer i en "Get Adobe Flash Player" -knapp for å vise besøkende til hvor de kan laste ned plugin-modulen. For å teste dette må du deaktivere Flash Player-plugin. I Firefox gå til Add-ons> Plugins. Finn Shockwave Flash og klikk på "Deaktiver" -knappen. Nå når du oppdaterer siden, bør du se følgende:
Du kan erstatte standardkoden med denne:
Nå, hvis besøkende besøker siden uten Flash-plugins, ser de et bilde i stedet for den faktiske animasjonen:
Søkemotorer og besøkende som surfer på nettet i en tekstbrowser eller med bilder deaktivert, vil se innholdet som i dette skjermbildet:
Hvis du har en banner med flere stater, kan du ta opp et bilde for hver enkelt av dem, og deretter sette disse bildene som alternativt innhold. Det kan se slik ut:
For et animasjons- eller videoinnhold kan du bruke samme prinsipp. Du kan ta opp flere viktige bilder og bruke dem til å beskrive innholdet i animasjonen / videoen. Her er grunnskjemaet:
Beskjeden av ramme 1- Beskjeden av ramme 2
- Beskjeden av ramme 3
Personer uten Flash-plugin-modulen ser en bildesekvens med beskrivelser, og personer som surfer på nettet i en tekstbrowser eller med bilder deaktivert, vil se et nummerert sett med beskrivelser.
En annen måte å gjøre dette på er å inkludere et video miniatyrbilde pluss tekstbeskrivelse av filmen.
Du kan også legge til noen få linjer med kopi til ditt alternative innhold som forklarer at den tiltenkte interaktive eller audiovisuelle brukeropplevelsen krever den nyeste versjonen av Flash Player, med en lenke til nedlastingssiden.
Du kan også opprette flere stilregler for å sikre at den visuelle identiteten eller utformingen av en nettside forblir intakt. Tenk bare på alternativt innhold som en mulighet til å kommunisere med målgruppen, selv om de kanskje ikke har den målrettede teknologistøtten.
Konklusjon
Det er det. Nå vet du hvordan du kan legge inn Flash-innhold på WordPress-drevet nettsted enkelt og riktig. Innholdet kan være noe - animasjon, program, film, spill og hva du vil og trenger. Med litt fantasi kan du gjøre nettstedet ditt veldig kult, på den ene side og fortsatt nyttig, på den andre.
Beskjeden av ramme 1