Det sista du vill är att dina besökare ska klicka på en länk till en annan webbplats och aldrig komma tillbaka. Därför är det viktigt att öppna externa länkar i ett nytt fönster eller en ny flik för att skapa en smidig användarupplevelse.
På WPBeginner är vi måna om att hålla våra läsare engagerade. Därför ser vi till att alla externa länkar på vår webbplats öppnas i nya flikar. Detta gör att människor kan utforska länken utan att förlora sin plats på vår webbplats, så att de enkelt kan fortsätta utforska vårt innehåll.
Den här nybörjarguiden visar dig hur du enkelt kan få externa länkar på din WordPress-webbplats att öppnas i nya flikar, vilket ökar användarnas engagemang och gör dina läsare nöjda.
Varför öppna externa links i ett nytt fönster eller en ny tab?
Externa länkar är länkar till websites som du inte äger eller kontrollerar. Om du lägger till en länk till en extern webbplats kommer dina besökare normalt att lämna din site genom att clicka på länken.
Vissa experter på användarupplevelse säger att du inte ska öppna externa links i ett nytt fönster eller en ny tab, men vi håller inte med.
You see, de flesta användare glömmer lätt den senaste website de besökte. Om de klickar på en link som tar dem bort från din WordPress-webbplats till en new site, kanske de aldrig kommer tillbaka.
För en bättre användarupplevelse rekommenderar vi att du öppnar externa links i ett nytt fönster (i äldre webbläsare) eller en ny tab (i moderna webbläsare). På så sätt går inte den ursprungliga page förlorad och användarna kan återstarta browsingen på din website genom att växla tillbaka.
En annan fördel med att öppna externa länkar i en new tab är att du ökar antalet pages view och engagemanget hos användarna på din site. Användare som tillbringar mer tid på din site är mer benägna att registrera sig för ditt nyhetsbrev, följa dig på social media, lämna en comment och köpa dina produkter.
Med detta sagt, låt oss ta en titt på hur du enkelt kan öppna externa links i ett new window eller tabs i WordPress. Vi kommer att täcka olika metoder så att du kan välja den som passar dig bäst:
- Opening External Links in a New Tab Using the Block Editor
- Opening External Links in a New Tab Using the Classic Editor
- Opening External Links in a New Tab Using HTML Code
- Opening Navigational Menu Links in a New Tab
- Automatically Opening All External Links in New Tab Using a Plugin
- Automatically Opening All External Links in Posts in a New Tab Using Code
Video Tutorial
Om du föredrar skriftliga instruktioner är det bara att fortsätta läsa.
1. Öppna externa länkar i en ny tab med hjälp av Block Editor
WordPress Block Editor har en built-in funktion som gör att du kan öppna externa links i en new tab. I de senaste versionerna av WordPress är det här alternativet synligt när du lägger till en link.
Du behöver bara edit:a blogginlägget eller den page där du vill add to en extern länk. Därefter väljer du den text du vill länka och klickar sedan på knappen ”Link”. Du kan också trycka på genvägstangenten CTRL+K i Windows eller Command+K i Mac.
Detta kommer att visa popupen för insert link. Enter bara länken och tryck på ”Enter”.
Efter det måste du toggle alternativet ”Öppna i ny tab” till positionen On.
Linken kommer nu att öppnas i en new tab.
Rubrik: Du kan också add to title- och nofollow-attribut till popup:en insert link genom att installera pluginet All in One SEO.
2. Öppna externa links i en new tab med Classic Editor
Om du fortfarande använder den klassiska Editorn rekommenderar vi att du börjar använda den nya Editorn. Den är modern, snabbare och innehåller många utvalda funktioner som du går miste om.
Men om du fortfarande vill använda den klassiska Editorn, så gör du så här för att add to en länk som öppnas i en new tab.
Först måste du editera den post eller page där du vill add to länken. Därefter väljer du den text som du vill länka, som kallas ankartext. Sedan kan du clicka på knappen ”Insert/edit link”.
En popup kommer att visas där du kan add to din externa länk.
Därefter klickar du på kugghjulsikonen bredvid den. Detta kommer att ge upp den avancerade popupen för insert-länk.
Härifrån måste du kontrollera alternativet ”Öppna länk i en ny tabs”. Efter det bör du klicka på knappen ”Update” längst ner för att lägga till din länk.
3. Öppna externa links i en new tab med hjälp av HTML-kod
Ibland kan du behöva skriva HTML för att lägga till en link i WordPress. Du behöver till exempel göra detta när du använder HTML-läget i den nya Block Editor eller lägger till en link i en template-fil för ett WordPress Theme.
Du kan add to linken med hjälp av HTML-kod som gillar detta:
<a href="http://example.com" target="_blank" rel="noopener">Link Text</a>
Parametern target="_blank" i den här koden säger till webbläsare att öppna länken i ett nytt fönster eller en ny tabs. Ersätt helt enkelt ”example.com” med den externa länkens URL och ”Link Text” med den ankartext du vill använda.
4. Öppna länkar i navigationsmenyn i en new tab
På din website i WordPress kan du lägga till externa links i navigation menu på din site. Hur du gör det beror på om du använder ett traditionellt theme eller ett block theme.
Öppna Nav Menu Links i en New Tab för Classic Themes
För att öppna dina utgående menylänkar i en new tab, heada till Appearance ” Menu från din WordPress admin area.
Därefter klickar du på knappen ”Screen Options” högst upp till höger på din vy.
När du klickar på knappen ser du nu fler alternativ.
Gå vidare och kontrollera alternativet för ”Link Target” under ”Visa avancerade egenskaper för menyn”.
Efter det kan du add to en Custom Link till din navigation menu genom att enter URL, Link Text och click to the ”Add to Menu” button.
Din Customize Link kommer nu att visas i Column Menu Structure. You can now select the alternative for ”Open link in a new tab” to open your external link in a different tab.
När du är klar klickar du på knappen ”Save Menu” längst ner.
Öppna Nav Menu Links i en New Tab för Block Themes
Om du använder ett block editor-tema måste du navigera till Appearance ” Themes och använda Full Site Editor för att öppna dina utgående links i en new tab.
You need to click on the header area at the top of the page, and the header will be selected. Därefter klickar du på navigation area precis till vänster om menyn. Menyn kommer att väljas, och du bör se ett ”+”-tecken i slutet av menyn där du kan lägga till en add new-länk.
Tips: Det kan vara svårt att välja block i hela Site Editor, så många användare tycker att det är lättare att använda List View. Klicka bara på ikonen högst upp på vyn och leta sedan upp och selecta blocket Navigation. Det kan vara kapslat inuti andra block, till exempel Header och Group.
Nu måste du clicka på ’+’ iconen för att öppna en popup där du kan add to en link. Skriv in URL:en i fältet högst upp och se till att du togglar ”Öppna i new tab” till positionen On.
Därefter klickar du på ikonen ”Submit” bredvid URL:en för att lagra dina settings.
När du har gjort det, glöm inte att klicka på knappen ”Save” högst upp på vyn.
5. Öppna automatiskt alla externa länkar i New Tab med hjälp av ett plugin
Det kanske låter som extra arbete att manuellt kontrollera alternativet för varje extern länk som du addar. Men med tiden kommer du att vänja dig vid det.
Om du driver en blogg med flera författare eller ofta glömmer att öppna externa links i en new tab, kan du använda ett tillägg för det.
Först måste du installera och aktivera pluginet Öppna externa länkar i ett nytt fönster. För mer detaljer, se vår Step-by-Step guide om hur du installerar ett WordPress plugin.
Pluginet fungerar direkt från boxen och öppnar automatiskt externa links i ett new window.
Det ändrar faktiskt inte de externa länkarna i dina blogginlägg. Istället använder den JavaScript för att öppna externa links i ett new window.
Obs/observera: Om du deactivate pluginet kommer externa links inte längre att öppnas i ett new window.
6. Öppna automatiskt alla externa länkar i en ny flik med hjälp av kod
Om du ofta glömmer att ställa in externa länkar så att de öppnas i en ny flik när du skriver blogginlägg, eller om du vill ha ett enkelt sätt att se till att gästskribenter följer dina riktlinjer, kan du också använda WPCode.
WPCode gör att du säkert och enkelt kan lägga till anpassad kod i WordPress och det levereras med ett inbyggt bibliotek med användbara kodavsnitt för att anpassa din webbplats.
Med hjälp av den här metoden kan du automatiskt öppna alla externa länkar i dina inlägg i en ny flik med bara några klick.
Först måste du installera och aktivera det kostnadsfria WPCode-pluginet. Om du behöver hjälp kan du följa vår handledning om hur du installerar ett WordPress-plugin.
När pluginet har aktiverats går du till Code Snippets ” Library från WordPress adminpanel .
Därifrån söker du efter utdraget ”Öppna externa länkar i en ny flik”. När du hittar utdraget håller du muspekaren över det och klickar på knappen ”Använd utdrag”.
Detta kommer att öppna WPCode snippet editor.
Lägg märke till att WPCode automatiskt lägger till koden åt dig och väljer rätt infogningsmetod.
Efter det behöver du bara växla omkopplaren högst upp på sidan från ”Inaktiv” till ”Aktiv” och trycka på knappen ”Uppdatera”.
Slutligen måste du klicka på knappen ”Update” för att lagra och aktivera kodsnutten.
Så där ja. Nu kommer alla externa länkar som läggs till i dina WordPress-inlägg automatiskt att öppnas i en ny flik.
Expertguider om hur du lägger till länkar i WordPress
Vi hoppas att den här artikeln har hjälpt dig att lära dig hur du enkelt kan öppna externa länkar i ett nytt fönster i WordPress. Du kanske också vill se några andra artiklar om att lägga till länkar i WordPress:
- Beginner’s Guide om hur man lägger till en Link i WordPress
- Intern Linking för sökmotorsoptimering: Den ultimata guiden med bästa praxis
- Hur man ”enkelt” lägger till ankarlänkar i WordPress (steg för steg)
- Hur man ändrar färgen på Links i WordPress (Beginner’s Guide)
- Hur man addar Rubrik och NoFollow till Insert Link Popup i WordPress
- Hur man addar Nofollow Links i WordPress (Enkel guide för Beginnare)
- Så här trackar du utgående links i WordPress
- Så här förladdar du länkar i WordPress för snabbare laddningshastigheter
- Hur man hittar och fixar trasiga länkar i WordPress (Step-by-Step)
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.
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!
Dennis Muthomi says
In the HTML code provided in method 3, what causes the link to open in a new tab?
WPBeginner Support says
The target=”_blank” is what causes the new tab
Administratör
Dennis Muthomi says
I appreciate you taking the time to provide the specific detail I was asking about.
Clear and direct answer, Thank you for that
Dayo Olobayo says
Thanks for explaining this in detail but I however have another question. Is it advised to open internal links in new tabs? I ask because most users would most likely not come back to what they were reading before jumping to another article on my website because they clicked on an anchor text.
WPBeginner Support says
For the time being we prefer to have internal links open in the same window while external links open in a new tab or window.
Administratör
Ahmed Omar says
good explanation about all the options
personally I am using plugin, as it is more easy and at the same time I check on the links
thank you
WPBeginner Support says
You’re welcome, glad you found a method you prefer
Administratör
Jiří Vaněk says
Alternatively, I would also add that for SEO purposes, it’s good to have links on the website with the ’nofollow’ attribute.
Jordi says
Hi,
Unfortunately, after the latest WordPress updates, the option ”Open in a new Tab” is not available at the time of inserting the link. You must then edit the link to include that option. Is there a possibility to revert it? Thanks.
WPBeginner Support says
You should still be able to add the open in new tab when first adding the link, we would recommend checking to ensure that you don’t have any plugins that may conflict with adding links.
Administratör
Esteban says
Hello, in gutenberg once the option is checked it does not work, it is independent of plugins, could it be the theme?
WPBeginner Support says
If you’ve disabled all plugins you can try changing themes to see if the issue is from your theme. The other possibility would be if you have a browser addon that is preventing the link from opening in a new window or tab.
Administratör
Jennifer Robin Gallery says
I’ve tried both this version, and WP External Links, and neither will open my links in a new tab. I’ve tried to disconnect my wp no right click plugin, and that still didn’t work. Suggestion?
WPBeginner Support says
If none of the methods in this article are allowing you to open the link in a new tab, we would recommend checking if you have any browser extensions that may be preventing the links from opening.
Administratör
Jeroen van Rensen says
Nice article! I love it!
WPBeginner Support says
Thank you
Administratör
Emily Harvey says
I am using the new editor and despite your excellent article when I click on the ’open link in new tab’ button I am not sure which symbol indicates whether the link is in a new tab or not. Is it grey or is it green?
Am I right that if you do nothing the link will not open in a new tab?
WPBeginner Support says
It sounds like you may be using a plugin that is modifying the display, normally it would be when the box is filled for it to open in a new tab. If you preview the post you should be able to test which option is working for your site.
Administratör
Ikenna John Udeobi says
Thank you for sharing this tip, I would start following these methods from now on
WPBeginner Support says
Glad our guide could be helpful
Administratör
Terry G says
Thank you Scott Swanson for your note. It wasn’t working for me, but when I disabled that plugin, it does. I guess I have to find another protection plugin to see if it’s only that plugin.
Johnbosco gomez says
Greetings. please do you have the one with the feature if someone clicks external link it will take him to new page with click here to continue link? please can you suggest any plugin for this?
may says
I downloaded this but the links still don’t open in a new window or tab.
Scott Swanson says
Will not work with the WP Content Copy Protection & No Right Click plugin
Ben says
How do you open external links (eg advertising) when the person on your blog plays any of the videos?
João Leitão says
greetings! what I was looking for was a code to insert in functions.php that would do the trick without another plugin. so:
function wp_change_target($content){
return preg_replace_callback(’/]+/’, ’wp_target_callback’, $content);
}
function wp_target_callback($matches){
$link = $matches[0];
$mu_url = get_bloginfo(’url’);
if (strpos($link, ’target’) === false){
$link = preg_replace(”%(href=S(?!$mu_url))%i”, ’target=”_blank” $1’, $link);
}elseif (preg_match(”%href=S(?!$mu_url)%i”, $link)){
$link = preg_replace(’/target=S(?!_blank)S*/i’, ’target=”_blank”’, $link);
}
return $link;
}
add_filter(’the_content’, ’wp_change_target’);
Clare says
Can anyone tell me how to open a MENU item in a new window? I don’t see an option in the Edit Menus page. I have an external link in a footer menu , that I’d like to open in a new window.
Mike Cavanaugh says
I downloaded the plugin but all my links still open up in my wordpress page.
On my side bar ads, I want them to open up in a separate page and leave my page open?
Same for all the links in the ”find a professional menu” I want people to go to their links/sites but keep my site open so they will have it in front of them.
Help please?
mike
demeyere says
I think it is much easier to just handle this in the jQuery for the whole site… and never worry about it again. (Substitute your own domain name for mine, of course.)
// open all external links in a new window
$(”a[href^=’http’]”).not(”[href*=’demeyere.com’]”).attr(’target’,’_blank’);
wpbeginner says
@demeyere Again, the plugin above is not using target _blank to make sure that the site validates with XHTML strict. But yes, your code will do the job as well.FYI for others reading: Now anyone can simply make a plugin and call this snippet in the header. It wouldn’t make any difference in the load time between you manually putting in your header or calling it via a plugin into wp_head() hook.
easyP says
Hi
In earlier versions of wordpress, you selected the text you wanted to link to and then hit the link icon on the dashboard.
This opened a field in which you added the link.
Worked fine.
In latest wordpress versions, when I select the text and hit the link icon and paste in the link, the link appears at the top of the post – not surrounding the selected text.
Am I doing something wrong?
Plugin looks good but I’m trying to cut down on the number that I use.
wpbeginner says
@easyP It doesn’t work like that on our site. We are using 3.2.1. We select the text and hit the link icon, and it adds the link where it should. Are you using the Visual Editor or the HTML Editor?Also, any particular reason why you are trying to cut down on the number of plugins that you use?
easyP says
@wpbeginner
Hi boys.
Number of plugins – trying to cut down because of page load time.
I love my theme, but it runs like a donkey.
I use the html editor when writing posts and I’m using wordpress 3.2.1 but when I select the text and hit the link icon – the link forgets the highlighted text and appears at the top of the post / page!
Any thoughts?
wpbeginner says
@easyP If you try to this trick without a plugin, you will end up doing the same thing. The impact of this plugin on your load time is barely noticeable.
easyP says
@wpbeginner
Worth knowing that – thanks boys.
AstroGremlin says
I just installed this plug-in. Kind of a funny name, Open External Links in a New Window, but certainly a great idea. Thanks!