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 lägger du till en Font Resizer i WordPress för tillgänglighet

Vill du göra din WordPress-webbplats mer tillgänglig men kämpar med teckenförstoringar? Det finns zoomfunktioner i webbläsaren, men de förstör ofta webbplatsens layout och skapar en frustrerande upplevelse för användare som behöver större text 😞

Vi har hjälpt tusentals WordPress-nybörjare att förbättra designen på sina webbplatser. Och det här är vad vi har lärt oss: en korrekt font resizer bör låta besökare justera textstorleken utan att förvränga andra sidelement.

Denna till synes lilla funktion kan göra en enorm skillnad när det gäller att hålla besökarna engagerade i ditt innehåll.

I den här guiden visar vi dig två beprövade sätt att lägga till en font resizer på din WordPress-webbplats – ett för klassiska teman och ett som fungerar med alla teman. Båda metoderna är nybörjarvänliga och kommer inte att förstöra din webbplats design.

How to add resizeable text for site visitors in WordPress

Är det viktigt att lägga till text som kan ändras i storlek på din webbplats? 🤔

Att hitta rätt font för din WordPress-webbplats är viktigt eftersom det spelar en stor roll för att göra din website attraktiv och hjälper besökarna att läsa ditt content.

Men ibland kanske det inte räcker med att välja den bästa teckenstorleken i WordPress. Om teckenstorleken är liten kommer folk att ha svårt att läsa dina artiklar och så småningom överge din webbplats.

Ett enklare sätt att förbättra läsbarheten är att erbjuda besökarna alternativet att resize huvudtexten på din website. This allows users to adjust the text size according to their like and spend more time on your site.

Även om du kan använda webbläsarens inbyggda zoomfunktion genom att trycka på ”CTRL och +”, ökar storleken på alla WordPress designelement på sidan och inte bara text. Detta kan förstöra webbplatsens layout och inte ge en bra användarupplevelse.

Med detta sagt, låt oss se hur du enkelt kan lägga till storleksändringsbar text för dina besökare i WordPress. Du kan använda snabblänkarna nedan för att hoppa till en specifik metod:

Metod 1: Lägg till WordPress Font Resizer med plugin och kod

Ett enkelt sätt att låta användarna ändra textstorleken på din webbplats är att använda ett plugin för att ändra teckensnitt för tillgänglighet i WordPress, t.ex. Accessibility Widget.

Det är ett gratis WordPress-plugin som låter dig lägga till ett alternativ i sidofältet på din webbplats för att ändra textstorleken. Pluginet är lättviktigt och mycket enkelt att använda.

Observera dock att plugin-programmet Accessibility Widget inte är kompatibelt med Full Site Editing och blockteman, så det fungerar bara om du använder ett klassiskt tema. Du vet att du använder ett blocktema om temaanpassaren saknas i din WordPress-admin.

Det första du behöver göra är att installera och aktivera pluginet Accessibility Widget på din website. Om du behöver hjälp, vänligen se vår guide om hur du installerar ett plugin för WordPress.

När du har aktiverat den går du bara till appearance ” widget från WordPress adminpanel. Därefter kan du click the ”+” button and add the ”Accessibility Widget” block to your sidebar.

Add an accessibility widget block

Därefter kan du enter en titel för widgeten, gillar ”Ändra textstorlek” eller ”Resize Text”.

Därefter måste du välja vilka HTML-element eller CSS-klasser som ska påverkas av widgeten. Standardalternativen är body, stycke, listobjekt och tabellceller. Dessa alternativ bör fungera för de flesta webbplatser.

Change accessibility widget settings

Widgeten allow upp till fyra alternativ för resize. Standardalternativen är 90 %, 100 %, 110 % och 120 %. Du kan öka eller minska storleken på fonten genom att enter siffrorna i fältet ”Set to these sizes”.

Den sista widgetinställningen är personuppgiftsansvarig text, och det är den text som användarna kommer att se. You can keep the standard percentages for the text size or use a letter to show different font sizes.

När du är klar klickar du bara på knappen ”Update” för att lagra dina inställningar för widgetar.

You can now visit your website to see the widget in action. Så här ska widgeten se ut i sidebaren på din website:

Change text size preview

Om du tycker att den personuppgiftsansvariga texten inte är notice, kan du ändra det med hjälp av CSS.

För att göra detta går du bara till din WordPress-admin och väljer Utseende ” Anpassa .

Opening the WordPress theme customizer for classic themes

Du bör nu se några alternativ för att anpassa ditt klassiska tema.

Här väljer du ”Ytterligare CSS”.

Opening the Additional CSS tab in Theme Customizer

Nu kan du lägga till lite CSS-kod för att styla widgeten. Här är vad vi lade till:

1
2
3
4
5
.widget_accesstxt a {
border: 2px solid #000;
padding: 2px;
font-weight: bold;
}

Denna CSS kommer att lägga till en kant runt controller-texten, göra den fet och lägga till lite utfyllnad. När du är nöjd med hur widgeten ser ut klickar du bara på ”Publicera”.

För mer information, se vår guide om hur du lägger till anpassad CSS i WordPress.

Adding additional CSS to a classic theme to style the accessibility widget

Metod 2: Använd WordPress Accessibility Plugin

Ett annat enkelt sätt att låta användare resize texten på din website är genom att använda WP Accessibility. Med detta plugin kan du add to en toolbar till din site för att ändra textstorleken, oavsett vilket theme du använder.

Det första du behöver göra är att installera och aktivera pluginet WP Accessibility på din website. Du kan se vår guide om hur du installerar ett plugin för WordPress om du behöver hjälp.

Efter aktivering går du bara till WP Accessibility page från WordPress adminpanel.

WP Accessibility Settings

I ”Accessibility Toolbar” section, click the ”Enable Accessibility toolbar” alternative and select ”Font size. Detta kommer att add to en font resizer till toolbar.

Om det behövs kan du även aktivera alternativen Kontrast och Gråskala.

Dessutom kan du ändra storleken på fonten i innehållet när du klickar på toolbaren. Du kan också bara selecta ”Standard size” i dropdown-menyn om du inte är säker på vad du ska välja.

Utöver det rekommenderar vi att du aktiverar alternativet ”Use alternate font resizing stylesheet”. När det här alternativet är aktiverat kan användare enkelt växla mellan standardstorlekarna för font och en större, mer läsbar version av texten.

Aktivera gärna andra Settings i pluginet.

När du är klar klickar du bara på knappen ”Update Toolbar Settings”.

WP Accessibility toolbar settings

Så där ja!

Så här gillar vår toolbar för resize av font på the front end:

Gif of how the WP Accessibility plugin works

För mer information kan du läsa vår guide om hur du förbättrar tillgängligheten på din WordPress site.

Gör din WordPress-webbplats ännu enklare att använda med dessa tips

Vill du göra din webbplats enklare att använda och snyggare? Kolla in dessa hjälpsamma guider:

Video Tutorial

Subscribe to WPBeginner

Vi hoppas att den här artikeln hjälpte dig att lägga till storleksändringsbar text på din WordPress-webbplats. Du kanske också vill kolla in våra expertval av de bästa dra-och-släpp-sidbyggarna i WordPress och vår kompletta guide till temauppdateringar i WordPress.

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.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial 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.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

7 kommentarerLeave a Reply

  1. Shushanna

    Hi, thanks for the amazing post. I wonder if your site does not have a sidebar, is it possible to to put the widget somewhere else, for example above the navigation.

    • WPBeginner Support

      You can place it in your theme’s widget areas if your theme has widget areas available!

      Admin

  2. Jasper

    I have installed the widget but don’t have the Set Controller Text box so on the website it shows the %s.
    Any sugestions? Thanks

  3. Ivo

    Hi, I followed the instructions as on the video but noting happens. Please help.
    I actually wont it to make my girlfriend site to be zoom-able when open in mobile devices. Please suggest…
    Regards,
    Ivo

  4. Eric Paquette

    is it possible to make the A A A bigger ?

  5. Wrenling

    This widget is AMAZING, thank you so much!!

    I’m curious, I added it to my blog and it is EXACTLY what I wanted, but it only affects the main page of the blog – if you click on an individual post, the widget disappears. Can you tell me how to fix this?

    • WPBeginner Support

      Your WordPress theme probably uses different sidebars for main page and single posts.

      Admin

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.