Home » Wordpress » Mooi php,html of andere code presenteren in je post

Mooi php,html of andere code presenteren in je post

Worpress code in je post

CODE op je website/blog post!

Als je code wil weergeven die een ander kan kopiëren  en gebruiken op zijn of haar website dan lijkt dat makkelijk. Je kopieert gewoon de code uit je wordpress editor of css editor en je plakt dit in je post. Helaas gaat dat niet goed werken omdat er een filter in wordpress draait. Na het ‘opslaan’ van je post voegt wordpress code toe zodat het geen uitvoerbare code meer is. Kopieer je deze code dan ontstaan er fouten bij de gebruikers van de code. De werkwijze van WordPress is echter wel heel begrijpelijk als je bedenkt dat je hackers anders de gelegenheid biedt om code in je posts te plaatsen.

Is het helemaal niet mogelijk om code in een post te laten zien?

Code Button

 

Natuurlijk is dit wel mogelijk. Allereerst bestaat er in de classic-editor de code button. Je ziet dan een blok waarin je de code plakt. WordPress voegt dan de benodigde code toe die gelden volgens de html richtlijnen zodat alles correct word weergeven in de verschillende browsers.

Een voorbeeld van het gebruik van “<>” zie je hieronder

 

<a href="https://www.bloggersnederland.nl" target="_blank" rel="nofollow">
<img src="http://bloggersnederland.nl/Logobloggersnederland.jpg" alt="bloggersnederland"></a>

Nog mooier “code” weergeven?

Ben van Blogtrommel.com heeft een leuk artikel geschreven over het ideale wordpress thema. Hij beschrijft daarin een aantal functies die standaard in een Theme zouden moeten zitten. Wat mij betreft is dat, een mooiere visuele weergave van code zoals hieronder weergegeven.


<a href="https://www.bloggersnederland.nl" target="_blank" rel="nofollow"><img src="http://bloggersnederland.nl/Logobloggersnederland.jpg" alt="bloggersnederland"></a>

Helaas zit dit niet standaard in mijn thema daarom heb ik een plugin gezocht en gevonden via wpbeginner.com. Namelijk de SyntaxHighlighter Evolved plugin. Een uitgebreide uitleg/tutorial inclusief gebruik in de Gutenberg editor vind je op WPbeginner.com.

Waar pas ik “Code” toe.

Eerlijk toegegeven! Eigenlijk niet veel. Ik pas wel eens CSS-Code toe om de uitlijning van widgets aan te passen. De kleur van een button (zie een vorige post) te veranderen, maar daar blijft het wel zo’n beetje bij.

Het gebruik van code werd echter actueel omdat ik een pagina wilde maken met de mogelijkheid een afbeelding inclusief URL (pagina-link) te downloaden. Een afbeelding maken met een geïntegreerde pagina-link is volgens mijn bronnen verdacht/dubieus. Het is een bekende hack methode. Dus dat leek mij geen goede optie.  Een veel gebruikte manier is dat je een link(URL) verwerkt in html code om de afbeelding heen. Een goed voorbeeld is een banner die je van je affiliates (partner) zoals bol.com of tradetracker.com gebruikt.

 

 

De HTML code zoals die bij “code” in de afbeelding staat, kopieer je en die plak je vervolgens in de tekst-widget of in de Eigen HTML-widget van WordPress (zie volgende afbeelding).

 

Zoals je in bovenstaande afbeelding kunt zien gaat het mij om het Logo van Bloggers Nederland. Je kunt het in werking zien op de download pagina van bloggersnederland.nl en bloggersnoordnederland.nl.

Gebruiken jullie wel eens code en deel je dit via je Blog laat het mij weten! Heb je goede aanvullende tips “Let Me Know”!

CHEERS

Joost

Share:

7 Reacties

  1. december 1, 2019 / 10:12 am

    Ik heb dit geleerd, toen ik voor het eerst met mijn eigen site bezig was. Wat ben ik toen aan het hannesen geweest, voor ik het door had. Duidelijk artikel!

  2. december 1, 2019 / 10:20 am

    lekker duidelijk artikel!! ik heb er ooit een cursus voor gedaan en daar ben ik nog steeds blij mee

  3. december 1, 2019 / 10:22 am

    Ik kijk regelmatig in de code, om kleine dingetjes aan te passen. Dat kan zoiets simpels zijn als een blok toevoegen of een kleur veranderen, maar soms wil je ook grotere dingen kunnen doen. Als je het eenmaal door hebt is het erg leuk!

  4. december 1, 2019 / 12:25 pm

    Nog maar weinig gedaan. Maar wel iets wat ik nog wil leren. Soms best handig.

  5. december 1, 2019 / 1:44 pm

    Nuttig artikel! Ik ben net begonnen met bloggen en heb mij hier redelijk in verdiept. Vind het nog steeds ingewikkeld. Heb het wel gebruikt, omdat ik bepaalde dingen wilde op mijn website, maar dat is nu klaar. Vooralsnog geen nieuwe HTML-codes nodig.

  6. december 1, 2019 / 3:43 pm

    Ik kan echt de standaard dingetjes en daar houdt het een beetje op eigenlijk. Gelukkig ken ik wel mensen die het wel kunnen.

  7. Victor
    december 2, 2019 / 3:51 pm

    Html wordt mij al gauw te technisch masr je ligt het helder uit. Ik ga hier nog eens goed voor zitten, ben benieuwd wat er mogelijk is.

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.