Bygg en responsiv e-postvarselmall med RSS i WordPress

Hvis du vil lære å lage en nyhetsbrevmal ved hjelp av WordPress, kom du til riktig sted. Før vi begynner, la oss sørge for at dere forstår hva jeg prøver å lære. Sluttresultatene vil gi deg en WordPress-sidemal som er utformet for å bli brukt som en nyhetsbrevmal ved å importere nettadressen din med nyhetsbrevsoftware, for eksempel GroupMail, som reagerer på e-postklienter som Gmail eller Outlook på en hvilken som helst enhet som mobil eller nettbrettet slik at det vil vise seg pent. Men vent det er mer - denne malen viser de nyeste innleggene fra en hvilken som helst RSS-feed, slik at nyhetsbrevet er allerede ferdig, bare venter på å bli sendt. Denne forklaringen er mye å ta med, så det kan være best hvis du ser på liveeksemplet.

Hvis du leser denne setningen, betyr det at du er klar til å lage en nyhetsbrev-responsiv RSS-parsermal, så uten videre, la oss begynne.

Opprette sidemalen

Åpne en ny fil i tekstredigeringen etter eget valg. Før du begynner, lagre filen som side-responsive-rss-newsletter.php. Viktigst starter filnavnet med ìpageî så det organiserer pent på din hosting konto og ingen pauser fordi servere hater det.
Øverst på den nye filen begynte med å fortelle WordPress navnet på vår sidemaler, som vil vises i rullegardinmenyen for WordPress-sidenmalen.
```
 
```
Deretter legger du til visnings-meta-elementet inne i for å utløse nettleseren til å gjengi siden i en mer lesbar skala. Når du surfer på nettet på en smarttelefon, vil du legge merke til hvordan nettsteder skaleres for å passe inn i parametrene til enheten, noe som gir mye zoom inn og ut. Dette er for brukerens bekvemmelighet, siden de fleste nettsteder ikke har et mobilnettsted. Så brukte jeg så bredden på enheten vil bli brukt som bredden på visningsporten og deaktivere startskalaen. Siden automatisk zoom kan virkelig ødelegge layoutelementene jeg brukte maksimal skala = 1, bruker-skalerbar = 0 som vil fjerne zoom-funksjonaliteten helt, slik at brukeren ikke kan endre størrelsen på oppsettet. Dette vil låse designet til parametrene til enheten. Når du kombinerer den mer lesbare skalaen metatag og låst automatisk zoom-tag, får du de følgende resultatene:
```
 
```
La oss lage Ikke ha mellomrom / polstring rundt kantene, for å gjøre dette, legg til marginalegenskapen margin: 0. Pluss, WebKit (nettleseren som gjengir HTML-e-postene dine på iPhone, Android og andre enheter) har en flott funksjon der den automatisk justerer tekststørrelsen som visningsporten endres for å gi deg den beste leseopplevelsen, jeg anbefaler at du slår av størrelsen på skriftstørrelsen. for å gjøre dette, legg til eiendommen -webkit-text-size-adjust: ingen.
```
 
```
Lag en header-grafikk som er så stor som 900px i bredde, slik at grafikken ikke ser pikselisert ut på en widescreen-skjerm og ser ren ut på en mobilenhet. Men husk å komprimere grafikken så mye som mulig, så det tar ikke for lang tid for brukeren å vise bildene i e-postklienten. Legg heller ikke til noen alt- eller tittelegenskaper inni tag eller det vil vises som teaser i abonnentens innboks. For å sørge for at topptekstgrafen viser pent på en hvilken som helst enhet, legg til en bredde på 100%, som du kan se i eksemplet.
```
 
```
La oss nå hente en ekstern feed og analysere den ved å bruke WordPress FETCH_FEED Funksjon ved å legge inn underkoden i din . Dette gjør malen verdt arbeidet. RSS-parseren viser de nyeste innleggene fra en hvilken som helst RSS-feed, så når du er klar til å sende nyhetsbrevet, er de nyeste historiene allerede fylt, så det er ikke nødvendig med ekstra arbeid for å fylle nyhetsbrevet ditt med innhold. Dette trikset oppnås ved å importere nettadressen din ved hjelp av e-nyhetsbrev-programvare, for eksempel GroupMail, men jeg kommer til dette senere. Hva denne malen tilbyr, ligner på Feedburner, den bygger ditt nyhetsbrev for deg, med ditt nyeste innhold. Men i stedet for Feedburner sender det automatisk ut med mulige feil eller innhold som du ikke vil ha i nyhetsbrevet, hjelper denne malen deg raskt til å sende nyhetsbrevet ditt med muligheten til å redigere før du sender.
```
  get_item_quantity (3); // spesifiser antall elementer $ items = $ feed-> get_items (0, $ limit); // lage en rekke elementer hvis ($ limit == 0) echo 'Maten er enten tom eller utilgjengelig.
';  ellers foreach ($ elementer som $ element):?>        get_permalink (); ?> "alt ="get_title (); ?> ">get_title (); ?>
  get_permalink (); ?> "alt ="get_title (); ?> ">  
 
   
```
For at ovennevnte kode skal fungere, kontroller at feed.php filen er på riktig sted: include_once (ABSPATH. WPINC. "/feed.php").

For det andre, legg til RSS-feed $ feed = fetch_feed ("http://rss1.smashingmagazine.com/feed/").

Tredje, skriv inn antall innlegg du vil vise $ limit = $ feed-> get_item_quantity (3).

Deretter endrer du feilmeldingen hvis ($ grense == 0) ekko '
Maten er enten tom eller utilgjengelig.
'.

Nå den morsomme delen, og utformer hvordan innleggene dukker opp. Siden denne mal er designet for alle enheter, inkludert mobil, er det viktig at vi holder fast med et kolonneformat for å få de beste resultatene. To kolonner er akseptabelt, men vet at det ville være vanskeligere å lese på en mindre enhet som en iPhone.

For å skape den responsive designen starter med en
med 3 kolonner til sammen en bredde på 100%.
```
 
```
Det er enkelt jeg vet, men det fungerer. En bruker kan rescale nettleseren sin og få en fin, serig responsiv design basert på 100% bredden. For mange e-postklienter (Gmail) støtter ikke CSS3 medieforespørsler, som er hvordan du kan bruke forskjellige stilark for en responsiv skjerm, så det er sikrere å ha inline stilark i stedet for eksternt. Husk den støttede HTML og CSS som fungerer i mest populære e-postklienter. På denne måten vil utformingen være responsiv på alle enheter og e-postklienter.

Den første kolonnen ved 1% bredde er utelukkende for designformål. Å legge til en bakgrunnsfarge og kantfarge bidrar til å gi deg et flott utseende.
```
  
```
Den andre kolonnen er hvor tittelen er, og tar opp 90% av bredden. Tittelen er en klikkbar hyperkobling til det opprinnelige innlegget. For å vise RSS-feed tittelen bruker du PHP-koden get_title (); ?>. For å få permalinken, bruk PHP-koden get_permalink (); ?>.

Du kan vise en beskrivelse fra feedet get_description (), 0, 100); ?>, men husk at oppsettet kan bryte avhengig av RSS-feeden du bruker. Og dessverre kan du ikke vise noen bilder fra din feed, selv om fôret ditt tilbyr det. En løsning kan være å installere et WordPress-plugin.
```
 get_permalink (); ?> "alt ="get_title (); ?> ">get_title (); ?>
```
Den tredje kolonnen med 9% bredde viser en 44x44-knapp som hyperlinks til det opprinnelige innlegget (Apple sier at den gjennomsnittlige fingerpinnen er 44x44). Dette gir brukeren en gjeldende appdesign trend med et annet klikkbart alternativ for å lese historien. Igjen, husk å komprimere grafikken din så mye som mulig.
```
 get_permalink (); ?> "alt ="get_title (); ?> ">
```
Det er det, mal er ferdig. Men vær ikke redd for å ta det videre ved å legge til en footer-seksjon med sosiale medier, generisk kontaktinformasjon og en abonnementslink. Bare husk å holde bredden på 100%.

Laster opp filen din

Siden sidenmalen er ferdig, last opp filen til FTP-verten i den installerte temapappen. For eksempel: wp-content / themes / tema-mappen.

Opprette WordPress-siden

Logg inn på WordPress og lag en side. Når du gjør siden, husk å endre malen til alternativet "Responsive RSS Newsletter" i rullegardinmenyen. For en tittel er det ikke viktig å ha en SEO-vennlig tittel, fordi malen er designet spesielt for et nyhetsbrev, men siden malen er responsiv, vil den fortsatt se ok online. Hit publiser for å gjøre URL-adressen levende, så du vil kunne kopiere og lime inn nettadressen i nyhetsbrevprogramvaren.

Importerer nettadressen din til nyhetsbrevprogramvaren din

Åpne din nyhetsbrev programvare. Jeg bruker GroupMail for å få jobben fullført, men nesten alle andre nyhetsbrev programvare vil gjøre trikset. Opprett en ny melding og se etter alternativet for importwebadressen. Det kan si noe annerledes avhengig av programvaren, men ideen er å ta et nettsted og slå det til et nyhetsbrev ved å importere en nettadresse.

Resultatene vil gi deg et responsivt innholdsklar e-postbrev som vil fungere på de fleste e-postklienter som er et godt Feedburner-alternativ. Ingen å måtte legge til innhold i nyhetsbrevet, uten å måtte kaste med design, er det klart å gå. Men hva er fint, før du sender nyhetsbrevet, har du muligheten til å redigere innholdet, så det er ingen feil eller innhold som du ikke vil ha i nyhetsbrevet.

Nå som du er ferdig, test ut hvordan den responsive designen vises ved å minimere nettleseren din eller se den i Resp respondatoren.

Kode