WordPress Custom Fields 101: tips, trucs en hacks - DeLaatbusiness

WordPress Custom Fields 101: tips, trucs en hacks

11 min


106
6 gratis internet marketing ebooks, klik hier voor download

Ooit afgevraagd wat zijn aangepaste velden in WordPress? Wilt u meer weten over hoe aangepaste velden werken? In dit artikel laten we u zien hoe u WordPress-aangepaste velden kunt gebruiken met tips, trucs en hacks.

Aangepaste velden 101

 

 

Wat zijn aangepaste velden voor WordPress?

Aangepaste WordPress-velden zijn metagegevens die worden gebruikt om aanvullende informatie toe te voegen met betrekking tot het bericht of de pagina, zoals titel, naam van de auteur, datum / tijd, enzovoort.

Wanneer u een nieuw bericht, een nieuwe pagina of een ander inhoudstype schrijft, slaat WordPress dit standaard op in twee verschillende gebieden. Het eerste deel is de inhoud van uw inhoud die u toevoegt met behulp van de berichteditor.

Het tweede deel is de informatie over die specifieke inhoud. Bijvoorbeeld titel, auteur, datum, tijd en meer. Dit informatiebit van het bericht wordt metadata genoemd.

WordPress voegt automatisch alle vereiste metagegevens toe aan elke post of pagina die u maakt. WordPress biedt gebruikers ook de mogelijkheid om hun eigen aangepaste metadata op te slaan met behulp van aangepaste velden.

Standaard is de optie Aangepaste velden verborgen op het berichtbewerkingsscherm. Om het te bekijken, moet u bovenaan op de knop ‘Schermopties’ klikken en vervolgens de optie Aangepaste velden aanvinken.

Toon meta-vak aangepaste velden

Blader een beetje naar beneden en u kunt het meta-vak van het aangepaste veld onder de berichteditor bekijken.

Aangepaste velden metabox op berichtbewerkingsscherm in WordPress

Aangepaste velden kunnen worden gebruikt om informatie met betrekking tot het bericht, de pagina of een ander inhoudstype toe te voegen. Deze meta-informatie kan in uw thema worden weergegeven. Om dat te doen, moet u echter uw WordPress-themabestanden bewerken.

Dit is de reden waarom deze tutorial wordt aanbevolen voor gebruikers die bekend zijn met het bewerken van themabestanden. Het is ook handig voor ambitieuze WordPress-ontwikkelaars die willen leren hoe ze aangepaste velden correct kunnen gebruiken in hun eigen thema’s of plug-ins.

Dat gezegd hebbende, laten we eens kijken hoe we aangepaste velden in WordPress kunnen toevoegen en gebruiken.

Aangepaste velden toevoegen in WordPress

Eerst moet u het bericht of de pagina bewerken waaraan u het aangepaste veld wilt toevoegen en naar de meta-box voor aangepaste velden gaan.

Aangepast veld toevoegen

Vervolgens moet u een naam voor uw aangepaste veld opgeven en vervolgens de waarde ervan invoeren. Klik op de knop Aangepast veld toevoegen om het op te slaan.

Het veld wordt als volgt opgeslagen en weergegeven in de meta-box voor aangepaste velden:

Opgeslagen aangepast veld

U kunt dit aangepaste veld op elk gewenst moment bewerken en vervolgens op de updateknop klikken om uw wijzigingen op te slaan. Je kunt het ook verwijderen als dat nodig is.

Nu kunt u uw bericht opslaan om uw aangepaste lokale instellingen op te slaan.

Aangepaste velden weergeven in WordPress-thema’s

Als u uw aangepaste veld op uw website wilt weergeven, moet u uw WordPress-themabestanden bewerken. Als je dit nog niet eerder hebt gedaan, bekijk dan onze handleiding over het kopiëren en plakken van code in WordPress .

Eerst moet je het themabestand vinden dat je moet bewerken om je aangepaste veld weer te geven. Idealiter zou je het willen weergeven op een enkele berichtpagina. U moet het bestand single.php of content-single.php bewerken.

U moet uw aangepaste veldencode invoeren in de WordPress-lus . Zoek naar de regel die er zo uitziet:

1
<?php while ( have_posts() ) : the_post(); ?>

U wilt ervoor zorgen dat u uw code toevoegt vóór de volgende regel:

1
<?php endwhile; // end of the loop. ?>

Nu moet je deze code toevoegen aan je themabestand:

1
<?php echo get_post_meta($post->ID, 'key', true); ?>

Vergeet niet om de sleutel te vervangen door de naam van uw aangepaste veld. We hebben deze code bijvoorbeeld in ons demothema gebruikt:

1
<p>Today's Mood: <?php echo get_post_meta($post->ID, 'Mood', true); ?></p>

U kunt nu uw wijzigingen opslaan en het bericht bezoeken waar u het aangepaste veld hebt toegevoegd om het in actie te zien.

Aangepaste veldgegevens weergegeven in een WordPress-thema

Nu kunt u dit aangepaste veld ook in al uw andere WordPress-berichten gebruiken. Maak gewoon een nieuw bericht of bewerk een bestaand bericht. Ga naar de meta-box met aangepaste velden en selecteer uw aangepaste veld in het vervolgkeuzemenu en voer de waarde ervan in.

Selecteer en hergebruik aangepast veld

Klik op de knop ‘Aangepast veld toevoegen’ om uw wijzigingen op te slaan en vervolgens uw bericht te publiceren of bij te werken.

Een gebruikersinterface maken voor aangepaste velden

Zoals u kunt zien, moet u na het toevoegen van een aangepast veld het veld selecteren en de waarde ervan invoeren elke keer dat u een bericht schrijft.

Als u veel aangepaste velden of meerdere gebruikers op uw website hebt, is dit niet echt een ideale oplossing.

Zou het niet mooi zijn als u een gebruikersinterface zou kunnen maken waar gebruikers een formulier kunnen invullen om waarden aan uw aangepaste velden toe te voegen?

Dit is wat zoveel populaire plug-ins al doen. De SEO-titel en het metabeschrijvingsvak in de Yoast SEO- plug-in is bijvoorbeeld een aangepaste metabox :

Aangepaste metabox gebruikt in Yoast SEO

De eenvoudigste manier om dit te doen is door de plug-in Advanced Custom Fields te gebruiken . Hiermee kunt u aangepaste velden maken, deze groeperen en weergeven in een aangepaste metabox op uw bewerkingsschermen voor berichten in WordPress.

Voor gedetailleerde stapsgewijze instructies raadpleegt u onze handleiding over het toevoegen van aangepaste metaboxen in WordPress-berichten en berichttypen .

Lege aangepaste velden met voorwaardelijke verklaring verbergen

In het bovenstaande voorbeeld hebben we u laten zien hoe u een aangepast veld kunt maken en dit in uw thema kunt weergeven.

Laten we nu kijken hoe we kunnen controleren of het aangepaste veld niet leeg is voordat het wordt weergegeven. Om dat te doen, zullen we onze code aanpassen om eerst te controleren of het veld gegevens bevat.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?php
$mood = get_post_meta($post->ID, 'Mood', true);
if ($mood) { ?>
<p>Today's Mood: <? echo $mood; ?></p>
<?php
} else {
// do nothing;
}
?>

Vergeet niet om Mood te vervangen door je eigen aangepaste veldnaam.

Meerdere waarden toevoegen aan een aangepast veld

Aangepaste velden kunnen opnieuw in dezelfde post worden gebruikt om meerdere waarden toe te voegen. U hoeft het alleen maar opnieuw te selecteren en een andere waarde toe te voegen.

Meerdere waarden toevoegen aan een aangepast veld

De code die we in de bovenstaande voorbeelden hebben gebruikt, kan echter maar één waarde weergeven.

Om alle waarden van een aangepast veld weer te geven, moeten we de code aanpassen en de gegevens in een array retourneren. U moet de volgende code toevoegen aan uw themabestand:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?php
$mood = get_post_meta($post->ID, 'Mood', false);
if( count( $mood ) != 0 ) { ?>
<p>Today's Mood:</p>
<ul>
<?php foreach($mood as $mood) {
            echo '<li>'.$mood.'</li>';
            }
            ?>
</ul>
<?php
} else {
// do nothing;
}
?>

Vergeet niet om Mood te vervangen door je eigen aangepaste veldnaam.

In dit voorbeeld zou u merken dat we de laatste parameter van de get_post_metafunctie hebben gewijzigd in false. Deze parameter definieert of de functie één waarde moet retourneren of niet. Door het in te stellen op false, kan het de gegevens retourneren als een array, die we vervolgens in een foreach-lus hebben weergegeven.

Berichten weergeven met een specifieke aangepaste sleutel

WordPress biedt u de mogelijkheid om berichten met aangepaste sleutels en hun waarden weer te geven. Als u bijvoorbeeld een aangepaste archiefpagina probeert te maken om alle berichten met specifieke aangepaste sleutels weer te geven, kunt u de klasse WP_Query gebruiken om te zoeken naar berichten die met die velden overeenkomen.

U kunt de volgende code als uitgangspunt gebruiken.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
$args = array(
    'meta_key'   => 'Mood',
    'meta_value' => 'Happy'
);
$the_query = new WP_Query( $args );
<?php
// the query
$the_query = new WP_Query( $args ); ?>
<?php if ( $the_query->have_posts() ) : ?>
    <!-- the loop -->
    <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
        <h2><?php the_title(); ?></h2>
        <?php the_content(); ?>
    <?php endwhile; ?>
    <!-- end of the loop -->
    <!-- pagination here -->
    <?php wp_reset_postdata(); ?>
<?php else : ?>
    <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>

Vergeet niet om parameters meta_key en meta_value te vervangen door uw eigen waarden.

Gastgenernaam toevoegen met behulp van aangepaste velden

Wilt u een gastpost toevoegen maar wilt u geen nieuw gebruikersprofieltoevoegen om slechts één bericht toe te voegen? Een eenvoudigere manier om dat te doen is door gastauteursnaam als een aangepast veld toe te voegen.

Eerst moet je de volgende code toevoegen in het function.php- bestand van je thema of een sitespecifieke plug-in .

1
2
3
4
5
6
7
8
9
add_filter( 'the_author', 'guest_author_name' );
add_filter( 'get_the_author_display_name', 'guest_author_name' );
function guest_author_name( $name ) {
global $post;
$author = get_post_meta( $post->ID, 'guest-author', true );
if ( $author )
$name = $author;
return $name;
}

Deze code haakt een functie aan the_authoren get_the_author_display_name filtert in WordPress. De functie controleert eerst de naam van de gastauteur. Als het bestaat, vervangt het de auteursnaam door de naam van de gastauteur.

Nu moet u het bericht bewerken waar u de naam van de gastauteur wilt weergeven. Ga naar de metadoos van de aangepaste velden en voeg de naam van je gastauteur toe.

Aangepast veld voor gastauteur toevoegen

Zie ons artikel over het herschrijven van de naam van de gastauteur met aangepaste velden in WordPress voor meer informatie .

Bijdragen weergeven aan een artikel met behulp van aangepaste velden

Op veel populaire blogs en nieuwssites dragen meerdere auteurs bij aan het schrijven van een artikel. WordPress staat echter slechts één auteur toe om aan een bericht te worden gekoppeld.

Een manier om dit probleem op te lossen is door de Co-Author Plus- plugin te gebruiken. Raadpleeg onze handleiding over het toevoegen van meerdere auteurs aan een WordPress-bericht voor meer informatie .

Een andere manier om dat te doen, is door contribuanten toe te voegen als een aangepast veld.

Eerst moet je de post bewerken waarin je co-auteurs of contribuanten wilt weergeven. Blader naar de metabox voor aangepaste velden en voeg auteursnamen toe als co-auteur aangepast veld.

Co-auteurs toevoegen als aangepast veld

Voeg deze code nu toe aan uw themabestanden waar u co-auteurs wilt weergeven.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?php
$coauthors = get_post_meta($post->ID, 'co-author', false);
if( count( $coauthors ) != 0 ) { ?>
<ul class="coauthors">
<li>Contributors</li>
<?php foreach($coauthors as $coauthors) { ?>
           <?php echo '<li>'.$coauthors.'</li>' ;
            }
            ?>
</ul>
<?php
} else {
// do nothing;
}
?>

Als u auteursnamen gescheiden door komma’s wilt weergeven, kunt u de volgende aangepaste CSS toevoegen .

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.coauthors ul {
display:inline;
}
.coauthors li {
display:inline;
list-style:none;
}
.coauthors li:after {
content:","
}
.coauthors li:last-child:after {
    content: "";
}
.coauthors li:first-child:after {
    content: ":";
}

Zo zag het er uit op onze demosite.

Co-auteurs weergegeven met behulp van aangepaste velden

Toon aangepaste velden buiten de lus in WordPress

Tot nu toe hebben we u alle voorbeelden getoond waarin aangepaste velden worden weergegeven in de WordPress-lus. Wat als je ze buiten de kring moest laten zien? Bijvoorbeeld in de zijbalk van een enkele post.

Om de aangepaste velden buiten de WordPress-lus weer te geven, voegt u de volgende code toe:

1
2
3
4
5
6
<?php
global $wp_query;
$postid = $wp_query->post->ID;
echo get_post_meta($postid, 'key', true);
wp_reset_query();
?>

Vergeet niet om de sleutel te vervangen door uw aangepaste veldnaam.

Aangepaste koptekst, voettekst, zijbalk weergeven met aangepaste velden

Meestal gebruiken de meeste WordPress-thema’s dezelfde kop-, voettekst- en zijbalk op alle pagina’s. Er zijn meerdere manieren om verschillende zijbalken, koptekst of voettekst voor verschillende pagina’s op uw website weer te geven. Raadpleeg onze gids over het weergeven van de verschillende zijbalk voor elke WordPress-post of -pagina .

Een manier om dit te doen is door aangepaste velden te gebruiken. Bewerk de post of pagina waar u een andere zijbalk wilt weergeven en voeg vervolgens de zijbalk toe als aangepast veld.

Aangepaste zijbalk aan een bericht toevoegen met behulp van aangepaste velden

Nu moet je je WordPress-themabestanden bewerken, zoals single.php, waar je de aangepaste zijbalk wilt weergeven. U gaat op zoek naar de volgende code:

1
<?php get_sidebar(); ?>

Vervang deze regel door de volgende code:

1
2
3
4
5
6
7
<?php
global $wp_query;
$postid = $wp_query->post->ID;
$sidebar = get_post_meta($postid, "sidebar", true);
get_sidebar($sidebar);
wp_reset_query();
?>

Deze code zoekt eenvoudig naar het aangepaste veld in de zijbalk en geeft het vervolgens weer in uw thema. Als u bijvoorbeeld wpbpage toevoegt als uw aangepaste veld in de zijbalk, zoekt de code naar sidebar-wpbpage.php om weer te geven.

U moet het sidebar-wpbpage.php-bestand in uw themamap maken. U kunt de code uit het zijbalk.php-bestand van uw thema als beginpunt kopiëren.

Het manipuleren van RSS-feedinhoud met aangepaste velden

Wilt u extra metagegevens of inhoud weergeven aan uw RSS-feedgebruikers? Met behulp van aangepaste velden kunt u uw WordPress RSS-feed manipuleren en aangepaste inhoud toevoegen aan uw feeds.

Eerst moet je de volgende code toevoegen in het functie.php bestand van je thema of een site-specifieke plug-in .

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function wpbeginner_postrss($content) {
global $wp_query;
$postid = $wp_query->post->ID;
$coolcustom = get_post_meta($postid, 'coolcustom', true);
if(is_feed()) {
if($coolcustom !== '') {
$content = $content."<br /><br /><div>".$coolcustom."</div>
";
}
else {
$content = $content;
}
}
return $content;
}
add_filter('the_excerpt_rss', 'wpbeginner_postrss');
add_filter('the_content', 'wpbeginner_postrss');

Maak nu gewoon een aangepast veld met de naam “coolcustom” en voeg elke gewenste waarde toe. U kunt het gebruiken om advertenties, afbeeldingen, tekst of wat u maar wilt weer te geven.

Bewerk RSS-feedtitel met aangepaste velden

Soms wilt u misschien extra tekst toevoegen aan een berichttitel voor gebruikers van RSS-feeds. Bijvoorbeeld als u een gesponsorde post of een gastpost publiceert.

Eerst voeg je de volgende code toe aan het functie.php- bestand van je thema of een site-specifieke plug-in .

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function wpbeginner_titlerss($content) {
global $wp_query;
$postid = $wp_query->post->ID;
$gpost = get_post_meta($postid, 'guest_post', true);
$spost = get_post_meta($postid, 'sponsored_post', true);
if($gpost !== '') {
$content = 'Guest Post: '.$content;
}
elseif ($spost !== ''){
$content = 'Sponsored Post: '.$content;
}
else {
$content = $content;
}
return $content;
}
add_filter('the_title_rss', 'wpbeginner_titlerss');

Vervolgens moet u het bericht bewerken waar u de extra tekst in het titelveld wilt weergeven en guest_post en sponsored_post toevoegen in aangepaste velden.

 Gesponsorde en gastpost aangepaste velden

Als een van deze twee aangepaste velden wordt gevonden met een waarde “waar”, dan zal het de juiste tekst vóór de titel toevoegen. Deze techniek kan op verschillende manieren worden gebruikt om te passen in wat u maar wilt.

Wil je meer coole RSS feed-hacks leren? Raadpleeg onze handleiding over het toevoegen van inhoud en het manipuleren van uw WordPress RSS-feeds .

Vervaldatum instellen voor berichten in WordPress Aangepaste velden gebruiken

Wilt u een vervaldatum instellen voor sommige berichten op uw WordPress-site? Dit is handig in situaties waarin u alleen inhoud voor een bepaalde periode wilt publiceren, zoals enquêtes uitvoeren of aanbiedingen met beperkte tijd.

Een manier om dit te doen is door de berichtinhoud handmatig te verwijderen of door een plug-in als Post Expirator- plug-in te gebruiken.

Een andere manier om dit te doen, is door aangepaste velden te gebruiken om berichten na een bepaalde tijd automatisch te laten verlopen.

U moet uw themabestanden bewerken en de WordPress-lus als volgt aanpassen:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?php
if (have_posts()) :
while (have_posts()) : the_post();
$expirationtime = get_post_meta($post->ID, "expiration", false);
if( count( $expirationtime ) != '' ) {
if (is_array($expirationtime)) {
$expirestring = implode($expirationtime);
}
$secondsbetween = strtotime($expirestring)-time();
if ( $secondsbetween >= 0 ) {
echo 'This post will expire on ' .$expirestring.'';
the_content();
} else {
echo "Sorry this post expired!"
}
} else {
the_content();
}
endwhile;
endif;
?>

Opmerking: u moet deze code aanpassen aan uw thema.

Nadat u deze code hebt toegevoegd, kunt u het aangepaste verloopveld toevoegen aan het bericht dat u wilt verlopen. Zorg ervoor dat u de tijd in dit formaat mm / dd / jjjj 00:00:00 toevoegt .

Een aangepast verloopveld toevoegen aan een WordPress-bericht

Stijl individuele berichten met aangepaste velden

Wilt u het uiterlijk van een afzonderlijke post wijzigen met behulp van CSS? WordPress wijst automatisch elke post zijn eigen klasse toe die u kunt gebruiken om aangepaste CSS toe te voegen.

Door aangepaste velden te gebruiken, kunt u uw eigen aangepaste klassen toevoegen en deze vervolgens gebruiken om berichten anders te stijlen.

Eerst moet je een bericht bewerken dat je anders wilt stijlen. Ga naar het veld Aangepaste velden en het aangepaste veld na klasse.

Postklasse aangepast veld

Vervolgens moet u uw WordPress-themabestanden bewerken en deze code aan het begin van de WordPress-lus toevoegen.

1
<?php $custom_values = get_post_meta($post->ID, 'post-class'); ?>

Nu moet je een regel vinden met de functie post_class (). Hier is hoe het er uitzag in ons demothema:

1
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

Wijzig deze regel om uw aangepaste veldwaarde op te nemen, zoals deze:

1
<article id="post-<?php the_ID(); ?>" <?php post_class($custom_values); ?>>

Als u nu de broncode van de post bekijkt met behulp van de Inspect-tool , ziet u uw aangepaste veld-CSS-klasse aan de postklasse toegevoegd.

Aangepaste veldpostklasse

Nu kunt u deze CSS-klasse gebruiken om aangepaste CSS toe te voegen en uw post anders te stijlen.


What's Your Reaction?

hate hate
0
hate
confused confused
0
confused
fail fail
0
fail
fun fun
0
fun
geeky geeky
0
geeky
love love
0
love
lol lol
0
lol
omg omg
0
omg
win win
0
win
Erwin@delaatbusiness.com
Dag, Hulp nodig met internet marketing of websites maken? neem dan contact op

0 Comments

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

Choose A Format
Personality quiz
Series of questions that intends to reveal something about the personality
Trivia quiz
Series of questions with right and wrong answers that intends to check knowledge
Poll
Voting to make decisions or determine opinions
Story
Formatted Text with Embeds and Visuals
List
The Classic Internet Listicles
Countdown
The Classic Internet Countdowns
Open List
Submit your own item and vote up for the best submission
Ranked List
Upvote or downvote to decide the best list item
Meme
Upload your own images to make custom memes
Video
Youtube, Vimeo or Vine Embeds
Audio
Soundcloud or Mixcloud Embeds
Image
Photo or GIF
Gif
GIF format