Share
Nel mese di aprile, Collis Ta'eed - CEO di Envato - ha scritto un fantastico tutorial sulla progettazione di una struttura di schede usando CSS / HTML / JS.
Se non lo hai già fatto, ti consiglio al 100% di rivederlo. Tuttavia, inserire dinamicamente un feed RSS era oltre lo scopo di quell'articolo. Nel video tutorial di oggi, ti mostrerò esattamente come farlo usando PHP. A circa quarantacinque minuti di lunghezza, potresti voler fare una breve "pausa per il bagno pre-screencast". Potresti anche prendere un po 'di uva passa.
Creeremo un sistema di schede per tre feed RSS unici:
Vogliamo importare dinamicamente questi feed nel nostro documento. Il nostro script sul lato server oggi sarà PHP, e useremo alcuni jQuery per creare la struttura delle schede.
* Nota: l'intenzione di questo tutorial è di dimostrare il lavoro di back-end coinvolto. Come accennato in precedenza, Collis ha già creato una pelle meravigliosa. Proprio come la programmazione era oltre lo scopo di quel tutorial, lavorare su "design" sarà oltre lo scopo di questo articolo. Per mantenere le cose pulite e "al punto" il più possibile, utilizzeremo la forma più nuda di una struttura a schede, parlando in termini di design.
Apri il tuo editor di codice preferito e crea le seguenti cartelle / file. I file PHP possono essere vuoti per ora.
Apri il tuo file "functions.php". Creeremo solo una funzione relativamente semplice. Innanzitutto, copia nel seguente codice. Successivamente, continua a leggere per l'analisi del codice.
"; foreach ($ x-> channel-> item as $ entry) echo"
Per prima cosa, stiamo creando una funzione chiamata getFeed (). La struttura di base di qualsiasi funzione PHP è:
function someName ($ parameters) ... some method
Successivamente, stiamo creando una variabile denominata "$ content" e rendendola uguale al risultato di: file_get_contents ($ feed_url).
"file_get_contents" è il modo preferito per leggere il contenuto di un file in una stringa. "
Ora che hai capito la definizione, dobbiamo solo passare nel nostro file. Abbiamo due scelte. In primo luogo, potremmo passare una stringa al nostro feed RSS, così:
file_get_contents ( "http://feedproxy.google.com/nettuts");
Quello funzionerebbe bene, suppongo. Il metodo dovrebbe leggere correttamente il feed RSS e memorizzare i risultati nella nostra variabile "$ content". Ma dovremmo sempre avere la parola "riusabilità" in agguato dietro le nostre menti quando si lavora.
Immagina di avere molte pagine diverse nella nostra applicazione web che vogliono chiamare questa funzione "getFeed ()". Ma cosa succede se vogliono afferrare feed diversi? Non sarebbe bello se potessimo passare l'url nella funzione invece di codificarlo a fondo? Certo che lo farebbe! Di conseguenza, anziché inserire il percorso, utilizzeremo semplicemente una variabile chiamata "$ feed_url".
file_get_contents ($ FEED_URL);
Per utilizzare questa variabile da una fonte esterna, dobbiamo assicurarci che la funzione accetti un parametro.
function getFeed ($ feed_url)
Ora, quando chiamiamo la funzione, possiamo farlo in questo modo:
Successivamente, creeremo una nuova istanza ($ x) di SimpleXmlElement. Tra parentesi, passeremo nella nostra variabile $ content.
$ x = new SimpleXmlElement ($ content);
Infine, abbiamo bisogno di scorrere il feed RSS ed estrarre le informazioni che desideriamo.
eco "
Iniziamo facendo eco all'etichetta di apertura non ordinata. Quindi, passiamo in rassegna ogni voce nel nostro feed RSS usando una dichiarazione "foreach". Questa affermazione dice in sostanza "creare una variabile chiamata $ entry che conterrà il valore di ogni tag item nel nostro feed RSS.
La cosa meravigliosa dei feed RSS è che tutti implementano la stessa struttura di base. Ogni feed contiene un tag "canale" di avvolgimento. Quindi, ogni inserimento nel tuo feed verrà inserito all'interno di un tag "item". Tutte le informazioni di cui abbiamo bisogno sono accessibili in questo modo.
All'interno della nostra dichiarazione "foreach", abbiamo solo bisogno di estrarre il link e il titolo e posizionarlo all'interno di un tag "li". Il tag "link" contiene un link alla pubblicazione effettiva. Il cartellino del titolo contiene ovviamente il titolo del post. Questo è tutto ciò di cui abbiamo bisogno per questo particolare progetto, ma ti consiglierei di rivedere alcune delle altre informazioni a tua disposizione. Basta visualizzare la fonte di qualsiasi feed RSS per analizzare la struttura.
La nostra logica è ora completa. Ora dobbiamo creare la nostra pagina index.php e chiamare la funzione.
Incolla il seguente codice nella tua pagina index.php.
- Nettuts
- ThemeForest
- screencast
Come ho detto prima, non voglio entrare troppo nel "design". Collis l'ha già fatto per te. Fai riferimento a questo tutorial per la tua "correzione del design". Ma per una rapida panoramica, stiamo memorizzando i nostri link di navigazione all'interno di una lista non ordinata che ha un ID di "nav". Nella nostra sezione dei contenuti principali, abbiamo tre div denominati "content_1", "content_2" e "content_3", rispettivamente. All'interno di ogni divisione si trova la nostra funzione "getFeed" e si passano i diversi URL ai nostri feed RSS.
Aggiungi in alcuni CSS estremamente semplice e ottieni questo:
Apri il tuo file "myScripts.js" e incolla il seguente codice:
Accentsconagua
$ (function () $ ('# mainContent div: not (: first)'). hide (); $ ('ul li a'). click (function () $ ('ul # nav li a') .removeClass ('selected'); $ (this) .addClass ('selected'); var href = $ (this) .attr ('href'); var split = href.split ('#'); $ (' #mainContent div '). hide (); $ (' # mainContent div # '+ split [1]). fadeIn (); return false;);); Quando il documento è pronto per essere manipolato, prenderemo tutti i nostri contenuti div, ma non il primo, e li nascondiamo. Questo rimuoverà i secondi due feed RSS.
Successivamente, quando un utente fa clic su uno dei nostri collegamenti di navigazione, eseguiremo una funzione. All'interno di questa funzione, rimuoveremo la classe "selezionata" da tutti i nostri tag di ancoraggio di navigazione. Questa classe viene utilizzata per fornire un riscontro visivo su quale scheda è attualmente selezionata. In questo nudo esempio, ho semplicemente reso il testo in grassetto per quella particolare scheda. Ora aggiungiamo questa classe specificatamente al tag anchor che è stato cliccato - $ (this) .addClass ('selected');
Andando avanti, stiamo creando una variabile chiamata 'href' e la stiamo rendendo uguale all'href del tag anchor che è stato cliccato. Se facciamo riferimento al nostro documento, questi tag di navigazione collegano le sezioni all'interno del contenuto principale: "# content_1", "# content_2", "# content_3". L'idea è che, se l'utente non ha Javascript abilitato, questi link faranno scorrere l'utente direttamente al feed corretto.
Questo serve anche un altro vantaggio unico. Considera questo: il tag di navigazione NETTUTS ha il suo URL impostato su "# content_1". Ora, nella sezione del contenuto principale, il div con un id di"content_1"ospita il nostro feed RSS NETTUTS. Quindi ... abbiamo creato una connessione tra i due! Spero che abbia un senso, è un po 'difficile da descrivere. Riferisci allo screencast se non ho illustrato questo punto abbastanza bene.
Userò "split" per rimuovere il simbolo #. Split funziona nello stesso modo della funzione di esplosione di PHP.
var split = href.split ('#'); Ora, l'array "split [1]" sarà uguale a "content_1". Il passo finale è trovare il contenuto div principale che ha quell'id esatto e sfumarlo di conseguenza.
$ ('# mainContent div #' + split [1]). fadeIn (); Spero che questo tutorial ti abbia aiutato. Una volta che hai combinato il disegno del tutorial di Collis con la logica di questo, ti troverai con una fantastica aggiunta alla tua barra laterale. Tuttavia, questo tut dovrebbe servire come primo passo per i principianti. Do il benvenuto a tutti voi per perfezionare il codice per renderlo più avanzato e a prova di errore. Non sono andato nell'ultima parte per salvare qualcosa per la parte 2! : p
