Een regel tekst boven of onder een blogpost plaatsen

Een standaard regel (of) blok tekst boven of onder je blogpost plaatsen valt eigenlijk best wel mee.

Wil je direct een mail ontvangen wanneer nieuwe snippets zijn toegevoegd?

Vul dan onderstaand formulier in en je krijgt direct na het toevoegen van nieuwe snippets een email. Zo blijf je altijd bij!

Het is niet geheel ondenkbaar, zelfs behoorlijk waarschijnlijk, dat je vroeg of laat een standaard regel tekst, afbeeldingen of knoppen onder of boven aan je blogpost wilt plaatsen. In dit voorbeeld doen we dit met een regel tekst, maar we kunnen het eigenlijk met iedere vorm van HTML doen. Denk hierbij bijvoorbeeld aan een standaard banner (voor jouw product) boven iedere blogpost, of een standaard tekst onderaan.

Wanneer je een theme builder als Elementor Pro gebruikt kan je dat natuurlijk makkelijker en heel flexibel doen, maar ook wanneer je met ’traditionele’ WordPress thema’s werkt, is dit goed mogelijk. En dat zonder enige plugin te installeren.

Tekst boven de blogpost plaatsen

Laten we beginnen met een voorbeeld hoe we tekst boven een blogpost kunnen plaatsen.

<?php
add_filter(‘the_content’, ‘wxp_add_content_before’);

function wxp_add_content_before($content) {

   $my_custom_text = ‘<div class="wxp-custom-top">This is the text to show!</div>’;

   if(is_single() && !is_home()) {
     if ('post' == get_post_type()) {  //We willen dit alleen voor het post post_type.
        $content = $my_custom_text . $content;
     }
   }
   return $content;
}

Ik heb hier de tekst die ik wil plaatsen tussen <div> tags gezet. Want hoogstwaarschijnlijk zal ik controle willen hebben over de opmaak van die tekst en dank zij de ‘div’ tags, kan ik deze tekst direct identificeren.

Regel 10 verdient misschien wat extra aandacht.

Zoals je in regel 4 hebt kunnen zien, krijgt de functie wxp_add_content_before() een parameter mee met de naam $content.

Deze $content bevat -het zal je niet verbazen- de content van de blogpost. Hier wil je een regel aan het begin van deze content toevoegen. In PHP heeft de punt (.) de rol van de ‘concatenatie operator’, ofwel, de operator die series tekens aan elkaar plakt. In veel talen wordt dit door het + teken gedaan, maar in PHP dus niet.

Prioriteiten

Wanneer je meerdere plugins actief hebt die ‘iets’ met de content van je blogposts doen, dan kan het gebeuren dat de door jou ingevoegde zin niet op de door jou gewenste plaatst staat. Dat komt omdat meerdere functies aangeroepen kunnen worden door de ’the_content’ filter hook. Om enigzins controle te hebben over de volgorde waarin dit gebeurt, kan je aan een ‘add_filter’ of ‘add_action’ functie ook een prioriteit meegeven.

Zo’n prioriteit is een getal, waarbij lagere getallen eerst, en hogere getallen als laatste uitgevoerd zullen worden.

Het is een soort van ‘afspraak’ voor plugin bouwers, dat we deze prioriteiten in stapjes van 10 op laten lopen. Dus 10 betekent ‘als eerste’, en een heel hoog getal ‘als laatste’.

Wanneer ik dus de tekst helemaal aan het begin van de content wil hebben, dan zou mijn ‘add_filter’ er als volgt uit kunnen zien (dit vervangt dus de code in regel 2)

add_filter(‘the_content’, ‘wxp_add_content_before’,9);

Wil ik de tekst als laatste boven de content hebben, dan voeg ik de volgende regel in :

add_filter(‘the_content’, ‘wxp_add_content_before’,999999);

Maar wat nu, wanneer ik mijn extra tekst onderaan wil hebben?

Tekst onder de blogpost plaatsen

<?php
add_filter(‘the_content’, ‘wxp_add_content_before’);

function wxp_add_content_before($content) {

   $my_custom_text = ‘<div class="wxp-custom-bottom">This is the text to show!</div>’;

   if(is_single() && !is_home()) {
     if ('post' == get_post_type()) {  //We willen dit alleen voor het post post_type.
        $content .= $my_custom_text;
     }
   }
   return $content;
}

Het enige wat hier is veranderd is regel 10. Maa die regel 10 ziet er nu wel ineens heel vreemd uit. Hoe moet ik dit lezen?

Ik had regel 10 ook op een andere manier kunnen schrijven.

$content = $content . $my_custom_text;

Ok, dat ziet er weer logisch uit. Je voegt dus $my_custom_text toe aan $content.

Maar omdat programmeurs van nature lui zijn (ze proberen repeterende taken zo efficient mogelijk uit te voeren), tikken ze liever geen teken te veel in. En .= betekent dus eigenlijk ‘voeg de tekst achter de operator toe aan de tekst die in de variabele voor de operator staat’.

Ook met rekenkundige bewerkingen kunnen PHP programmeurs geweldig lui zijn. Wil ik 4 bij x optellen, dan schrijf ik gewoon

$x += 4;

Dat is dus hetzelfde als

$x = $x + 4;

of nog luier, 1 optellen bij $x

$x++;

Dat is weer hetzelfde als

$x = $x + 1;

En behalve een nuttige code snippet heb je nu ook iets meer inzicht gekregen in de programmeertaal PHP.

Codesnippet verbeteren

Het doel van deze code snippet is een probleem op te lossen in een specifieke situatie. Daarom zie je regelmatig voorbeelden waar je specifiek tekst moet aanpassen om te krijgen wat je wilt. 

Wil jij leren hoe je complete plugins zelf kunt programmeren inclusief ‘admin’ schermen voor het instellen en de output in de gewenste taal, dan is misschien de cursus ‘Introductiecursus Plugins Programmeren‘ iets voor jou. 

Wil je als ‘full stack’ WordPress programmeur aan de gang gaan, dan biedt WordXPression ook een compleet traject ‘WordPress Developer‘ aan. Dit is een traject wat deels online, deels klassikaal wordt gegeven.

WordPress Developer worden?

Wil je leren hoe je zelf plugins, thema's, shortcodes, widgets, Gutenberg blocks en meer kan maken?
Schrijf je dan in voor de cursus WordPress Developer.

Meer snippets

Custom fields in Elementor gebruiken
Elementor is natuurlijk een prachtige page- en theme builder, maar is toch een aantal kleine uitdagingen...
Hoe kom ik aan WooCommerce productgegevens voor mijn snippets?
Een overzicht hoe je het best het $product object kan benaderen in verschillende situaties.
Bestel en ontvang het morgen badge voor WooCommerce
Voer de 'koop druk' een beetje op, door aan te geven hoe snel iemand iets in huis kan krijgen
Het WordPress login logo aanpassen
Vervang het standaard WordPress logo door je eigen logo op het inlogscherm.
Totaalprijs tonen op een WooCommerce Single Product Page
Standaard zal WooCommerce wel het bedrag tonen, maar geen indicatie hoeveel iets kost, wanneer je er...
Titel voor reacties aanpassen per CPT
Wil je de titel van je WordPress commentaar sectie aanpassen, dan moet je dit beslist lezen.

Veiligheid voor alles!

Met betrekking tot de code die je hier aantreft een aantal waarschuwingen, voordat je deze code snippets toepast op je eigen website.

  1. Voer de code nooit direct uit op je eigen website, maar probeer deze eerst op een staging omgeving of een locale kopie van je website. 
  2. Voor je de geteste code installeert op je website, maak eerst een back up van je website.
  3. Zorg altijd voor alle zekerheid, dat je voor je een aanpassing live zet, je ook de FTP gegevens van je website bij de hand hebt.  
 
Voel je je onvoldoende vertrouwd met het toepassen van een dergelijke code snippet, bedenk dat je dit ook door een professional kan laten doen. De WordXPression support strippenkaart is een voordelige manier om dit soort aanpassingen te laten doen.
Heeft dit artikel je geholpen je probleem op te lossen?
Deel het met je vrienden via je favoriete social media.

Heb je vragen bij, of opmerkingen over deze code snippet, stel deze bij de commentaren hieronder.

Geef een reactie

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

Word je website de baas. Neem vandaag nog contact op!

Contact Information

WordXPression 

Bezoekadres
Eperweg 135 (op afspraak)
8072 PL Nunspeet

Postadres
Aardoliestraat 14-I
7553GT Hengelo

06-10449807 (van 9:00 tot 17:00 van ma-vr)

KVK : 75580152 

Social media
Stuur een bericht

Introductiecursus Plugins Programmeren

wordpress coding Can use php code as background in html

Ontdek de wereld van WordPress Plugin ontwikkeling met WordXPression's introductiecursus