Metti i pulsanti dei social network nel template WordPress senza plug-in e servizi - Profit Hunter

Facilitiamo il caricamento del sito utilizzando il nostro codice anziché i plug-in! Meno ce ne sono, più facile e veloce verrà caricato il nostro modello, e questo è un modo diretto per migliorare il comportamento dei visitatori del sito. In questo post, impareremo come creare un blocco verticale di pulsanti social che scorre insieme all'articolo. Con esso, il lettore sarà in grado di condividere un collegamento al post e salvare nella sua pagina, indipendentemente da quanto testo abbia letto.

Succede che non abbiamo il tempo di studiare il materiale fino alla fine e di ritornarci più tardi, lo salviamo da qualche parte (nei segnalibri o nei social network, per esempio). Quindi, spesso accade che il blocco di pulsanti sia lontano alla fine di un lungo articolo, e al momento non è visibile al lettore, perché la persona non ha ancora letto il materiale. Con l'aiuto di un codice speciale, faremo in modo che il blocco sia sempre in vista e scorra insieme all'articolo.

Metti i pulsanti dei social network nel template WordPress senza plug-in e servizi - Profit Hunter

Il codice dei social "bottonati"

Ordiniamo il codice del pulsante social per Facebook. Il resto può essere fatto per analogia.

. ! - SocialButtons -.
. span style = "display: scroll; position: fixed; bottom: 280px; left: 50px;".
. noindex. . un target = "vuoto" rel = "nofollow" href = "http: // www. facebook. / sharer. php? u =.? php the_permalink ();?.". . img src = "http: // sito. en / f. png" width = "50" height = "50" title = "Condividi su Facebook" alt = "Pubblica su Facebook". . / a. . / noindex. . / span.
. ! - SocialButtons -.

Firma . ! - SocialButtons -. consente di determinare visivamente la posizione del codice della pagina nel nostro blocco di pulsanti. Finora, abbiamo inserito solo un pulsante nel blocco, ma il codice sarà molto più grande.
Nel tag. arco. c attributi sono stili. Li registreremo per ciascun pulsante. Display Record: scorrere; position: fixed significa che il pulsante si "attaccherà" allo schermo e non si nasconderà con il testo già letto nel processo di scorrimento della pagina.

Gli indicatori in basso e a sinistra determinano la posizione del pulsante rispetto ai bordi inferiore e sinistro dello schermo. Nel nostro caso, sarà a sinistra del post. Se hai bisogno di metterlo sulla destra, basta sostituire "sinistra" con "destra". Come hai già notato, i valori di questi indicatori sono impostati in pixel e puoi modificarli a piacere, fino a trovare la posizione ottimale nel tuo modello. Nota che nell'esempio sopra, il rientro del pulsante dalla parte inferiore dello schermo è di 280 pixel.

Ma se vogliamo metterne un altro sotto questo bottone, allora da 280 dobbiamo sottrarre 50 o leggermente di più (50 è l'altezza del pulsante). Si scopre che il pulsante in basso successivo non avrà più 280, ma un massimo di 230 (se di più, le immagini si scontreranno l'una con l'altra). Pertanto, questo valore dovrebbe cambiare con ogni nuovo pulsante.
Con il tag . noindex. e l'attributo rel = "nofollow" chiudiamo i collegamenti nascosti nei pulsanti dall'indicizzazione dei motori di ricerca.

Nel tag . a. attributo target = "vuoto" è responsabile dell'apertura della finestra con l'offerta di condivisione in una nuova scheda. Questo è importante perché l'utente può ancora voler tornare alla pagina del sito che ha letto.
L'attributo href = si inserisce direttamente nel codice del link, che sarà responsabile della visualizzazione della finestra di dialogo del social network quando si fa clic sul pulsante. Per ognuno di essi, questo codice sarà diverso. Record . ? php the_permalink (); ?. (non solo necessario per il pulsante di sottoscrizione feedburner) consente di visualizzare un collegamento al nostro materiale e il suo nome nella pagina del social network che si apre, ad esempio:

Metti i pulsanti dei social network nel template WordPress senza plug-in e servizi - Profit Hunter

nel tag . IMG. viene specificato il percorso del pulsante immagine che si desidera inserire, nonché i relativi parametri (lunghezza, larghezza, titolo, attributo alt).

Quindi, otteniamo lo schema generale di compilazione del codice del pulsante social network:


. span style = "display: scroll; position: fixed; bottom: {value}; left: {value};".
. noindex. . a target = "blank" rel = "nofollow" href = "{link al social network} =.? php the_permalink ();?.". . img src = "{link all'immagine del pulsante}" width = "{value}" height = "{value}" title = "{Condividi, racconta su ...}" alt = "{Condividi, racconta su ...}". . / a. . / noindex. . / span.

Per quanto riguarda il significato dei link per i diversi social network, dovrebbero essere così:

  • Per Facebook: onclick = " finestra. open ('https: // plusone. google. com / _ / + 1 / confirm? hl = ru. url = http: // www. facebook. com / sharer. php? u =.? php the_permalink () ;? . "
  • Per Twitter: http: // twitter. / Intent / tweet? Text = RT @ Il tuo login su Twitter .? Php the_permalink (); ?.
  • Per iscriverti al feed del blog: http: // feed. Feedburner.com/ Nome del tuo feed
  • Per la posta. Ru: http: // connect. mail. en / share? share_url =.? php the_permalink ();?.
  • Per Vkontakte: https: // vk.com / share. php? url =. ? php the_permalink (); ?.
  • Per i segnalibri Yandex: http: // zakladki. Yandex. com / newlink. xml? url =. ? php the_permalink ()? . nome =. ? php the_title (); ?. . descr =. ? php the_excerpt (); ?.
  • Per Odnoklassniki: http: // www. odnoklassniki. ru / dk? st. cmd = aggiungiCondividi. st. s = 1. st. _surl =. ? php the_permalink (); ?. . title =. ? php the_title (); ?.

Dove posizionare i pulsanti dei social network nel modello di WordPress

Di norma, il blocco viene inserito in pagine con post separati, notizie. Puoi metterlo su pagine statiche. Non dovresti mettere link esterni extra su sezioni o su quello principale, anche se puoi provare a guardare l'effetto. Solo i test e gli esperimenti possono mostrare la situazione reale.

Un singolo file è responsabile di una pubblicazione separata. php, che si trova nella cartella con il tema. In esso dovrai inserire il codice che hai creato. Dove metterlo - la tua attività, lo stesso, i pulsanti si posizioneranno sul posto che hai specificato negli attributi in basso e a sinistra. È auspicabile, naturalmente, mettere questo codice alla fine, da qualche parte dopo l'output del footer. È necessario che i pulsanti dei social network vengano visualizzati in un secondo momento rispetto al contenuto principale, se l'utente ha una connessione Internet lenta. Il primo materiale dovrebbe sempre essere caricato con materiale user-friendly, e solo allora - il pulsante di condivisione e così via.

Perché è meglio incorporare il codice del pulsante nel sito?

Come abbiamo detto sopra, i plugin sono il modo più semplice per creare un blocco di pulsanti. Tuttavia, valutiamo la velocità di caricamento del sito e cerchiamo di ridurre al minimo il numero di plug-in. Quindi, se prendi due siti, a parità di tutte le altre cose, la loro qualità, una spiccerà l'una sull'altra. E perché? Perché un download è più veloce dell'altro.

Un altro modo sono i servizi di terze parti. Mettendoli molto facilmente e rapidamente, tuttavia, questi servizi a volte "si bloccano" e il sito mostra qualcosa di incomprensibile al posto dei pulsanti.

Inoltre, nei servizi e nei plug-in potrebbero esserci ulteriori collegamenti agli sviluppatori che non sono necessari a noi.
Quindi, il tuo codice è la migliore via d'uscita. La cosa principale - per renderlo pulito, pulito, senza detriti e errori inutili.

Ti piacciono gli articoli? Iscriviti alla newsletter!

Ricerca

articoli Correlati