Share
Net zo verfrissend als het nieuwe WordPress-dashboard is niet iedereen blij met een aantal van de wijzigingen. Ik ben persoonlijk dol op de nieuwe minimalistische stijl.
Er was maar één ding dat ik echt mis: de linkernavigatie ontbrak aan de visuele scheiding van verschillende WordPress-gebieden.
In deze snelle tip laat ik je zien hoe je de back-end CSS inspecteert en de scheidingstekens terugbrengt met slechts een paar regels code.
De scheidingstekens die we proberen te herstellen zijn niet echt verdwenen - ze zijn gewoon transparant. Klik met de rechtermuisknop in het lege gebied ertussen Comments en Verschijning en inspecteer dit element.
Je zou de gerenderde HTML moeten zien. De menu's zijn ul-elementen met li-elementen voor elk menu-item.
Open ul role = "navigatie". Je ziet alle menu-items in li-elementen ingepakt, maar je ziet ook een li tussenin. Wanneer u erop klikt, kunt u de stijlen zien en moet u de CSS voor dit item opmerken.
#adminmenu li.wp-menu-separator background: transparent; randkleur: transparant;
Dat is onze separatiestijl. In het bijzonder is dit degene die we moeten aanpassen.
Nu gaan we een functie schrijven om onze eigen CSS-stijlen aan te sluiten op de WordPress Backend.
Voeg deze code toe aan uw thema's functions.php het dossier.
Accentsconagua
function tutsplus_separators () add_action ('admin_head', 'tutsplus_separators'); Het eerste deel definieert de functie en de add_action-hook voegt het toe aan de WordPress-dashboardkop. In het midden zullen we nu een echo toevoegen om onze eigen CSS-code te plaatsen.
function tutsplus_separators () echo ''; add_action ('admin_head', 'tutsplus_separators'); Als u uw pagina's opnieuw laadt, hebben uw scheidingstekens de kleur # 444 - grijs. Ik heb ook de marge van het scheidingsteken gewijzigd omdat het naar mijn mening enige uitlijning nodig had.
Als je een perfectionist bent, merk je dat deze kleur alleen geschikt is voor de standaard zwarte en blauwe beheerdersstijl van WordPress. Laten we nog een keer kijken hoe we alle nieuwe kleurenschema's kunnen dekken.
De lichaam-tag van WordPress heeft veel handige klassen om verschillende toepassingen te identificeren. Als u van dichterbij kijkt, ziet u ook een klasse voor het kleurenschema. De standaard is genaamd admin-color-fresh.
Probeer uw stijl te veranderen in "Gebruikers"> "Uw profiel" en zie hoe de klasse aan het veranderen is. Met deze klasse beschikbaar, kunnen we elke kleurstijl een eigen separatorkleur geven. Voeg de klassenaam zo toe voor uw css-code .admin-color-fresh #adminmenu li.wp-menu-separator background: # 444;
Hier is de code nu met alle kleurstijlen voor bijpassende scheidingstekens:
function tutsplus_separators () echo ''; add_action ('admin_head', 'tutsplus_separators'); Als u scheidingslijnen tussen wilt elk menu-item probeer de menu-topklasse van deli-items een beetje mee border-bottom en border-top.
Ik heb dit kleine stukje code in een plug-in gezet om het eenvoudig snel toe te voegen aan sommige van mijn installaties. Als je wilt, kun je het krijgen via de WordPress Plugin Directory.
