Slik utvikler du et tilpasset Tumblr-tema
Som freelance webdesigner og utvikler har jeg blitt vant til å jobbe i en bestemt rekkefølge fra start til slutt på en typisk kundes nettsted. Den typiske arbeidsflyten min begynner med programmering / skissering som deretter fører til utvikling og revisjoner alle med konstant kontakt med klienten underveis.
Da jeg ble spurt om å utvikle seg for Tumblr, gikk tankene mine opprinnelig. Tumblr på tiden var noe jeg aldri visste om eller forstod hvorfor noen ville ønske å bruke den. Jeg hadde ingen anelse om hvordan tilpasses det virkelig var før jeg gravd dypere.
Formålet med dette innlegget er å dele litt innsikt om Tumblr og hvordan du kan bruke den effektivt til dine egne kommende prosjekter.
Hovedfordeler
De sanne fordelene med Tumblr er innenfor blogging-delen av hvert nettsted. Det eneste konseptet som stod ut for meg var GRATIS hosting for temaet ditt. Det er trinn for å gjøre dette arbeidet, men når du bærer dem ut, trenger du bare domenenavnet og du er gyldig.
De samme reglene gjelder når det gjelder å utvikle et tradisjonelt nettsted med tumblr, men noen inkluderer som CSS eller JavaScript-filer må ha absolutte nettadresser (mer om dette på litt).
Starter
For å komme i gang må du først opprette en Tumblr-konto. Sett opp en og deretter naviger til innstillingsområdet etter å ha logget inn. For hver klient vil jeg vanligvis sette opp to Tumblr-blogger eller bruke min egen testing Tumblr og opprette en passordbeskyttet blogg for utvikling og visning før nettstedet går live. For formålet med denne demoen har jeg tatt med bandet mitt nyeste bloggdesign (musikk kommer snart :)). I sidelinjen ser du testbloggen min og deretter hovedblogg med bandets Tumblr.
Du lurer kanskje på hvorfor jeg opprettet to blogger? Vel å passordbeskytte en blogg eller gjøre den privat må du ha en grunnblogg på plass på Tumblr, som jeg gjorde her for å gjøre det. Senere kan du slå av denne funksjonen og enten beholde utvidelsen sitename.tumblr.com eller bytte den til en direkte nettadresse som jeg har. Du kan også bare hoppe over dette trinnet hvis du ikke er bekymret for å bare slippe ut nettstedet når det er fullt utviklet.
For å lage en privat blogg klikker du på Opprett en ny blogg- kobling inne i sidelinjen, og du blir tatt til siden nedenfor. Forsikre deg om at personvernet er valgt, og du er god til å gå.
Går videre
Nå beveger vi oss inn i Tumblrs kjøtt: Etter at du har designet og ferdigstilt ditt nettsted, er det på tide å flytte inn i skiver og dicing av det for å optimalisere det for Tumblr. Det er to typer operatører å gjøre innholdet i din eksisterende HTML. Du må ha et grunnleggende HTML-shell bygget når du starter et tilpasset tema.
Noen nøkkelord og nyttige linser:
- Variabler: brukes til å sette inn dynamiske data som bloggens tittel eller beskrivelse.
- Blokker: brukes til å gjengi HTML eller angi data som en tidligere kobling eller et blogginnlegg.
Det finnes en komplett liste over ulike typer variabler og blokker du kan tilordne HTML her. I stedet for å kopiere nettstedet anbefaler jeg deg til å besøke denne siden og bli kjent med den. Det ville være best å selv gjøre dette før du begynner designet. Det finnes mange funksjoner for ethvert Tumblr-tema som kan brukes eller ikke brukes i ditt eget design. Mitt bånds nettsted er et nakent beinområde. Jeg trengte et sted for folk å gå for å finne ut mer og se hva vi alltid er opp til og det handler om det.
Du vil ha en plan for alle typer innlegg som er tilgjengelige inne i Tumblr. Kode disse og stil dem ordentlig for hver blogg du lager og selvfølgelig se dokumentasjonen for å inkludere andre elementer som er viktige som navigering, paginering, metadata, reposts, kommentarer (notater) etc:
- {blokk: Innlegg} Dette er en innpakning eller sortering til et innlegg [/ blokk: Innlegg}
- {blokk: Tekst} For tekstbaserte innlegg {/ blokk: Tekst}
- {blokk: Foto} For bildeinnlegg {/ blokk: Foto}
- {blokk: Photoset} For bildeinnlegg i galleriformat {/ blokk: Photoset}
- {blokk: Sitat} For anførselstegn {/ blokk: Sitat}
- {blokk: Link} For Links {/ block: Link}
- {blokk: Lyd} For lydinnlegg {/ blokk: Lyd}
- {blokk: Video} For videoinnlegg {/ blokk: Video}
Så hvor setter jeg koden min?
For å importere din ferskpolerte HTML til ditt tilpassede tema må du logge inn og velge riktig blogg på venstre sidefelt i Innstillinger- delen av dashbordet. Se etter tittelnavnet Tema og klikk på Tilpass- knappen.
Når du klikker på knappen, blir du møtt med en ny side med noen tilpassede redigeringsalternativer for nettstedet ditt. Nedenfor ser du hvordan min ferdige side for øyeblikket ser ut med Tumblr dummy innhold. Dette området er flott for å se oppdateringer til eventuelle endringer du gjør i Tumblrs kodeditor, men jeg anbefaler virkelig å utvikle nettstedet ved hjelp av en grunnleggende kodeditor og nettleser fra starten. Når koden er på plass, kan du sette inn de egendefinerte Tumblr-baserte variablene og blokkelementene i HTML-koden. Så kopier og lim inn endringene dine til hver tilpassede Tumblr-side.
Hvis du vil redigere HTML-koden, klikker du Rediger HTML- knappen (ja det er så enkelt) og et nytt sidevindu vises. Du ser noen HTML med det grunnleggende temaet du tilpasser. Slett eller endre koden for å matche din egen stil og design, og klikk deretter Oppdater forhåndsvisning for å se sideoppdateringen til høyre. En ting jeg ikke kan stresse nok er å bruke absolutte nettadresser til å være vert for bildene dine, CSS, JavaScript og hva som helst du måtte ha fordi de ikke vil koble riktig inn i Tumblr hvis du ikke gjør det. Jeg tilfeldigvis har vært for min egen nettside, så jeg nettopp opprettet en katalog for å knytte bildene og inkluderer. Du kan like enkelt bruke et bilde eller en fil hosting service gratis. Jeg ville bare gjøre det hvis du er helt sikker på at koblingene ikke vil falle og forlate nettstedet ditt uten stiler eller bilder, etc ...
Hva om jeg vil ha flere sider?
Lett. Når du har klikket på Rediger HTML- knappen som jeg nevnte ovenfor, blar du ned til sidene i sidebjelken til venstre som vises. Her ser du eksemplet jeg har levert med flere sider på båndets nettside. Du kan dra rekkefølgen av dem og redigere hver for seg.
Bare klikk på + Legg til en side- kobling for å opprette en annen. Med hver ny side må du oppdatere innholdet samt navigasjon hvis du for eksempel har aktive stater som endres via CSS. Dette burde være en no brainer hvis du har jobbet med HTML og CSS før. Hvis ikke, bør du sjekke ut de mange opplæringene og innleggene i dette emnet på dette nettstedet.
En ting å merke seg er at når du klikker på redigere ved siden av en eksisterende side, vil du se et nytt nettleservindu som vises nedenfor. Sørg for at tilpasset layout er aktivt i rullegardinmenyen, siden du oppretter et tilpasset layout for hver side. Alternativet er der for å bruke et standardoppsett og en omdirigering av navigeringslenk til en annen.
Avanserte funksjoner
På toppen av å lage dine egne CSS-stiler og HTML-dokumenter har du muligheten til å bruke noen av Tumblrs avanserte funksjoner, som følger med hver blogg. Litt under Seksjonsseksjonen ser du en avansert seksjon med noen få tilgjengelige alternativer.
De fleste av disse er selvforklarende. Hvis nettstedet ditt ikke har et mobiloptimalisert layout som min, så vil jeg slå på det optimaliserte mobillayoutalternativet . Beskrivende URLS gjør permalinken til et innlegg mye mer identifiserbart. Til slutt, hvis du er i klemme, kan du sette inn noen egendefinerte CSS under det, men det er like enkelt å inkludere ditt eget CSS via absolutt lenke.
Jeg vil ikke ha .tumblr-utvidelsen
Folkene på Tumblr gjorde dette enkelt. Alt som kreves er at du eier domenenavnet du prøver å omdirigere din Tumblr-blogg til.
For å miste utvidelsen må du navigere til innstillingsområdet på oversikten. Derfra velger du Bruk et egendefinert domenenavn inne i URL-delen. Skriv inn det aktuelle domenet du har registrert, og sørg for å teste domenet ditt ved å klikke på den blå knappen som stirrer tilbake på deg. Når du har gjort det, må du oppdatere A-posten til din nåværende domeneleverandør for å peke på Tumblr, som er 66.6.44.4 . Komplette retninger om hvordan du gjør dette er tilgjengelig her.
Å oppsummere
Å bruke Tumblr er et godt alternativ for alle som er interessert i å holde en aktiv blogg eller til og med utvikle en komplett nettside.
Jeg bygget eksempelområdet du har sett gjennom denne opplæringen fra bakken. Nettstedet ble først utformet inne i Photoshop. Når jeg bestemte meg for stil og utseende, begynte jeg å oversette statisk design til en interaktiv opplevelse som et lignende nettsted, men da la de variablene og blokkene som kreves for at Tumblr skulle fungere som et ekstra, men enkelt steg. Derfra optimaliserte jeg den til å passe på mobile enheter, og resten er historie.
Det er mange flere tilpasninger tilgjengelig som å inkludere Google Analytics, tilpassbare alternativer som kan slås av og på fra innstillingspanelet, forbindelsen til andre programmer som Instagram, Facebook og mer, men prosessen generelt var veldig enkelt og sterkt anbefalt til noen interessert i en ny måte å være vert for en bloggbasert nettside.
Denne opplæringen er ment å være en veldig bred oversikt over hvordan man skal begynne å utvikle nettsteder med Tumblr. For å få mer informasjon og for å få en bedre forståelse, vennligst les full dokumentasjon levert av Tumblr.
Har du bygget et prosjekt rundt Tumblr? Hvilke tips vil du legge til? Gi oss beskjed i kommentarene.