WordPress Customize-fält 101: Tips, tricks och hacks

Under årens lopp har vi fått många frågor om customize-fält och hur användare kan få ut mesta möjliga av dem på sin WordPress website.

Custom fields är en praktisk funktion i WordPress som allow you to add extra data och information till your posts och pages. Många populära tillägg och teman till WordPress använder custom fields för att lagra viktig data.

Vi har erfarenhet av WordPress customize-fält. I den här artikeln visar vi hur du använder WordPress customize-fält med några tips, tricks och hacks.

Eftersom det här är en lång artikel har vi add to en innehållsförteckning för enklare navigation. Använd bara snabblänkarna under för att hoppa till den section du vill läsa:

Vad är WordPress Custom Fields?

WordPress custom fields är metadata som används för att add to extra information till den post eller page som du editerar.

När du skriver ett nytt inlägg, en ny page eller någon annan content type sparar WordPress som standard innehållet i två olika delar.

Den första delen är huvuddelen av ditt content som du addar till med hjälp av WordPress Content Editor.

Den andra delen är informationen om det innehållet. Till exempel rubrik, författare, datum, tid med mera. Denna information anropas metadata.

En website i WordPress addar automatiskt all obligatorisk metadata till varje post eller page som du skapar. Du kan också skapa och lagra dina egna metadata genom att använda customize-fält.

Som standard är alternativet custom fields dolt på skärmen för edit av post. Om du vill viewa det måste du clicka på menyn med tre punkter högst upp till höger på vyn och selecta ”Alternativ” i menyn.

Detta öppnar en popup där du måste byta till tabben ”Panels” och sedan aktivera alternativet ”Custom fields”.

Efter det klickar du bara på knappen ”Enable & Reload” för att ladda om editor för post.

The post editor kommer att laddas om och you kommer att kunna se panelen Custom Fields under content editor.

Custom fields kan användas för att add to all information related to the post, page, or other content type. Denna Meta-information kan sedan visas i your theme.

För att göra det måste du dock editera dina WordPress theme-filer.

Med detta sagt, låt oss ta en titt på hur man addar till och använder customize-fält i WordPress.

Lägga till Customize-fält i WordPress

Först måste du öppna ett post eller en page i block editor så att du kan add to custom fields. Sedan måste du gå till metarutan Custom Fields.

Därefter måste du ange ett namn för ditt customze-fält och sedan enter dess värde. Klicka på knappen ”Add Custom Field” för att save det.

Fältet kommer att lagras och visas i metarutan Custom Fields gillar detta:

Du kan edit detta custom field när du vill och sedan bara click på knappen ”Update” för att save dina ändringar. Du kan också delete det om du inte vill använda det längre.

Nu måste du save din post för att lagra dina custom field settings.

Displaying Custom Fields i WordPress Themes

För att kunna displayed your custom field på din website måste du editera dina WordPress theme files och code snippets.

Vi rekommenderar inte att du direkt editerar theme-filerna eftersom minsta lilla misstag kan förstöra din website. Ett enklare sätt att göra detta är genom att använda WPCode.

Det är det bästa code snippet pluginet för WordPress som låter dig add custom code och hantera snippets från din WordPress dashboard.

Om du inte har gjort det tidigare rekommenderar vi att du läser vår guide om hur du copy and pastear kod i WordPress.

Först måste du installera och aktivera det gratis pluginet WPCode. För mer detaljer, vänligen se vår guide för nybörjare om hur man installerar ett WordPress plugin.

Efter aktivering måste du gå till Code Snippets ” + Add Sn ippet från WordPress dashboard och välja alternativet ”Add Your Custom Code (New Snippet)”.

Nu måste du kopiera den här koden för att add till dina theme-filer:

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

Glöm inte att ersätta key med namnet på ditt customze-fält.

Därefter måste du enter koden i ”Code Preview” area och ändra kodtypen till ”PHP Snippet”.

Vi använde till exempel den här koden i vårt demotema:

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

Härifrån kan du rulla ner till sectionen Insertion.

Här kan du selecta var koden ska runna. Som standard kommer WPCode automatiskt att infoga koden och köra den överallt på din website.

Du kan dock ändra detta och selecta var du gillar att det anpassade fältet ska visas.

Vi väljer till exempel tabben ”Page Specific” och selekterar alternativet ”Insert Before Post”. På så sätt kommer customize-fältet att visas i början av blogginlägget.

You can now save your changes and visit the post where you added the custom field to see it in action.

Du kan använda detta customize-fält i alla dina andra blogginlägg i WordPress också.

Du kan också enkelt justera det anpassade fältet för olika blogginlägg. Skapa helt enkelt en new post eller edit en befintlig.

Gå sedan till boxen Custom Fields, select your custom field från dropdown-menyn och enter dess Value.

När du är klar klickar du bara på knappen ”Add Custom Field” för att save dina ändringar och sedan publicera eller update din post.

Felsökning: Kan inte hitta Custom Field i Dropdown på skärmen Post Edit

Som standard laddar WordPress endast 30 customize-fält i dropdown-menyn på vyn för post edit.

Om du använder WordPress themes och tillägg som redan använder custom fields, så kan dessa visas först i dropdown-menyn och du kommer inte att kunna se yours nyskapade custom field.

För att fixa detta problem måste du add to följande kod till ditt temas functions.php-fil eller genom att använda WPCode (rekommenderas):

add_filter( 'postmeta_form_limit', 'meta_limit_increase' );
function meta_limit_increase( $limit ) {
    return 50;
}

Koden ovan kommer att ändra den limiten till 50. Om du fortfarande inte kan se ditt customize-fält kan du försöka öka den limiten ytterligare.

Skapa ett användargränssnitt för Custom Fields Använda avancerade Custom Fields

Som du kan se måste du när du har addat ett custom field välja fältet och enter dess värde varje gång du skriver en post.

Om du har många WordPress customize-fält eller flera auktoriseringar på din website är det här inte en idealisk lösning.

Skulle det inte vara trevligt om du kunde skapa ett användargränssnitt där användarna kan fylla i ett formulär för att add to värden till custom fields?

Det är faktiskt vad många populära tillägg till WordPress redan gör.

Till exempel är sökmotorsoptimeringen och boxen för meta description i det populära pluginet All in One SEO en customizer-box:

Det enklaste sättet att skapa ett användargränssnitt för att lägga till customize-fält är genom att använda pluginet Advanced Custom Fields.

Det första du behöver göra är att installera och aktivera pluginet Advanced Custom Fields. För mer detaljer, se vår Step-by-Step guide om hur du installerar ett WordPress plugin.

Efter aktivering måste du besöka ACF ” Field Groups page och klicka på knappen ’Add New’.

En fältgrupp gillar en container med en uppsättning customize-fält. It allows you to add multiple panels of custom fields.

Nu måste du ange en rubrik för din fältgrupp och klicka på knappen ”+ Add Field” högst upp till höger.

Du kan nu välja en fälttyp.

Advanced Custom Fields allow you to create all sorts fields, including text, image upload, number, dropdown, checkboxes, and more.

Därefter kan du rulla ner för att se andra alternativ för det vissa fältet, gillar fältnamn, fältetikett och standardvärde. You can change them to your own requirements.

You can also add multiple fields to your field group if you want. När du är slutförd klickar du bara på knappen ”Save Changes”.

Nästa inlägg, edit a post or create a new one, and you will see a new panel with your WordPress custom fields below the content editor.

För detaljerade steg-för-steg-instruktioner kan du se vår guide om hur du lägger till customizer meta boxes i WordPress inlägg och custom post types.

Hur man döljer tomma Customize-fält med villkorliga uttalanden

Hittills har vi täckt hur man skapar ett customze-fält och visar det i your theme.

Låt oss nu se hur vi kontrollerar att customize-fältet inte är tomt innan det visas. För att göra det ändrar vi vår kod så att den först kontrollerar om fältet innehåller data:

<?php 

$mood = get_post_meta($post->ID, 'Mood', true);

if ($mood) { ?>

<p>Today's Mood: <? echo $mood; ?></p>

<?php 

} else {
// do nothing;
}

?>

Glöm inte att ersätta Mood med ditt eget customize fältnamn.

Lägga till flera värden i ett Custom-fält

Customize-fält kan återanvändas i samma post för att add to flera värden. Du behöver bara välja fältet igen och add to ett annat värde i boxen ”Value”.

Den kod vi har använt i exemplen ovan kommer dock bara att kunna visa ett enda värde.

För att visa alla värden i ett customize-fält måste vi ändra koden och få den att returnera data i en array. Du måste add to följande kod till din theme-fil:

<?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; 
}
?>

Återigen, glöm inte att ersätta Mood med ditt eget customize fältnamn.

I det här exemplet kommer du att notera att vi har ändrat den sista parametern i get_post_meta-funktionen till false. Denna parameter definierar om funktionen ska returnera ett enda värde eller ej. Setting it to false allow it to return the data as an array, which we then display in a foreach loop.

Så här söker du efter post efter Customize-fält i WordPress

WordPress standard search fungerar inte med några customize-fält på din website. Den använder endast innehållet för att hitta den post som du eller dina besökare letar efter på din site.

SearchWP ändrar dock detta genom att förbättra din WordPress search. Det är det bästa WordPress search plugin som går utöver att använda postens content och indexerar allt, inklusive WordPress anpassade fält, PDF-dokument, anpassade tabeller, text, filer och mycket mer.

Du kan justera algoritmen för search utan att editera kod med SearchWP. Installera bara pluginet och heada sedan till SearchWP ” Algoritm från ditt WordPress admin area.

Efter det måste du gå till tabben ”Engines” och sedan justera Attribute Relevance slider. Detta kommer att ändra den import som ges till varje attribut under en search.

You kan till exempel ställa in slidern för Custom Fields på max och justera sliders för andra attribut i enlighet med detta. På så sätt kommer SearchWP att ge företräde åt data i custom fields vid search efter content i WordPress.

En annan fördel med att använda SearchWP är att det fungerar med några av de mest populära custom field plugins, inklusive Advanced Custom Fields (ACF), Meta Box och Pods.

För mer details kan du läsa vår nybörjarvänliga guide om hur du förbättrar WordPress search med SearchWP.

Displaying Posts med en specifik Custom Key

WordPress allow you to display posts with custom keys and their values. Om du till exempel försöker skapa en custom archive page för att visa alla posts med specifika custom keys, kan du använda WP_Query-klassen för att söka posts som matchar dessa fält.

Du kan använda följande kod som utgångspunkt:

$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; ?>

Glöm inte att ersätta parametrarna meta_key och meta_value med your egna värden.

Hur man lägger till gästförfattarnamn med hjälp av anpassade fält

Vill du lägga till ett gästinlägg men vill inte lägga till en ny profil för användare bara för det inlägget? En enklare metod är att lägga till ett namn på gästförfattaren som ett custom field.

För att göra detta måste du add to följande kod till functions.php-filen i ditt theme eller använda WPCode (rekommenderas):

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;
}

Mer detaljer finns vänligen i vår guide om hur du klistrar in snippor från webben i WordPress.

Den här koden åtgärds-hookar en funktion till filtren the_author och get_the_author_display_name i WordPress.

Funktionen kontrollerar först om gästförfattarens namn finns. Om det finns, ersätter den författarens namn med gästförfattarens namn.

Nu måste du redigera det post där du vill visa gästförfattarens namn. Gå till Custom Fields meta-boxen, lägg till ditt gästförfattarnamn och klicka slutligen på knappen ”Add Custom Field”.

För mer detaljer, se vår artikel om hur du skriver om namn på gästförfattare med customize-fält i WordPress.

Hur man visar Contributors till en artikel med hjälp av Custom Fields

På många populära bloggar och webbplatser bidrar många författare till att skriva en enda artikel. WordPress tillåter dock bara att en enskild författare kopplas till ett post.

Ett sätt att lösa detta problem är att använda Co-Authors Plus plugin. För att lära dig mer, se vår guide om hur du lägger till flera författare till ett WordPress post.

En annan metod är att lägga till contributors som ett custom field.

Först måste du edit det post där du vill visa medförfattare eller contributors. Sedan rullar du ner till custom fields-boxen och addar författarnamn som custom fields för medförfattare.

Nu måste du add denna kod till dina theme-filer där du vill visa medförfattare:

<?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; 
}
?>

För att visa författarnamn separerade med kommatecken kan du add to följande custom CSS:

.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: ":";
}

Så här såg det ut på vår demo site.

Hur man visar Customize-fält utanför loopen i WordPress

Vad händer om du behöver visa custom fields i sidebaren för ett enskilt inlägg?

Om du vill visa de anpassade fälten utanför WordPress-loopen kan du add to följande kod i filerna för ditt theme:

<?php
global $wp_query;
$postid = $wp_query->post->ID;
echo get_post_meta($postid, 'key', true);
wp_reset_query();
?>

Glöm inte att ersätta key med namnet på ditt customize-fält.

Display a Custom Header, Footer, Sidebar Using Custom Fields

Vanligtvis använder de flesta WordPress teman samma header, footer och sidebar på alla pages.

Det finns också många sätt att visa olika sidebars, headers eller footers för olika pages på din website. Du kan se vår guide om hur du visar en annan sidebar för varje post eller page i WordPress.

Ett sätt att göra detta är att använda customize-fält. Bara edit the post or page where you want to show a different sidebar and then add the sidebar as a custom field.

Nu måste du editera din WordPress theme-fil, till exempel single.php, där du vill visa en custom sidebar. Du kommer att leta efter följande kod:

<?php get_sidebar(); ?>

Ersätt denna rad med följande kod:

<?php
global $wp_query;
$postid = $wp_query->post->ID;
$sidebar = get_post_meta($postid, "sidebar", true);
get_sidebar($sidebar);
wp_reset_query();
?>

Den här koden letar helt enkelt efter sidebar custom field och displayed den sedan i your theme. Om du till exempel add to webpage som ditt sidebar custom field, kommer koden att leta efter en sidebar-webpage.php-fil som ska visas.

You will need to create the sidebar-webpage.php file in your theme folder. Du kan kopiera koden från ditt temas sidebar.php-fil som en utgångspunkt.

Manipulera RSS-flöde Content med Custom Fields

Vill du visa ytterligare metadata eller content för användarna av ditt RSS-flöde? Med hjälp av anpassade fält kan du manipulera ditt WordPress RSS-flöde och add to custom content i dina feeds.

Först måste du add to följande kod till functions.php-filen i ditt theme eller använda WPCode (rekommenderas):

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');

Nu skapar du bara ett custom-fält som heter ”coolcustom” och add to vilket värde du gillar. Du kan använda det för att displayed advertisements, images, text eller vad du vill.

För mer detaljer, vänligen se vår guide om hur du copy and paste kod från webben till WordPress.

Hur man manipulerar RSS-flöde Rubrik med customize fält

Ibland kanske du vill add extra text till en post titel för RSS-flöde användare. Detta kan till exempel vara praktiskt om du publicerar ett sponsrat inlägg eller ett gästinlägg.

Först måste du lägga till följande kod i ditt temas functions.php-fil eller använda WPCode för att lägga till det custom code snippet utan att förstöra din website:

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');

Nästa inlägg måste du editera det post där du vill visa den extra texten i titelfältet.

Lägg sedan till guest_post och sponsored_post som custom fields.

Om något av dessa två customize-fält hittas med ett värde ”true”, kommer koden att add to lämplig text före rubriken. Den här tekniken kan användas på många sätt för att passa vad you gillar.

Vill du lära dig fler coola RSS-flödeshack? Se vår guide om hur du lägger till content och manipulerar dina WordPress RSS-flöden.

Så här ställer du in utgångsdatum för posts i WordPress med hjälp av Customize-fält

Vill du ställa in ett löp ut-datum för vissa posts på din WordPress site? Detta är praktiskt när du vill publicera content endast under en viss period, gillar att köra undersökningar eller tidsbegränsade erbjudanden.

Ett sätt att göra detta är att manuellt ta bort postens content eller genom att använda ett plugin som gillar Post Expirator.

Ett annat alternativ är att använda customize-fält för att automatiskt löpa ut posts efter en viss tid. You will need to edit your theme files and modify the WordPress loop like this:

<?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;
?>

Note: Du måste editera denna kod för att matcha ditt theme.

När du har lagt till den här koden kan du lägga till det anpassade fältet expiration i det post du vill ska löpa ut. Se till att du addar tiden i det här formatet: mm/dd/åååå 00:00:00.

Hur man stylar enskilda poster med hjälp av custom fields

Vill du ändra utseendet på en enskild post med hjälp av CSS? WordPress tilldelar automatiskt varje post sin egen klass, som du kan använda för att add to custom CSS.

Men genom att använda customize-fält kan du add to dina egna custom-klasser och sedan använda dem för att utforma posts på olika sätt.

Först måste du edit ett post som du gillar att styla annorlunda. Gå till boxen Custom Fields och add det anpassade fältet post-class.

Därefter måste du editera dina WordPress theme files och add to denna kod i början av WordPress loop:

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

Nu måste du hitta raden med funktionen post_class().

Så här såg det ut i vårt demotema:

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

You must change this line to include your custom field value like this:

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

Om du nu undersöker postens källkod med hjälp av Inspect-verktyget, kommer du att se din customize fält CSS-klass add till postklassen.

Du kan nu använda denna CSS-klass för att add to custom CSS och styla your post på olika sätt.

Vi hoppas att den här artikeln hjälpte dig att lära dig mer om WordPress custom fields. Du kanske också vill se vår guide om hur du lägger till anpassade fält automatiskt när du publicerar ett post och de bästa pluginsen för page builders i WordPress för att hjälpa dig att designa din webbplats som du vill.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.