Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Så här markerar du nya posts för återkommande besökare i WordPress

Undrar du hur du kan markera nya posts för återkommande besökare i WordPress?

Att visa upp de posts som nyligen publicerats på din website är ett sätt att välkomna dina lojala läsare, hålla dem updating och se till att de inte missar ditt senaste content.

I den här Step-by-Step-guiden visar vi hur du markerar nya posts för återkommande besökare i WordPress.

How to Highlight New Posts for Returning Visitors in WordPress

Varför markera nya posts på din WordPress site?

Genom att markera nya posts på din site i WordPress kan återkommande besökare enkelt upptäcka ditt nya content. På så sätt går de inte miste om ny information eller updates som du har lagt till på din blogg.

Märkning av new posts förbättrar upplevelsen för användarna på din WordPress website. När en återkommande visitor kommer till din website kan de enkelt se vilka posts de inte har läst än, vilket sparar mycket tid och ökar antalet sidvisningar på your website.

En bra användarupplevelse på din site håller inte ej bara besökarna nöjda utan hjälper också till med sökmotorsoptimeringen för WordPress. När din site är användarvänlig förbättras rankingen i search engine och sannolikheten ökar för att visitorerna hittar ditt content.

Med detta i åtanke, låt oss se hur du kan markera nya posts för återkommande besökare i WordPress.

Vi kommer att visa dig två metoder: en med en WordPress plugin och den andra med kod. Du kan hoppa till en specifik metod med hjälp av snabblänkarna under:

Metod 1: Markera nya WordPress-poster med ett WordPress-plugin

Denna första metod använder pluginet Mark New Posts. Vi rekommenderar det för Beginner bloggare eftersom det är mycket enkelt. Detta plugin kommer att add en etikett för att visa vilka blogginlägg dina besökare inte har sett ännu.

Först och främst måste du installera och aktivera pluginet Mark New Posts. Om du behöver vägledning kan du läsa vår Step-by-Step guide om hur du installerar ett plugin för WordPress.

Därefter går du till Settings ” Mark New Posts från WordPress admin area. You will now see the plugin’s settings page.

Det du vill göra nu är att selecta var etiketten ”New” ska visas. You can select After post title, Before post title, or Before and after post title.

Vi tycker att om du lägger till etiketten efter rubriken på posten kommer det att gilla en notification och fånga användarnas uppmärksamhet mest, så det är vad vi har valt.

Selecting the new post marker placement in Mark New Posts plugin

Därefter måste du välja hur markören gillar att se ut i inställningen Markörtyp. Bland alternativen finns ”New” text, ”New” text legacy, Orange cirkel, Flagga, Bild eller Ingen.

Se till att utforska varje alternativ för att se vilket som passar bäst med designen av din website.

Selecting a new post marker type in Mark New Posts plugin

En annan inställning som du kan konfigurera är bakgrundsfärgen för titeln på det nya inlägget. Om du aktiverar detta, när en läsare besöker ett nytt inlägg, kommer de att se att postens titel section har en bakgrundsfärg. Vi tyckte inte att den här inställningen var nödvändig, så vi inaktiverade den.

I inställningen ”Betrakta ett inlägg som läst” kan du välja när etiketten för nya inlägg ska stängas av: efter att det har öppnats, efter att det har publicerats i listan eller efter att någon page på bloggen har öppnats.

Vi föreslår att du använder ”efter att det öppnades”. Det innebär att om en visitor inte har läst flera posts och öppnar en, så försvinner inte etiketten new post för de andra artiklarna.

Därefter kan du selecta hur många dagar inlägget ska vara markerat som nytt, visa alla befintliga inlägg som nya för nya besökare och inaktivera den nya etiketten för custom post types.

The Mark New Posts plugin settings page

De två sista Settings är ganska avancerade.

En är att ”Allow outside the post list”, vilket innebär att du kan markera posts utanför slingan, gillar i widget-klara sidebar areas. Var försiktig med att aktivera den här inställningen, eftersom det kan skapa oönskade WordPress error.

Den andra är ”Använd JavaScript för att visa markörer”, som endast rekommenderas om pluginet inte är kompatibelt med temat eller andra tillägg som används på din blogg. I de flesta fall kommer du att vilja ha den här inställningen inaktiverad.

När du är klar med att konfigurera plugin-inställningarna klickar du bara på ”Save”.

Clicking the Save button in Mark New Posts plugin

Och nu är det klart! Gå vidare och besök din website i inkognitoläge för att se om de nya etiketterna för senaste inlägg är live.

Så här gillar vi det på vår demo website:

Example of the new post marker made by Mark New Posts plugin

Metod 2: Markera nya inlägg genom att lägga till anpassad kod

Är du missnöjd med de nya alternativen för inläggsetiketter som ges av föregående inlägg? Om så är fallet kan du markera nya posts med hjälp av custom code istället.

För Beginnare kan denna metod verka skrämmande. Men oroa dig inte eftersom vi kommer att använda WPCode plugin för att säkert insert code snippets i WordPress utan att bryta din website.

WPCode gör det också enkelt att hantera flera anpassade code snippets, vilket kommer att vara praktiskt i vårt fall eftersom vi kommer att använda mer än en.

WPCode - Best WordPress Code Snippets Plugin

Obs: Även om det finns en gratis version av WPCode, kommer vi att använda WPCode Pro eftersom det tillåter dig att infoga code snippets på rätt platser för denna tutorial.

Det första du behöver göra är att installera WPCode i WordPress. För installationsinstruktioner, gå vidare och kontrollera vår artikel om hur du installerar ett WordPress plugin.

Gå sedan till Code Snippets ” + Add Snippet från din WordPress dashboard. Efter det väljer du ”Add Your Custom Code (New Snippet)” och klickar på knappen ”Use snippet”.

Adding custom code in WPCode

Låt oss nu add to en titel till ditt code snippet så att det är lättare att hitta det senare om det behövs. För detta kan du namnge det något som ”WordPress Last Visit Rubrik Modifier.

Välj sedan ”PHP Snippet” i dropdown för Code Type.

Giving the custom code snippet a title and selecting the PHP code type in WPCode

Efter det kan du kopiera och paste code snippet under:

// Define a function to modify post titles based on the last visit
function wpb_lastvisit_the_title($title, $id) {

    // Check if not in the loop, a singular page, or a page post type; if true, return the original title
    if (!in_the_loop() || is_singular() || get_post_type($id) == 'page') return $title;

    // Check if no 'lastvisit' cookie is set or if it is empty; if true, set the cookie with the current timestamp
    if (!isset($_COOKIE['lastvisit']) || $_COOKIE['lastvisit'] == '') {
        $current = current_time('timestamp', 1);
        setcookie('lastvisit', $current, time() + 60 * 60 * 24 * 7, COOKIEPATH, COOKIE_DOMAIN);
    }

    // Retrieve the 'lastvisit' cookie value
    $lastvisit = $_COOKIE['lastvisit'];

    // Get the publish date of the post (in Unix timestamp format)
    $publish_date = get_post_time('U', true, $id);

    // If the post was published after the last visit, append a new span to the title
    if ($publish_date > $lastvisit) $title .= '<span class="new-article">New</span>';

    // Return the modified or original title
    return $title;
}

// Add a filter to apply the 'wpb_lastvisit_the_title' function to 'the_title' hook with priority 10 and 2 parameters
add_filter('the_title', 'wpb_lastvisit_the_title', 10, 2);

Vad det här snippet gör är att ändra rubrikerna på WordPress-poster baserat på en användares senaste besök.

Det kontrollerar om sidan är ett blogginlägg eller ej, och om inte, kommer den att visa originaltiteln som den är. Men om det är ett blogginlägg kommer titeln att ändras.

Sedan ser snippet till att cookien för senaste besök finns. Om den inte gör det skapar koden den och ställer in den på aktuell tid. Funktionen jämför sedan denna lastvisit-tid med postens publiceringsdatum och lägger till en ”New”-etikett i rubriken om inlägget är nyare än det senaste besöket.

När du har infogat code snippet rullar du bara ner och väljer ”Auto Insert” för Insert Method.

Utöver det ska du se till att välja ”Front-end only” för Location. Detta innebär att koden endast kommer att run på den del av din WordPress blogg som besökarna interagerar med och ej i din adminpanel eller på andra platser.

Modifying the insertion settings in WPCode and activating and publishing the code

När du har gjort det kan du göra koden ”aktiv” och clicka på ”Save Snippet”.

Upprepa nu steget för att lägga till ett nytt anpassat code snippet. Den här gången kommer koden att utforma etiketten ”Inga annonser” som läggs till i titlarna på de senaste inläggen baserat på användarens senaste besök.

Så du kan namnge det något som ”Post Type New Label Style” och Code Type bör vara ”CSS Snippet.

Creating a CSS code to customize the new post label in WPCode

Du kan sedan copy and paste följande kodrader till boxen Code Preview:

/* CSS to style the "New" label in blog post titles */
.new-article {
    background-color: #4CAF50; /* Green background color */
    color: #ffffff; /* White text color */
    padding: 2px 5px; /* Padding around the label */
    margin-left: 5px; /* Adjust the margin to your preference */
    border-radius: 3px; /* Rounded corners for the label */
    font-size: 12px; /* Adjust the font size to your preference */
}

Detta code snippet i huvudsak customize ’New’ post etikett med hjälp av en custom bakgrundsfärg, textfärg, padding, marginal, border radius, och font storlek.

Känn dig gratis att justera dessa element till dina alternativ när du går vidare. Se bara till att använda hex-färgkoder eller RGB-värden för bakgrundsfärger och textfärger.

I sektionen Infogaren väljer du ”Site Wide Header” som Location. Efter det gör du koden ”Aktiv” och klickar på ”Save Snippet”.

Choosing Site Wide Header as the code location in WPCode

Och så är det klart! För att se om koden fungerar kan du publicera ett nytt blogginlägg och viewa inlägg et i inkognitoläge i mobilen eller på datorn.

Om koden är framgångsrik bör du se en ”New”-etikett bredvid titlarna på dina senaste inlägg.

Example of the new post label made with WPCode

Förutom att lyfta fram nya inlägg för återkommande besökare finns det andra sätt du kan göra för att förbättra din blogg och få folk att stanna kvar längre på din website.

Du kan till exempel visa posts som är relaterade till det som besökaren för närvarande läser. På så sätt kan du hålla dem engagerade genom att presentera content som stämmer överens med deras intressen.

Eller så kan du skapa en sticky flytande flytande footer bar för att genomföra email addresses eller främja specialerbjudanden. Detta fält förblir synligt när besökarna rullar ner på sidan. You kan använda den för att konstant påminna dem om att prenumerera eller utnyttja ditt erbjudande, vilket ökar konverteringen.

Du kanske också vill add to en font resizer för tillgänglighetsändamål. Detta allow visitors to adjust the font size on your website to their preference, making it easier for them to read your content.

Om du har mycket blogginnehåll kanske du vill skapa custom pages som visar blogginlägg om de har ett specifikt custom field.

Låt oss säga att you har ett custom field för ”Recipe Difficulty”. Du kan skapa en page som visar alla blogginlägg som är taggade med ”Recept” och som också har customize-värdet ”Lätt”. På så sätt kan besökare som letar efter enkla recept hitta dem all på ett ställe.

Här är andra tips som du kan kontrollera för att ytterligare optimera din WordPress blogg:

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du markerar new posts för återkommande besökare i WordPress. Du kanske också vill kontrollera våra expertval av de bästa plugins för drag and drop page builders i WordPress och vår ultimata guide om hur du redigerar en WordPress website.

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.

Avslöjande: Vårt innehåll stöds av våra läsare. Det innebär att om du klickar på några av våra länkar, kan vi tjäna en provision. Se hur WPBeginner finansieras, varför det är viktigt, och hur du kan stödja oss. Här är vår editoriala process.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Den ultimata WordPress-verktygslådan

Få GRATIS tillgång till vår verktygslåda - en samling WordPress-relaterade produkter och resurser som varje professionell användare bör ha!

Reader Interactions

14 kommentarerLämna ett svar

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Peter says

    Hi
    I use WP for a static website and show posts in a sidebar using the Recent Posts widget.

    I would like visitors to the site to be able to see new posts by highlighting them in some way in the sidebar e.g. showing ”New” against the title of the post.

    Is there any plugin that will support this? The Mark New Posts widget only shows that the item is new once you have opened the post from the sidebar.

    Many thanks

    Peter

  3. S says

    Forgot to mention, as mentioned above, most websites have more than one theme per post/page, so this may not work in that instance. Have a wonderful day.

  4. S says

    Thank you for all your help. However, this needs to be in a short video and explained in slow detail. This is complicated and for developers that are used to coding, not for the average joe building a website. I always appreciate your emails so much

  5. Sam says

    This does not work for multisite network. Can you please advise. I appreciate your help by adding a tutorial for multisite.

    Thanks

  6. mthcsn says

    Great stuff! Thanks!
    Although, I think the cookie is expiring rather fast. I think it was meant to be ’time()+(60*60*24*7)’ so it expires after a week. Otherwise, it expires only after slightly less than 3 hours.

Lämna ett svar

Tack för att du väljer att lämna en kommentar. Tänk på att alla kommentarer modereras enligt våra policy för kommentarer, och din e-postadress kommer INTE att publiceras. Vänligen använd INTE nyckelord i namnfältet. Låt oss ha en personlig och meningsfull konversation.