Buon pomeriggio cari lettori! Continuo a parlarti dei principali plugin di WordPress che dovresti installare subito. Oggi voglio presentarvi il plugin Breadcrumb NavXT, che risolve diversi compiti importanti. Innanzitutto, creerà una navigazione aggiuntiva sul blog. Grazie al quale il visitatore potrà tracciare il percorso dalla radice del sito alla pagina in cui si trova. In secondo luogo, è uno strumento aggiuntivo nella creazione di collegamenti interni alle pagine. In terzo luogo, qualche tempo fa, il motore di ricerca di Google ha iniziato a pubblicare " briciole di pane” nel numero, che ti consentirà di attirare traffico aggiuntivo sul progetto. E in quarto luogo, grazie Plugin Breadcrumb NavXT il peso statico è distribuito uniformemente su tutte le pagine. Ma probabilmente vale la pena passare all'installazione di "breadcrumbs".
Quindi, per prima cosa devi scaricare il plugin Breadcrumb NavXT dalla pagina http://wordpress.org/extend/plugins/breadcrumb-navxt. Decomprimere l'archivio risultante e utilizzare il client ftp per rilasciarlo nella directory /wp-content/plugins. E infine attiva nel pannello di amministrazione. Dopo che il plug-in è stato attivato con successo, la riga Breadcrumb NavXT viene visualizzata nella console delle impostazioni.
Ma per attivare completamente il plugin Breadcrumb NavXT, è necessario inserire il codice di output della funzione breadcrumb in determinati file modello. Il codice si presenta così:
Questo codice dovrà essere installato nei seguenti file modello: single.php (visualizza articoli), archive.php (articoli archiviati, categorie), search.php (articoli trovati tramite la ricerca nel blog), page.php (visualizza pagine). Per fare ciò, nel pannello di amministrazione, vai su Design e seleziona la voce Modifica, quindi attiva il file desiderato, supponiamo single.php Inserisci il codice della funzione del plugin Breadcrumb NavXT subito dopo la riga
E fai clic su Salva modifiche. Successivamente, dobbiamo creare uno stile per la nostra navigazione aggiuntiva. Pertanto, apriamo il file style.css e scriviamo alcune proprietà di stile per la classe BREADCRUMB:
| .breadcrumb ( font : bolder 12px Georgia; padding-bottom : 1px ; padding : 4px 8px ; color : #FFffff !important; background : #9C1718 ; border : 0 !important; ) .breadcrumb a( color : #ffffff ; !important ; ) .breadcrumb a: hover (colore: #ffffff; sfondo: #C9CACB !importante; ) |
Breadcrumb ( font:bolder 12px Georgia; padding-bottom: 1px; padding: 4px 8px; color: #FFffff!important; background:#9C1718 ; border: 0 !important; ) .breadcrumb a( color: #ffffff;!important; ) .breadcrumb a:hover ( colore: #ffffff; sfondo:#C9CACB !importante; )
Con questo ho impostato le proprietà di riflessione per il breadcrumb.
Carattere: grassetto 12px Georgia; è la dimensione e il tipo del carattere
- imbottitura-fondo: 1px; - trattini
- colore: colore del testo
- riempimento: riempimento del testo
-background: colore di sfondo su cui verranno posizionati i breadcrumb
- .breadcrumb a - colore del collegamento
- .breadcrumb a:hover - colore dei collegamenti al passaggio del mouse
sfondo: colore di sfondo al passaggio del mouse
Questo codice può essere impostato nella parte inferiore del file style.css
Salviamo le modifiche.
Questo completa il lavoro di modifica del codice e resta solo da configurare la riflessione del plugin nel pannello di amministrazione. Per fare ciò, abbiamo bisogno della voce Breadcrumb NavXT nelle Impostazioni. La finestra delle impostazioni del plug-in è composta da diverse schede.
Cominciamo dal generale
Questa scheda consente di impostare le opzioni che si applicano a tutte le pagine.
Nella riga "Separatore" indichiamo un codice mnemonico che permette di separare le briciole di pane.Puoi usare questa piccola selezione di codici mnemonici come aiuto
Nel campo "Lunghezza massima", puoi impostare la lunghezza massima dell'ancora in breadcrumb. Ho già detto che i link dei breadcrumb vengono presi in considerazione dai motori di ricerca e servono a trasferire il peso statico.
Successivamente, è necessario selezionare la casella "Link home", che consente di visualizzare un collegamento alla home page in breadcrumb. Di solito questa è un'ancora o una parola chiave.
Iniziamo col dirti a cosa servono generalmente i breadcrumb durante la progettazione di siti web.
Cosa sono le "briciole di pane"?
briciole di pane(breadcrumbs) è un elemento di navigazione del sito. Sono anche chiamati catena di navigazione, navigazione duplicata, menu di navigazione, ecc. Nella letteratura inglese, puoi anche trovare il nome: " briciole di biscotti» (briciole di biscotti). I breadcrumb possono anche essere indicati come un percorso di navigazione. In realtà, tutti questi sinonimi descrivono lo stesso oggetto, che analizzeremo ulteriormente.
I breadcrumb mostrano visivamente il percorso dalla pagina principale (root) del sito alla pagina in cui si trova attualmente l'utente. Perché questa navigazione ha ricevuto un nome così strano? Se hai letto la fiaba dei fratelli Grimm "Hansel e Gretel", allora sai che in essa i bambini, dopo aver sentito le conversazioni dei loro genitori che sarebbero stati lasciati nella foresta, hanno cercato di fare scorta di piccoli sassolini in anticipo, che hanno gettato sulla strada per uscire. La prima volta ha funzionato, ma la seconda volta è stato impossibile raccogliere pietre, quindi i bambini hanno lanciato briciole di pane per strada. Tuttavia, non prevedevano il fatto che queste briciole fossero beccate dagli uccelli. Di conseguenza, i bambini si sono persi e si sono imbattuti nella casa della strega. Non ha senso raccontare l'intera trama del racconto, molto probabilmente lo leggerai comunque. In realtà, anche il nome della navigazione ci rimanda a questo evento.
Visivamente, i breadcrumb sono solitamente un piccolo menu che si trova più spesso nella parte superiore della pagina. Le voci incluse in questo menu sono collegamenti ipertestuali (tranne l'ultima voce) e riflettono la struttura gerarchica dei materiali presenti nel sito.
I breadcrumb sono usati dai robot di ricerca. Con l'aiuto di questa navigazione, i robot sono in grado di comprendere rapidamente l'architettura del tuo sito e di analizzarla. Di conseguenza, è impossibile ignorare i breadcrumb o rifiutarli deliberatamente, poiché ciò può influire indirettamente sul deterioramento dell'indicizzazione del sito (o sulla scansione incompleta delle pagine delle risorse da parte del robot).
Ancora più importante, i breadcrumb hanno un impatto positivo sull'esperienza dell'utente. L'utente può sempre capire esattamente dove si trova attualmente sul sito, può passare rapidamente al livello precedente di annidamento dei materiali (o ad una sezione specifica), ad es. una persona ha davanti agli occhi il percorso che ha fatto dalla pagina principale del sito alla pagina corrente. Le breadcrumb sono utilizzate anche nei risultati di ricerca di Google, e sono state introdotte non per semplificare il lavoro dei robot di ricerca, ma proprio perché l'utente potesse vedere la struttura dei materiali.
Ciao a tutti!. Oggi in questo articolo vorrei raccontarti come puoi migliorare l'usabilità del tuo sito utilizzando il plugin Yoast SEO, di cui parlerò in dettaglio in uno dei miei prossimi articoli.
Sicuramente molti hanno già sentito parlare di questo plugin e sanno che è necessario per scrivere articoli ottimizzati per la SEO. Ma cos'altro si può fare con i breadcrumb SEO Yoast di WordPress, pochi indovinano.
Per cominciare, lascia che ti spieghi cosa sono le "briciole di pane" e perché sono necessarie.
Così, "breadcrumbs" è un'impaginazione aggiuntiva che mostra in quale categoria o sezione si trova l'articolo. Il visitatore, essendo andato in qualche pagina del tuo blog, dovrebbe capire in quale sezione si trova e in quale sezione sta cercando le informazioni di cui ha bisogno. In generale, questa navigazione può essere rappresentata come segue:
Sul nostro sito web si presenta così:
Inoltre, la presenza di questa navigazione aiuta i robot a comprendere più chiaramente la struttura del sito e ad indicizzare il tuo blog più velocemente. E questo è molto importante quando il progetto è online.
"Come mai?" - chiedi, abbiamo deciso di utilizzare questo plugin. La risposta qui sarà semplice. Esistono numerosi servizi simili su Internet che aiuteranno con il ritiro delle "briciole", ma allo stesso tempo caricheranno ulteriormente il sito, questo non lo migliorerà sicuramente. E poiché utilizziamo ancora Yoast SEO per ottimizzare i post, è un peccato non sfruttare le sue capacità e non renderne conveniente l'usabilità.
Impostazione dell'output breadcrumb con il plug-in Yoast SEO
Non scriverò qui come installare questo Yoast SEO. Se non sai come farlo, leggi questo mio articolo "". In esso, lo dico in dettaglio e mostro in che modo è possibile installare i plug-in necessari per il lavoro.
Nella finestra che si apre, seleziona la casella "Abilita breadcrumbs (breadcrumbs)".
Con nostra gioia, le impostazioni si apriranno tutte in russo e sono intuitive. Nel video che apparirà presto in questo articolo, ti mostrerò più chiaramente cosa accadrà quando cambierai alcune voci di questo menu. Nel frattempo, puoi facilmente sperimentare e provare a modificare le impostazioni da solo. Non si può fare nulla di terribile qui, dal momento che si tratta solo di modifiche visive alle nostre "briciole".
Il passaggio successivo dopo aver abilitato i breadcrumb consiste nell'incollare il codice di attivazione per questa funzione nel modello del tema. Per scoprire quale codice inserire, segui il link che viene dopo le impostazioni della nostra catena.
Dopo essere arrivati al sito Web ufficiale di questo plug-in, copiamo il codice richiesto e lo incolliamo al posto del nostro tema in cui prevediamo di visualizzarlo.
Non posso consigliare un posto universale per inserire questo codice, poiché dipende dal tema che stai utilizzando. Potrebbe essere necessario scriverlo nel file single.php o in page.php e, in alcuni casi, header.php.
Nel nostro caso, abbiamo inserito il codice quasi all'inizio del file single.php, che si trova in www/wp-content/themes/your theme/ .
Nota: Attiro la vostra attenzione sul fatto che è meglio inserire il codice tramite il client FTP. Usiamo Filezilla, il cui lavoro è stato scritto in dettaglio. Assicurati di leggere le nostre istruzioni per evitare molti errori da principiante.
E vi chiedo anche di prestare attenzione al fatto che il codice che abbiamo è leggermente diverso da quello consigliatoci dagli sviluppatori. Vale a dire, abbiamo racchiuso la funzione breadcrumbs in un tag div. Questo viene fatto in modo che tu possa impostare il tuo stile di visualizzazione individuale.
Per fare ciò, nel file style.css, prescriviamo gli stili di cui abbiamo bisogno. In essi possiamo impostare il colore, lo sfondo, la dimensione del carattere, la sottolineatura, ovvero portarlo a un aspetto che soddisfi completamente i nostri gusti o sia combinato con lo stile generale della pagina. Nel nostro caso, si presenta così:
Questo completa la configurazione del plugin, ma in questa versione, dopo la visualizzazione dell'intestazione, verrà visualizzato anche il titolo dell'articolo. Questo può portare a un eccesso di spam. Penso che sarai d'accordo con me sul fatto che ciò sia superfluo, poiché il titolo dell'articolo è già perfettamente visibile all'utente e non è necessario duplicarlo nuovamente.
Per evitare ciò, è necessario inserire anche un piccolo codice nel file functions.php.
Funzione adjust_single_breadcrumb($link_output) ( if(strpos($link_output, "breadcrumb_last") !== false) ( $link_output = ""; ) return $link_output; ) add_filter("wpseo_breadcrumb_single_link", "adjust_single_breadcrumb");
Ora tutte le nostre impostazioni sono terminate. Se hai fatto tutto bene, otterrai più o meno come sul nostro blog.
Se hai domande, scrivi nei commenti!
Ciao a tutti!
Anton Kalmykov era con te
Ciao, cari lettori del sito del blog. Oggi voglio parlare di un plugin per WordPress che viene utilizzato sul mio blog per due scopi molto importanti contemporaneamente.
In primo luogo, facilita la navigazione e, in secondo luogo, risolve un problema molto importante: creare il corretto collegamento interno. Per non ritardare l'intrigo, dirò subito che parleremo del plugin Breadcrumb NavXT. Ma prima le cose principali.
Ho già parlato molto della necessità di creare un corretto linking delle pagine del sito in modo che il peso statico trasmesso da eventuali link esterni sia distribuito uniformemente su tutte le pagine web del progetto. Questo è particolarmente importante.
Perché hai bisogno di breadcrumb in WordPress
La promozione sulla LF presenta una serie di vantaggi, il principale dei quali (particolarmente importante per i progetti non commerciali) è che non richiede l'investimento di fondi necessari per l'acquisto di collegamenti esterni. Ciò è dovuto al fatto che LF può essere promosso solo attraverso il solo sito interno e creando il corretto collegamento, come descritto.
A proposito, per i progetti commerciali, la promozione delle basse frequenze presenta anche una serie di vantaggi, il principale dei quali, ancora una volta, è il costo inferiore, ma oltre a questo, i visitatori che provengono dall'emissione di tali richieste avranno molte più probabilità di essere convertite in banconote rispetto ai visitatori che giungono con richieste medie e ad alta frequenza (per la vaghezza di queste ultime).
L'idea principale di un corretto linking è quella di garantire che il peso statico trasmesso alle diverse pagine del sito (la maggior parte dei link esterni di solito porta a quella principale) fluisca senza problemi verso quelle che si muovono direttamente lungo il fondo (dove, infatti gli articoli si trovano).
Ma il layout circolare ideale descritto nell'articolo precedente è difficile da implementare in condizioni reali, quindi uno schema di collegamento sferico sarebbe una buona opzione. In parole povere, uno schema del genere può essere esagerato al punto che più collegamenti interni ci sono, migliore sarà la distribuzione del peso statico. È come un esteso sistema circolatorio che permette al sangue di trasportare ossigeno a tutti, anche i più distanti dai polmoni, organi interni.
Puoi aggiungere manualmente collegamenti ad altri materiali sul tuo sito ogni volta che scrivi articoli che saranno rilevanti. È vero, prendi molto sul serio l'elenco di ancoraggio interno creato in questo modo per ciascuno degli articoli. Devi farlo più o meno allo stesso modo di. Non dovresti usare la stessa chiave non diluita in tutti i riferimenti ad essa, sai cosa intendo.
Questo è un ottimo modo, ma sarà sempre utile ampliarlo e integrarlo con l'aiuto di metodi automatici materiali simili al tuo progetto, simili nell'argomento a questo articolo.
Oggi voglio considerare in dettaglio la prima opzione, ma su materiali simili per WordPress in .
Per implementare i breadcrumb, utilizzeremo il plugin Breadcrumb NavXT. In linea di principio, puoi utilizzare altri plugin di WordPress per questo scopo, ma questi mi sono piaciuti di più. È possibile anche.
Installazione del plugin Breadcrumb NavXT in WordPress
Ok, è ora di procedere direttamente all'installazione e alla configurazione del plugin. Se all'improvviso non sai cosa sono le briciole di pane, allora va bene. In realtà, all'inizio non lo sapevo nemmeno io, perché questo termine è stato preso dalla borghesia ed è associato alla loro fiaba borghese su Hansel e Greta, che li usavano per segnare il percorso.
A nostro avviso, questo elemento di navigazione del sito dovrebbe essere chiamato "filo di Arianna", perché in qualche modo siamo più vicini. Bene, oh bene, come lo chiamavano, così lo chiamavano. Quindi, di solito vengono visualizzati da qualche parte nella parte superiore della finestra del sito e rappresentano effettivamente il percorso dell'articolo che stai attualmente leggendo.
Ad esempio mi piace molto la navigazione con l'aiuto delle briciole e cerco sempre di trovare la loro linea su qualsiasi sito per capire dove mi trovo effettivamente e come andare alla sezione dove si trova questo meraviglioso articolo per saperne di più lo stesso argomento.
Bene, ricordi cosa sono le briciole di pane? Penso che si siano ricordati e, in caso contrario, guarda la parte superiore di questa finestra sotto l'intestazione di questo blog.
Per prima cosa dovrai scaricare Breadcrumb NavXT da qui. L'installazione dei plugin su WordPress è standard. Collegati al tuo blog tramite FTP (il lavoro con il client FileZilla è descritto in dettaglio) e apri la cartella sul server:
/wp-content/plugin
Decomprimi l'archivio con Breadcrumb NavXT e copia la cartella risultante sul server di hosting nella directory (/wp-content/plugins). Ora dovrai andare nel pannello di amministrazione di WordPress, selezionare la voce "Plugin" dal menu di sinistra e, nella finestra che si apre, andare alla scheda "Non attivo". Trova la riga con quella che ti serve e fai clic sull'etichetta "Attiva" che si trova appena sotto.
Invocare il breadcrumb NavXT e personalizzare l'aspetto del breadcrumb
Questo, in effetti, è tutto. Ora è rimasto un altro dettaglio essenziale: scegli un punto nel modello (tema) di WordPress in cui verrà visualizzata la riga con i breadcrumb e incolla il codice della funzione del plug-in Breadcrumb NavXT in questo punto. Il compito non è del tutto banale per un webmaster alle prime armi che non ha molta dimestichezza con la struttura del motore e come funzionano i suoi temi.
Ma, forse, questo non ti confonderà, perché. puoi sempre leggere, fortunatamente non c'è niente di difficile lì.
Se hai già familiarità con i temi e conosci lo scopo di alcuni modelli in esso contenuti, continueremo. Ma, in caso contrario, ti consiglio comunque di familiarizzare almeno superficialmente con questo, utilizzando il materiale sopra indicato (o altro).
Quindi, il nostro compito è determinare quei file dalla cartella con il tema che stai utilizzando, in cui dovremo inserire il codice di chiamata crumb. E poi dovrai decidere dove esattamente nel codice inseriremo questo:
Innanzitutto, devi connetterti al tuo blog tramite FTP e aprire la cartella del tema che stai attualmente utilizzando:
wp-content/temi/nome del tema WordPress
E ora ti diciamo come ho concluso io stesso il breadcrumb e puoi ripetere tutto dopo di me o usare la tua opzione di inserimento.
Se provi a visualizzare lo scopo dei modelli dal tema, otterrai qualcosa di simile a questo layout:
Da questo layout, possiamo concludere che dovremo inserire il codice di chiamata Breadcrumb NavXT in quei modelli che sono responsabili della visualizzazione dei contenuti nella parte centrale del blog: INDEX, SINGLE, ARCHIVE, PAGE o SEARCH.
È vero, non ho iniziato a visualizzare le briciole nell'INDEX, che è responsabile della formazione della pagina principale di WordPress, perché la navigazione aggiuntiva sarebbe ridondante.
L'ho inserito in: SINGLE (responsabile della formazione delle pagine con gli articoli), ARCHIVE (genera pagine per categorie, archivi temporanei, archivi tag), PAGE (moduli in pagine statiche, ad esempio "About the blog").
Ho inserito il codice di chiamata Breadcrumb NavXT in questi modelli nello stesso posto, proprio all'inizio, subito dopo la prima riga:
per farlo sembrare così:
Nel file del foglio di stile a cascata STYLE.CSS nella cartella del tema ho aggiunto alcune proprietà CSS per la classe BREADCRUMB:
Breadcrumb ( font:bolder 12px "Trebuchet MS", Verdana, Arial; padding-bottom: 10px; ) .breadcrumb a( color: #1B7499; ) .breadcrumb a:hover ( color: #EF0E0E; )
Queste proprietà definiscono l'aspetto dei breadcrumb in WordPress: , e . Determinano anche il colore dei collegamenti dai breadcrumb (.breadcrumb a) e il colore dei collegamenti quando ci si passa sopra con il cursore del mouse (.breadcrumb a:hover). In generale, ti consiglio di leggere la pagina.
Funzionalità e impostazioni del plugin Breadcrumb
Sei libero di fare come preferisci. Come si suol dire, il padrone è il padrone. Ma con questo, abbiamo solo determinato il luogo per la produzione di briciole di pane e impostato il loro aspetto. Ma questo plugin ha ancora molte impostazioni.
Per fare ciò, vai al pannello di amministrazione di WordPress e seleziona "Breadcrumb NavXT" dal menu a sinistra nell'area "Impostazioni". Nella finestra che si apre, vedrai diverse schede:
Nella scheda "Generale", puoi impostare i parametri che verranno applicati a tutte le pagine del tuo blog. Nel campo "Delimitatore", specifica un carattere che fungerà da separatore nei breadcrumb. Nel mio caso, questo è il simbolo “>”, che è impostato da un codice speciale, perché il simbolo ">" esplicitamente inserito sarà interpretato da WordPress come un segno di un tag HTML di apertura.
In genere ci sono (mnemonici) che, ad esempio, non possono essere inseriti direttamente. Ecco qui alcuni di loro:
Simbolo Mnemocode " " & &< < > > ¤ ¤ ¦ ¦ § § © ª ? « « ® ® ° ° ± ± µ µ ¶ ¶ · ¹ ? € €
Scegli qualsiasi carattere che ti piace come separatore per le briciole di pane.
Nel campo "Lunghezza massima" è possibile impostare la lunghezza dell'ancora (testo del collegamento) in caratteri. Ho impostato il limite di lunghezza a 60 caratteri, non per motivi di design, ma per motivi di ottimizzazione dei contenuti.
I motori di ricerca possono essere ambivalenti sui collegamenti con le stesse ancore, quindi li accorcio in briciole per unicità. Potrebbe non essere necessario, ma per ogni evenienza.
Nei campi "Prefisso" e "Suffisso" puoi inserire il testo che precederà o seguirà il link alla home page in breadcrumb.
Tieni presente che questo testo verrà inserito nell'attributo TITLE del tag A e potrebbe essere considerato dai motori di ricerca come un'ancora alternativa. Questo voglio dire che dovrebbe usare parole chiave relative alla pagina principale del tuo blog.
Non dimenticare di salvare le modifiche nelle impostazioni del plug-in Breadcrumb NavXT utilizzando il pulsante con lo stesso nome. Quindi puoi scorrere tutte le schede. Ad esempio, nella prossima, puoi impostare le impostazioni per il collegamento che porterà alla pagina in cui ti trovi ora:
Nella scheda successiva "Post/Pagine" puoi configurare la visualizzazione dei link alle pagine con articoli e alle pagine statiche del tuo blog:
Per gli articoli, ho impostato la precedente scritta "Articolo corrente" e ho racchiuso il testo tra virgolette utilizzando il codice mnemonico (vedi l'elenco dei codici mnemonici sopra):
Vai alla scheda successiva "Categorie". In linea di principio, qui vengono ripetute tutte le stesse impostazioni come nelle precedenti. Non ho impostato il bordo (prefisso e suffisso) per i link alle categorie, ma ho impostato il bordo per le pagine di archivio:
Di conseguenza, nelle pagine web dell'archivio, i breadcrumb si presentano così:
