Hoe de Appearance Editor in WordPress te gebruiken

wordpress-uiterlijk-editor.png


Tot nu toe heb je de kans gekregen om WordPress CMS aan te passen via verschillende gebruiksvriendelijke editors. Met de Customizer kon je door verschillende uiterlijkopties lopen die door je thema werden ondersteund. Maar wanneer u besluit om uw site verder te personaliseren dan de gegeven opties, moet u op de hoogte zijn van de WordPress Appearance Editor.

Onder de vele bestanden in WordPress die kunnen worden gewijzigd, zijn er twee bijzonder interessante. We hebben het over de sjabloon- en stylesheet-bestanden van het thema die u rechtstreeks vanuit WordPress kunt bewerken.

Voordat u zelfs maar overweegt om zelf code te wijzigen, moeten we u waarschuwen dat WordPress maakt geen back-ups van de betrokken bestanden. Alle wijzigingen zijn dus permanent.

Thema’s bewerken met de Appearance Editor

Wanneer je klaar bent om meer te leren over WordPress en je handen vuil te maken door wat aangepaste code te typen, navigeer je naar Uiterlijk -> Editor. Met deze ingebouwde editor kunt u de code wijzigen die wordt bewaard in de sjabloon- en stylesheet-bestanden van het thema. Zodra u het opent, wordt het style.css-bestand dat uw huidige thema gebruikt automatisch voor u weergegeven.

WordPress Appearance Editor

Afhankelijk van de configuratie van uw site heeft u mogelijk geen toegang tot sommige bestanden. Als dat zo is, zal WordPress een waarschuwingsbericht weergeven om u te vertellen dat u de bestandsrechten voor dat specifieke bestand moet wijzigen. Zie voor meer informatie hoe wijzig de bestandsrechten in WordPress.

Bestanden selecteren om te bewerken

Zodra u de Editor opent, toont WordPress u alle beschikbare sjabloon- en stylesheet-bestanden van het actieve thema. Als je een inactief thema wilt bewerken, ga dan naar de top van de lijst, kies een item uit het drop-down menu en klik op de “Select” knop. WordPress laadt vervolgens alle bestanden die bij het gekozen thema horen.

Sjablonen

Ga door de lijst aan de rechterkant van het venster om een ​​bestand te selecteren. Elk heeft een naam en bestandsnaam tussen haakjes hieronder. Om een ​​van de bestanden te bewerken, klikt u erop en de code zal verschijnen in de linker editor.

Wees voorzichtig

Hoewel het bewerken van stylesheet-bestanden relatief veilig is, kan het bewerken van PHP-bestanden fouten veroorzaken die uw site onbruikbaar kunnen maken. Wees heel voorzichtig als u besluit om PHP-bestanden te bewerken vanuit de Appearance Editor.

Voorbeeld: het wijzigen van de lettergrootte via de Appearance Editor

Om u te laten zien hoe de editor werkt, staan ​​we op het punt de lettergrootte van tekst in berichten in het Twenty Seventeen-thema te wijzigen.

Voordat we verder gaan, willen we even uw aandacht laten ontsporen. In versie 4.7 is WordPress geïntroduceerd een nieuwe functie waarmee u aangepaste CSS kunt toevoegen sneller. In plaats van de code te bewerken via de Appearance Editor, raden we aan om te openen Uiterlijk -> Aanpassen -> Extra CSS waar u elke gewenste aangepaste CSS-code kunt schrijven zonder de stijlblad direct te beïnvloeden.

Inspecteer elementen

Inspecteer elementen in Google Chrome

Als u het stijlblad nog steeds rechtstreeks wilt bewerken via Appearance Editor, gaat u als volgt te werk:

  1. Open een post van je blog
  2. Selecteer de tekst van een bericht
  3. Klik met de rechtermuisknop op de selectie en kies “Inspect” of “Inspect Element” (afhankelijk van de browser die je gebruikt)
  4. Zoek de gemarkeerde in het nieuwe gedeelte of venster dat is geopend

    element

Inspecteer elementen paragraaf

De klasse moet ook zichtbaar zijn op het tabblad “Stijlen”. Als u op de stijl klikt, zou uw browser het stijlblad moeten openen en u de CSS rechtstreeks vanuit de browser kunnen laten bewerken. U kunt deze functie gebruiken om aangepaste CSS-code te testen voordat u daadwerkelijk wijzigingen op uw site aanbrengt. Omdat we de lettergrootte van tekst in berichten wilden wijzigen, is de volgende CSS-code in ons belang:

p {
lettergrootte: 50px;
}

Pas wijzigingen toe

Na het testen van enkele lettergroottes vanuit de browser, onthoud degene die je het leukst vond. Vervolgens kunt u doorgaan naar de Editor en het lettertype wijzigen:

  1. Navigeren naar Uiterlijk -> Editor
  2. Kies indien niet al geselecteerd Stylesheet (style.css) bestand uit de lijst aan de rechterkant
  3. Zoek “p” -klasse
  4. Voeg “font-size: 50px;” toe (de hele code zou er uit moeten zien zoals we hierboven schreven)
  5. Klik op de knop “Bestand bijwerken”

Lettergrootte van alinea wijzigen

De nieuwe stijl is opgeslagen en u bent klaar om de site opnieuw te laden. Open een bericht om de verandering in de grootte van de tekst te zien. Als u het verschil niet kunt zien en u zeker weet dat u de code correct heeft aangepast, zorg er dan voor dat u wis de browsercache of druk op CTRL + F5 om de pagina te vernieuwen.

Wees voorzichtig bij het werken met Appearance Editor

Appearance Editor is een geweldige tool voor het snel wijzigen van sjabloon- en stylesheet-bestanden. Maar om er het beste uit te halen, is het belangrijk dat u volledig zeker bent van de wijzigingen die u aanbrengt. Elke wijziging in PHP-bestanden kan uw site vergrendelen totdat u ze via FTP repareert. Dus wanneer u met PHP-bestanden werkt, raden we u aan om aan een lokaal bestand te werken dat u via FTP kunt overzetten terwijl u de originele back-up te allen tijde behoudt. Als u wijzigingen aanbrengt in stylesheets, vergeet dan niet de aanvullende CSS-functies die een paar maanden geleden zijn geïntroduceerd.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map