Share
Come ti piacerebbe utilizzare il Link Manager di WordPress? Troverete che è abbastanza utile, se usato per i giusti motivi.
Mi piacerebbe mostrarti un modo per aggiungere collegamenti al tuo sito Web WordPress che non solo fanno uso di Links Manager, ma creano anche più contenuti per il tuo sito web con un flusso di lavoro rapido e semplice.
Permettetemi di iniziare con una rapida revisione di Links Manager per WordPress. Gestione collegamenti consente di memorizzare una serie di collegamenti esterni, noti anche come blogroll. Questi collegamenti possono essere inseriti in categorie, importati, esportati, aggiunti, cancellati e modificati. Le categorie di collegamento possono anche essere aggiunte, eliminate e modificate. Puoi trovare il Gestore dei collegamenti nella sezione dei collegamenti del pannello di amministrazione di WordPress.
A partire dalla versione 3.5, il Gestore dei collegamenti e il blogroll sono nascosti per le nuove installazioni e tutte le installazioni WordPress esistenti che non hanno collegamenti. Se si esegue l'aggiornamento da una versione precedente di WordPress con qualsiasi collegamento attivo, Gestione collegamenti continuerà a funzionare normalmente.
Se si desidera ripristinare il pannello Collegamenti per l'installazione, è possibile scaricare e installare il plug-in Gestore collegamenti.
Un modo utile per utilizzare Link Manager di WordPress è visualizzare un elenco compilato quotidianamente di link esterni, come siti Web preferiti, partner affiliati, canzoni, video divertenti, ecc..
Le opzioni sono illimitate, ma tieni a mente la strategia che sta dietro al tuo sito web. Quindi, per esempio, ho intenzione di compilare un elenco di link delle mie canzoni preferite, che collegano ipertestuali al brano in iTunes, dove possono ascoltare e / o scaricare la canzone.
Prima di iniziare a sviluppare il modello di pagina dei collegamenti, è necessario determinare quali saranno le categorie di collegamenti. Questo può essere determinato in diversi modi. Alcuni esempi sono per genere - come reggae, rap, country, metal - con 5 stelle o in ordine alfabetico. Dal momento che sto compilando una lista di canzoni preferite organizzerò le categorie di link in ordine alfabetico.
Inizia accedendo a WordPress, passando con il mouse sui collegamenti e facendo clic su "Link Categories". Per aggiungere correttamente una categoria di collegamenti, assicurati di avere un nome e una lumaca. La descrizione non è necessaria. Il nome è come appare sul tuo sito. La lumaca è la versione URL-friendly del nome. Solitamente è tutto in minuscolo e contiene solo lettere, numeri e trattini. Se una lumaca non viene inserita quando si crea una categoria di collegamento, la Gestione collegamenti ne creerà automaticamente una in base al nome.
Poiché stiamo organizzando i brani in ordine alfabetico, crea il nome della prima categoria di link "#", la seconda categoria di link "A", la terza categoria "B" e così via fino a raggiungere "Z". Non creare categorie di collegamenti aggiuntivi altrimenti verranno visualizzati nella tua navigazione nel modello di pagina dei collegamenti. Quindi assicurati di eliminare tutte le categorie di link esistenti.
Ora che tutte le categorie di collegamenti sono state create, possiamo iniziare a creare il modello di pagina dei collegamenti. Iniziamo copiando e incollando un modello di pagina già costruito nel tuo tema WordPress, rinominandolo link-page-template.php, e aprendolo nel tuo editor di testo preferito.
Il ragionamento per copiare e incollare un modello di pagina già costruito è perché desideri che il modello di pagina dei link abbia lo stesso design del resto del tuo sito.
Se riscontri problemi nel trovare un modello di pagina già creato nel tuo tema WordPress, cerca un insieme di file con nome coerente Pagina-contact.php, Pagina-portfolio.php, Pagina-full-width.php, eccetera.
È normale che i temi di WordPress abbiano più modelli di pagina che vengono denominati in modo coerente in modo da mantenerli organizzati. Puoi anche aprire un file per vedere se il file inizia con l'identificativo del modello di pagina, come nell'esempio seguente:
La prima cosa che vorrai fare è cambiare il nome del template (vedi il codice sopra) in "Links". Il codice precedente consente a WordPress di sapere che si tratta di un modello, quindi sarà disponibile nel menu a discesa tramite l'editor di pagine con il nome del modello di cui viene fornito, in questo caso denominato "Collegamenti".
Ora cerca il codice il contenuto(). Questo codice recupera il contenuto della pagina, il contenuto che viene aggiunto all'editor WYSIWYG per la pagina.
Questo è un ottimo posto per mettere il tuo menu scorrevole e un ottimo posto per mostrare i tuoi link, che non apparirà fino a quando non aggiungerai un nuovo link a una delle categorie di link che hai appena creato. Ci arriveremo più tardi. Sotto il contenuto() codice nel tuo modello aggiungi:
'. $ cat-> cat_name. ''; ?>
Il codice $ cats = get_categories ("taxonomy = link_category & hierarchical = 0") restituisce tutte le categorie di collegamenti create e visualizza il nome della categoria utilizzando il valore '. $ cat-> cat_name. '. Se vuoi saperne di più vai get_categories nel codice WordPress.
Il id = "scrollablemenu" è collegato ad alcuni JavaScript (di cui parlerò successivamente) per far funzionare correttamente il menu e il class = "scrollablemenubutton" è un po 'di CSS che darà ai tuoi pulsanti uno stile molto semplice. Ti incoraggio ad essere più creativo con il CSS, ma per ora lo stile di base funzionerà.
Per vedere il CSS di base, scarica i file per questo tutorial. Presto ti mostrerò come aggiungere il foglio di stile (e JavaScript) al modello di pagina in modo che venga caricato solo quando il modello di pagina viene caricato utilizzando wp_enqueue_ *.
Per il tuo id = "scrollablemenu" ti consigliamo di aggiungere le proprietà:
posizione: fissa; inizio: 10px; / * Assicurati che la proprietà top abbia lo stesso valore del file javascript * / padding: 20px; larghezza: 90 px; margin-left: 500px;
Il posizione: fissa; e inizio: 10px; mantiene il menu fisso nella posizione scelta. Il inizio: 10px; stile può e potrebbe essere necessario modificare per ottenere i risultati che stai cercando.
Se tu dovessi metterlo in alto: 100 px; darebbe al tuo menu una copertura superiore 100px dalla parte superiore del tuo sito Web, quindi se lo hai dato 0px il tuo menu dovrebbe toccare la parte superiore del tuo sito web. Tieni presente che ogni volta che cambi lo stile in alto devi anche cambiare il codice JavaScript per farlo corrispondere.
Non preoccuparti: arriveremo al codice JavaScript in un po '.
Ho avvolto il menu in a div con un margin-left stile per posizionare il menu scorrevole sul lato destro. Questo perché il menu scorre sopra il contenuto, quindi se il menu non è stato spostato a destra i collegamenti si perderebbero dietro il menu scorrevole. Il margin-left: 500px; molto probabilmente sarà necessario modificarlo per adattarsi alla larghezza del tuo sito web.
Ho anche creato il menu scorrevole come un menu verticale anziché orizzontale creando una larghezza di 90px. È possibile modificare facilmente il menu in un menu orizzontale eliminando il larghezza: 90 px; margin-left: 500px;, ma sai che i tuoi contenuti potrebbero perdersi dietro al menu.
Parliamo del file JavaScript che fa funzionare il menu scorrevole. Scarica i file per questo tutorial e apri il file JavaScript chiamato scrollablemenu.js.
Accentsconagua
$ (finestra) .scroll (function () $ ("# scrollablemenu"). css ("top", Math.max (0, 10 - $ (this) .scrollTop ()));); Le due parti importanti del codice sono #scrollablemenu e 10.
#scrollablemenu deve corrispondere al tuo id = "scrollablemenu" o non funzionerà.
Prima stavamo parlando di come se si cambia il inizio: 10px; stile dovrai modificarlo di conseguenza nel file JavaScript. Puoi farlo semplicemente cambiando il 10 ammonta a qualsiasi importo hai cambiato il tuo stile migliore.
Ora che hai capito come funziona il codice JavaScript, aggiungiamolo e il foglio di stile al modello di pagina in modo che il menu scorrerà ei pulsanti avranno un certo stile.
Un modo semplice e organizzato per farlo è l'uso wp_enqueue_script e wp_enqueue_style; lo rende così non devi aggiungere CSS a un altro foglio di stile o JavaScript al tuo header.php file. Carica i file solo quando viene caricato il modello di pagina, che mantiene il tuo sito Web più veloce.
Aggiungiamo innanzitutto il file JavaScript. Prendi il codice seguente e aggiungi all'inizio del modello di pagina (sotto il nome del modello).
Ora FTP il scrollablemenu.js file per il tuo sito web di hosting. Assicurati di cambiare il /js/scrollablemenu.js posizione nella cartella in cui hai caricato il file JavaScript. Ora aggiungiamo il foglio di stile proprio sotto il codice appena aggiunto.
FTP il scrollablemenu.css file per il tuo sito web di hosting. Assicurati di cambiare il /css/scrollablemenu.css posizione nella cartella in cui hai caricato il foglio di stile. Ora i file JavaScript e del foglio di stile vengono caricati quando viene caricato il modello di pagina dei collegamenti.
La principale differenza tra i due codici sono le funzioni wp_enqueue_script e wp_enqueue_style. Se vuoi saperne di più wp_enqueue_ * dare un'occhiata al tutorial Come includere JavaScript e CSS nei temi e plugin di WordPress.
Ora aggiungiamo la parte più importante al modello di pagina dei collegamenti ... le categorie di collegamenti.
Aggiungi questo codice sotto il codice del menu scorrevole.
'. $ cat-> cat_name. '
'; eco ''; $ books = get_bookmarks ("category = $ cat-> cat_ID"); foreach ($ libri come $ book) echo '
'; // end cats loop; ?>- '; echo 'link_url. '">'. $ book-> link_name. ''; echo '
'; // end books loop echo '
Ancora una volta stiamo usando $ cats = get_categories ("taxonomy = link_category & hierarchical = 0"), il codice restituisce tutte le categorie di collegamenti create e visualizza il nome della categoria utilizzando il valore '. $ cat-> cat_name. '.
La parte importante del codice è come '. $ cat-> cat_name. ' restituisce il nome della categoria come nome dell'ancora (un nome = "'. $ cat-> cat_name." "). Questo rende il menu scorrevole, quindi quando un visitatore fa clic sul menu scorrevole si collegherà alla sezione corretta sul modello di pagina.
Il resto del codice visualizza l'URL del collegamento utilizzando il valore '. $ book-> link_url. ' e visualizza il nome del collegamento usando il valore '. $ book-> link_name. '. Questo è tutto realizzato usando la funzione get_bookmarks ("category = $ cat-> cat_ID").
Puoi saperne di più andando a get_bookmarks nel codice WordPress.
Ogni riga di codice è all'interno di a div con il class = "linkcategories" (che viene aggiunto al scrollablemenu.css file) e ogni riga di codice visualizzerà il titolo (nome della categoria) con a h3 tag, il titolo sarà anche il nome dell'ancora e verranno incorporati i collegamenti creati in Gestione collegamenti Li tag, collegamenti ipertestuali con l'URL del link.
Quindi sai che il codice è racchiuso in a div con una larghezza di 490px, in questo modo nessun testo si perderà dietro il menu scorrevole (verticale). Il larghezza: 490 px; molto probabilmente dovrà essere cambiato per adattarsi alla larghezza del tuo sito web.
Se cambi la larghezza, ricorda di cambiare il menu scorrevole div stile margin-left: 500px;. È spinto a destra 10px più così il menu scorrevole div non si sovrapporrà alle categorie di collegamenti div.
Il modello di pagina dei collegamenti è terminato! Assicurati di FTP il link-page-template.php file nella directory principale del tema WordPress.
Ora che le categorie di collegamento sono state create e il modello di pagina dei collegamenti è stato creato e caricato, aggiungiamo una nuova pagina utilizzando il modello.
Nella sezione admin di WordPress sotto le pagine fai clic su aggiungi nuovo. Per prima cosa aggiungi il nome della tua pagina, in secondo luogo seleziona il modello Collegamenti nel menu a discesa sotto Attributi pagina (lato destro). Pubblica e passiamo all'ultima fase.
Se hai già visualizzato l'anteprima della pagina che hai appena creato e hai notato solo il menu a scorrimento verticale che stava visualizzando, è perché devi aggiungere collegamenti alle categorie di link che hai creato in precedenza. Se la categoria di collegamento non ha collegamenti, non verrà visualizzato nulla.
Quindi, aggiungiamo un collegamento facendo clic su aggiungi nuovo sotto Collegamenti nella sezione di amministrazione di WordPress. Inserisci il nome, ad esempio Daniel Lee Kendall - Lost In The Moment, indirizzo web e selezionare la categoria. Lato destro, fai clic su aggiungi collegamento e ora puoi controllare la tua pagina per vedere i risultati. Hai finito tutto!
Se non ottieni i risultati sperati, gioca con la larghezza di ciascuno div, e / o creare un foglio di stile migliore per il menu scorrevole.
