Riprogettazione del sito Web WordPress (per aggiungere un tocco personale)

Nessun’altra piattaforma ti dà il potere di personalizzare l’aspetto del tuo sito Web come WordPress. È uno dei motivi per cui WordPress è popolare tra editori e sviluppatori web.


Puoi prendere un tema WP di base (e triste), aggiungere un logo, modificare alcune righe di codice, cambiare il tuo CSS e avere un sito Web dall’aspetto professionale (eppure gradevole) in pochissimo tempo. È un lavoro facile e questo tutorial ti mostrerà come farlo.

Siete pronti? Cominciamo dalle prime cose prima; i colori.

Progettare una combinazione di colori

Quando sviluppi una combinazione di colori per il tuo sito WordPress, ci sono molte cose da considerare. Pensa a come dipingere la tua casa o il tuo negozio di pietra e malta. Devi determinare il colore che andrà sulle tue pareti e il colore che desideri per le tue porte.

Il modo in cui dipingi i tuoi esterni e interni dipenderà da un paio di fattori che sono le tue preferenze personali.

Anche colorare il tuo sito WordPress non è diverso. Di che colore vuoi i tuoi link? Il tuo background, come lo renderai il più attraente e lascerai i tuoi concorrenti a bocca aperta? Quali colori completeranno (o addirittura rafforzeranno) il tuo messaggio? Come vuoi il tuo testo? Il cielo è il limite alla scelta dei colori che puoi utilizzare sul tuo sito WP.

Devi determinare tutti i colori che utilizzerai dall’inizio. Ti consiglierei di attenersi solo a tre colori, ma sei libero di usare tutti i colori che desideri.

Non esagerare o finirai per diluire il tuo messaggio di marketing in tutto quel colore. Dopotutto, un eccesso di qualcosa è velenoso, quindi indipendentemente dai colori che scegli, è importante assicurarsi che ci sia armonia.

È meglio utilizzare la maggior parte dei colori in cui la maggior parte delle persone li vedrà (e si spera) li adorerà. Sto parlando del tuo logo e testa d’albero. Queste aree sono esattamente dove hai bisogno di più colori; il resto del tuo sito web può essere meno colorato ma più informativo.

216 colori contro 12 colori

Conosciamo tutti i dodici colori elementari, ma la rete è piena di colori e delle loro diverse sfumature. Per questo motivo, scegliere il colore che trasuda calore personale durante la creazione di un look professionale può essere un compito impegnativo.

Sei fortunato, però, perché ho pescato su Internet e ho trovato i seguenti strumenti per iniziare:

Kuler

Kuler

Kuler è stato progettato da Adobe per aiutare gli sviluppatori Web a creare combinazioni di colori di prim’ordine. Kuler è uno strumento online, il che significa che puoi portarlo in giro e usarlo ovunque, ma c’è anche un’applicazione desktop che ti aiuta a sviluppare combinazioni di colori direttamente dal tuo desktop. Inoltre, se si dispone di un ID Adobe, è possibile salvare le combinazioni di colori con un solo clic.

Esistono varie regole di colore da utilizzare con Kuler, tra cui Monochromatic, Compound, Complementary, Analogous e Triad tra gli altri.

Dai un’occhiata a Kuler.

DIAGRAMMA DI COLORE HTML

Conoscere i colori che userete è solo metà del lavoro. Per implementare i tuoi colori, devi tradurli in codici HTML.

cartella colori html

È qui che entra in gioco la tabella dei colori HTML. È una tabella colorata con oltre 200 (216 in realtà) codici colore web. Armato con la carta, nessun colore sotto il sole dovrebbe rivelarsi difficile da implementare.

I codici funzioneranno con HTML, CSS, Adobe PhotoShop e altri strumenti di manipolazione grafica, quindi hai tutta la libertà al mondo di giocare con i tuoi colori quanto vuoi.

Dai un’occhiata alla tabella dei colori HTML.

GenoPal

Se hai bisogno di aiuto per scegliere i colori, GenoPal è l’applicazione che desideri. È un’applicazione web molto semplice che “blocca” le tavolozze dei colori nella finestra del browser. Man mano che scegli i tuoi colori, questi vengono visualizzati nel tuo browser sotto forma di “note adesive” colorate. ��

GenoPal

Con GenoPal, è possibile aumentare la luminosità e controllare la saturazione della tonalità, in modo da ottenere esattamente l’ombra desiderata.

Sul loro sito Web è in arrivo un’app mobile. Una volta lanciato, ti consentirà di trasportare l’app e sviluppare colori sul tuo dispositivo mobile. Il loro design è geniale e il fatto che questa applicazione funzioni davvero è un chiaro segno che GenoPal significa business.

COLORHEXA

ColorHexa è la versione online di piatto di pittura dell’artista. Questo sito Web ti dà la possibilità di mescolare i colori semplicemente inserendo i codici colore. La loro app forerunning è lo strumento di fusione dei colori ma hanno anche un generatore di sfumature e un sottrattore di colori. Non è quel genio puro al lavoro qui?

colorhexa

Come funziona ColorHexa Blender? Tutto quello che devi fare è digitare i tuoi codici colore separati da un “+” e ColorHexa fa il resto del lavoro. Ad esempio, ho provato:

# ff0000 + # 0000ff + # ff00ff e ho ottenuto # aa00aa. Inoltre, ti forniscono un’intera pagina di informazioni sul colore (sul tuo colore finale, ad esempio # aa00aa). Questo è uno strumento che devi provare per sperimentare la fusione dei colori come mai prima d’ora.

Dai un’occhiata a ColorHexa.

GENERATORE GRADIENTE ULTIMATO CSS

ultimo generatore di sfumature di colore

Questo è probabilmente lo strumento migliore per quanto riguarda la generazione di sfumature di colore. È completamente online e ti aiuta a generare punti medi rinfrescanti e i corrispondenti codici CSS. Forniscono inoltre componenti aggiuntivi per Chrome e Firefox per consentirti di integrare l’app nel tuo browser per un accesso più facile e veloce.

C’è un’area di anteprima in cui vedi il tuo gradiente, quindi tutto ciò che devi fare è generare il tuo gradiente mentre ritieni opportuno copia incolla il codice CSS generato. È davvero così facile e hanno più colori di quanti tu possa mai usare.

Dai un’occhiata a Ultimate CSS Gradient Generator.

Scegliere i caratteri

Ora che ti ho mostrato come scegliere e fondere i colori come Picasso, giochiamo con i caratteri.

I tuoi colori e il tuo web design attireranno le persone, ma sono le tue parole, cioè le tue pagine e i tuoi post che faranno rimanere le persone intorno.

Siamo sempre impegnati a creare le nostre migliori storie, quindi la maggior parte di noi dimentica che anche i caratteri contano. Ma il carattere che scegli influenza il modo in cui le persone interagiscono con il tuo sito web. Con i caratteri giusti, il tuo pubblico di destinazione vorrà rimanere nei paraggi e alla fine fare clic sulle altre pagine, che è esattamente ciò che desideri. Fidanzamento.

Ci sono un milione e uno di caratteri là fuori, ma sfortunatamente, un utente vedrà solo i caratteri installati sul proprio computer. Se il carattere che usi non è installato sui loro computer, vedranno una stretta alternativa (o un carattere completamente diverso), che non avrà lo stesso effetto che volevi.

“Giocare con i caratteri è come giocare con il fuoco. A volte può accendere una partita su una pagina web, una scintilla di bel testo. Altre volte, può bruciare tutta la casa. ” – Lorelle di cameraontheroad.com.

Puoi controllare i tuoi caratteri (e creare l’effetto desiderato) con il tuo foglio di stile. Nel tuo tema, il foglio di stile è di solito il style.css file. Puoi utilizzare questo file per controllare il colore dei caratteri, il tipo di carattere / la famiglia di caratteri, la dimensione del carattere e altri aspetti del carattere scelto.

Quello che segue è un buon esempio:

#menu {famiglia di caratteri: Arial, Helvetica, Sans-serif, Verdana, "Times New Roman"; dimensione carattere: 0,8em; colore nero;}

Il codice sopra imposta la dimensione del carattere nel menu su 0,8em e imposta il colore sul nero. Inoltre imposterà il carattere su Arial, ma se l’utente non ha Arial sulla propria macchina, Helvetica prenderà il controllo. Se non hanno Helvetica o Arial, subentreranno Verdana, Sans-serif o Times New Roman.

Controllando i caratteri, puoi creare un aspetto più coerente.

Tuttavia, per risolvere il problema dell’incongruenza dei caratteri una volta per tutte, è possibile utilizzare i caratteri incorporati. Utilizzando i caratteri incorporati (o esterni), l’utente non ha bisogno di avere il carattere sul proprio computer.

Inoltre, è un lavoro facile.

Tutto quello che devi fare è aprire il tuo style.css e metti il ​​seguente codice in alto.

@ font-face {famiglia di caratteri: Museo300; src: url ("fonts / museo300-regular.ttf") formato: ('truetype'); font-weight: normal;}

NOTA: devi definire il nome e la posizione del tuo carattere. Nell’esempio sopra “Museo300” è il carattere, che è stato salvato in una cartella denominata “caratteri”.

Per utilizzare il carattere sul tuo sito Web, ad esempio, puoi scrivere:

body {font-family: Museo300;}

Puoi utilizzare un carattere incorporato per qualsiasi elemento del tuo sito web. Per esempio…

#menu {font-family: Museo300;}

… imposterà Museo300 nel tuo menu.

Il metodo sopra indicato significa che devi scaricare il carattere e caricarlo sul tuo server, che se mi chiedi è abbastanza noioso.

però, ynon è necessario scaricare alcun carattere esterno che si desidera utilizzare.

Puoi semplicemente collegarti ai caratteri dalla sezione head (header.php) in questo modo:

Come e dove aggiungi la riga sopra? Devi aprire il tuo Pannello di amministrazione di WordPress -> Aspetto -> Editor -> header.php

Se non vuoi o non puoi modificare il tuo file header.php, importa semplicemente i caratteri digitando la seguente riga nel tuo style.css:

@import url (http://fonts.googleapis.com/css?family=over+the+rainbow);

L’esempio sopra ti permetterà di usare il Oltre l’arcobaleno font da Google ovunque sul tuo sito. Ad esempio, se si desidera utilizzare Over The Rainbow in tutto il sito Web, è possibile utilizzare questo codice:

body {font-family: "Over The Rainbow";}

Google fornisce oltre 600 famiglie di caratteri gratuite, quindi gioca via!

Aggiornamento (07/12/13): Se desideri aggiungere facilmente Google Fonts al tuo sito WordPress, puoi utilizzare il Plugin tipografia Google. Oltre a questo, puoi saperne di più sui caratteri di Google e su come implementarli in questo Migliora la tipografia del tuo sito Web WordPress con Google Fonts di Tom Ewer.

Altre risorse su come giocare con i caratteri

Plugin WordPress per l’aggiunta di caratteri

E per coloro che non vogliono scavare nel codice, puoi sempre installare un plug-in WordPress per fare un po ‘di lavoro pesante per te. Ecco alcuni dei plugin di font gratuiti più popolari di WordPress.com:

Ti stai divertendo? Andiamo avanti…

 Formattazione di data e ora

Sei stato su un sito WordPress che ha mostrato la data o l’ora in un tono davvero piacevole che ti ha fatto sentire un noob completo per quanto riguarda il tuo sito? I proprietari di questi siti hanno appena giocato con un singola riga di codice e ora non ne hai mai abbastanza delle loro date. haha.

Buone notizie, è possibile modificare questa riga di codice e sorprendi anche i tuoi lettori.

Nella tua WP Dashboard, navigare verso Aspetto, e poi a editore come mostrato di seguito:

data di formattazione

Una volta lì, sarai in grado di vedere un elenco dei tuoi file .php all’estrema destra:

singolo post

Fai clic su un singolo post (single.php) e una volta aperto, apri la barra di ricerca premendo Ctrl + F. Nella barra di ricerca che appare, digita:

il tempo

Individuerai immediatamente una linea che potrebbe assomigliare a:

Ora, l’area che si desidera modificare è (“F Y”).

Consentitemi di approfondire questa sezione per darvi qualcosa di più carnoso su cui mordere.

La “F” in (“F Y”) sta per Nome completo del mese e la “Y” rappresenta il Anno in 4 cifre. Pertanto, se si utilizza (“F Y”), la data sarà simile a:

settembre 2013

Se inserisci una virgola tra F e Y, dovresti avere qualcosa del tipo:

Settembre 2013

Se desideri aggiungere il giorno e altri elementi, puoi utilizzare i seguenti caratteri:

l = nome completo del giorno (L minuscola)

F = Mese

j = Il giorno del mese (la data)

Y = Anno in 4 cifre

y = Anno in 2 cifre

Altri personaggi sono disponibili nella tabella seguente:

tabella delle date di formattazione

E qui, alcuni esempi:

esempi di data di formattazione

Ricorda sempre di modificare solo i caratteri tra parentesi (“F Y”) e, prendi nota, non eliminare le virgolette singole. Sentiti libero di usare tutti i personaggi che desideri per ottenere l’effetto desiderato e ricordati di salvare tutto quando hai finito.

Inoltre, puoi eliminare la data eliminando …

… come ho fatto sul mio blog non molto tempo fa. �� Ora, tutto ciò che ottengo è Inserito da Fred in una categoria così … blah blah. Nessuna data.

Sei pronto per la parte successiva? Faresti meglio a esserlo.

Non ho trovato la funzione the_time?

Va bene, perché molti temi al giorno stanno usando la funzione the_date () invece della funzione_time (), che in realtà è una pratica migliore. Se il tuo tema utilizza la funzione data () non dovrai apportare alcuna modifica perché puoi semplicemente cambiare il modo in cui i tuoi dati vengono visualizzati nella dashboard in “Impostazioni-> Generale”.

Utilizzando le immagini

Questa è probabilmente la parte più semplice (e più breve) di questo tutorial. Ma se sei veramente nuovo in WordPress, aggiungere immagini può essere una sfida.

WordPress ti consente di aggiungere immagini tramite l’utilità di caricamento o (pulsante Aggiungi media) durante la creazione di un nuovo post o pagina. Tutto quello che devi fare è posizionare il cursore nel punto in cui desideri che l’immagine si trovi nel post o nella pagina, quindi fare clic su “Aggiungi file multimediali”.

aggiungi media

Una volta aperta l’utilità di caricamento, puoi aggiungere altri dettagli come didascalia, dimensioni, collegamenti e allineamento.

utilità di caricamento

Quest’area si trova sul lato destro dell’utilità di caricamento.

Per ulteriori informazioni sull’aggiunta di immagini, consulta le seguenti risorse:

E se non sei sicuro di dove trovare alcune fantastiche immagini gratuite, dai un’occhiata al post che abbiamo scritto sulle copertine delle migliori risorse di immagini per WordPress.

Vedere? Ti ho detto che sarà il più corto ��

Aggiunta di un Favicon

Prima di dimenticare completamente le immagini, creiamo e aggiungiamo una favicon al tuo sito WordPress. Una favicon (o icona dei preferiti) è l’icona utilizzata per aggiungere un sito Web ai segnalibri.

Una favicon aiuterà i tuoi lettori a identificare visivamente il tuo sito web.

Generalmente, una favicon è un file grafico quadrato di 16 X 16 pixel con estensione .ico. L’estensione sta per icona.

Come creare un Favicon

Puoi creare la tua favicon online o utilizzare programmi di modifica delle immagini come GIMP o qualsiasi altro che ti consenta di salvare file .ico. La maggior parte dei servizi online sono gratuiti.

Mentre l’immagine è di solito molto piccola (16 per 16 pixel), la favicon dovrebbe rappresentare il tuo blog nella sua interezza. L’immagine o il testo che usi per creare la tua favicon dovrebbe rappresentare il tuo business online.

Se si utilizza un editor di immagini:

  • Ritaglia o aggiungi spazio di conseguenza per assicurarti che l’immagine sia quadrata
  • Ridimensiona l’immagine a 16 X 16 pixel e
  • Salva l’immagine come favicon.ico

I servizi online che è possibile utilizzare per creare favicon includono (ma non solo):

Dopo aver creato la tua favicon, ti consentiranno di scaricarla sul tuo computer, quindi non preoccuparti.

Come installare il tuo Favicon in WordPress

Se nella cartella principale del tuo tema è presente un’altra favicon, dovrai eliminarla utilizzando il tuo client FTP o qualsiasi altro metodo a tua disposizione. I client FTP sono consigliati perché sono facili da usare e puoi trovare rapidamente qualsiasi file tu stia cercando.

Per questo tutorial, ho usato faviconer.com per creare una favicon per il mio blog e Filezilla per eliminare le favicon esistenti.

Con il file favicon.ico in mano, carica lo stesso nella cartella principale del tuo tema. Questa è la cartella in cui è memorizzato il tema corrente.

Quindi carica un’altra copia della tua favicon nella cartella principale (di solito public_html) o nella directory principale in cui è archiviato il tuo sito, in modo da poter vedere la tua favicon quando digiti yoursite.com/favicon.ico. Ciò aggiungerà automaticamente la tua favicon ai tuoi feed.

Al termine del caricamento, è tempo di far funzionare favicon.ico. Questo è ciò che dovresti fare:

Aggiungendo il tuo Favicon usando un plugin

Il modo migliore per aggiungere la tua favicon è usare un plugin. Consiglierei di utilizzare il “Favicon tutto in uno“Plugin per un utilizzo più avanzato per un approccio molto semplice che puoi usare”Il Favicon più semplice“Plug-in che non ha opzioni di back-end, devi solo caricare un file chiamato favicon.ico nella posizione corretta sul tuo server.

all-in-one-favicon

Aggiunta manuale della favicon al modello

Alcune persone potrebbero preferire (anche se non è il modo migliore) di aggiungere manualmente le proprie favicon al proprio modello, per fare ciò seguire i seguenti passi:

  • Accedi al tuo Pannello di controllo
  • Navigare verso Aspetto
  • Poi a Editor (Theme Editor)
  • Trova e apri header.php (intestazione) file

Aggiungi questa riga al tuo file di intestazione (preferibilmente nella parte superiore dove vedi altri tags:

Salva una volta fatto. 

Aggiorna il tuo browser per vedere le tue nuove modifiche.

A questo punto, dovresti essere in grado di cambiare i tuoi colori, scegliere caratteri migliori, formattare date e ora, usare immagini e aggiungere una favicon.

Conclusione

C’è così tanto da discutere sulla riprogettazione del tuo sito WordPress che sarebbe un disservizio (per te) tentare di coprire tutto in un singolo post.

Per trarre il massimo beneficio, è meglio dividere il tutorial in più parti (questa è la parte 1). Condivideremo più trucchi di riprogettazione con il passare dei giorni, quindi fai attenzione. Lo scopo di questi tutorial è aiutarti a creare il miglior sito WordPress di sempre e farti sentire più felice perché hai fatto tutto da solo.

Se desideri condividere le tue opinioni o aggiungere qualcosa alla discussione, non esitare a lasciare il tuo commento nella sezione commenti qui sotto!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map