Mi è stato chiesto da Vincenzo come ho realizzato il menù News / Seleziona la Fonte che vedete nella sidebar e contiene gli ultimi post pubblicati su 3 diversi blog.
Non è molto complicato, quindi vediamo i vari passaggi:
1. Google AJAX Feed API
Per prima cosa è necessario iscriversi per ottenere le proprie API Keys dal sito di Google.
A questo indirizzo http://code.google.com/apis/ajaxfeeds/ invece trovate esempi sull’uso di queste API, e una pagina che elenca tutte le classi presenti in modo da poter successivamente personalizzare il layout tramite CSS.
2. Modifica Header
Nell’header del vostro tema di WordPress, subito prima del fine </head> è necessario inserire il seguente codice:
<script type="text/javascript" src="http://www.google.com/jsapi?key=CODICE-PERSONALE-DA-PRELEVARE-SU-GOOGLE"></script>
<script type="text/javascript">
google.load("feeds", "1");
function initialize() {
var feedControl = new google.feeds.FeedControl(8);
feedControl.addFeed("http://www.pietrodigiorgio.it/feed/", "BLOGGR");
feedControl.addFeed("http://www.vistablog.it/feed/", "VISTABLOG");
feedControl.addFeed("http://www.downloadr.it/feed/", "DOWNLOADR");
feedControl.setNumEntries(4);
feedControl.draw(document.getElementById("feedControl"),
{
drawMode : google.feeds.FeedControl.DRAW_MODE_TABBED});
}
google.setOnLoadCallback(initialize);
</script>
Dovete controllare tutti i file che compongono il vostro tema per assicurarvi di inserire il codice in tutti quelli che contengono i tag <head></head>. Generalmente è il file header.php, ma non sempre e a volte si tratta di più file.
3. Richiamare i Feed
Per ultimo è necessario richiamare i Feed RSS in una zona a scelta del vostro sito, che può essere la sidebar, l’indice del blog o una pagina statica creata apposta.
Inserire il seguente codice dove si vogliono visualizzare le News:
<div id=”feedControl”>Loading</div>
Il risultato finale sarà simile al seguente:
4. Personalizzazioni
Sono segnate in grassetto parti di codice dove inserire la chiave di Google AJAX Feed API e il numero 4 che indica quanti post prelevare da ogni sito (potete inserire il numero che preferite).
Per aggiungere una quarta o quinta fonte (etc.) potete copia-incollare una delle righe che contengono i feed RSS nel rigo successivo e personalizzarlo.
Ad esempio
feedControl.addFeed("http://www.pietrodigiorgio.it/feed/", "BLOGGR");
diventa
feedControl.addFeed("http://www.mioblog.it/URL_DEL_FEED/", "MIOBLOG.IT");
Dal link di Google fornito in alto si può scegliere una variante che mostra le news di vari siti miscelate e non in Tabs come nell’esempio della mia sidebar.
5. News in un’unica scheda
Questa è la variante per avere tutte le news in un’unica scheda, da sostituire al codice del punto 2:
<script type="text/javascript" src="http://www.google.com/jsapi?key="YOUR-KEY"></script>
<script type="text/javascript">
google.load("feeds", "1");
function initialize() {
var feedControl = new google.feeds.FeedControl();
feedControl.addFeed("http://www.digg.com/rss/index.xml", "Digg");
feedControl.addFeed("http://feeds.feedburner.com/Techcrunch", "TechCrunch");
feedControl.draw(document.getElementById("feedControl"));
}
google.setOnLoadCallback(initialize);
</script>
6. Credits
Se avete trovato interessante questo breve tutorial potete “ripagarmi” lasciando il feed di BLOGGR (o di uno degli altri 2 siti) nel vostro mini aggregatore.
Grazie!
vincenzo
Non posso far altro che ringraziarti sentitamente.
Ho provato e funziona correttamente.
Adesso provo ad inserirlo nella sidebar, ma essendo il tema widget ready, mi pare di aver capito che ho poche speranze di modificare il codice.
Vorrà dire che lo meto in altra posizione.
ciao
pi3tr0
@ vincenzo
il tema “widget ready” non vuol affatto dire che non puoi inserire codice “a mano” nella sidebar, quindi dovresti riuscire benissimo :-)
pi3tr0
bisognerebbe studiarsi il tema che hai, spostando la chiamata dei widget dentro la sidebar e togliendo la funzione che esclude la sidebar
quindi ricapitolando dovresti
1. chiamare la sidebar come in tutti i temi “normali”
2. if function exist metterlo dentro la sidebar, ma senza else
pi3tr0
puoi dare un’occhiata al tema “default” di wordpress, li la chiamata ai widget mi sembra che sia dentro la sidebar, che quindi viene chiamata sempre
naturalmente, se è così, tutti i vari file del tema chiamano i widget al posto della sidebar vanno modificati, è un bel lavoro da fare, ti consiglio di farti un backup del tema prima di metterci le mani
vincenzo
Ciao pi3tr0,
il mio problema è questo,
tutte le modifiche html ecc, non hanno alcun effetto quando poi lancio il browser.
Ho letto n giro che il problema è che vi è una chiamata in index.php ed effettivamente c’è…, un qualcosa di simile:
if function exist… chiamo i vari widget else chiamo sidebar.php,
quindi mi basta anche avere un solo widget che non carico sidebar.php.
Ho provato a togliere i widget ed effettivamente vedo tutto cio che ho modificato in sidebar.php.
Hai una soluzione facile? Oppure devo ridisegnarmi la sidebar senza widget?
grazie
vincenzo
@ pi3tr0
allora, ho guardato, hai ragione la chiamata è in sidebar.php
Dopo l’if c’era l’else che ho tolto, come pure l’end if.
Funziona correttamente, mi caricava sia i widget che il resto della pagina,
ovviamente come vedi ho ripulita la pagina da tutto quello che era sotto l’else, in modo che al momento mi carichi solo i widget.
Ultimo problemuccio, cui non so se vi è rimedio è che tutte le mie modifiche possono essere visualizzate solo prima o dopo dei widget chiamati.
Ti ringrazio molto
ciao
pi3tr0
perfetto :-)
per l’ultimo problema non c’è soluzione, una volta che decidi il punto dal quale visualizzare i widget vengono mostrati tutti, quello che non è widget lo puoi fare vedere prima o dopo (e propbabilmente sia prima che dopo)
la soluzione è fare diventare “non widget” quello che adesso è widget, ad esempio se vuoi mostrare al primo posto gli ultimi commenti (widget) al secondo posto le news (non widget) e successivamente gli altri widget, gli ultimi commenti devi per forza toglierli come widget e inserire il codice nella sidebar
dan
Ciao, volevo chiederti se è necessario usare le Google AJAX Feed API, nel senso che ho ottenuto un risultato come il tuo ma senza le API, usando solo i Feed RSS… mi spieghi meglio? grazie
pi3tr0
@ dan
in teoria si, ma non so se in questi 7 mesi (data del post) le cose sono cambiate