Come creare pulsanti di condivisione social in GeneratePress?

In questo tutorial, esamineremo Come creare pulsanti di condivisione social in GeneratePress?

Ciò ti aiuterebbe senza dubbio a migliorare la promozione multicanale del tuo post sul blog. Ciò a sua volta aumenterà la tua presenza sul web.

Ti mostrerò come costruire pulsanti di condivisione social permanenti che galleggiano sul front-end dei post del tuo blog. Ciò significa che saranno sempre visibili al tuo pubblico.

Possiamo raggiungere questo obiettivo tramite un plugin, ma la parte migliore è costruirli manualmente. In questo modo sai che stai evitando di aggiungere JavaScript (uccide le prestazioni del sito web) sul tuo sito.

Questa lezione richiede che tu abbia GeneratePress premium, poiché utilizzeremo il modulo Elements.

Crea pulsanti di condivisione social in GeneratePress senza plugin

La creazione di pulsanti di condivisione social nel tema GeneratePress senza plug-in richiede di conoscere le icone SVG.

Gli SVG sono grafica vettoriale scalabile. Sono elementi visivi standard aperti (utilizzati principalmente come icone) sviluppati dal W3C (World Wide Web Consortium) (World Wide Web Consortium).

Vantaggi dell'utilizzo degli SVG

• Hanno dimensioni di file ridotte che non influiscono mai sulla velocità del sito.
• Puoi facilmente aggiungere collegamenti ipertestuali alle icone SVG.
• Sono facilmente modificabili con qualsiasi software di grafica vettoriale.
• Le icone SVG sono indipendenti dalla risoluzione, il che le rende eccellenti per la visualizzazione su desktop, tablet e dispositivi mobili.
• Le immagini SVG sono più SEO-friendly rispetto alle immagini convenzionali.

Utilizzeremo gli SVG di Iconmonstr. Ciò significa non solo l'icona ma anche l'icona con il suo codice XML.

Passaggio 1: aggiungi il codice dei pulsanti di condivisione social per generare il gancio degli elementi Press

Per fare ciò, dovrai prima creare un nuovo elemento in GeneratePress. Vai alla dashboard di WordPress, sotto Aspetto, fai clic su Elementi. Si aprirà la pagina Elementi, fai clic su Aggiungi nuovo elemento.

Non appena hai fatto clic su Aggiungi nuovo elemento, GeneratePress mostrerà una finestra di dialogo. Fare clic su Gancio. Esatto, è necessario un hook personalizzato GeneratePress per questa azione.

Dai un nome al nuovo elemento e aggiungi il codice.

Seleziona l'hook come intestazione generate after, esegui PHP e imposta le regole di visualizzazione su Articoli – Tutti gli articoli.

Poiché abbiamo bisogno che le icone di condivisione social fluttuino sulla nostra finestra di visualizzazione dello schermo. Si consiglia di selezionare Genera dopo il hook dell'intestazione.

Il motivo per cui abbiamo scelto le impostazioni di visualizzazione Tutti i post è perché desideri che i tuoi utenti condividano i tuoi contenuti sui loro siti social.

Non dimenticare di premere il pulsante Pubblica.

Copia il seguente codice per implementare lo stesso sul tuo sito web.

Passaggio 2: esegui lo stile CSS sulle icone di condivisione social

Per fare ciò, vai sulla dashboard di WordPress, sotto Aspetto, fai clic su Personalizza.

Questo aprirà il personalizzatore del tema GeneratePress. Qui vai fino in fondo e fai clic su CSS aggiuntivo.

Incolla il seguente codice CSS per uno stile comparabile. Puoi modificare i CSS in base alle tue esigenze.

Passaggio 3: risultato finale dei pulsanti di condivisione social in GeneratePress

Infine, ecco come il condivisione sociale le icone dovrebbero apparire come sul tuo sito web. Ricorda che li abbiamo fatti fluttuare dall'alto al 70% del viewport dello schermo.

Vantaggi dei pulsanti di condivisione social in GeneratePress (senza plugin) (senza plugin)

L'uso degli SVG di Iconmonstr rende le tue icone molto leggere
Non è coinvolto alcun tipo di codice JavaScript.

Utilizzando questa strategia, non installi alcun plug-in di terze parti
È reattivo.

Tutti i pulsanti funzioneranno in modo incredibilmente veloce per la condivisione dello scopo.

Conclusione: Come creare pulsanti di condivisione social in GeneratePress?

Ora hai scoperto come costruire pulsanti di condivisione social in GeneratePress utilizzando codice e plugin.

Utilizza l'opzione che è facile per te e che soddisfa le tue esigenze. Non esitate a modificare il codice PHP e/o CSS dall'articolo.