Costruire un modello di newsletter e-mail reattivo con RSS in WordPress

Se vuoi imparare come creare un modello di newsletter tramite WordPress sei arrivato nel posto giusto. Prima di iniziare, assicurati di comprendere appieno cosa sto cercando di insegnare. I risultati finali forniranno un modello di pagina WordPress progettato per essere utilizzato come modello di newsletter via e-mail importando l'URL con software di newsletter come GroupMail che risponde ai client di posta elettronica come Gmail o Outlook su qualsiasi dispositivo come cellulare o tablet in modo che venga visualizzato correttamente. Ma aspetta c'è di più - questo modello mostra i post più recenti da qualsiasi feed RSS, quindi la newsletter è già finita, aspetta solo di essere inviata. Questa spiegazione è molto da prendere, quindi potrebbe essere meglio se guardi all'esempio dal vivo.

Se stai leggendo questa frase significa che sei pronto per creare un modello di parser RSS responsivo per la newsletter, quindi senza ulteriori indugi, iniziamo.

Creazione del modello di pagina

Apri un nuovo file nell'editor di testo di tua scelta. Prima di iniziare, salva il tuo file come page-responsive-rss-newsletter.php. Soprattutto, avvia il nome del file con "pagina" in modo che si organizzi bene sul tuo account di hosting e senza interruzioni perché i server lo odiano.
Nella parte superiore del nuovo file è iniziato dicendo a WordPress il nome del modello di pagina, che verrà visualizzato nel menu a discesa del modello di pagina WordPress.
```
 
```
Successivamente, aggiungi il meta elemento della vista all'interno di per attivare il browser per rendere la pagina su una scala più leggibile. Navigando sul web su uno smartphone noterai come i siti web vengono ridimensionati per adattarsi ai parametri del dispositivo, il che rende molto più ampio l'ingrandimento e lo zoom. Questo è per comodità dell'utente poiché la maggior parte dei siti Web non dispone di un sito mobile. Quindi, l'ho usato quindi la larghezza del dispositivo verrà utilizzata come larghezza della finestra e disabiliterà la scala iniziale. Poiché lo zoom automatico può davvero rovinare gli elementi del layout che ho usato scala massima = 1, scalabile dall'utente = 0 che rimuoverà completamente la funzionalità di zoom in modo che l'utente non possa ridimensionare il layout. Questo bloccherà il design ai parametri del dispositivo. Quando combini il metatag della scala più leggibile e il tag auto-zoom bloccato ottieni i seguenti risultati:
```
 
```
Facciamo il non avere spaziature / imbottiture attorno ai bordi, per fare ciò aggiungere la proprietà del margine margin: 0. Inoltre, WebKit (il browser che mostra le tue email HTML su iPhone, Android e altri dispositivi) ha una grande funzionalità in cui regola automaticamente le dimensioni del testo quando la finestra cambia per offrirti la migliore esperienza di lettura, ti consiglio di disattivare il ridimensionamento dei font; per fare questo aggiungi la proprietà -webkit-text-size-adjust: nessuno.
```
 
```
Crea un grafico di intestazione di larghezza pari a 900px, in modo che l'immagine non appaia pixelizzata su un monitor widescreen e sia pulita su un dispositivo mobile. Ma ricorda di comprimere il più possibile la grafica, quindi non ci vuole troppo tempo perché l'utente possa visualizzare le immagini all'interno del client di posta elettronica. Inoltre, non aggiungere alcuna proprietà di alt o titolo all'interno di tag o verrà visualizzato come teaser all'interno della casella di posta dell'iscritto. Per assicurarti che il grafico dell'intestazione sia visualizzato correttamente su qualsiasi dispositivo, aggiungi una larghezza del 100%, come puoi vedere nell'esempio.
```
 
```
Ora recuperiamo un feed esterno e lo analizziamo usando WordPress fetch_feed funzione incollando il codice sottostante nel tuo . Questo rende il modello degno del lavoro. Il parser RSS mostrerà i post più recenti da qualsiasi feed RSS, quindi quando sei pronto per inviare la tua newsletter le storie più recenti sono già compilate, quindi non è necessario alcun lavoro aggiuntivo per riempire la tua newsletter di contenuti. Questo trucco si ottiene importando il tuo URL usando un software di newsletter via email come GroupMail, ma ci arriveremo più tardi. Ciò che questo modello offre è simile a Feedburner, crea la tua newsletter per te, con i tuoi contenuti più recenti. Ma, invece di inviarlo automaticamente a Feedburner con possibili errori o contenuti che non ti interessano nella newsletter, questo modello ti aiuta a inviare rapidamente la tua newsletter via email con l'opzione di modifica prima di inviare.
```
  get_item_quantity (3); // specifica il numero di articoli $ articoli = $ feed-> get_items (0, $ limit); // crea una matrice di elementi if ($ limit == 0) echo 'Il feed è vuoto o non disponibile.
';  else foreach ($ items as $ item):?>        get_permalink (); ?> "alt ="get_title (); ?> ">get_title (); ?>
  get_permalink (); ?> "alt ="get_title (); ?> ">  
 
   
```
Affinché il codice sopra riportato funzioni, assicurati che il feed.php il file è nella posizione corretta: include_once (ABSPATH. WPINC. "/feed.php").

In secondo luogo, aggiungi il tuo feed RSS $ feed = fetch_feed ("http://rss1.smashingmagazine.com/feed/").

Terzo, inserisci la quantità di post che desideri mostrare $ limit = $ feed-> get_item_quantity (3).

Quindi, modifica il messaggio di errore if ($ limit == 0) echo '
Il feed è vuoto o non disponibile.
'.

Ora la parte divertente, progettando come appaiono i post. Poiché questo modello è progettato per tutti i dispositivi, incluso il cellulare, è importante attenersi a un formato a una colonna per i migliori risultati. Due colonne sono accettabili, ma sappiamo che sarebbe più difficile leggere su un dispositivo più piccolo come un iPhone.

Per creare il design reattivo, iniziare con a
con 3 colonne per una larghezza del 100%.
```
 
```
È semplice, lo so, ma funziona. Un utente può ridimensionare il proprio browser e ottenere un design reattivo dall'aspetto basato sulla larghezza del 100%. Troppi client di posta elettronica (Gmail) non supportano le query multimediali CSS3, ovvero come applicare diversi fogli di stile per uno schermo reattivo, quindi è più sicuro avere fogli di stile in linea anziché esterni. Tieni presente l'HTML e il CSS supportati che funzionano nei client di posta più popolari. In questo modo il design sarà reattivo su tutti i dispositivi e i client di posta elettronica.

La prima colonna con larghezza dell'1% è esclusivamente per scopi di progettazione. L'aggiunta di un colore di sfondo e il colore del bordo ti danno un aspetto gradevole.
```
  
```
La seconda colonna è dove si trova il titolo, occupando il 90% della larghezza. Il titolo è un collegamento ipertestuale cliccabile al post originale. Per mostrare il titolo del feed RSS usa il codice PHP get_title (); ?>. Per ottenere il permalink usa il codice PHP get_permalink (); ?>.

Puoi visualizzare una descrizione dal feed get_description (), 0, 100); ?>, ma tieni presente che il layout potrebbe interrompersi a seconda del feed RSS che stai utilizzando. E sfortunatamente non puoi visualizzare alcuna immagine dal tuo feed, anche se il tuo feed lo offre. Una soluzione potrebbe essere l'installazione di un plug-in WordPress.
```
 get_permalink (); ?> "alt ="get_title (); ?> ">get_title (); ?>
```
La terza colonna con una larghezza del 9% mostra un pulsante 44x44 che collega ipertestuali al post originale (Apple afferma che il dito medio è 44x44). Ciò offre all'utente una tendenza attuale nella progettazione di app con un'altra opzione cliccabile per leggere la storia. Ancora una volta, ricorda di comprimere la tua grafica il più possibile.
```
 get_permalink (); ?> "alt ="get_title (); ?> ">
```
Questo è tutto, il modello è finito. Ma non aver paura di andare oltre aggiungendo una sezione di footer con social media, informazioni di contatto generiche e un link di annullamento dell'iscrizione. Ricorda solo di mantenere la larghezza al 100%.

Caricamento del tuo file

Dal momento che il modello di pagina è finito, caricare il file sul proprio host FTP nella cartella del tema installato. Per esempio: -Content wp / themes / theme-cartella.

Creazione della pagina di WordPress

Accedi a WordPress e crea una pagina. Quando si effettua la pagina, ricordarsi di cambiare il modello con l'opzione "Newsletter reattiva RSS" nel menu a discesa. Per un titolo, non è importante avere un titolo di SEO friendly, perché il modello è progettato specificamente per una newsletter, ma dal momento che il modello è reattivo sarà ancora ok online. Hit pubblica per rendere vivo l'URL, così sarai in grado di copiare e incollare l'URL nel tuo software di newsletter.

Importazione dell'URL nel software della newsletter

Apri il tuo software di newsletter via email. Io uso GroupMail per portare a termine il lavoro, ma quasi tutti gli altri software di newsletter faranno il trucco. Crea un nuovo messaggio e cerca l'opzione URL web di importazione. Potrebbe dire qualcosa di diverso a seconda del software, ma l'idea è di prendere un sito web e trasformarlo in una newsletter semplicemente importando un URL.

I risultati ti daranno una newsletter pronta per il contenuto reattiva che funzionerà sulla maggior parte dei client di posta elettronica che è un'ottima alternativa Feedburner. Non c'è bisogno di aggiungere contenuti alla newsletter, non c'è bisogno di fare confusione con il design, è pronto. Ma cosa c'è di bello, prima di inviare la newsletter hai la possibilità di modificare il contenuto, quindi non ci sono errori o contenuti che non vuoi nella newsletter.

Ora che hai finito, prova come viene visualizzato il design reattivo riducendo al minimo il browser o visualizzandolo in The Responsinator.

Codice