Homepage » WordPress » Ottimizzazione della velocità di WordPress con icone di condivisione sociale personalizzate
Ottimizzazione della velocità di WordPress con icone di condivisione sociale personalizzate
Potrebbe sembrare un compito facile, ma l'aggiunta di buoni pulsanti di condivisione sociale a un sito WordPress può essere una seccatura. Quando dico che mi sto comportando bene intendo semplici, leggeri, facili da usare, veloci, i plug-in di social sharing non sono così. Tendono a mangiare risorse come pazzi e perché qualcuno dovrebbe voler aumentare il tempo di caricamento del plugin del 25-35% solo per visualizzare alcune icone sul loro sito?
La buona notizia è che non è necessario un plug-in per svolgere questo compito. In questo tutorial, ti mostrerò come puoi facilmente aggiungi pulsanti di condivisione social personalizzati alla fine dei post sul tuo sito WordPress con solo poche righe di codice.
Passaggio 1: generare i pulsanti di condivisione social
Useremo il Simple Sharing Buttons Generator, uno strumento web pratico e facile da usare per generare le icone di condivisione. Il vantaggio principale di questa app è che i pulsanti generati vengono eseguiti sul frontend, quindi non caricheranno il tuo server e puoi anche mantenere le attività dei tuoi utenti private.
Per generare i tuoi pulsanti personalizzati, vai qui e premi Inizio. Scegli 1 tra i 6 diversi stili di pulsanti. Clic Il prossimo e spuntare il social networks vuoi aggiungere al tuo sito. Quando hai finito, dovrai riempire le informazioni del tuo sito web.
In questa schermata (sotto), troverai due opzioni: 'No JavaScript' e 'JavaScript'. zecca JavaScript, in quanto consentirà al browser di rilevare l'URL in modo dinamico, pertanto i visitatori saranno in grado di condividere ogni post singolarmente non solo l'URL della home page.
Infine, dai un'occhiata all'anteprima dal vivo, scarica il set di icone prescelto e prendi il codice che hai generato.
Passaggio 2: crea un tema figlio
Ora dovrai aggiungere le icone e il codice generati al tuo sito. Prima di tutto dovrai creare un tema figlio.
Puoi facilmente creare un tema figlio WP con l'aiuto del nostro tutorial, oppure puoi seguire i passaggi di questo articolo del Codex WP. Se ne hai già uno, puoi saltare al passaggio 3.
Il tema del bambino si riferisce al tema che usi attualmente - in un modo piuttosto simile in cui un bambino si riferisce ai suoi genitori. esso eredita tutto (stile e funzionalità) dal tema principale ma tu puoi aggiungere funzionalità extra ad esso.
Nel nostro caso, le funzionalità extra saranno i pulsanti di condivisione social personalizzati.
Passaggio 3: creare una funzione personalizzata che visualizza le icone
Aggiungeremo una funzione personalizzata al file functions.php del tema figlio.
Con l'aiuto di questa funzione sarai in grado di aggiungere le icone social ovunque sul tuo sito usando un hook di azione personalizzato. Se il tema figlio non ha ancora un file functions.php, crea un file di testo vuoto nella cartella radice del tema figlio con le funzioni nome e modifica la sua estensione in .php.
Inserisci la seguente riga di codice in questo file vuoto:
Quando il tuo functions.php file è impostato aggiungere il seguente frammento di codice ad esso:
/ * * Aggiunge le icone di condivisione social personalizzate * / function add_social_sharing () ?>
Condividi questo post
Finalmente elimina la riga del commento HTML dallo snippet di codice sopra e sostituirlo con il codice HTML hai generato nel passaggio 1 con il generatore di pulsanti di condivisione sociale.
Passaggio 4: copiare il file di modello appropriato nella cartella dei temi figlio
Per impostazione predefinita, i singoli post sono retti da un file modello chiamato single.php. A volte - specialmente in temi più moderni - la struttura di single.php è più complicato, in quanto carica anche file di template aggiuntivi. In questo passaggio dobbiamo trovare il file modello appropriato in cui aggiungere le icone in un secondo momento.
Per individuare il punto giusto per i pulsanti social dobbiamo trovare il file modello contiene la funzione che carica il contenuto dei singoli post.
Apriamo l'editor dei temi nella dashboard dell'amministratore di WordPress sotto Aspetto> Editor. Nell'angolo in alto a destra trovi un elenco a discesa in cui puoi selezionare il tema principale. Sotto il menu a discesa puoi vedere tutti i file modello contenuti nel tema principale. Scorri verso il basso fino a trovare il Modello a singolo post (chiamato single.php) e aprilo.
Se il tema principale utilizza il get_template_part () Funzione WP in single.php file che significa che utilizza un file modello aggiuntivo per caricare il contenuto del singolo post.
Per prima cosa devi scoprire quale è questo. Il nome del file modello aggiuntivo è il primo parametro di get_template_part () funzione.
Il primo parametro è 'soddisfare' il che significa che cerchiamo il file modello chiamato content.php. È necessario copiare questo file dalla cartella principale del tema principale alla cartella principale del tema figlio in modo da modificarlo.
Passaggio 5: aggiungere il gancio di azione al file di modello corretto
Abbiamo creato una funzione chiamata add_social_sharing () nel passaggio 3 e l'abbiamo collegato a un hook di azione personalizzato chiamato custom_social_share. Ora dovremo aggiungere questo hook nel punto in cui vogliamo che la funzione venga eseguita.
Ecco lo snippet di codice che dovrai inserire nel posto giusto:
Quindi, troviamo il posto giusto.
Apri il file modello che hai aggiunto al tuo tema figlio nel passaggio 4 in un editor di codice o all'interno dell'editor di temi del dashboard di amministrazione di WordPress e cerca il il contenuto() funzione.
Controlla se c'è un wp_link_pages () funzione subito dopo il contenuto() funzione. Se c'è, allora lo snippet di codice sopra viene dopo quello; altrimenti segue il il contenuto() funzione.
Passaggio 6: aggiungere il codice CSS al tema figlio
Apri il style.css file del tema figlio nell'editor di codice o nell'editor di temi della dashboard di amministrazione di WordPress, copia il codice CSS generato nel passaggio 1, incollalo alla fine del file e salvalo.
Aggiungeremo due righe aggiuntive al file CSS per rendere le icone di condivisione sociale correttamente visualizzate in ciascun tema. Copia e incolla il seguente snippet di codice alla fine del style.css file:
ul.share-buttons li a border: 0; ul.share-buttons li img display: inline;
Passaggio 7: caricare il set di icone dei social media sul server
Carica il set di icone dei social media scelto scaricato nel Passaggio 1 nella cartella dei temi figlio. Collega il tuo server tramite FTP, crea una nuova cartella chiamata immagini all'interno della cartella principale del tema figlio (/ wp-content / themes / your-child-theme / images) e carica l'icona qui.
Denominiamo la cartella immagini perché questo è il nome predefinito della cartella di immagini che utilizza il Generatore di pulsanti di condivisione semplice.
Passaggio 8: controllare il percorso dei file delle icone
Dopo aver caricato le icone dei social media sul tuo server al punto 7, è importante controllare il percorso dei file delle icone per assicurarti che vengano caricate.
Il percorso di un file immagine fornisce un suggerimento al browser sulla sua posizione sul server. Controlliamo i percorsi dell'immagine all'interno del functions.php file del tema figlio. Apri il file nel tuo editor di codice e vai a add_social_sharing () funzione in cui è necessario verificare il codice HTML generato con il Generatore di pulsanti di condivisione semplice.
Nel codice HTML troverai un tag con un src attributo per ogni icona. Controlla se ciascuno src attribuisce i punti alla posizione esatta in cui è stato caricato il set di icone nel passaggio 7.
Il generatore di pulsanti di condivisione semplice aggiunge percorsi relativi a File. Qualche volta i browser non possono eseguire il rendering delle immagini se si utilizza un percorso relativo, quindi è una buona idea usa invece percorsi assoluti. In questo modo, ogni browser potenzialmente utilizzato dai visitatori può essere sicuro della posizione dei file di icona richiesti.
Il percorso dell'immagine relativa aggiunto dal generatore è simile a questo:
Cambiamo il src attributo di ogni icona su un percorso assoluto che significa che includerà l'URL completo del file.
Il percorso URL sopra sarà simile a questo:
Passaggio 9: caricare i file modificati e attivare il tema figlio
Collega il tuo server via FTP e carica tutti i file che abbiamo creato in questo tutorial che non hai ancora caricato: il functions.php, il style.css, e il file modello appropriato (in questo tutorial o il single.php o il content.php).
Infine attiva il tema figlio nella dashboard dell'amministratore di WP sotto il Aspetto> Temi menu.
Ora sei pronto con le tue icone di condivisione del social super leggero, a risparmio di risorse e personalizzate. Puoi andare online e controllarlo dal vivo sul tuo sito.
Conclusione
In questo tutorial ti ho mostrato come aggiungere i pulsanti di condivisione social personalizzati alla fine dei singoli post. Puoi aggiungere le icone di condivisione a qualsiasi altra posizione sul tuo sito web con l'aiuto del gancio di azione che abbiamo creato.
Basta aggiungere il codice che abbiamo usato nel passaggio 5 nel punto in cui desideri visualizzare i pulsanti:
Dovrai anche trovare il file modello giusto se vuoi posizionare le icone da qualche altra parte. Le singole pagine sono governate da un file di modello chiamato page.php, mentre gli allegati multimediali come le immagini sono caricati da attachment.php.
Se desideri visualizzare i pulsanti di condivisione social in un punto diverso del tuo sito web, puoi utilizzare la gerarchia dei modelli di WordPress per trovarlo.
