Wordpress – 360smartweb https://360smartweb.it Creazione siti web e posizionamento nei motori di ricerca Wed, 25 Jun 2025 12:54:35 +0000 it-IT hourly 1 https://360smartweb.it/wp-content/uploads/2024/09/Icona-ufficiale-360smartweb-con-sfondo-150x150.png Wordpress – 360smartweb https://360smartweb.it 32 32 CSS Smooth scroll: effetto scroll della pagina fluido https://360smartweb.it/css-smooth-scroll-effetto-scroll-pagina-fluido/ Sun, 03 Jul 2022 15:08:01 +0000 https://360smartweb.it/?p=4722 Scopri ]]> Come realizzare in modo personalizzato il css smooth scroll (l’effetto scroll della pagina fluido alle #anchor) senza nemmeno una riga di codice jQuery o Javascript.

Buongiorno a tutti i lettori,
oggi vediamo come realizzare lo smooth scroll in css, quell’effetto piacevole che permette lo scroll da un link ad un ancora sulla pagina, attraverso una semplicissima animazione fluida (effetto molto simile a quello già realizzato nella guida Come aggiungere il pulsante scroll top a WordPress in 5 minuti, animazione realizzata in jQuery).

La guida è semplice ed è alla portata di tutti.

Smooth Scroll Css Effetto Scroll Della Pagina Fluido Alle Anchor 1
Smooth Scroll Css: effetto scroll della pagina fluido alle #anchor

CSS Smooth scroll to anchor (scroll della pagina fluido verso le ancore)

Per realizzare questo scroll fluido, le righe di codice si contano davvero in una mano: vedi il codice qui sotto.

/* Applicare css smooth scroll a tutta la pagina */
html {
  scroll-behavior: smooth;
}

Questo codice permette di avere lo scroll smooth in tutta la pagina, se usi WordPress e utilizzi lo style.css lo vedrai su tutto il sito web.

/* Applicare css smooth scroll solo ad ancore custom */
#tuo-id {
  scroll-behavior: smooth;
}

Quest’altro codice, invece, permette lo scroll to anchor solo e soltanto ad un ID o classe (basta modificare il selettore iniziale) in modo da poter decidere voi stessi quali ancore debbano avere lo scroll fluido e quali no.

Come inserire il CSS

Come sempre, i modi per andare ad inserire il css sono molteplici:

  • all’interno dello style.css
  • utilizzando lo strumento “personalizza” di WordPress

Inserire il css all’interno dello style.css

Procuratevi un client ftp come Filezilla e un editor di testo come ad esempio Atom.

Dopo aver eseguito l’accesso tramite FTP con Filezilla, entrate nella cartella del vostro tema (Parent o Child), cercate e andate ad aprire con Atom il file style.css; scorrete fino in fondo allo stile e incollate il css.

Inserire il css utilizzando lo strumento personalizza di WordPress

Se invece siete poco pratici, nella barra di sinistra di WordPress, restate sopra alla voce “aspetto” con il mouse, cliccate su “personalizza” e appena si apre la nuova pagina cliccate su “CSS Aggiuntivo”.

Inserite nell’editor di testo il css.

Velocità dello scroll -> Scroll Smooth Speed

CSS3, nonostante sia molto avanzato e permetta di fare cose che fino a poco tempo fa erano impensabili, non permette la regolazione della velocità di scroll. In caso le vostre necessità siano obbligatoriamente quelle di averlo più lento o più veloce, continuate con la lettura della guida e scoprite come realizzarlo con jQuery.

Compatibilità Scroll Behavior

La compatibilità di questa proprietà CSS è quasi totale (attualmente solo ie, Internet Explorer non è compatibile), ma ci sono vecchie versioni di browser che non sono compatibili e richiedono l’azione di qualche riga di codice da parte di jQuery.

Per l’alta percentuale di compatibilità sconsiglio questa pratica, va solo ad appesantire il vostro file .js

Come ci ricordano gli amici di W3School nella loro pagina (howto css smooth scroll) vediamo insieme il codice da utilizzare per avere la certezza di riuscita per tutti i browser.

jQuery Smooth scroll to anchor

Andiamo a richiamare la libreria jQuery all’interno del tag <head></head> o nel function.php di WordPress. 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>

Inseriamo lo script all’interno della pagina su cui vogliamo che lo scroll smooth funzioni (meglio se all’interno del tag <footer></footer>) o all’interno del vostro main.js se usate WordPress.

$(document).ready(function(){
  // Add smooth scrolling to all links
  $("a").on('click', function(event) {

    // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== "") {
      // Prevent default anchor click behavior
      event.preventDefault();

      // Store hash
      var hash = this.hash;

      // Using jQuery's animate() method to add smooth page scroll
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){

        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
      });
    } // End if
  });
});
</script>

Come accennato poco fa, non solo questo codice permette di avere la piena compatibilità con tutti i browser, ma permette anche la regolazione della velocità di scroll: nell’esempio qui sopra il valore è impostato a 800 (espresso in millisecondi, quindi poco meno di un secondo).

Smooth scroll offset

Molti di voi che stanno seguendo questa guida si saranno accorti che una volta cliccato sul link che rimanda all’ancora, se sul sito c’è la sticky navbar (la navbar sempre visibile anche dopo lo scroll) i contenuti verranno un po’ nascosti da questa.

Non è un errore di css o di impostazioni ma è la semplice interpretazione del css che manda in posizione top:0 l’elemento ancora.

Come ovviare a questo?

andiamo ad usare un piccolo trucco che permette di avere un offset di 100px o di qualsiasi dimensione voi vogliate.

:target {
    margin-top: -100px;
    padding-top: 100px;
}

Ovviamente potete personalizzarlo a piacimento con dimensioni vostre, in base alla grandezza della vostra navbar.

Se volete vedere qual’è l’offset in questione, guarda l’immagine in cima alla pagina

Conclusioni

Come potete vedere questa guida per il css smooth scroll è davvero alla portata di tutti, principianti, intermedi e esperti (che ovviamente non avranno bisogno di questa guida 😉 ).

Come sempre, se avete bisogno di aiuto, commentate questo articolo, sarò felice di aiutarvi nel mio piccolo.

]]> Come aggiungere il pulsante scroll top a WordPress in 5 minuti https://360smartweb.it/come-aggiungere-il-pulsante-scroll-top-a-wordpress/ Sun, 19 Dec 2021 18:44:10 +0000 https://360smartweb.it/?p=3999 Scopri ]]> Buongiorno a tutti i lettori, dopo un periodo breve di inattività sul blog sono di nuovo qua 🙂

Oggi voglio mostrarvi, in modo “semplice”, come aggiungere il pulsante scroll top a WordPress in fondo alla pagina che al click (su desktop) o al tap (da mobile) porti in alto nella pagina senza dover eseguire scroll infiniti verso l’alto, molto utile per siti con articoli o pagine con molti contenuti.

Un esempio lo potete trovare in questo sito web 😉

Mantenendomi sul solito stile vi mostro come farlo prima tramite codice, e successivamente tramite l’utilizzo di plugin.
Ma veniamo a noi!

Video guida su come aggiungere il pulsante scroll top a WordPress in 5 minuti

Aggiungere il pulsante scroll top a WordPress tramite codice

Realizzare il pulsante scroll top in html

Per prima cosa dobbiamo andare a realizzare la versione html del contenitore del nostro pulsante.

<a id="to-top"><span class="margine-to-top-button">Top</span> <i class="far fa-arrow-alt-circle-up"></i></a>

Andiamo ad inserire il codice qui sopra in header.php all’interno del tag <body>, subito dopo l’apertura.

Assegnare il movimento al bottone scroll top grazie ad un po’ di codice

Successivamente, per aggiungere il pulsante scroll top, dobbiamo andare a scrivere le poche righe di codice che serve per realizzare l’animazione.

  var btn = $('#to-top');
  $(window).scroll(function() {
    if ($(window).scrollTop() > 600) {
      btn.addClass('show');
    } else {
      btn.removeClass('show');
    }
  });
  btn.on('click', function(e) {
    e.preventDefault();
    $('html, body').animate({scrollTop:0}, {easing: "swing", duration: 1000});
  });

Spiegato brevemente, lo script è un jQuery scroll top o jQuery scroll to top, che dir si voglia, , che assegna tutto il contenuto dello script all’ID che noi abbiamo impostato come #to-top, poi si compone in due parti:

Recupero del valore di scroll top

Recupera il valore dello scroll che stiamo eseguendo in quel momento e quando arriviamo ad uno scroll di almeno 600 pixel aggiunge la classe .show, se il valore è minore allora rimuove la solita classe.

Animazione al click o al tap sul pulsante scroll top

Quando il pulsante sarà visibile e quindi dopo che avremo eseguito lo scroll per più di 600px, andiamo ad assegnare l’animazione per fare uno scroll verso l’alto con un effetto di smooth scroll.

Modificare i valori dello script

In questo script, avete la possibilità di andare a modificare alcuni valori come:

  • La durata dello scroll: alla voce “duration:1000” che per il momento è impostata su 1 secondo (1000 è un valore espresso in millisecondi, quindi in questo caso sarà un secondo)
  • Il tipo di velocità dello scroll: chi conosce il css, sa che si possono inserire più valori come linear, swing, cubic-bazier ecc
  • La distanza dal top della pagina: questa distanza è considerata dal margine più alto della pagine, fino al valore scelto.
    Questo valore servirà per andare a mostrare il pulsante (in questo caso 600, che è un valore espresso in pixel).

Assegnare il css al pulsante To Top Page per dare un tocco di grafica

Adesso il pulsante sarà già visibile sul vostro schermo :p scherzo 😀

Anche se non proprio… il pulsante c’è ma non ha la proprietà giusta… assegnamo il css on scroll, qui sopra, per stilizzare e posizionare il tutto:

#to-top {
	position: fixed;
	bottom: 20px;
	right: 20px;
	width: auto;
	height: auto;
	background: #ffffffa3;
	line-height: 10px;
	text-align: center;
	border-radius: 5px;
	color: #000;
	z-index: 999;
	opacity: 0;
	visibility: hidden;
	transition: all .5s cubic-bezier(.215, .61, .355, 1);
	cursor: pointer;
	padding: 13px 13px;
	font-size: 1.1em;
	box-shadow: 0px 10px 7px -10px #000;
}
#to-top.show {
	opacity: 1;
	visibility: visible;
}
#to-top i {animation: my-animation 1.5s infinite ease-in-out;}
span.margine-to-top-button {margin-right: 10px;}
@keyframes my-animation{
  0% {transform: translateY(-6px);}
	50%{transform: translateY(6px);}
  100% {transform: translateY(-6px);}
}

Se controllate bene il codice css qui sopra, noterete che ho aggiunto una formula che non tutti conoscono, ovvero @keyframe. Questa non fa altro che permetterci di realizzare le nostre animazioni personalizzate, specificando semplicemente la % della timeline e cosa deve fare.

Inserire il pulsante scroll top tramite l’utilizzo di un plugin

WPFront Scroll Top

L’alternativa più semplice è quella di inserire un plugin che faccia questo al posto nostro, ovvero WPFront Scroll Top reperibile sulla repository ufficiale di WordPress.

Il plugin è molto semplice da usare e ricco di opzioni, cliccate le immagini qui sotto per vedere ciò che vi aspetta (Screenshot presi direttamente dalla pagina della repository appena menzionata che potete trovare all’indirizzo https://it.wordpress.org/plugins/wpfront-scroll-top/ ).

Wpfront Scroll Top
Wpfront Scroll Top2
Wpfront Scroll Top3
Wpfront Scroll Top4

Conclusioni

Come avete visto da soli la procedura per aggiungere il pulsante scroll top in WordPress è molto semplice in entrambi i casi e non richiede nessuna particolare skill per poter inserire il pulsante.

Nel caso riscontriate qualche sorta di errore nella procedura o in caso vogliate assistenza nella procedura, non esitate a contattarmi con il modulo di contatto qui sotto.

]]> Come personalizzare il link mailto https://360smartweb.it/come-personalizzare-il-link-mailto/ Wed, 18 Nov 2020 17:44:25 +0000 https://360smartweb.it/?p=3187 Scopri ]]> Vediamo come personalizzare il link mailto <a href=”mailto:”> in un semplice tag in html.

Come molti di voi sapranno, il classico tag <a href=””> non ha solo il compito di inserire un link all’interno di un teso in html, ma ha anche molteplici utilizzi tra cui il mailto: che permette al realizzatore del testo di far aprire il client di posta (il programma di posta utilizzato di default, come “outlook”, “mail”, “thunderbird” ecc) dell’utente finale, al semplice clic sul link.

Quali sono i valori che si possono assegnare al mailto html?

Parametro Descrizione
mailto: Indirizzo email del destinatario. In questo campo è possibile inserire più di un destinatario, separandoli con una virgola
cc= Indirizzo email del destinatario, messo in copia
bcc= Indirizzo email del destinatario messo in copia nascosta
subject= Campo testo in cui inserire il campo “oggetto” dell’email
body= Campo testo in cui inserire il corpo del messaggio preimpostato
? Delimitatore del primo campo
& Delimitatore di tutti gli altri campi

Se il vostro intento è semplicemente quello di far aprire il client di posta, è possibile farlo con un semplice mailto: vuoto.

<a href="mailto:">clicca per inviare l'email</a>
<a href="mailto:nome@sito.it">clicca per inviare l'email</a>
<a href="mailto:nome@sito.it,nome2@sito.it,nome3@sito.it">clicca per inviare l'email</a>

Adesso andiamo ad implementare i parametri che abbiamo visto ad inizio post nella tabella.

<a href="mailto:nome@sito.it?subject=Oggetto del messaggio">Destinatario e oggetto pre-compilato</a>

Analizzaiamo la struttura: come potete vedere, abbiamo inserito dopo il mailto: l’indirizzo email del destinatario e come primo delimitatore di campo, abbiamo inserito il carattere ? seguito dal campo subject= con un testo che verrà visualizzato all’interno del campo oggetto della mail.

Adesso inseriamo un ulteriore campo, mettiamo il campo del testo della mail, al link.

<a href="mailto:nome@sito.it?subject=Oggetto del messaggio&body=Inserite qui il testo del messaggio">Destinatario, oggetto e testo pre-compilati</a>

Analizziamo la struttura: come vedete, in aggiunta all’esempio precedente, abbiamo delimitato la fine del secondo campo con il simbolo & e abbiamo inserito il campo body= con un breve messaggio.

Inseriamo sia il campo per conoscenza e conoscenza nascosto nel solito esempio per non dilungarsi troppo, tanto il procedimento è sempre il solito, non dilunghiamoci troppo.

<a href="mailto:nome@sito.it?subject=Oggetto del messaggio&body=Inserite qui il testo del messaggio&cc=nome2@sito.it&bcc=nome3@sito.it">Destinatario, oggetto, testo pre-compilati e destinatario nascosto</a>
Come personalizzare il link mailto html
Come personalizzare il link mailto html

Se volete vedere in azione questi link, eccovi qui sotto una lista da cliccare che vi mostrerà il risultato finale

Per chi ci segue saprà che cerchiamo sempre di incastrare WordPress in tutte le nostre guide; questa non è un eccezione. 😉

Molto semplicemente, tanto per dare l’input, a chi conosce tutti i template tag e richiami vari, un’applicazione molto favorevole potrebbe essere quella di realizzare un tasto “richiedi info” nella scheda prodotto con il richiamo del titolo nel campo oggetto…

<a href="mailto:nome@sito.it?subject=Richiesta di info per il prodotto <?php the_title(); ?>">Clicca per inviare l'email</a>

In questo modo potrete avere il campo dell’oggetto con il nome del prodotto, richiamato in modo dinamico, nella vostra single-prodotto.php.

Adesso che ho dato il “la” per la dinamicizzazione dei campi, sbizzarritevi pure 😉

Conclusioni

Come avete visto per personalizzare il link mailto ci sono piccoli “trucchetti” che possono aumentare la user experience sul vostro sito e sono molto facili da realizzare, con un coefficiente di difficoltà molto molto basso.

Spero che questa guida vi sia piaciuta e se avete domande a riguardo o dubbi, vi prego di commentare l’articolo, sarò molto felice di aiutarvi.

]]> Personalizzare il Login WordPress https://360smartweb.it/personalizzare-il-login-wordpress/ Wed, 14 Oct 2020 13:05:00 +0000 https://360smartweb.it/?p=3177 Scopri ]]> Scopri come personalizzare il login WordPress in 5 minuti in modo manuale o tramite l’utilizzo di plugin

Bongiorno a tutti i lettori che ci seguono, oggi vogliamo parlare di un argomento che per chi lo fa di professione sembra una cosa scontata ma non lo è, ovvero come personalizzare Il login WordPress.

La personalizzazione del login di WordPress può essere fatta in vari modi e a vari livelli, ovviamente per chi ci conosce sa benissimo che potrà essere fatto in modo manuale, con codici, o in semi-automatico con l’utilizzo di plugin creati appositamente allo scopo 😉

Le personalizzazioni possono essere sia a livello grafico (come inserimento del proprio logo, dei propri colori e del proprio stile di layout grafico) o personalizzazioni di modifica della URL di accesso che, oltre a una personalizzazione pratica serve anche per aumentare la sicurezza del vostro sito WordPress in modo esponenziale.

Qual è la pagina di login di WordPress o URL di login

Iniziamo con il mostrarvi quali sono le pagine di Login di WordPress:

  • Wp Login: www.tuosito.it/wp-login
  • Admin Login WordPress: www.tuosito.it/wp-admin

Entrambe le soluzioni sono usufruibili da chiunque voglia accedere al sito web, anche se generalmente gli amministratori, sviluppatori o comunque utenti che possono modificare il sito web, utilizzano la versione /wp-admin/ che comunque fa riferimento al file login.php che rimanderà alla Dashboard di WordPress .

Personalizzare la pagina di login di WordPress

Adesso che sapete come si può accedere alla Dashboard di WordPress, passiamo alla vera e propria personalizzazione della pagina, ovvero il WordPress Login; questa può essere semplicemente grafica o di modifica della URL (wp-login o wp-admin) per motivi pratici interni (può essere utile per i membri dello staff avere un link più semplice da ricordare).

Personalizzare la grafica della pagina di log in WordPress

Per personalizzare il login wordpress graficamente, attraverso la sua pagina di login, ci sono due modi:

  1. tramite del buon vecchio CSS
  2. tramite l’utilizzo di plugin creati appositamente per lo scopo.

Personalizzare la grafica della pagina di login con CSS

Cambiare il colore dello sfondo

Utilizzeremo il nostro blu per mostrarvi l’esempio

body.login{
    background: #073c77;
}

body.login a {
	    color: #fff !important;
}

È necessario inserire !important altrimenti non tutti i link verranno modificati

Nell’esempio utilizzeremo il nostro logo per prova 😉

body.login h1 a {
	    background-image: url(https://360smartweb.it/wp-content/uploads/2019/07/Logo-vettoriale-360smartweb-Giugno-2019.svg?x51216/wp-content/uploads/Logo-Main.png) !important;
	    width: 100% !important;
	    background-size: 300px;
}

Ovviamente di personalizzazioni ce ne sono anche altre, come l’inserimento di una immagine di sfondo

Personalizzare la grafica della pagina di login con un plugin

Personalizzare la grafica della pagina di login con Custom Login

Adesso, invece, vediamo insieme come modificare l’intera pagina di Login con il plugin “custom login”.

  1. Sezione di abilitazione del plugin
    Iniziamo con abilitare il plugin, spuntando il flag su “toggle this plugin on & Off”
  2. Sezione HTML
    permette di cambiare il colore di sfondo e addirittura di inserire una immagine di sfondo andando a personalizzare anche la Position, la Size (consigliamo di impostare la size “flex” in modo che si adatti a tutti i dispostivi su cui può essere visualizzata) e il Repeat (in caso di immagini più piccole che non si adattano allo schermo)
  3. Sezione Logo
    In questa sezione potrete scegliere il vostro logo, impostando molti campi, come larghezza, altezza, la Size, il Repeat e la Position proprio come per l’immagine di sfondo del punto precedente.
  4. Sezione Login form
    In questa sezione è possibile andare a modificare il layout del form di accesso in tutte le sue parti
  5. Sezione MISC
    In questa sezione potrete finire la vostra personalizzazione aggiungendo, modificando e rimuovendo l’effetto ombra del form ed i link che si trovano sotto il form di accesso.

Adesso avrete la vostra pagina di login bella modificata secondo le vostre esigenze o gusti grafici.

Personalizzare la URL di login di WordPress o creare un link personalizzato di accesso - WPS Hide Login

In ultima battuta, vediamo come andare a personalizzare la URL della pagina di accesso con un plugin leggero e di semplice configurazione.. WPS Hide Login.

Il plugin si compone di sole due voci:

  1. URL di accesso
  2. Redirection URL

URL di accesso

Basta inserire la vostra URL nuova che volete (ad esempio www.tuosito.it/accesso/) stando bene attenti ad inserire solo la parte finale; se si prende l’esempio appena fatto, nel form scriverete solo accesso senza / o l’indirizzo del vostro sito

Redirection url

In questo campo, invece, dovrete inserire una pagina di reindirizzamento per chi dovesse tentare l’accesso alla vecchia URL come wp-admin o wp-login.
Di default reidirizzerà alla pagina di errore 404 ma potete anche crearne una vostra custom.

Social login (accedere utilizzando i vostri account social)

Social login (accedere utilizzando i vostri account social)

Social login è un plugin distribuito gratuitamente che permette agli utenti del sito web, di effettuare la registrazione, prima, e il login, dopo, utilizzando uno dei vostri account social (attualmente sono presenti in lista più di 25 social da cui è possibile registrarsi)

Ovviamente ne fanno parte i big come Google, Facebook, Paypal, Linkedi, Twitter, Intagram e Yahoo.

Il plugin ha riscosso un bel successo, con più di 30.000 attivazioni e una media di 4 stelle su 5 come recensioni.

Personalizzare la pagina di login di WordPress anche in versione mobile

Arrivati in fondo a questa guida, se volete dare un tocco in più alla vostra pagina di login in versione mobile, vi consiglio di leggere e seguire questa guida per andare a personalizzare ulteriormente il login. La guida si chiama “Modificare layout sito mobile con CSS“.

CONCLUSIONI

Come potete vedere, questa guida per personalizzare il login WordPress, è molto semplice sia per chi optasse per la modifica grafica della pagina in CSS sia per chi volesse utilizzare il plugin e la modifica della URL è davvero molto molto semplice.

Per chi avesse dubbi sulla procedura o avesse delle domande specifiche, non esitate a scrivere nella sezione commenti.

]]> Come cambiare font in WordPress facilmente https://360smartweb.it/cambiare-font-in-wordpress/ Sat, 15 Feb 2020 12:30:58 +0000 https://360smartweb.it/?p=2931 Scopri ]]> In questa guida, vedremo come cambiare un font nel tuo sito web realizzato in WordPress, facilmente

Oggi vediamo insieme come cambiare un font in WordPress in modo facile e veloce.

Vi sarà capitato spesso di realizzare siti web, passando ore cercando il tema più adatto alle esigenze del cliente sia nell’aspetto che nelle funzionalità vero?!

E quante volte il cliente vi ha detto “ma si può cambiare quel font che così proprio non mi piace”, nonostante non abbiano minimamente le competenze grafiche e tecniche per esprimere un giudizio?

Bene, qui per alcune persone inizia il dramma, in quanto WordPress non ha una funzione nativa che permetta di andare a sostituire un font da uno all’altro e i temi che permettono di scegliere quale font utilizzare non sono molti, direi che sono quelli più commerciali e “multipurpose” che si prestano a molteplici usi.

Ma come cambiare font in WordPress in modo facile e veloce?

Scegliere il font che si vuole inserire nel sito web

Online ci sono molti servizi che permettono di comprare font o di scaricarne di gratuiti, come adesempio Google Fonts, Dafont, Fontsquirrel, Fontfabric tra i primi risultati in una ricerca in Google, o Adobe Edge Web Font o con Font.com o con plugin inseribili all’interno di WordPress.

Ma quindi quale metodo scegliere?

Noi della 360smartweb ci sentiamo di dirvi di inserirli manualmente, ma per fare ciò dovrete avere pieno controllo del sito web, avendo accessi FTP del vostro sito.

Quali tipi di font esistono?

True Type Fonts (TTF)
Forse il formato di font più conosciuto, sviluppato da Microsoft e compatibile con tutti i browser.

Open Type Fonts (OTF)
Anche questo formato è stato sviluppato da Microsoft, e come il TTF è supportato da tutti i browser.

Web Open Font Format (WOFF)
Sono font ottimizzati per il caricamento online, che aumentano la velocità di caricamento, e per questo consigliati dai creatori del noto plugin (W3T)

WOFF 2.0
Più compressi rispetto ai WOFF normali, con velocità di caricamento ancora più bassa, ma non supportati da browser come safari e ie, ma pienamente funzionanti con Chrome, Firefox ecc.

Embedded Open Type Fonts (OTF)
Sono font incorporati all’interno di una pagina e supportati da tutti i browser.

Convertire un font per rendere sicura la sua compatibilità

Web Font Generator

Uno dei servizi più conosciuti per la conversione dei font per il web è senza dubbio Web Font Generator.

La procedura è veramente semplice; non appena avete scaricato i file del font che vi serve da uno dei servizi sopra citati basterà che seguiate questi punti:

  • Accedete a Web Font Generator
  • Caricate il vostro file cliccando su “upload font” stando attenti alle condizioni contrattuali del font che avete scelto (controllate sempre che possano essere utilizzati all’nterno di un sito web, o in grafiche. alcune volte è richiesto l’accredito dell’autore, in caso di font free, cosa che non dovrebbe accadere con quelli a pagamento)
  • Scegliete la compressione del vostro file in uscita
  • accettate il trattamento dei vostri dati
  • Adesso cliccate su “download your kit”

Verrà fornito un file .zip contenente i vosti font ottimizzati per il web.

Aggiungere font personalizzati

Vediamo adesso come aggiungere font personalizzati manualmente all’interno del vostro sito web (questa procedura va bene sia per un sito creato in WordPress che in altri CMS o in semplice html).

Utilizzo di Google Font

Google Fonts
Google Fonts

Il miglior metodo, se riuscite a trovae il font che vi piace o che vi interessa, è quello di utilizzare Google Fonts che ha un vastissimo assortimento di fonts gia ottimizzati per il web, e subito disponibili per essere scaricati e inseriti.

Una volta che siete all’interno del sito web, sceglietene uno cliccando sulla “x” rossa relativa al font, e in automatico ve lo ritroverete in un finestrella in basso a destra.

Basta cliccarci sopra e vi appariranno i dettagli come da immagine qui sotto

Come potete vedere, c’è un link per l’embed automatico del font; basta inserirlo all’interno del tag head e tutto funziona.

La voce “specify in CSS” vi spiega come andare a richiamarlo, in questo caso sarà:

h1 {
font-family: 'Roboto', sans-serif;
}

ovviamente potete assegnare il font a tutte le classi e stili che volete.

Usare font personalizzati in WordPress tramite la function.php

In caso si voglia usare font personalizzati in WordPress, è necessario inserire un piccolo codice all’interno della funzione di richiamo dei fogli di stile nella function.php 

if(! function_exists('tuosito_styles') ) {

  function tuosito_styles(){
    wp_enqueue_style('tuosito-font','//fonts.googleapis.com/css?family=Roboto:300,400,700');

  }
}

add_action('wp_enqueue_scripts','tuosito_styles');

quella porzione di codice da inserire dopo // la potrete recuperare dall’immagine precedente 😉

NB: i numeri che ci sono dopo la scritta “Roboto” sono il classico “font-weight” che volete venga caricato.

Come integrare font personalizzati tramite @font-face

Per integrare font personalizzati tramite l’utilizzo di @font-face, è necessario che abbiate gli accessi ftp del vostro sito web.

Accedete con un client FTP (come FileZilla o Coda 2) alla root principale e create la cartella /fonts/ all’interno del tema child, in caso di WordPress (vedi qui come creare un tema child per WordPress) o nella root principale in caso di sito in html.

Una volta inseriti i file che vi servono dovete semplicemente caricarli all’interno dello style.css o in un tag <style></style> all’interno di una pagina (sempre meglio caricarlo nell’head).

Font personalizzati CSS

Per inserire font personalizzati CSS la sintassi con cui caricare il font è la seguente:

@font-face {
   font-family: 'Nome con cui vorrete richiamare il vostro font';
   src: url('font/nomefont.ext') format('truetype');;
}

Adesso per assegnare il font, per esempio ad i titoli ed i paragrafi, la sintassi è la seguente:

h1, h2, h3, h4, h5, h6, p {font-family: "Nome di richiamo scelto prima"}

Voilà… ricaricate la vosta pagine e assicuratevi che la procedura sia andata a buon fine.

Cambiare o aggiungere font a WordPress con un plugin

Wp Google Fonts

Wp Google Fonts
Wp Google Fonts

Wp Google Fonts è sicuramente il più conosciuto.

Questo plugin fa esattamente la solita procedura appena descritta, in auomatico, permettendovi di scegliere sia il tipo di carattere da Google Font e scegliare a quali elementi assegnare il nuovo carattere.

Per installarlo basta andare in “plugin > aggiungi nuovo> cercare Wp Google Fonts e installarlo/attivarlo”.

Use Any Font

Use Any Font
Use Any Font

Altro plugin che permette di caricare i font scaricati (OTF TTF ecc) e di assegnarli a classi specifiche.

Per installarlo basta andare in “plugin > aggiungi nuovo> cercare Use Any Font e installarlo/attivarlo”.

Cambiare font in WordPress attraverso il tema acquistato.

Come detto ad inizio articolo, ci sono dei temi che permettono di cambiare il font in WordPress attraverso le impostazioni del tema, o addirittura scegliendo l’opzione elemento per elemento.

Solitamente questi temi, sono quelli “multipurpose” ( che vanno bene in più situazioni ) e solitamente sono quelli più scelti dalle persone o che non hanno voglia di stare a smanettare con lo sviluppo del sito o che non ne sono proprio capaci o che, per motivi di tempo, si trovano a dover utilizzarli.

Questi temi, sono reperibili tramite Google, o tramite un noto servizio di raccolta di Temi, template, plugin, grafiche, suoni ecc, dal nome Themeforest.

Andando nella sezione temi > WordPress, potrete trovare migliaia di temi tra cui quelli di cui vi sto parlando. solitamente hanno 5 stelline, con migliaia di recensioni.

I più famosi sono:

Detto questo, la particolarità che li accomuna, è il fatto di avere un visual composer integrato che esso sia “Bakery Composer” o un plugin come Elementor o il nuovo Oxigen (i temi elencati hanno solo il Bakery composer o un composer simile nativo).

Comunque, chi un un modo chi in un altro, tutti questi permettono di cambiare font in WordPress.

Alcuni attraverso la sezione dedicata del tema, alcuni direttamente sull’elemento singolo ( Come Bakery) infine, alcuni permettono entrambe le soluzioni.

Esempio di schermata tramite il Visual Bakery Composer

Conclusioni

Come potete vedere dala guida, è molto semplice fare tutto ciò, basta avere un pizzico di familiarità con i CSS e con gli account FTP.

In caso aveste problemi di attuazione, contattatemi andando nella sezione contatti.

]]> Modificare pagina web singola con il CSS https://360smartweb.it/modificare-pagina-web-singola-css/ Tue, 24 Sep 2019 19:00:16 +0000 http://360smartweb-clone.local/?p=298 Scopri ]]> Oggi vediamo come modificare una pagina web singola con l’uso del css

Molte volte vi sarà capitato di voler modificare un sito internet, e in particolare di dare, ad esempio ad un semplice titolo H2, uno stile differente dal resto del sito web ma, ovviamente, andando a modificare il css per l’H2 nello style.css, appena inserisci il tag, tutto il testo messo in H2 prenderà il solito stile appena modificato.

Quello che c’è da fare è di rendere possibile che si possa modificare il tag h2 solo di una singola pagina.
Molti temi WordPress hanno il proprio CSS in style.css che formatta tutto il sito web secondo le proprie specifiche, ma per fortuna, WordPress permette comunque di modificare pagina web singola con il css.

Modificare pagina web singola con il CSS

Per poter modificare sito web, in particolare il css, i modi sono molti tra cui:

  • tramite plugin come My CSS
  • tramite la console di wordpress per il CSS aggiuntivo
  • tramite l’editor di wordpress modificando il file proprietario style.css (Sconsigliatissimo anche per chi sa dove mettere le mani)
  • tramite un programma editor di testo per l’html.

Il terzo punto, lo sconsiglio, se non si è installato un tema child, in quanto se viene modificato il file originale che formatta graficamente tutto il sito web, diventa un lavoro mooolto grosso per ripristinare se non si ha attivo un servizio di backup come parlato in precedenza in questo post qua

Qale che sia il metodo che userete, il modo di implementare il CSS è sempre il solito. Vediamo insieme.

1- Inserire CSS tramite plugin

Tra i più diffusi e pratici c’è sicuramente CUSTOM CSS che, anche se vi ho spiegato come fare su un editor CSS Unico, vi da la possibilità di inserire CSS anche pagina per pagina come c’è gia nei temi premium.

Simple custom CSS and JS
Simple custom CSS and JS

Altrimenti c’è SIMPLE CUSTOM CSS O JS, che vi permette di inserire i css in un file unico (e sicuramente più leggero, a patto che non si esageri)

2- Inserire CSS tramite console di WordPress

Aggiungere il CSS dalla schermata "personalizza"
Aggiungere il CSS dalla schermata “personalizza”

Per entrare in questa sezione vi basterà entrare nella vostra Dashboard di WordPress e nella barra di sinistra cliccare su aspetto > Personalizza > CSS aggiuntivo (O edit CSS) et voilà

3- Inserire CSS tramite editor del tema

Come detto prima, vi sprono a non utilizzare questo metodo, ma se proprio volete, almeno installate un tema child per evitare ogni modifica indesiderata che renderà difficile il ripristino
Vi basterà entrare nella vostra Dashboard di WordPress e nella barra di sinistra cliccare su aspetto > Editor. troverete, oltre il file style.css anche tutti i file php che potrete modificare a vostro rischio e pericolo.

4- Inserire CSS tramite editor di testo come “Sublime text”

Se siete un po’ più pratici dell’argomento, e avete accesso ai file del vostro sito web, recatevi pure, aprendo il sito web in FTP con programmi come FileZilla, nella cartella wp-content>themes>tuo-tema e aprite il file con un programma per html semplice quanto potente, che si chiama Sublime text.

É un programma molto intuitivo che serve per modificare pagine web (solitamente per modificare file html), specialmente per modificare html, php, js ecc.

Adesso si aprirà una schermata che vi mostrerà tutti gli stili e le classi che sono state utilizzate all’interno del sito web.

Ovviamente, se l’autore del tema aggiornerà quello che state utilizzando, andrà a cancellare tutto il vostro lavoro eseguito sullo style.css, ma poco male, basta creare uno child theme (letteralmente tema figlio) che vi permette di modificare tutto quello che volete senza andare a perderne le modifiche. Vedi il mio post Creare un child theme in WordPress

Individuare il page-id ovvero l’ID della pagina

Ogni pagina ha un ID univoco su cui possiamo lavorare. Per trovare questo codice, è necessario usare un Browser come Google Chrome o Firefox.
Entriamo nella pagina di nostro interesse e apriamo la console per sviluppatori, per farlo basta cliccare con il tasto destro del mouse e cliccare su ispeziona (in chrome) o analizza elemento (in firefox).

Vedrete che nella prime righe del tag <body> tra le classi ci sarà quella con scritto page-id-xx dove xx è un numero identificativo

Trovato il numero siamo in grado di modificare il singolo elemento all’interno della pagina. Se per esempio vogliamo modificare i margini di una riga, la sintassi normale sarebbe:

.row1 {
    margin: 10px 10px 10px 10px;
}

ma fatto così, tutti gli elementi row1 se non sono univoci, verranno modificati all’interno dell’intero sito web. Per ovviare a questo ci viene in aiuto la classe appena trovata, il CSS diventerà quindi il seguente:

.page-id-16 .row1 {
    margin: 10px 10px 10px 10px;
}

se invece dovete cambiare semplicemente un tag h2, p ecc allora la sintassi è:

.page-id-16 h2 {
    color: #309303;
}

Adesso sapete come modificare un sito web, e una pagina singola e potrete modificare qualsiasi singolo CSS del vostro sito web.

Se hai necessità di qualcosa di più specifico o se vuoi semplicemente una consulenza, CLICCA QUI e compila il form di contatto

]]> Nascondere la sidebar in mobile: WordPress https://360smartweb.it/nascondere-la-sidebar-in-mobile-wordpress/ Sat, 21 Sep 2019 16:00:03 +0000 https://360smartweb.it/?p=2728 Scopri ]]> Oggi andremo a vedere come nascondere la sidebar in mobile version in WordPress

Buongiorno a tutti i lettori,
vi è mai capitato di visitare un sito web, da mobile, con scroll di pagine infinite anche quando l’articolo che dovete leggere è solo di pochissime righe? Questo accade, nella maggior parte dei casi, per “colpa” della sidebar che viene visualizzata in fondo alla pagina, dopo il vostro articolo.
Ma come nascondere sidebar in mobile in WordPress?

Come nascondere la sidebar Nella versione mobile di un sito web

Il modo più semplice è quello di usare i CSS per nascondere la sidebar in versione mobile, inserendo una query che vada a dire a WordPress, che quando un utente visualizza la pagina web tramite device piccoli, come smartphone o tablet, la sidebar debba essere nascosta (Attenzione, non rimossa, verrà comunque caricata insieme alla pagina)

Ma come fare tutto ciò?

Supponendo di avere una struttura della sidebar come nell’esempio seguente:

<aside class="col-md-4 sidebar">
    <h3>TITOLO DELLO WIDGET</h3>
    <p>Testo dello widget</p>
</aside>

Basterà aggiungere al CSS del vostro sito web la seguente stinga

@media (max-width:767px){
    aside.sidebar {
    display:none;
  }
}

Tecnicamente il codice dice:
per una larghezza massima del dispositivo (767px comprende sia tablet che smartphone), il selettore aside.sidebar non mostrarlo.

Ovviamente nei restati punti di interruzione la sidebar verrà mostrata.

Eliminare la sidebar dalla pagina per desktop e mobile

Nascondere la sidebar in mobile in WordPress per desktop e mobile
Eliminare la sidebar dalla pagina per desktop e mobile

Se invece, il vostro intento è quello di andare completamente a rimuovere la sidebar dalle vostre pagine e/o post, possiamo agire andando a rimuovere un template tag dalla page.php o single.php del vostro tema wordpress.

Dando già per scontato che usiate un Theme Child (un tema figlio) che vi permette di apportare modifiche al tema primario senza andare ad inficiare in nessun modo sul corretto funzionamento, andate pure ad aprire la page.php e copiate in contenuto al suo interno.

Create una nuova pagina con il nome page-no-sidebar.php e inserite il contenuto al suo interno.

Adesso ad inizio della pagina, cercate la voce 

<?php get_header();>

e andate a sostituirla con la seguente stringa

<?php
/*
*
Template Name: No sidebar
*/
get_header(); ?>
Layout pagina web dopo aver rimosso la sidebar
Layout pagina web dopo aver rimosso la sidebar

Adesso, nelle vostre pagine avrete la possibilità di utilizzare questo template, che vi permetterà di non visualizzare la sidebar ( come potete vedere dall’immagine sopra ) e con un pizzico di css potrete aggiustare la pagina web in full-width per farla diventare così:.

Basterà che dalla console di Chrome, firefox etc, andiate a trovare il container del contenuto principale e gli diate un valore

article {
    width:100%;
}

NB: non in tutti i temi il selettore sarà un “article”, per questo motivo dovrete scoprire il vostro dalla Console di Chrome.

Conclusioni

Che si mostri la sidebar in versione Desktop e si vada a nascondere solo in versione Mobile, o che si rimuova completamente, i passaggi da fare sono veramente semplici e alla portata di molti.

Se avete problemi con la procedura, o volete dei consigli, commentate pure il post.

#nascondere sidebar WordPress #rimuovere sidebar WordPress

]]> Come impostare titoli e paragrafi per la SEO https://360smartweb.it/come-impostare-titoli-e-paragrafi-per-la-seo/ Mon, 26 Aug 2019 13:00:10 +0000 http://360smartweb-clone.local/?p=239 Scopri ]]> Come impostare titoli e paragrafi per la SEO. 
Ma cosa sono e come si utilizzano i titoli (h1 h2 h3 h4 h5 h6) e p (paragrafo) per una SEO  efficiente?

Oggi vediamo come impostare titoli e paragrafi per la SEO e in particolare a cosa servono i titoli delle pagine dei siti o dei blog e come utilizzare i paragrafi in modo ottimale. 
Dobbiamo, per prima cosa, distinguere tra Tag Title e Tag H1 e H2.

Questi tag hanno un impatto fondamentale sul SEO del tuo sito.

Tutti i siti web creati da noi, sono ottimizzati con tutti i tag al loro posto per strategie SEO di prima categoria.

Il Tag Title o H1

deve essere lungo meno di 70 caratteri, questo perché Google ha il limite di nella visualizzazione dei risultati di ricerca, per evitare che sia troncato o i motori di ricerca scelgano di visualizzare un testo diverso al suo posto. Ci sono alcuni testi che possono andare oltre i 70 caratteri, in base alla larghezza in pixel di ogni lettera, pa prendiamo per buono quello detto in precedenza…

Deve contenere keywords

Ovvero le parole chiave che gli utenti potrebbero cercare nei motori di ricerca, e deve racchiudere anche una descrizione accurata e sintetica del contenuto di una pagina.

Gli spider di Google, o di altri motori di ricerca, vanno a verificare la coerenza delle keyword inserite, confrontandole con la descrizione e il titolo del post\pagina che state creando. Maggiore sarà la coerenza, migliore sarà il risultato.

Contenuti della pagina o del post, il Tag H1 deve essere lo stesso del titolo della pagina (non del sito), in grassetto o comunque in evidenza rispetto al testo. Offre al cliente un’idea chiara di ciò di cui si parla all’interno della pagina.

Ogni motore di ricerca, da molta importanza all’usabilità di un sito web, ovvero alla chiarezza e alla facilità di “lettura” di una pagina web, quindi maggiore sarà la “semplicità” con una buona chiarezza di lettura, maggiore sarà il rank che verrà associato alla pagina.

Inserire un solo Tag H1 per pagina.

I tag vanno da H1 a H6, ma H1 e H2 sono i più importanti. Sta all’utente decidere a quali parti del testo dare più importanza, per cui H2 può essere un sotto-paragrafo di H1 o il sottotitolo di H1.

L’importante è scrivere in maniera chiara sia per i motori di ricerca che per chi naviga il sito. Ogni pagina, quindi, può essere divisa in parti principali o secondarie a seconda dei tag H2, H3, H4 assegnati.

Facciamo un esempio pratico

<h1>Questo è il titolo della pagina con keyword</p>

<p>Testo di presentazione</p>

<h2>Sottotitolo importante della pagina con keyword</h2>

<p>testo riguardante l’argomento di h2</p>

<h3>Sottotitolo meno importante ma di un certo valore </h3>

<p>Testo riguardante h3</p>

Il tag p o paragrafo

Il tag paragrafo <p> è il contenitore di tutto il testo che si presenta sotto un titolo o sottotitolo.

Potremmo stare a parlare per molte ore riguardo questo semplice tag, ma le nozioni principali sono elencate qui di seguito

  • Il primo paragrafo deve contenere la keyword principale
  • paragrafo ad alta leggibilità
  • deve argomentare nel modo giusto ciò che è stato scritto nel titolo
  • Keyword density e sinonimi

Deve contenere la keyword principale

Se siete del mondo della SEO (se state leggendo qui probabilmente non lo siete) saprete già che è uno step fondamentale. Il primo paragrafo deve contenere la keyword principale che abbiamo impostato per la pagina.

Non ci sono escamotage.

Big G (Google) vuole sapere con chiarezza di cosa andremo a parlare all’interno della pagina, e quale modo migliore se non quello di dirlo subito ad inizio del primo paragrafo?

Deve avere un’alta leggibilità

Immagino che avrete già installato il vostro plugin per la SEO, e vi sarà capitato sicuramente di imbattervi nei semaforini di YOAST giusto?

Se notate bene, alla linguetta “leggibilità” ci sono dei semplici suggerimenti che vi aiutano a formattare il testo per renderlo molto più leggibile tra cui:

  • non creare frasi troppo lunghe
  • non creare paragrafi troppo lungi
  • parlare in 1° persona
  • non utilizzare frasi e parole troppo complicate
  • non cominciare più frasi consecutive con la solita parola
  • Usare forme di frase attiva
  • Usare titoli e sottotitoli per spiegare meglio l’argomento

Seguite questa lista e avrete un testo ad alta leggibilità.

Deve argomentare nel modo giusto ciò che è stato scritto nel titolo

Inutile spiegarlo.

Se parlate di come si fa a montare un mobile Ikea, dovete assolutamente dare un valore aggiunto alla persona che sta leggendo il vostro articolo spiegando per filo e per segno come si fa a montare un mobile Ikea.. non vi dilungate troppo.

Una persona che cerca una guida, cerca il modo più veloce e semplice di fare ciò per cui cerca.

Keyword density e sinonimi

Questo punto, fa sorgere da anni controversie nel mondo della SEO.

Con i vecchi algoritmi di Google, la keyword density aiutava molto a posizionare una pagina web, mentre con i nuovi, il ruolo è diventato più marginale.

I sinonimi, invece, sono solo valore aggiunto e keywords secondarie, che possono solo aiutare voi nell’argomentare e l’utente, per una lettura più facile e discorsiva.

Il mio consiglio è quello di trovare il giusto compromesso per la ripetizione delle keywords (4 volte sono più che sufficienti), e di usare molti sinonimi.

Conclusioni:

É come se fosse una piramide, imparate ad usarli nel modo più corretto e Google vi premierà con un miglior posizionamento nella SERP per aver usato un metodo di lavoro di facile lettura, anche dei BOT dei motori di ricerca (Googlebot).

Se avete domande, dubbi o consigli da scambiare, vi invito a commentare questo articolo in modo da iniziare una bella discussione che può portare molte persone ad imparare.

]]> Video Youtube responsive https://360smartweb.it/rendere-i-video-di-youtube-responsive/ Fri, 02 Aug 2019 12:14:38 +0000 https://360smartweb.it/?p=2666 Scopri ]]> Oggi scopriamo come rendere i video Youtube responsive su una pagina web

Per rendere i video Youtube responsive su una pagina web, la procedura è abbastanza semplice, basta avere un minimo di dimestichezza con l’html e inserire nello style.css delle classi particolari.

Con l’avvento di Gutenberg in WordPress 5.x, rendere un video responsive è sufficiente copiare il link del video di Youtube e inserirlo all’interno di un qualsiasi testo all’interno della pagina, che Wp crea un codice “embed” automatico con un blocco Youtube html 5.

Questa procedura, però, permette soltanto l’inserimento con una dimensione standard, che non rispetta i nuovi standard per i layout responsive, sarà nostro compito, andare ad inserire una classe css per far si che si adatti a tutti i dispositivi in modo responsive.

Vediamo insieme come renderlo possibile

Come incorporare un video di Youtube su una pagina wordpress metodo 1

Youtube link

Rendere i video di Youtube responsive

Per incorporare un video di Youtube basta andare sul social network video più famoso del mondo all’indirizzo www.youtube.it e cliccare alla voce “condividi”. Si aprirà una finestrella che permette di condividere il video attraverso vari servizi, e sotto di questa potete vedere un link “ridotto” con un tasto sulla destra “Copia”. Cliccateci e copiate il link appena generato.

Incorporare un video youtube in una pagina WordPress | 360smartweb
Incorporare un video youtube in una pagina WordPress

Adesso vi basterà inserire il link appena copiato all’interno di un blocco di wordpress et voilà, il video sarà incorporato.

Come incorporare un video di Youtube su una pagina wordpress metodo Scelto da 360Smartweb

Youtube iframe

Come nel punto precedente, aperta la finestrella, potete cliccare sulla voce “incorpora”. Si aprirà una finestra che presenta il video sulla sinistra, e sulla destra un codice html con un tag <iframe>. Copiate tutto il codice e incollatelo sulla pagina WordPress.

Video incorporato 😉

Adesso vediamo come Rendere i video di Youtube responsive

Se esaminate bene il codice, vedrete subito la voce width=”px” (Larghezza del video) e height=”px” (Altezza del video). Sarà la prima cosa che un utente pensa di andar a modificare per rendere il video responsive.. peccato che non funziona.

Fase 1: Creare un Div con classe “video-youtube”

La sintassi è semplice:

<div class="video-youtube">codice copiato in precedenza</div>

Nel codice che avete appena incollate, è importante che andiate a cancellare le voci sopra citate “width” e “height”.

Andiamo adesso a lavorare un po’ nel css. Possiamo farlo sia attraverso il file style.css se siete un po’ pratici, o altrimenti cliccate nel menù di sinistra alla voce aspetto > personalizza > css aggiuntivo.

Inserite qui al suo interno il codice seguente (ringraziamo Techyou per il codice css)

.video-youtube {
position: relative;
padding-bottom: 56.25%;
padding-top: 35px;
height: 0;
overflow: hidden;
}
.video-youtube iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}

Metodo alternativo

Se non siete pratici di modifiche a codici ecc, il metodo più veloce, facile e sicuro è quello di installare il seguente plugin:

SHORTCODES ULTIMATE

Shortcode ultimate
Shortcode ultimate

Cliccate alla voce “plugin” nella barra di sinistra e “aggiungi nuovo”.
Cercate “Shortcodes ultimate” e installate il tutto.

Adesso, se inserite un nuovo blocco con l’editor classico di WordPress o semplicemente attraverso un blocco paragrafo, apparirà un icona [ ] che vi permette di eseguire innumerevoli azioni, tra cui l’inserimento di un video di youtube, in modalità responsive. 😉

Il risultato che otterrete è il seguente:

[su_youtube url=”https://youtu.be/VMp55KH_3wo” width=”900″ height=”660″]

Conclusioni

Fateci sapere quale metodo avete utilizzato e il motivo, o semplicemente se avete riscontrato problemi nella procedura.

]]> Guida principianti: Come installare WordPress da zero https://360smartweb.it/guida-principianti-come-installare-wordpress-da-zero/ Fri, 11 Jan 2019 09:55:41 +0000 https://360smartweb.it/?p=2010 Scopri ]]> Vuoi crearti un sito da solo, hai sentito parlare delle potenzialità di WordPress, ma non sai nemmeno come si installa? Segui questa pratica guida per principianti su come installare WordPress da zero.

Le installazioni di WordPress posso essere fatte o direttamente nel vostro hosting, oppure in locale (direttamente sul vostro computer); vediamoli insieme.

Installare WordPress in locale

Installare WordPress locale con Local By Flywheel

Vediamo il primo caso in cui andremo ad installare WordPress su mac o su pc in locale con l’ausilio di un favoloso programma che vi aiuterà non poco, rendendovi la vita decisamente semplice: Local By Flywheel.

Questo programma, vi permetterà di creare infiniti siti web in locale, andando a installare in modo del tutto automatico una versione aggiornata di WordPress sul vostro hardisk senza dover conoscere codici, metodologie particolari ecc.
Vi basterà seguire le immagini qui sotto ed il gioco è fatto

  • Aprite Local
  • cliccate sul + in basso a sinistra
  • Date un nome al sito web
  • Scegliete se installare una versione di default o custom
  • Inserite il nome utente, password e email di amministrazione che volete
  • premete su ADD SITE (o aggiungi sito)

Fatto, semplice e veloce!

Come potete vedere dall’ultima immagine, ad installazione conclusa, avete tutti i dati che vi servono a portata di mano

  • Tipo di web server (in locale è nginx ma trasportando online va bene anche apache)
  • versione del php
  • Versione di MySql
  • Versione di WordPress
  • Path di installazione del sito in locale.

Adesso potete godervi un installazione pulita di WordPress in locale.

Installare WordPress online sul vostro hosting/dominio

I metodi possono essere molteplici tra cui i principali:

  1. Tramite FTP | scaricando il file .zip
  2. Tramite il vostro fornitore di hosting | dove avete acquistato il dominio e il vostro spazio web
  3. Tramite il vostro fornitore di hosting | acquistando direttamente un hosting WordPress
  4. Affidarsi ad un’agenzia web che lo farà al posto vostro

Scopri come installare WordPress da zero.

Installare WordPress su aruba tramite FTP:

Acquisto dominio e hosting

Il metodo migliore, secondo la mia esperienza, per avere un’installazione pulita è il seguente:

Supponendo che non abbiate comprato nessun dominio né hosting, andate sul sito del vostro fornitore di servizi preferito (es: siteground.it, register.it o aruba.it) e provvedete ad acquistare un dominio con hosting associato linux (anche la versione easy va più che bene).

Per comodità prendiamo come esempio gli step su Aruba.

Acquisto piano linux su Aruba per installazione WordPress

Recupero dei dati FTP

Una volta che avete acquistato il servizio dominio+hosting (circa 24€ annui+Iva) vi arriveranno una serie di e-mail, con i dati di accesso al vostro pannello di controllo, una e-mail con i dati di accesso ai vostri database (ne danno 5 di default), i dati di accesso tramite FTP e altre info generiche.

Segnatevi tutti i dati, stampate le e-mail per sicurezza e mettetele in un luogo sicuro.

Download WordPress Ita

Il secondo punto è quello di scaricare dal sito originale, il file .zip per installare WordPress.

Visitate il sito ufficiale di Wordpress e scaricate, cliccando sul tasto centrale, l’ultima versione in modo da avere la massima stabilità e una volta fatto, decomprimete lo Zip.

Caricamento tramite FTP dei file di wordpress

Dopo alcune ore, o in alcuni casi pochi giorni, il vostro dominio con il vostro hosting saranno attivi.

Una volta fatto ciò scaricate Filezilla, un programma per l’accesso alle varie cartelle FTP dei vostri siti. Installatelo, apritelo e cliccando su “file” > “gestore siti” andate ad aggiungere la vostra posizione che trovate nelle e-mail precedentemente ricevute, quali User (su Aruba è una serie di numeri come 123456@aruba.it) password e indirizzo ftp (solitamente è ftp.nomesito.xx).

Adesso cliccate su connetti, e vi si aprirà una cartella “vuota”, che sarà la vostra cartella principale del sito che andrete a costruire.

Inserite nella cartella vuota, tutti i file da poco decompressi

Installazione WordPress con il Wizard

Una volta che i file sono tutti online, andate su nomesito.xx/wp-admin/install.php e partirà il wizard.

Wordpres: wizard step 1
Wordpres: wizard step 2

Una volta caricati i file, aprite il vostro sito (nomesito.xx) e seguite a video quello che vi chiede, tenendo sempre conto che tutti i dati che vi chiederà, li troverete nelle mail di Aruba.

A Fine del processo di installazione, andate su nomesito.xx/wp-admin e vi chiederà i dati di accesso che avrete definito durante l’installazione di WordPress.

Cliccate su accedi et voilà.

Edit | 2019
In alcuni casi l’installazione di WordPress va a buon fine ma non accede al pannello di controllo (quello che si trova in /wp-admin).
In questo caso, aprite tramite FTP e cercate nella root principale il file Wp-config-sample.php e rinominatelo in wp-config.php.
A questi punti apritelo con un semplice editor di testo e andate a sostituire i valori come:

  • database_name_here = il nome del vostro database
  • username_here = il nome del vostro utente per il vostro database
  • password_here = la password del database
  • localhost = lasciatelo così com’è

Installare WordPress aruba semi-automatico

Come per il punto (installare WordPress tramite FTP), dovrete acquistare il servizio dominio+hosting linux, eseguendo la solita procedura.

Una volta che il vostro dominio/host è attivo, andate su Aruba.it cliccate in alto a destra su “area clienti” e sul menù che scenderà, sulla sinistra troverete il titolo HOSTING E DOMINI, sotto ci sarà la voce Area Clienti

Aruba: area clienti per installare WordPress

Vi si aprirà l’elenco dei vostri domini attivi, cliccate sul tasto pannello di controllo.

Aruba entrare in Pannello di controllo

Arriverete ad una pagina come in immagine

Aruba | Softaculous per installare WordPress

Cliccate su Softaculous App e eseguite l’installer simile al metodo precedente. Vi chiederà tutti i dati che avrete già nelle e-mail che avete ricevuto e vi farà creare un utente con cui accedere alla dashboard di Wp.

A Fine del processo di installazione, andate su nomesito.xx/wp-admin e vi chiederà i dati di accesso che avrete definito durante l’installazione di WordPress.

Cliccate su accedi et voilà.

Installare WordPress su Aruba in automatico

Eccoci arrivati al metodo più veloce che ci sia…

Dalla homepage di Aruba (come altri siti come Register.it ecc.), cliccate su prodotti e servizi>hosting e domini

Aruba: acquisto hosting e dominio

Scegliete il piano comprensivo dell’installazione di Wordpress.

Aruba| Hosting WordPress

Vi arriverà una e-mail in più rispetto agli esempi precedenti, con i dati di accesso direttamente a WordPress.

È un metodo molto veloce questo, ma alcuni fornitori di hosting, installano di base alcuni plugin (vedi Siteground che installa un plugin di caching).

Installare WordPress su altri hosting come Register.it o siteground

Non c’è niente di più semplice.

Dopo aver acceduto al vostro pannello di controllo del vostro hosting (stavolta prendiamo in esame Register.it ma è la medesima cosa con siteground ecc), accedete al cPanel e scorrete un po’ la lista di icone che vi si presenta davanti.

Se guardate bene, c’è la voce “WordPress”.

Basta cliccarci sopra e verrete catapultati alla sezione di installazione di Wp.

Se guardate quest’ultima, la procedura guidata è molto semplice.. cliccando su installa vi si aprirà una sezione in cui andare ad inserire i dati (per la maggior parte sono pre-compilati e vanno bene così) e vi verrà fornita una parte che spetta alla scelta del tema da utilizzare.

Potete tranquillamente lasciare quella di default e installare il tema in un momento successivo.

Come per “local”, inserite user password e email amministratore e cliccate su “fine”.

Fatto 🙂

Conclusione

Se avete notato, il punto 1 e il punto due, si differenziano praticamente solo dal fatto che nel primo caso si spostano i file di installazione tramite FTP mentre nel secondo si usa un’app sul gestionale per fare ciò… in entrambi i casi dobbiamo far partire comunque un’installazione. J

Quale che sia il metodo che userai per installare WordPress, non è niente di così difficile, c’è solo da perdere un po’ di tempo e da tenere conto di alcuni dati in caso si voglia installare in manuale o in semi-automatico.

Consiglio

Se sei veramente alle primissime armi con WordPress e non sei proprio portato per la tecnologia in generale, allora ti consiglio di acquistare direttamente il dominio con l’installazione di WordPress compresa, non sono cifre proibitive.

Se invece sei portato alla tecnologia e vuoi risparmiare il 50% dei soldi, puoi seguire i metodi 1 o 2

Se hai dubbi parlane nei commenti

]]>