Aputyökalu MailPoet-muotoiluun

Otin hiljattain käyttöön MailPoet-pluginin, jolla voi WordPressistä lähetellä uutiskirjeitä. Työkaluna tämä on vallan näppärä, mutta tiettyä kankeutta siinä on, sähköpostin rajoituksista johtuen.

Lautapelioppaan uutiskirjeessä käytetään uutiskatsausten sisältöä, eli kopioin tekstiä artikkelin esikatselusta MailPoetin editoriin. Tämä kopiointi ei mene aivan saumattomasti. Yksi ongelma esimerkiksi on, että MailPoetissa oletuksena tekstikappaleiden välissä ei ole väliä, vaan teksti tulee yhteen pötköön.

Tilannetta voisi korjata ylimääräisillä rivivaihdoilla kappaleiden välissä, mutta se on rumaa ja työlästä. Toinen tapa on hajoittaa kappaleet erillisiksi tekstielementeiksi, mutta sekin on työlästä. CSS-tyyleillä tämä menisi hyvin, mutta MailPoet ei anna muokata uutiskirjeiden CSS:ää.

Keksin kuitenkin, että MailPoetilla on oma mailpoet_wp_post-CSS-luokka, joka tekee kappaleiden perään sopivasti tyhjää tilaa. Vaan onhan sekin aika työlästä, että käy nämä kaikki korjaamassa käsin.

Päädyin ratkaisemaan tämän ongelman tekemällä pienen apusivun, jossa on kaksi tekstikenttää. Kun teksti on kopioitu WordPressin esikatselusta MailPoetiin, MailPoetin tuottama HTML-koodi kopioidaan toiseen tekstikentistä, jonka jälkeen toiseen tekstikenttään – ja suoraan leikepöydälle – menee korjattu HTML-koodi, jonka voi sitten sijoittaa takaisin MailPoetiin.

<html>
<body>
	<h1>Lähde</h1>
		<textarea id="lahde" cols="80" rows="15"></textarea>
	<h1>Kohde</h1>
		<textarea id="kohde" cols="80" rows="5"></textarea>
	<script>
		const lahde = document.querySelector('#lahde')
		lahde.addEventListener('change', (event) => {
			const kohde = document.querySelector('#kohde')
			const spanRegex = /<span>&nbsp;<\/span>/gi
			const pRegex = /<p>/gi
			let teksti = event.target.value.replace(spanRegex, ' ').replace(pRegex, '<p class="mailpoet_wp_post">')
			kohde.textContent = `${teksti}`
			kohde.select()
			document.execCommand('copy')
		})
	</script>
</body>
</html>

Jos haluat käyttää tätä, tallenna sivun sisältö HTML-tiedostoon koneellesi ja avaa se selaimessa.

Tämä pieni aputyökalu yksinkertaistaa uutiskirjeen kokoamisen prosessia merkittävästi.

Vastaa

Sähköpostiosoitettasi ei julkaista. Pakolliset kentät on merkitty *

This site uses Akismet to reduce spam. Learn how your comment data is processed.