Sådan udvikler du et brugerdefineret Tumblr-tema

Som freelance webdesigner og -udvikler er jeg blevet vant til at arbejde i en bestemt rækkefølge fra start til slut på en typisk kundes hjemmeside. Min typiske workflow starter med programmering / skitsering, som så fører til udvikling og revision alle med konstant kontakt med klienten undervejs.

Da jeg blev spurgt om at udvikle sig til Tumblr, gik mit sind oprindeligt blank. Tumblr på det tidspunkt var noget, jeg aldrig vidste om eller forstod, hvorfor nogen ville have brug for det. Jeg havde ingen anelse om, hvor tilpasset det var, indtil jeg gravede dybere.

Formålet med dette indlæg er at dele noget indblik i Tumblr og hvordan du kan bruge det effektivt til dine egne kommende projekter.

Nøglefordele

De sande fordele ved Tumblr er inden for blogging sektionen af hvert websted. Det ene koncept, der stod ud for mig, var GRATIS hosting til dit tema. Der er trin til at gøre dette arbejde, men når du har dem ud, er alt du behøver, domænenavnet, og du er gylden.

De samme regler gælder, når det kommer til at udvikle en traditionel hjemmeside med tumblr, men noget som f.eks. CSS eller JavaScript-filer skal have absolutte webadresser (mere herom lidt).

Kom i gang

For at komme i gang skal du først oprette en Tumblr-konto. Indstil en og derefter navigere til indstillingsområdet efter at logge ind. For hver klient opretter jeg typisk to Tumblr blogs eller bruger min egen test Tumblr og opretter en adgangskodebeskyttet blog til udvikling og visning, før webstedet går live. Med henblik på denne demonstration har jeg medtaget mit bånds seneste blogdesign (musik kommer snart :)). Inde i sidebjælken kan du se min testblog og derefter hovedbloggen med bandets Tumblr.

Du kan undre dig over, hvorfor jeg lavede to blogs? Godt at kodeordbeskytte en blog eller gøre det privat, du skal have en base blog på plads på Tumblr, som jeg gjorde her for at gøre det. Senere kan du slukke for denne funktion og enten holde forlængelsen sitename.tumblr.com eller skifte den til en direkte webadresse, som jeg har. Du kan også bare springe over dette trin, hvis du ikke er bekymret for kun at frigive webstedet, når det er fuldt udviklet.

For at oprette en privat blog klik på linket Opret en ny blog inde i sidelinjen, og du bliver taget til siden nedenfor. Sørg for, at Privacy tick er valgt, og du er god at gå.

Bevæger sig fremad

Nu flytter vi ind i Tumblrs kød: Når du har designet dit websted og færdiggjort, er det tid til at flytte ind i skæring og dicing af det for at optimere det for Tumblr. Der er to typer operatører til at gøre indhold til din eksisterende HTML. Du skal have en grundlæggende HTML-shell bygget, når du starter et brugerdefineret tema.

Nogle nøgleord og nyttige linser:

Variabler: bruges til at indsætte dynamiske data som din blogs titel eller beskrivelse.
Blokke: bruges til at gengive HTML eller indstille data som et tidligere link eller et blogindlæg.

Der er en komplet liste over de forskellige typer af variabler og blokke, du kan tildele til din HTML her. I stedet for at kopiere webstedet anbefaler jeg stærkt dig at besøge denne side og blive fortrolig med det. Det ville være bedst at endda gøre dette, før du starter dit design. Der er mange funktioner til rådighed for ethvert Tumblr-tema, der kan bruges eller ikke bruges inden for dit eget design. Mit bånds websted er et blott knogleside. Jeg havde brug for et sted for folk at gå for at finde ud af mere og se, hvad vi altid er op til, og det handler om det.

Du vil gerne have en plan for alle typer indlæg, der er tilgængelige inde i Tumblr. Kode disse og stil dem ordentligt for hver blog, du opretter, og naturligvis se dokumentationen til at omfatte andre elementer, der er vigtige som navigation, pagination, metadata, reposts, kommentarer (noter) osv.:

{block: Posts} Dette er en indpakning eller sortering til ethvert indlæg {/ block: Posts}
{blok: Tekst} Til tekstbaserede indlæg {/ block: Text}
{blok: Foto} Til fotoindlæg {/ block: Photo}
{block: Photoset} Til fotoindlæg i galleriformular {/ block: Photoset}
{block: Citat} Til citater {/ block: Citat}
{block: Link} For Links {/ block: Link}
{block: Audio} For lydindlæg {/ block: Audio}
{block: Video} Til videoindlæg {/ block: Video}

Så hvor sætter jeg min kode?

For at importere din nyligt polerede HTML til dit brugerdefinerede tema skal du logge ind og vælge den relevante blog på venstre sidepanel inde i indstillingerne i instrumentbrættet. Se efter overskriftets titel tema og klik på knappen Tilpas .

Når du har klikket på knappen, bliver du mødt med en ny side med nogle brugerdefinerede redigeringsmuligheder for dit websted. Nedenfor kan du se, hvordan mit færdige websted i øjeblikket ser ud med Tumblr dummy indhold. Dette område er fantastisk til at se opdateringer til eventuelle ændringer, du foretager i Tumblrs kode editor, men jeg anbefaler virkelig at udvikle webstedet ved hjælp af en grundlæggende kode editor og browser fra starten. Når koden er på plads, kan du indsætte de brugerdefinerede Tumblr-baserede variabler og blokelementer i HTML'en. Så simpelthen kopiere og indsætte dine ændringer i hver brugerdefinerede Tumblr-side.

For at redigere HTML klikker du Rediger HTML- knappen (ja det er så nemt) og et nyt sidevindue vises. Du vil se nogle HTML med det uafhængige basetema, du tilpasser. Slet eller ændre denne kode for at matche din egen stil og design, og klik derefter på Opdater preview for at se sideopdateringen til din højre. En ting, jeg ikke kan understrege nok, er at bruge absolutte webadresser til at være vært for dine billeder, CSS, JavaScript og alt hvad du kan have, fordi de ikke vil linke korrekt inde i Tumblr, hvis du ikke gør det. Jeg tilfældigvis har vært for min egen hjemmeside, så jeg har lige oprettet en mappe til at forbinde billederne og indeholder. Du kan lige så nemt bruge et billede eller en fil hosting service gratis. Jeg ville kun gøre det, hvis du er helt sikker på, at linkene ikke vil falde og forlade dit website uden stilarter eller billeder osv. ..

Hvad hvis jeg vil have flere sider?

Let. Når du har klikket på knappen Rediger HTML som jeg nævnte ovenfor, skal du rulle ned til siderne i sidebjælken til venstre, der vises. Her kan du se eksemplet jeg har leveret til flere sider på mit bånds hjemmeside. Du kan trække rækkefølgen af dem og redigere dem individuelt.

Du skal blot klikke på linket + Tilføj en side for at oprette en anden. Med hver ny side skal du opdatere indholdet såvel som navigation, hvis du for eksempel har aktive stater, der ændrer sig via CSS. Dette burde være en no brainer, hvis du har arbejdet med HTML og CSS før. Hvis ikke, bør du tjekke de mange vejledninger og indlæg om dette emne på dette websted.

En ting at bemærke er, at når du klikker på redigere ved siden af en eksisterende side, vises et nyt browservindue som nedenfor. Sørg for at have det tilpassede layout aktivt i rullemenuen, da du opretter et brugerdefineret layout for hver side. Muligheden er at bruge et standardlayout og få en navigationskæde omdirigering til en anden.

Avancerede egenskaber

Udover at oprette dine egne CSS-stilarter og HTML-dokumenter har du evnen til at bruge nogle af Tumblrs avancerede funktioner, der er bundtet med hver blog. Lige under sektionen Sider finder du et avanceret afsnit med et par muligheder.

De fleste af disse er selvforklarende. Hvis dit websted ikke har et mobiloptimeret layout som min gør, så ville jeg tænde for den brug optimerede mobillayout mulighed. Beskrivende URL'er gør permalinken til enhver post meget mere identificerbar. Endelig, hvis du er i klemme, kan du indsætte nogle brugerdefinerede CSS under det, men det er lige så nemt at medtage dit eget CSS via absolut link.

Jeg vil ikke have .tumblr-udvidelsen

Folkene i Tumblr gjorde det nemt. Alt hvad der kræves er, at du ejer det domænenavn, du forsøger at omdirigere din Tumblr-blog til.

For at tabe udvidelsen skal du navigere til indstillingsområdet på dit dashboard. Derefter Vælg Brug et brugerdefineret domænenavn inde i URL-sektionen. Indtast det relevante domæne, du har registreret, og sørg for at teste dit domæne ved at klikke på den blå knap, der stirrer tilbage på dig. Når du har gjort det, skal du opdatere A-posten til din nuværende domæneudbyder for at pege på Tumblr's, som er 66.6.44.4 . Komplette anvisninger om hvordan man gør dette er tilgængelig her.

At opsummere

Brug af Tumblr er en god mulighed for alle interesserede i at holde en aktiv blog eller endda udvikle en komplet hjemmeside.

Jeg byggede eksemplets websted, du har set igennem hele denne vejledning fra bunden. Webstedet blev først designet indenfor photoshop. Når jeg først besluttede mig for stil og udseende, begyndte jeg at oversætte det statiske design til en interaktiv oplevelse meget som et lignende websted, men tilføjede de variabler og blokke, der kræves for at Tumblr kunne fungere som et ekstra, men let trin. Derfra har jeg optimeret den til at passe på mobile enheder, og resten er historie.

Der er mange flere tilpasninger til rådighed, som f.eks. Inkorporering af Google Analytics, indstillinger, der kan tilpasses, som kan tændes og slukkes fra indstillingspanelet, forbindelsen til andre apps som Instagram, Facebook og meget mere, men processen generelt var meget let og stærkt anbefalet til nogen interesseret i en ny måde at være vært for en blogging baseret hjemmeside.

Denne vejledning er beregnet til at være et meget bredt overblik over, hvordan man begynder at udvikle hjemmesider med Tumblr. For at få mere information og for at få en bedre forståelse, læs venligst fuld dokumentation fra Tumblr.

Har du bygget et projekt omkring Tumblr? Hvilke tip vil du tilføje? Lad os vide i kommentarerne.

ux design