Un’immagine sul tuo sito web potrebbe diventare popolare e le persone potrebbero iniziare a raggiungere la tua pagina dei media direttamente dalla ricerca di Google.

Ma potrebbe capitare che chi clicca la tua immagine sui motori di ricerca venga reindirizzato sulla tua pagina dei media e non sulla pagina del post di WordPress che contiene quell’immagine.

Se quello che cerchi è un modo che ti permetta di far raggiungere le tue pagine e nascondere la tua pagina dei media, allora sei nel posto giusto !

Come disabilitare la tua pagina dei media sul tuo WordPress

Il modo più semplice è aggiungere uno snippet di codice sul nostro tema di WordPress che ti permetta di creare un redirect sulla pagina che contiene l’immagine o una galleria di immagini trovate su Google.

Creiamo un nuovo file nella cartella del tuo tema in uso di WordPress utilizzando un FTP manager come FileZilla.

Rinominiamo il file con il nome ” image.php “.

PS: Se il tuo tema ha già un file ” image.php” dovrai semplicemente modificarlo.

Dopodiché, tutto ciò che devi fare è aggiungere il seguente codice come prima riga nel file appena creato :

<?php wp_redirect(get_permalink($post->post_parent)); ?>

Adesso non ti resta che salvare il file modificato.

Ora, quando un utente trova un’immagine del tuo sito su Google, cliccandoci sopra verrà reindirizzato al post principale che la contiene.

È stato utile questo articolo ?

Lasciami un commento

L'articolo Pagina dei media WordPress proviene da Alessandro Albergo.

Come spesso mi piace fare, ti mostrerò 2 tutorial per creare il tuo link di Whatsapp in codice e l’altro tramite un plugin per il sito in CMS come WordPress.

Whatsapp per il sito web in codice :

Incominciamo con quello che più mi piace ! Il codice . Se cerchi il plugin per WordPress, puoi saltare questa parte .

Utilizzeremo la libreria Font Awesome per creare l’icona, quindi come primo step, installiamo la libreria nel nostro progetto! Se non dovessi saperlo fare, puoi leggere l’articolo in cui parlo dell’icona di Instagram, in cui spiego passo passo il procedimento per installarla in maniera rapida.

Bene, adesso che hai tutto installato, procediamo con la generazione della nostra icona nel TAG “<a ></a>” .

<a href=""><i class="fab fa-whatsapp"></i></a>

Che tu ci creda o meno, abbiamo quasi finito! Adesso basterà inserire il link API di Whatsapp seguito dal tuo numero di telefono nell’ “href” ,

<a href=”https://api.whatsapp.com/send?phone=tuo-numero-di-whatsapp“><i class=”fab fa-whatsapp”></i></a>

Quindi:

<a href="https://api.whatsapp.com/send?phone=393896312092"><i class="fab fa-whatsapp"></i></a>

IMPORTANTE:

• Non inserire il “+” d’avanti al “39” ma scrivilo proprio come nell’esempio
• Il numero deve chiaramente essere registrato su whastapp

Se volessi inserire anche un messaggi pre-impostato per il mittente, potrai aggiungere “&text=” e scrivere il tuo messaggio, chiaramente per la spaziatura dovrai usare “%20” :

https://api.whatsapp.com/send?phone=393896312092&text=Ciao%20voglio%20più%20info

Adesso non ti resta che inserire l’icona dove più ti piace e goderti il collegamento all’app di Whatsapp.

Plugin per WordPress :

Vediamo subito come avere Whatsapp per il sito web attraverso il plugin per WordPress !

Ci sono davvero tanti plugin su WordPress, ma quello che mi è piaciuto molto e utilizzo spesso è Join.chat , davvero semplice da configurare e non ho mai avuto nessun tipo di conflitto con i vari temi.

Installiamolo scaricandolo attraverso il link o direttamente da WordPress e attiviamolo.

Adesso vedrai nelle impostazioni il nome del plugin appena installato :

Clicchiamo sulla voce Join.chat e settiamo la nazione cliccando sulla bandierina nel primo campo, e tutti gli altri campi utili come il delay per l’apparizione della call to action (se la volessi impostare) . Potrai anche sostituire l’icona con un’altra immagine, e decidere dove visualizzare l’icona ( DX o SX ) :

C’è qualche pagina dove non vuoi che appaia l’icona di Whatsapp? Ti basterà andare nell’editing della pagina interessata , e vedrai sulla destra l’impostazione di Join.chat, per nascondere l’icona, clicca su “hidden” (occhio sbarrato ) :

Adesso non ti resta che goderti il link di Whatsapp sul tuo sito web !

È stato utile l’articolo ? Lasciami un commento

L'articolo Chat Whatsapp per il sito Web proviene da Alessandro Albergo.

Il tutto consiste nell’integrare il un “plugin”, o meglio snippet di codice generato da Facebook stesso, nella pagina web che desideri oppure in tutte le pagine.

Attraverso il Messenger della tua pagina Facebook  che apparirà sul sito web, potrai iniziare una conversazione con gli utenti o clienti senza che loro lascino il sito. A tua volta sarai in grado di rispondere alla chat attraverso l’applicazione sul tuo Smartphone ( Business Suite Apple – Business Suite Android ) o attraverso il sito di Facebook.

Che si tratti di un sito web “statico”, “dinamico” o un CMS (come per esempio WordPress), il procedimento e il risultato sarà lo stesso.

Per prima cosa quello che ti serve, sarà una pagina Facebook , si solo per chi ha una pagina (azienda, blogger, artista ecc..) ed è amministratore della stessa, può usufruire di questi servizi.

Nota importante : Per procedere, il tuo sito web deve avere il certificato SSL , ovvero il protocollo “https://” .

Finite le premesse iniziamo subito con la generazione della nostra chat di Facebook Messenger sul sito web !

Effettua l’accesso a Facebook e vai sulla pagina che gestisci ( non il tuo profilo, ma la pagina ) .

Adesso clicchiamo “Impostazioni” , come vedi è l’ultima voce della sidebar che trovi sulla sinistra.

Adesso vedrai cambiare le voci nella sidebar, bene clicchiamo “Messaggi” :

Sulla schermata di destra ci saranno tante voci riguardanti il settaggio dei messaggi, verso la fine (esattamente la terzultima voce) ci sarà “Aggiungi Messenger al tuo sito web” :

Clicchiamo su “Inizia” !

Ora inizierà la configurazione guidata dove dovrai settare i messaggi automatici e copiare il codice che Facebook di fornisce per integrare la chat di messenger sul sito web :

Divertiti come vuoi, puoi cambiare il colore, la prima frase di saluto per avviare la conversazione e personalizzare le FAQ con risposte automatiche.

Per ottenere il plug-in, ti basterà cliccare su configura e seguire i 4 steps, dove dovrai selezionare la lingua e copiare il codice che ti verrà dato :

Adesso che abbiamo il codice, non ci resta che integrarlo sul nostro sito subito prima della chiusura del TAG “</body>” .

Su WordPress invece, dovrai cliccare su Aspetto -> Editor del tema -> Selezionare il tema in uso :

Dovrai incollare il plug-in subito prima della chiusura del “/body“, proprio dove vedi la linea blu nell’immagine esempio .

Adesso dovresti vedere sul tuo sito web la chat a comparsa, potrai anche decidere dall’impostazione della Pagina Facebook di far aprire in automatico la conversazione oppure solamente al click sull’icona.

Per la visuale Desktop dovresti vedere qualcosa del genere :

Per il mobile invece : 

Ottimo, adesso se hai seguito tutti i passaggi avrai la tua chat pronta sul sito web !

È stato utile l’articolo ? Lasciami un commento

L'articolo Facebook Messenger sul tuo sito web proviene da Alessandro Albergo.

Sicuramente potevo utilizzare un’immagine “.png” , ma avrei dovuto impiegarci più tempo per adattare la dimensione su ogni dispositivo. Quindi come quasi tutti gli sviluppatori che utilizzano le icone, ho deciso di crearla con una libreria e precisamente ho utilizzato “Fontawesome“.

Cosa è Font Awesome ?

Font Awesome è una delle tante librerie per sviluppatori che mette a disposizione le icone in codice, che prendono forma grazie al file di stile “CSS” che il sito rilascia tramite link (CDN).

Molte di queste librerie hanno icone che si possono utilizzare con un piano Free, quindi basta semplicemente registrarsi e includere il link della CDN rilasciato, altre invece hanno un piano PRO (a pagamento e con CDN a parte).

Non preoccuparti perché l’icona di Instagram rientra nel piano Free .

Quindi per iniziare come primo step, installiamo la libreria! Niente di più facile, copiamo la CDN e inseriamola nell’ “head” del nostro progetto con il tag “link”. Per semplificarti il tutto ti condivido qui la CDN da inserire direttamente nell’ “head”, in questa maniera potrai anche non registrarti sul sito.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />

Adesso potrai copiare il codice di ogni icona free del sito FA (Font Awesome) e incollarla nel tuo progetto, il risultato sarà appunto l’icona visualizzabile (quella che avrai scelto ). Se dovessi prendere un’icona pro invece, non essendo inclusa nella CDN, non verrà visualizzata sul sito web.

Posso installare Font Awesome su WordPress ?

Certo, come al solito è tutto più rapido, ti basta installare il plugin FontAwesome  e poi inserire il codice nell’HTML del tuo articolo o del Widget.

Per Sapere come utilizzare l’HTML nella pagine puoi vedere l’articolo Immagini Responsive , dove spiego come farlo .

Creiamo l’icona di Instagram con il suo vero colore

Come prima cosa, dopo aver installato la libreria sul tuo sito, cerchiamo l’icona di Instagram nella barra di ricerca del sito FA , semplicemente cercando la parola chiave (che in questo caso sarà “Instagram”).

Io ho usato questa icona:

<i class="fab fa-instagram fa-3x"></i>

Ho aggiunto la classe “fa-3x” che rende l’icona più grande. Ci sono varie misure del css di FA, e vanno da “fa-1x” a “fa-5x”, tu puoi scegliere la misura che più ti soddisfa.

Adesso non ci resta che aggiungere il nostro stile tramite CSS.

Utilizzando WordPress potrai aggiungere lo stile tramite il menù Personalizza -> CSS Personalizzato (Lo stesso menù che usi per modificare la Favicon del tuo sito) oppure installando il Plugin Simple Custom CSS and JS .

Copia e incolla questo codice all’interno del tuo CSS o del Plugin:

.insta-colore{
	color: transparent;
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  background: -webkit-radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  background-clip: text;
  -webkit-background-clip: text;
}

Su WordPress :

Inseriamo quindi la classe che abbiamo istanziato con il nome di  “insta-colore” all’interno dell’icona di Font Awesome, quindi il risultato finale nell’ HTML sarà :

<i class="fab fa-instagram fa-3x insta-colore"></i>

Adesso dovresti vedere la tua icona di Instagram con lo stesso colore e sfumature di quella originale.

È stato utile questo articolo ?

Lasciami un commento per qualsiasi domanda o per qualche osservazione

L'articolo Colore icona Instagram Font Awesome proviene da Alessandro Albergo.

Ultimamente, dopo aver visto alcuni video da cui ho preso ispirazione, ho pubblicato un post su Instagram in cui provavo a replicare il logo di Netflix in codice html e css.

Il risultato finale del logo era davvero molto simile a quello originale del famigerato marchio cinematografico, infatti ne sono rimasto così sodisfatto da creare un video e ora condividere tutto il necessario per poterlo riprodurre.

PS: Per visualizzare il post pubblicato su instagram clicca qui.

Bene, come al solito ho cercato di ridurre tutto in pochi passaggi e rendere la guida facile facile, quindi vediamo subito come creare il codice html e css per riprodurre appunto il logo di Netflix.

Iniziamo con l’html, ti basterà creare un file con il blocco note, inserire bil codice riportato e salvarlo con estensione html (nomefile.html) dentro una cartella:

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Netflix Logo</title>
</head>

<body>
    
    <div class="logo">
        <div class="netflix">
            <span></span>
            <span></span>
            <span></span>
        </div>
        <h3>Netflix</h3>
    </div>

</body>

</html>

Adesso all’interno della stessa cartella, creiamo un altro dile chiamato style.css e incolliamoci il seguente codice:

body{
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: centet;
    align-items: center;
    background: black;
    height: 100vh;
}

h3{
    color: white;
    position: absolute;
    margin: 0;
    padding: 0;
    text-align: center;
    font-size: 60px;
    text-transform: uppercase;
    font-family: arial;
    letter-spacing: 12px;
    font-weight: 800;
}

.netflix{
    position: relative;
    width: 350px;
    height: 500px;
}

.netflix span{
    position: absolute;
    top: 0;
    width: 120px;
    height: 100%;
}

.netflix span:nth-child(1){
    background: #b00612;
    left: 0;
}

.netflix span:nth-child(2){
    background: #e50810;
    left: 0;
    transform-origin: top;
    z-index: 1;
    transform: skewX(25deg);
    box-shadow:  0 0 40px rgba(0,0,0,1);
}

.netflix span:nth-child(3){
    background: #b00612;
    right: 0px;

}

Salviamo tutte le modifiche. Ora aprendo il tuo file .html con Chrome o con Firefox, vedrai il logo creato!  Ricordati di lasciare i file in una cartella, altrimenti dovrai cambiare il path del foglio di stile (.css).

Ti è piaciuto questo articolo ?

Lasciami un commento per farmelo sapere

L'articolo Logo Netflix in codice Html e CSS proviene da Alessandro Albergo.