Det kan vara frustrerande när din WordPress-navigeringsmeny plötsligt flyttas bakom adminfältet. Vi har sett detta hända många användare, särskilt efter installation av ett nytt tema eller aktivering av vissa plugins.
Detta problem är vanligare än du kanske tror. Många WordPress-teman tar inte hänsyn till utrymmet som tas upp av adminverktygsfältet som visas för inloggade användare, vilket kan flytta din meny ur position.
I den här guiden visar vi dig flera sätt att åtgärda att WordPress navigeringsmeny visas under adminfältet. Oavsett om du vill ha en snabb icke-teknisk lösning eller en ren CSS-lösning, hittar du en metod som fungerar för din webbplats.
Varför överlappar WordPress adminfält navigeringsmenyn?
Om din WordPress navigeringsmeny verkar vara dold eller överlappa med administrationsfältet, kan du ha att göra med ett vanligt visningsproblem.
Vi har sett detta problem uppstå när ett temas CSS inte korrekt tar hänsyn till administratörsfältets höjd. CSS:en skymmer då delar av din webbplats header, inklusive navigeringsmenyn.
Du kanske märker att vissa menyalternativ är svåra att klicka på eller att hela menyn delvis täcks när du tittar på din webbplats. Detta kan vara frustrerande, särskilt när det påverkar användbarheten på din webbplats.
Det finns några vanliga anledningar till varför detta kan hända:
- Temakonflikter: Ibland tar CSS i ditt tema inte hänsyn till adminfältet, vilket gör att menyn placeras felaktigt.
- Plugin-konflikter: Ett plugin som modifierar front-end-designen kan oavsiktligt orsaka att menyn överlappar med adminfältet. Detta kan inkludera plugins som lägger till megamenyer eller sidhuvudsbanners.
- Anpassad CSS: Om du har lagt till anpassad CSS på din webbplats, kan det störa korrekt visning av din meny.
Detta problem kan påverka användbarheten på din webbplats, vilket gör det svårare för användare att navigera. Lyckligtvis finns det flera sätt att lösa detta problem, med en enkel lösning som inte kräver någon kodning.
Här är en översikt över lösningarna vi kommer att visa. Du kan hoppa till den du är mest bekväm med:
- Lösning 1: Dölj adminfältet via användarprofilinställningar
- Lösning 2: Åtgärda överlappningen med anpassad CSS
- Lösning 3: Kontrollera plugin-konflikter
- Ytterligare resurser för WordPress-administratörer
Lösning 1: Dölj adminfältet via användarprofilinställningar
Detta är det enklaste sättet att lösa problemet om du inte är bekväm med att lägga till kod. Det fungerar bra för nybörjare eller användare som inte har behörighet att ändra temat eller lägga till anpassad CSS.
Istället för att åtgärda layouten, döljer den här metoden adminfältet helt så att det inte längre täcker menyn.
Observera: Om du döljer adminfältet kommer du inte längre att se snabblänkar för att redigera inlägg, hantera kommentarer eller komma åt pluginuppdateringar när du besöker din webbplats.
Dessutom gäller denna inställning endast ditt användarkonto. Om andra använder webbplatsen måste de följa samma steg nedan.
För att göra detta, logga in på din WordPress-instrumentpanel och gå till Användare » Profil i menyn till vänster.
Bläddra ner till avsnittet Verktygsfält och avmarkera rutan som säger 'Visa verktygsfält när webbplatsen visas'.
Klicka på knappen 'Uppdatera profil' längst ner för att spara dina ändringar.
Varför detta fungerar
Genom att stänga av adminfältet tar du bort elementet som flyttar menyn ur position. Det är en enkel lösning som undviker djupare layoutproblem, särskilt på webbplatser där bara inloggade användare ser problemet.
Lösning 2: Åtgärda överlappningen med anpassad CSS
Om du är bekväm med att använda anpassad kod och vill ha en långsiktig lösning, är det bäst att lägga till CSS. Detta låter dig styra exakt hur sidhuvudet beter sig, utan att stänga av adminfältet.
Vi rekommenderar att använda WPCode-pluginet för att säkert lägga till anpassad CSS. Det fungerar med alla teman och låter dig tillämpa din lösning endast för inloggade användare (eftersom gäster inte ser adminfältet).
Steg 1: Inspektera header-elementet
Högerklicka på din webbplats rubrik eller navigeringsmeny och välj 'Inspektera' i din webbläsare. Detta öppnar utvecklarverktygen.
Håll muspekaren över HTML:en.
Webbläsaren kommer att markera det matchande elementet på sidan.
Leta efter en klass eller ett ID som omsluter din navigering. Du kommer att använda detta i din anpassade CSS.
Steg 2: Installera WPCode
Installera och aktivera WPCode-pluginet. Det är nybörjarvänligt och låter dig lägga till kod utan att redigera temafiler.
Du kan använda gratisversionen för den här handledningen, men Pro-versionen erbjuder extra funktioner för större projekt.
Steg 3: Lägg till CSS-utdraget
Gå till Kodavsnitt » Lägg till avsnitt och välj 'Lägg till din anpassade kod (nytt avsnitt)'.
Först, ge ditt kodavsnitt ett beskrivande namn. På så sätt kan du enkelt komma ihåg vad det är till för senare. Vi kallar det ‘Fixa överlappande administratörsfält.’
Välj sedan 'CSS-utdrag' som kodtyp.
Därefter klistrar du in denna CSS-kod i redigeraren:
.logged-in .main-navigation {
margin-top: 32px;
z-index: 9999;
position: relative;
}
Detta riktar sig mot navigeringsmenyn endast för inloggade användare, vilket åtgärdar problemet utan att ändra hur webbplatsen ser ut för besökare.
Om ditt tema använder en annan klass eller ett annat ID, ersätt .main-navigation med det från ditt inspektionsverktyg.
Steg 4: Använd smart villkorlig logik
Bläddra till avsnittet ‘Smart Conditional Logic’ i WPCode och slå på det.
Ställ in villkoret till 'Visa' om 'Inloggad' är 'Sant'.
Klicka sedan på ‘Spara kodsnutt’ och byt från Inaktiv till Aktiv.
Besök nu din webbplats och se om menyn visas ovanför adminfältet.
Om inte, justera margin-top eller anpassa din selektor.
Varför detta fungerar
Vissa teman tar inte hänsyn till adminfältets höjd på 32px. Denna CSS lägger till avstånd och för fram ditt sidhuvud, vilket åtgärdar layouten endast för användare som ser adminfältet.
Lösning 3: Kontrollera plugin-konflikter
Om menyn fortfarande visas under adminfältet efter att ha provat tidigare lösningar, kan en konflikt med ett tillägg vara orsaken.
Vissa plugins lägger till sin egen CSS eller JavaScript, vilket oavsiktligt kan störa din temas layout, särskilt om de modifierar rubriken eller navigeringsområdet.
Vi har sett detta hända på kundwebbplatser, och att spåra upp det konflikterande plugin-programmet löser ofta problemet utan att röra någon kod.
Steg 1: Inaktivera alla plugins
Gå till din instrumentpanel och navigera till Plugins » Installed Plugins.
Markera alla plugins med kryssrutan högst upp, välj 'Inaktivera' från menyn för massåtgärder och klicka på 'Verkställ'.
Besök nu din webbplats. Om navigeringsmenyn ser normal ut, var det troligen ett av plugin-programmen som orsakade problemet.
Steg 2: Återaktivera plugins ett i taget
Gå tillbaka till skärmen 'Installationsprogram' och återaktivera varje plugin individuellt. Efter varje enskild, ladda om din webbplats och kontrollera menyn.
Fortsätt göra detta tills problemet återkommer. Det senaste pluginet du aktiverade är det som orsakar konflikten.
Steg 3: Bestäm vad du ska göra
När du har identifierat det problematiska tillägget har du några alternativ. Först, försök att kontakta tilläggsutvecklaren för support. De kanske redan känner till problemet eller föreslår en lösning.
Om ingen lösning finns tillgänglig kan du leta efter ett alternativt plugin som erbjuder liknande funktioner utan att orsaka layoutproblem.
Ytterligare resurser för WordPress-administratörer
Här är några fler resurser som du kan ha nytta av:
- Hur man inaktiverar WordPress admin-fält för alla användare utom administratörer
- Hur man åtgärdar problem med saknat adminfält i WordPress (metoder)
- Hur man åtgärdar saknad redigerare för temafiler i WordPress Admin (enkel lösning)
- Hur man lägger till anpassade genvägslänkar till din WordPress adminverktygsfält
- Nybörjarguide för felsökning av WordPress-fel (steg för steg)
Förhoppningsvis kommer lösningarna vi delade att lösa problemet med att adminfältet orsakar problem med visningen av navigeringsmenyn eller rubriken på din webbplats.
Du kanske också vill se vår handbok om att åtgärda de vanligaste WordPress-felen eller ta en titt på våra tips för att anpassa WordPress adminområde efter dina behov.
Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.
Samuel
för ett tag sedan, när jag arbetade för en kund, hade jag detta problem, och det löstes genom att redigera temats CSS, det berodde på att jag förstår CSS. Den här artikeln presenterade en annan metod som normalt skulle komma att tänka på när man hanterar denna typ av problem. det är alltid bra att vara beväpnad med olika sätt att lösa ett WordPress-problem. Nu har jag andra alternativ om jag stöter på detta igen. mycket användbar artikel. tack.