Bouw een responsieve e-mail nieuwsbrief sjabloon met RSS in WordPress

Als je wilt leren hoe je een e-mailnieuwsjabloon kunt maken met WordPress, ben je hier aan het juiste adres. Voordat we beginnen, zorgen we ervoor dat je volledig begrijpt wat ik probeer te onderwijzen. De eindresultaten zullen u een WordPress paginasjabloon geven die is ontworpen om te worden gebruikt als een sjabloon voor e-mailnieuwsbrief door uw URL te importeren met e-mailnieuwsbriefsoftware zoals GroupMail die reageert op e-mailclients zoals Gmail of Outlook op elk apparaat zoals mobiel of tablet zodat deze mooi wordt weergegeven. Maar wacht, er is meer - deze sjabloon toont de meest recente berichten van elke RSS-feed, dus de e-mailnieuwsbrief is al klaar, wachtend om te worden verzonden. Die uitleg is veel om in te nemen, dus het is misschien het beste als je naar het live-voorbeeld kijkt.

Als je deze zin aan het lezen bent, betekent dit dat je klaar bent om een RSS-parsersjabloon voor e-mailnieuwsbezoeken te maken, dus zonder meer, laten we beginnen.

De paginasjabloon maken

Open een nieuw bestand in de teksteditor van uw keuze. Voordat je begint, sla je je bestand op als page-responsive-rss-newsletter.php. Het allerbelangrijkste is om de bestandsnaam te starten met ìpage ", zodat deze netjes op je hostingaccount staat en er geen pauzes zijn omdat servers dat haten.
Aan de bovenkant van het nieuwe bestand begon met het vertellen van WordPress de naam van onze paginasjabloon, die zal verschijnen in het vervolgkeuzemenu WordPress paginasjabloon.
```
 
```
Voeg vervolgens het meta-element van de viewport toe binnen de om de browser te activeren om de pagina op een beter leesbare schaal weer te geven. Als u op het web surft op een smartphone, merkt u hoe websites worden geschaald om binnen de parameters van het apparaat te passen, waardoor u veel kunt in- en uitzoomen. Dit is voor het gemak van de gebruiker, aangezien de meeste websites geen mobiele site hebben. Dus ik gebruikte dus de breedte van het apparaat zal worden gebruikt als de breedte van het kijkvenster en de beginschaal uitschakelen. Omdat de automatische zoomlens de lay-outelementen die ik heb gebruikt, echt kan verpesten maximale schaal = 1, gebruiker-schaalbaar = 0 waardoor de zoomfunctionaliteit helemaal wordt verwijderd, zodat de gebruiker de lay-out niet kan wijzigen. Hiermee wordt het ontwerp op de parameters van het apparaat vergrendeld. Wanneer u de meer leesbare schaal-metatag en vergrendelde auto-zoom-tag combineert, krijgt u de onderstaande resultaten:
```
 
```
Laten we het maken geen spatiëring rond de randen, voeg hiervoor de marge-eigenschap toe margin: 0. Bovendien heeft WebKit (de browser die uw HTML-e-mails weergeeft op de iPhone, Android en andere apparaten) een geweldige functie waarbij het de tekstgrootte automatisch aanpast wanneer het kijkvenster wordt gewijzigd om u de beste leeservaring te bieden, raad ik aan het lettertype te wijzigen; om dit te doen, voeg de eigenschap toe -webkit-text-size-aan te passen: geen.
```
 
```
Maak een headerafbeelding die zo breed is als 900 px breed, op die manier ziet de afbeelding er niet gepixeld uit op een breedbeeldmonitor en ziet deze er schoon uit op een mobiel apparaat. Maar vergeet niet om de afbeelding zo veel mogelijk te comprimeren, dus het duurt niet lang voordat de gebruiker de afbeeldingen in de e-mailclient weergeeft. Voeg ook geen alt- of title-eigenschappen toe binnen de tag of wordt weergegeven als de teaser in de inbox van de abonnee. Om ervoor te zorgen dat de headerafbeelding mooi op elk apparaat wordt weergegeven, voegt u een breedte van 100% toe, zoals u in het voorbeeld kunt zien.
```
 
```
Laten we nu een externe feed ophalen en analyseren door WordPress te gebruiken fetch_feed functie door de onderstaande code in uw te plakken . Dit maakt de sjabloon het werk waard. De RSS-parser toont de meest recente berichten van elke RSS-feed, dus als u klaar bent om uw nieuwsbrief te verzenden, zijn de nieuwste verhalen al ingevuld, dus er is geen extra werk nodig om uw e-mailnieuwsbrief met inhoud te vullen. Deze truc wordt bereikt door uw URL te importeren met behulp van e-mailnieuwsbriefsoftware zoals GroupMail, maar ik kom hier later op terug. Wat deze sjabloon biedt is vergelijkbaar met Feedburner, het bouwt uw e-mailnieuwsbrief voor u, met uw nieuwste inhoud. In plaats van dat Feedburner deze automatisch verzendt met mogelijke fouten of inhoud die u niet in de nieuwsbrief wilt, helpt deze sjabloon u snel uw e-mailnieuwsbrief te verzenden met de optie om deze te bewerken voordat u verzendt.
```
  get_item_quantity (3); // geef het aantal items op $ items = $ feed-> get_items (0, $ limit); // maak een array met items if ($ limit == 0) echo 'De feed is leeg of niet beschikbaar.
';  else foreach ($ items als $ item):?>        get_permalink (); ?> "alt ="get_title (); ?> ">get_title (); ?>
  get_permalink (); ?> "alt ="get_title (); ?> ">  
 
   
```
Om ervoor te zorgen dat de bovenstaande code werkt, zorgt u ervoor dat de feed.php bestand staat op de juiste locatie: include_once (ABSPATH. WPINC. "/feed.php").

Voeg ten tweede uw RSS-feed toe $ feed = fetch_feed ("http://rss1.smashingmagazine.com/feed/").

Geef ten derde het aantal berichten op dat je wilt weergeven $ limit = $ feed-> get_item_quantity (3).

Wijzig vervolgens uw foutmelding if ($ limit == 0) echo '
De feed is leeg of niet beschikbaar.
'.

Nu het leuke gedeelte, ontwerpen hoe de berichten verschijnen. Aangezien deze sjabloon is ontworpen voor alle apparaten, inclusief mobiele apparaten, is het belangrijk dat we ons houden aan een indeling met één kolom voor de beste resultaten. Twee kolommen is acceptabel, maar weet dat het moeilijker is om te lezen op een kleiner apparaat zoals een iPhone.

Om het responsieve ontwerp te creëren, begint u met een
met 3 kolommen met een totale breedte van 100%.
```
 
```
Het is eenvoudig, ik weet het, maar het werkt. Een gebruiker kan zijn browser aanpassen en een mooi ogend responsief ontwerp krijgen op basis van de 100% breedte. Te veel e-mailclients (Gmail) ondersteunen geen CSS3-mediaquery's. Zo kunt u verschillende stylesheets toepassen voor een responsieve weergave, dus het is veiliger om inline stylesheets te gebruiken in plaats van extern. Houd rekening met de ondersteunde HTML en CSS die werken in de meeste populaire e-mailclients. Op die manier reageert het ontwerp op alle apparaten en e-mailclients.

De eerste kolom met een breedte van 1% is uitsluitend bedoeld voor ontwerpdoeleinden. Door een achtergrondkleur en randkleur toe te voegen, krijgt u een mooi ontwerp.
```
  
```
De tweede kolom is waar de titel is, neemt 90% van de breedte in beslag. De titel is een klikbare hyperlink naar het oorspronkelijke bericht. Gebruik de PHP-code om de titel van de RSS-feed weer te geven get_title (); ?>. Gebruik de PHP-code om de permalink te krijgen get_permalink (); ?>.

U kunt een beschrijving van de feed weergeven get_description (), 0, 100); ?>, maar houd er rekening mee dat de lay-out kan breken afhankelijk van de RSS-feed die u gebruikt. En helaas kunt u geen afbeeldingen uit uw feed weergeven, zelfs als uw feed deze aanbiedt. Een oplossing kan zijn om een WordPress-plug-in te installeren.
```
 get_permalink (); ?> "alt ="get_title (); ?> ">get_title (); ?>
```
De derde kolom met een breedte van 9% geeft een 44x44-knop weer die hyperlinks naar het oorspronkelijke bericht bevat (Apple zegt dat de gemiddelde vingerafdruk 44x44 is). Dit geeft de gebruiker een actuele ontwerptrend voor apps met een andere klikbare optie om het verhaal te lezen. Nogmaals, vergeet niet om uw afbeeldingen zo veel mogelijk te comprimeren.
```
 get_permalink (); ?> "alt ="get_title (); ?> ">
```
Dat is het, sjabloon is voltooid. Maar wees niet bang om verder te gaan door een footer-sectie toe te voegen met sociale media, algemene contactgegevens en een link om je af te melden. Vergeet niet om de breedte op 100% te houden.

Upload uw bestand

Aangezien het paginasjabloon is voltooid, uploadt u het bestand naar uw FTP-host in uw geïnstalleerde themamap. Bijvoorbeeld: wp-content / themes / theme-folder.

De WordPress-pagina maken

Log in op WordPress en maak een pagina. Vergeet bij het maken van de pagina niet om de sjabloon te wijzigen in de optie "Responsieve RSS-nieuwsbrief" in het vervolgkeuzemenu. Voor een titel is het niet belangrijk om een SEO-vriendelijke titel te hebben, omdat de sjabloon specifiek is ontworpen voor een nieuwsbrief, maar omdat de sjabloon responsief is, ziet deze er nog steeds online uit. Druk op publiceren om de URL live te maken, zodat u de URL kunt kopiëren en in uw bulletin-software kunt plakken.

Uw URL importeren in uw nieuwsbrief software

Open uw e-mail nieuwsbrief software. Ik gebruik GroupMail om de klus te klaren, maar bijna elke andere nieuwsbriefsoftware zal het lukken. Maak een nieuw bericht en zoek naar de optie voor het importeren van web-URL's. Afhankelijk van de software kan het iets anders zeggen, maar het idee is om een website te nemen en deze in een nieuwsbrief te veranderen door simpelweg een URL te importeren.

De resultaten zullen u een responsieve e-mailnieuwsbrief geven die klaar is voor gebruik en die op de meeste e-mailclients werkt, wat een geweldig Feedburner-alternatief is. Je hoeft geen inhoud aan de nieuwsbrief toe te voegen, je hoeft niet te rotzooien met het ontwerp, het is klaar voor gebruik. Maar wat is leuk, voordat je de nieuwsbrief verzendt, heb je de mogelijkheid om de inhoud te bewerken, dus er zijn geen fouten of inhoud die je niet wilt in de nieuwsbrief.

Nu u klaar bent, test u hoe het responsieve ontwerp wordt weergegeven door uw browser te minimaliseren of te bekijken in The Responsinator.

Code