WordPress Plugin: Generation Editor
Tycker du att CSS-redigeraren i WordPress-anpassaren är ett besvär? Vill du bara lägga till lite CSS eller JavaScript på din webbplats utan att behöva använda en långsam FTP-klient? Eller vill du kunna arbeta tillsammans med andra när du gör designändringar på en webbplats?
Alla vet att det verkligen kan vara svårt att arbeta med skript, CSS och Javascript om du inte är utvecklare eller kanske inte har full kunskap för att redigera dina teman style.css-fil. Du kanske vill fixa ett litet fel i din CSS eller kanske påskynda ditt arbetsflöde och testa medan du arbetar med en klient?
Idag kommer vi att granska ett plugin som heter Generation Editor för CSS & JS som vi snubblat över. Utvecklat av The Generation, en ledande WordPress-byrå i Sverige.
Låt oss börja
Vi har hittat det perfekta pluginet! Generation Editor är en fullt utrustad CSS- och JavaScript-redigerare byggd med anpassade inläggstyper som är tätt integrerade med WordPress-kodningsramen.
Skapa minifierade CSS- och JavaScript-filer för din webbplats på några minuter och oroa dig inte om du råkar skriva över dina egna designändringar. Du kan enkelt gå tillbaka i tiden med det inbyggda stödet för WordPress-versioner.
Låter bra, eller hur?
Redigeraren från The Generation gör arbetet väldigt enkelt. Här kommer ett litet exempel: Låt oss säga att du vill lägga till Facebook-pixeln i din header. Börja med att köpa plugin för endast 15 USD och ladda ner här.
Efter du har köpt och laddat ner pluginet, så laddar du upp ditt plugin till din WordPress-webbplats. Kom ihåg: med Kepler Hosting kan du enkelt skapa en ny WordPress-installation med bara några få klick. Läs mer här.
Efter att du laddat ner plugin från Themeforest och har laddat upp Generations Editor för CSS & JS till din WordPress-webbplats så är du mer eller mindre färdig.
Nu behöver du navigera till dina WordPress-inställningar. Där hittar du en ny undermeny-alternativ som heter “G-Editor”.
När du väl har klickat på ‘’G-Editor’’ i menyn, så har du lyckats konfigurera plugin-programmet. Nu har du friheten att enkelt lägga till kod i din sidhuvud, sidkropp eller sidfot. I det här exemplet lade vi till vår Facebook Pixel-kod och voila! Din Facebook-pixelkod finns nu i ditt sidhuvud!
Det som är bra med det här pluginet är att det är så himla enkelt. Det finns till och med ett utvecklarvänligt läge som både kan minifiera och avminifiera din kod.
Men detta är inte allt. Nu vet du hur enkelt det är att lägga till skript i sidhuvudet! Låt oss nu visa dig det bästa! CSS redigering!
När du aktiverar plugin-programmet hittar du två anpassade inläggstyper i ditt WordPress-sidofält: “CSS & JS”. Klicka på menyalternativet CSS.
Här kommer du att kunna skapa olika CSS-filer. När vi arbetar med kunder och fixar kod, så använder vi ofta det här pluginet så att våra kunder kan se vad vi har ändrat och var. Detta är ett bra sätt att vara säker på att vi bara fixar de problem som behöver åtgärdas och inte orsakar några andra problem. Det är också ett bra sätt att dokumentera vad som har gjorts med det inbyggda revisionsverktyget.
Till exempel: Vi skapar ofta två CSS-filer och lägger till de ändringar vi behöver i de olika filerna. Men du kan exempelvis också skapa en tillfällig fil för att bara testa några saker.
I det här fallet vill vi uppdatera teckenstorleken på vår banner
(PS: vem som helst kan göra det. Allt du behöver är lite hjälp från Google om du inte har kodkunskap. Med Generation Editor för CSS & JS kommer du att kunna göra mindre CSS-ändringar själv)
Låt oss ge det ett försök!
I det här fallet vill jag ändra min “Hello World”-titel till 100px. Jag använder Google Chrome för att inspektera elementet. Hitta rätt kodrad och klass. Jag kopierar och klistrar in i min Generation Editor CSS-fil. Sedan lägger jag till en ny rad: “font-size: 100px;”, klickar på spara och gå sedan tillbaka till min sida!
Visst ser det bra ut, eller hur? Ser du hur lätt det var? För att summera, spana in funktionslistan nedan och gör ditt liv enklare.
Funktioner
- Versionhanteringssystem – återställ enkelt dina ändringar precis som du gör med vanliga inlägg
- Stöd för flera användare; arbeta tillsammans på webbplatsens layout samtidigt
- Optimerad och förminskad kod – Oroa dig inte för långa laddningstider; pluginen komprimerar automatiskt koden när den läggs till på din webbplats
- Spara utan att ladda om – ajax sparar alla CSS / JS-inlägg
- Genvägar – Spara din kod med CMD / CTRL + S som du är van vid (Mac-användare)
- Lägg till anpassad kod i ditt sidhuvud, sidkropp och sidfot [NEW]
- Utvecklingsläge – felsök koden enkelt genom att skriva ut koden okomprimerad från dina sidor
