Gör din functions.php funktionell

Innan vi börjar så vill jag fråga om du har ett barntema. Har du inte det så gör ett. Läs min artikel om hur du skapar ett WordPress child theme. När du är klar med det så är det dags att logga in på din FTP/ sFTP/ FTPS. När du gjort det så är det dags för dig att bli van vid att trycka på CTRL + SHIFT + R. Denna tangentbordskombination förbigår webbläsarens cache och visar ändringar direkt. Nedan går jag igenom hur du kan, med hjälp av WordPress functions.php, skapa förändringar på din hemsida utan att använda så kallade plugins.

Du kan, naturligtvis, ta dessa funktioner och byta namn, ändra runt och leka med dem. Du gör som du vill, dock på eget ansvar. Behöver du hjälp så finns jag på Facebook Messenger.


 

1: styla WordPress login

Jag började med WordPress standard sida, men kände mig aldrig riktigt hemma. Jag såg min egen login-sida varje dag och blev inte bara mer och mer trött på dess urtråkiga format utan även dess grafiska stil.

Jag började se mig omkring efter olika metoder för hur man ändrar runt utan att påverka själva ”grunden” och kom på mig själv med att, ”du har ju skapat ett barntema, borde det inte fungera att skapa en funktion som hämtar en CSS-fil style sheet och i den filen – utföra alla ändringar?” Jo, det kan man.

Min tanke och idé från början var att sköta allt från ett och samma dokument. Jag ville inte ha funktioner för allt alternativt en massa plugins (tillägg) som gör allt arbete åt mig. Nej, jag ville kunna sköta allt själv och ha både full kontroll men också förståelse för hur allt fungerar. Så här gjorde jag. Så här gick jag från standard till personligt.

Jag gick från 

Till 


 

1: skapa ett barntema

Detta är viktigt. Utan barntema så raderas allt vid nästa uppdatering. Du kan ladda ner mina filer här. Packa upp och editera style.css med dina uppgifter. CSS-filen innehåller information som per automatik skapar ett barntema av mammatemat så länge namnet för Template är samma som mammatemats namn. Läs min artikel om hur du skapar ett barntema här.

Functions-filen behöver du inte ändra. Den ska vara som den är.

Igen: sker en uppdatering av ditt tema så förlorar du alla ändringar. Använder du ett barntema så kan mammatemat uppdateras, det spelar ingen roll då alla ändringar finns i barntemats CSS och functions. Precis så som det ska vara. När du skapat ett barntema och aktiverat det, fortsätt till steg två.


 

2: skapa materialet för din login-sida

Det första du ska göra är att skapa en mapp. Logga in på din domän med FTP/ FTPS/ sFTP  och skapa en mapp under ditt barntema. Till exempel: /wp-content/themes/mitt-tema/minlogin

I den mappen skapar du en tom textfil med ändelsen css. Du kan döpa filen till vad du vill, dock inte några mellanslag. Den kan heta minlogin.css eller liknande. I samma mapp laddar du även upp de bilder du vill använda som logga och bakgrundsbild. Bilderna kan vara i jpg eller png format.

Se exempel här på hur min ”logga-mapp” ser ut 

Jag skapade även en tom index.php fil så att ingen kan besöka just den mappen och se innehållet. Du kan göra samma sak. Indexfilen ska bara ha två rader. Se nedan 

 


 

3: skapa funktionen i barntemat

Det som måste göras är att ”säga till” WordPress att din nyskapade CSS-fil ska användas. Vi måste säga till WordPress att din nya CSS-fil ska läsas av WordPress och därmed fungera. Så här gör du 

  1. Via FTP, navigera till ditt barntema och dess functions.php
  2. Ladda ner filen och spara den på ditt skrivbord/ valfri plats
  3. Öppna filen i Anteckningar/ Notepad++ eller liknande textredigerare
  4. Lägg till koden nedan

 

VIKTIGT:
I koden ovan så heter mappen som ligger under ditt barntema ”login” och din CSS-fil heter ”loginstyle.css”. Du får alltså ändra efter behov beroende på vad du har döpt din mapp och fil till.

Komplett kod i ditt barntemas functions.php ser alltså ut så här 

 

Spara filen. Gå nu till din FTP och döp om functions.php till old_functions.php. Vi gör detta fall i fall något blir fel. Blir det fel kan du alltid gå tillbaka. Ladda upp filen från ditt skrivbord/ där du har den sparad till ditt barntema. Klart!


 

4: gör din login-sida personlig med CSS

Det är i denna filen som allt sker. Det är din CSS-fil som styr allt. Låt oss börja.

Det första vi vill göra är att ange vilken logga som visas. Vi ska alltså ersätta WP-loggan med din egen.

Koden ser ut så här 

Du kan själv ange storlek genom att ändra height och width. Tänk på att du ändrar namnet till vad din logga heter.

 

Nästa steg är att ange bakgrundsbild.

Jag rekommenderar en storlek på 1920*1080 (hd). Igen, tänk på att du byter ut mot vad din bild heter.

 

Nu börjar det bli intressant :) Nästa steg är att ange vilken färg och storlek som texten ska ha, och då syftar jag på ”Användarnamn eller e-postadress” och ”Lösenord”.

Jag har angett normal. Du kan välja bold för fetstil eller italic för kursiv. Jag tycker normal ser bäst ut. Behöver du hjälp med att hitta en färgkod som passar dig? Här är ett enkelt verktyg du kan använda. Se bild.

 

Nästa steg är att ange hur texten som du anger i de båda fälten ska vara. Vill du ha kursiv, fet eller normal?

 

Därefter är det dags att bestämma färg på själva loginboxen. Jag valde transparent. Det blir snyggt och man ser bakgrunden. För att få en liten tunn kant så lade jag till en ram border-color.

Notera att jag ofta använder !important; efteråt. Detta är för att just ditt val i din CSS-fil ska ta företräde. Du skriver alltså över WordPress egna inställningar för just loginsidan.

 

Det näst sista steget är att styla login-knappen.

Igen, det är bara att titta på sidan för färg och välja. Du kan avstå från detta och låta knappen vara.

Så här fungerar koden 

  1. primary = knappens färg
  2. primary:hover = vilken färg ska knappen ha då du går med muspekaren över den
  3. primary:active = då du klickar/ klickat på den (man hinner knappt se då man blir inloggad)

 

BONUS 

Jag har valt att ta bort alla länkar vilket innebär:

  1. Kom ihåg mig
  2. Glömt lösenordet?
  3. ← Tillbaka till

 

För att uppnå detta så använder vi fyra olika klasser. Detta då texten för ”Kom ihåg mig” och boxen bredvid till vänster är två olika klasser. Kod

Jag använder alltså:

  1. .login #backtoblog a
  2. .login #nav a
  3. .forgetmenot (detta är boxen)
  4. .rememberme (detta är texten)

 

från standard till personlig

 

 


 

Bonus funktioner

Det finns funktioner som inte är så bra. I alla fall om du frågar mig. Ett exempel är WordPress och hur systemet visar en varningstext då man angett felaktiga loginuppgifter. Det hade varit okej under förutsättning att WP inte berättar vad utav dem två som är fel. Så är det inte och därför så vill jag ändra på det.

Nedan går jag igenom fem olika funktioner som hör hemma i ditt barntemas functions.php fil. Häng på!

 

För att ändra felmeddelandet som jag precis nämnde, lägg följande kod i functions.php 

Du kan givetvis byta ut meddelandet Det blev fel mot vad du vill.

 

Nästa grej är skakningen som sker. Den är inte enbart löjlig – den är irriterande (tycker jag) 

Här byts inget ut. Den är som den är.

 

En sak som du till 100% vill göra är att ändra texten som visas då man går med musen över loggan.
Jag tror inte du vill ha Drivs med WordPress där 

Du kan givetvis byta ut DIN TEXT mot vad du vill.

 

Klickar man på loggan så kommer man till WordPress. Jag vet att du vill ändra det. Det har jag löst genom att lägga get_bloginfo så att man slipper ange sin egen URL 

Här ändras inget.

 

Många vill ha ett meddelande under loggan men innan själva formuläret. Visst, varsågod 

Du kan givetvis byta ut texten Har du glömt dina uppgifter? Kontakta administratören mot vad du vill.

 

Exempel på hur det kan se ut 

Eller så kanske du vill lägga samma sak fast undertill? Visst, varsågod 

Kod 

Givetvis så kan du byta ut Frågor? Ring din administratör mot vad du vill och glömt inte bort att byta ut URL mot din egen. Du även byta ut färgkoden #4da28f mot vad du vill.

 

Som avslutande bonus så får du denna 

Vad gör den?
Den skickar alla som är administratörer vidare till WP Dashboard och alla andra till startsidan.


 

2: WordPress admin sidfot

Texten som ”följer” med är typisk. Längst ner till vänster så står det: ”Tack för att du skapar med WordPress.”
Detta vill jag ändra. Framförallt om du ska leverera till kund. Kod 

Jag har skrivit, på min privata, ”Jobba mindre. Skriv. Lev.” Du kan givetvis skriva vad du vill. Svårare än så är det inte.


 

3: ny Gravatar bild för besökare

Denna är lite rolig då du kan välja att visa vilken bild du vill. Jag valde min logga för att göra det enkelt och snyggt. Allt du behöver göra är att byta ut URL:n mot din sökvägen till din bild. Du kan också byta ut namnet ”Besökare” om du vill att dom som kommenterar utan att vara inloggade ska ”heta” något annat.

Kod 


 

4: ändra ”read more” till ”läs mer” eller liknande

Du kanske har WP inställt på engelska eller så har ditt tema ingen svensk översättning. Oavsett så vill du ändra ”Read more..” texten på dina inlägg till något annat. Du kan byta ut ”Läs vidare..” till vad du vill.

Kod 


 

5: ta bort WP-loggan från admin menyn

Vill du slippa se WP-loggan och bara se namnet på din hemsida? Så här ser min ut:

Kod 


 

6: Länka direkt till ”Redigera Tema” i admin menyn

I normala fall ser du WP:s logga. Den är borta tack vare koden ovanför. Nu lägger jag till ”Redigera Tema”. Detta gör att du slipper klicka tillbaka in till din blogg för att sedan gå till ”Utseende”  ”Redigerare”.

Notera: detta är inget jag egentligen rekommenderar. Min rekommendation är att du utför alla ändring på samma sätt som du gör just nu – via FTP eller ditt webbhotells filhanterare.

Du kan, om du vill, byta ut texten ”Redigera Tema”. Kod 


 

7: dölj teman från att synas i ”Utseende”

Har du en kund? Ska inte kunden kunna göra något förutom att lägga till nya sidor/ inlägg samt redigera menyn för att reflektera dessa ändringar? Då kan det vara en idé att dölja alla teman utom det som är aktivt. Kod 

Vad du gör är att gå till teman, högerklicka på bilden för den du vill dölja, välj ”Inspect” och leta efter ”data-slug”. I koden ovan byter du ut ”themeslug” mot namnet på den slut du fått fram. Vill du dölja mer än ett tema? Kod 

Det är alltså bara att göra ett komma mellan varje och fortsätta. OBS: detta raderar inget tema.


 

8: få en författarbox efter dina inlägg

Denna är lång. Den hämtar information från ”Om dig” boxen från din profil. Du kan byta ut ”Artiklar av Bjornen” och ”Bjornens Hemsida” till text som passar dig. Det som behövs är lite CSS-kod och den ser ut så här 

Du kan givetvis byta ut färgerna så att det passar dig.

 

Så här ser koden ut som ska in i din functions.php fil


 

9: skapa en egen shortcode för din hemsidas URL

Denna gillar jag. När jag skriver en artikel eller skapar en sida så anger jag bara [BN] så skriver den ut min URL.

Kod 

Du kan byta ut URL mot din egen och du kan byta ut BN till vad du vill att din shortcode ska heta. Använd därefter [shortcodenamn] och den skriver ut din URL. Du kan givetvis formatera den så att den skriver ut något annat. Exempel: [BN]


 

10: WooCommerce + CF7 = Produktförfrågan

WooCommerce är det mest använda e-commerce verktyget för WordPress. Det finns alternativ, men inget av dom används av lika många som Woo. Med ett överskådligt produktregister kan man ställa in allt efter behov likaväl som man kan ange villkor för frakt, betalning, artikelnummer, lagersaldo med mera. Skriver man utöver det kod själv så blir möjligheterna i princip oändliga.

I denna artikeln visar jag dig hur du skapar en extra ”flik” (även kallat tabb) för enskilda produkter där webbutikens besökare kan skicka en fråga/ offert till butiksinnehavaren. Även här är möjligheterna oändliga.

Syftet med detta formulär är att erbjuda butiksinnehavaren med komplett information angående produkten som besökaren undrar över.

Tanken med detta är alltså 

  1. Ge besökaren en möjlighet att skicka en fråga/  offert direkt till butiksinnehavaren
  2. Ge butiksinnehavaren en direkt överblick om produktens lagersaldo, artikelnummer, produktens namn, kompletta kunduppgifter samt kundens fråga/ offert

 

Vill du lära dig hur du gör detta på din egen sida – häng med

 

1: installera Contact Form 7

Det snabbaste och lättaste är att gå till ”Tillägg”  ”Lägg till nytt” och att där söka på ”Contact Form 7”. Välj installera och sedan aktivera. Du får nu ett nytt alternativ i WP-menyn till vänster som heter ”Kontakt”. Gå dit.

Klicka på knappen ”Skapa nytt” uppe till vänster på skärmen. Döp formuläret till WCPEF.

 

2: installera DynamicSCForCF7 & CF7RD

Ladda ner ZIP-filen här. Extrahera filen. Logga in på din FTP och navigera till /wp-content/plugins. Ladda upp ”DynamicSCForCF7.php” och CF7RD.php dit. Gå nu tillbaka till din WP-blogg och ”Tillägg”  ”Installerade tillägg” och aktivera ”DynamicSCForCF7” samt ”CF7RD”.

CF7RD är en re-direct plugin som gör att efter besökaren klickat på ”Skicka förfrågan” så kan du välja, direkt från formulärets inställningar, om du vill skicka besökaren till en specifik sida. I mitt fall så har jag skapat en sida som inte finns med i menyn.

Denna plugin möjliggör de ”shortcodes” vi kommer att använda senare.

 

3: redigera barntemats functions.php

Har du inget barntema så rekommenderar jag dig starkt att skapa ett. Följ instruktionerna i min artikel om hur du gör här. Om du redigerar functions.php i ditt vanliga tema och temat uppdateras så förlorar du all information. Därför, barntema.

Via din FTP, ladda ner functions.php och öppna filen i t ex Anteckningar eller Notepad++. Du hittar functions.php här  /wp-content/themes/ditt-tema/functions.php

Längst ner, lägg till följande kod 

Glöm inte bort att antingen ändra ”0000” och ”xxx” till ditt butiksinnehavarens kontaktuppgifter. Du kan även texten som styr vad fliken/ tabben ska heta. Ändra ”Offert/ Bulkorder” till valfri text. Stäng inte filen än då vi ska tillbaka hit strax för att ändra en sak till.

 

4: lägg till kontaktformuläret

I formuläret som du skapade och döpte till ”WCPEF”, lägg till följande text i ”Formulär” fliken

Du kan, om du vill, ändra namnen på de olika fälten om du vill. Text som du kan ändra är 

  1. Ditt namn
  2. Din e-post
  3. Produktens namn
  4. Produkt SKU
  5. Antal i lager
  6. Meddelande
  7. Skicka förfrågan

Klicka sedan på fliken ”Epost” och lägg till följande i ”Ämne” 

Sist, lägg följande i ”Meddelande” 

 

5: lägg till ID i functions.php

Det sista vi ska göra är att lägga till ID:et från kontaktformuläret i functions.php. Contact Form 7 genererar olika ID:n för varje kontaktformulär du skapar, vilket är varför jag inte på förhand vet vilket ID just ditt formulär fått. Om du tittar under namnet så ser du formulärets så kallade ”shortcode” 

Där ser du ID:et. Gå tillbaka till functions.php och ändra där du ser denna rad 

 

Klart!

Via FTP, döp om din functions.php (den du laddade ner) till old_functions.php, spara den du redigerat på ditt skrivbord/ på valfri plats och ladda sedan upp den via FTP:n och besök sedan din butik. Tryck CTRL + SHIFT + R för att uppdatera ändringarna du gjort för att se resultatet!

I exemplet nedan kan vi se att jag angett ett artikelnummer för ”T-shirt” och jag har angett ett lagersaldo. Samma sak gäller för ”Beaniemössa”. På produkter som inte har dessa uppgifter så lämnas e-postmeddelandet tomt på de angivna platserna. Se exempel.

Så här ser e-post meddelandet ut som kommer fram. Givetvis så är meddelande texten inte auto-genererad. Se nedan

Du kan, om du vill, lägga till fler funktioner under ”Meddelande”. CF7 har stöd för följande 

  1. [_remote_ip]
  2. [_user_agent]
  3. [_url]
  4. [_date]
  5. [_time]
  6. [_post_id]
  7. [_post_name]
  8. [_post_title]
  9. [_post_url]
  10. [_post_author]
  11. [_post_author_email]
  12. [_serial_number]

Mer information om dessa hittar du här. Efteråt så har jag med hjälp av min re-direct funktion skickat besökaren vidare till en ”Tacksida” 

Så här ser e-postmeddelandet ut om ”Lagersaldo” samt ”Artikelnummer” inte är angivet i WC.

 

Det var allt! Lycka till med ditt formulär.


 

11: ta bort och lägg till custom color

Använder du TinyMCE editor? Är du som mig som enbart använder en färg för all text? Då kan denna vara en idé för dig. Den tar bort hela paletten och ersätter med de färger du själv angett.

Problemet är att du kan ställa in en ”custom” color men WP / TinyMCE kommer inte ihåg din färg till nästa gång. Så här ser det ut när du lägger till en färg.

Så här ser min palett ut efter att ha använt koden nedan. Det bästa? Dom försvinner aldrig då dom ligger i barntemats functions.php. Kan livet bli bättre? :)

Kod 

 


 

12: lägg till en egen Dashboard widget

Detta är en typiskt sådan där sak man gör för en klient eller om man själv vill gå på djupet och konfigurera något som ska visas direkt på WP-Dashboard.

Kod 

Du kan byta ut namnet på funktionen (bb_dashboard_widget) om du vill. Du kan också byta ut ”Min Widget” vilket är titeln. Du kan även byta ut text och länkarna i texten under. Så här ser det ut med exemplet ovan.


 

13: lägg till en admin via functions.php

Nu undrar du säkert varför man vill göra detta, varför man ska göra det och varför man ens skulle behöva det?
För att:

  1. Du har glömt lösenordet till den e-postadress dit återställningen av ditt lösenord skickas
  2. Du kommer inte ihåg dina uppgifter och kan inte logga in

Via ditt webbhotells filhanterare, navigera till /wp-content/themes/ditt-tema/functions.php och välj editera/ redigera. Samma sak som du gör just nu för att testa alla dessa funktioner. Klistra in koden nedan, modifiera den med de uppgifter du vill ha och spara filen. Tryck sedan CTRL + SHIFT + R för att förbigå webbläsarens cache.

Kod 

Byt ut följande:

  1. Username
  2. Password
  3. email@domain.com

Så här kan ett klart exempel se ut 

Du har nu skapat ett nytt administratörskonto där inloggningsnamnet är Thomas och lösenordet är thomas12345. Lätt va? Den kollar till och med om denna användaren finns innan den skapar ett nytt konto. Superperfekt.


 

14: shortcode för antal reggade medlemmar

Vill du skapa en shortcode som du kan använda i en Text widget, i ett inlägg eller på en sida och som visar antalet registrerade medlemmar?

Kod 

Du kan byta ut ”user_count” till vad du vill. För att använda din nya shortcode, skriv: [user_count] om du inte ändrat den.


 

15: aktivera ”Utvald Bild”

Det finns många teman där ute som inte har ”Utvald bild” (featured image) aktiverat/ aktivt.

Kod 

Vill du aktivera för både inlägg och sida?

Kod 

Med den koden så blir ”Utvald bild” aktiv på både inlägg och sidor.


 

16: Inaktivera RSS och all dess flöden

Om du, oavsett anledning, vill inaktivera de RSS-flöden som finns så är det enkelt. Du kan byta ut bb_disable_feed till något annat så länge du använder samma namn hela vägen.

Kod 


 

17: gör en egen 404-fil för allt som inte finns

Om du vill undvika att visa en ”Oops.. Sidan finns inte” eller, ”Det du söker finns inte” och därefter ”tvinga” besökaren att klicka på din logga för att komma tillbaka till startsidan alternativt klicka på ”Hem” i menyn så är detta lösningen för dig. Så här gör du 

  1. Öppna Anteckningar eller liknande program, t ex Notepad++
  2. Klistra in texten nedan och spara filen på ditt skrivbord/ valfri plats som 404.php
  3. Ladda upp filen till ditt barntemas mapp, t ex /wp-content/themes/ditt-tema
  4. Klart!

Med denna fil så skickas alla besökare som anger en icke existerande URL tillbaka till din startsida.


 

18: byt ut WP-default e-postadress

WordPress använder sin egen e-post (wordpress@) för att skicka e-post från din blogg/ sida.
Det kan du ändra med följande kod 

Byt ut min e-postadress mot din egen och klart!

 


 

19: ändra cookie expiration för login

Vill du vara inloggad i en vecka? En månad? Varför inte ett år? Ange tiden i sekunder 

Just nu är den inställd på ett år (31556926 = ett år i sekunder).

 


 

20: byt ut ”howdy” bredvid ditt namn

Efter att du loggat in så ser du, uppe i höger hörn, en text och sedan ditt användarnamn.
Du kan byta ut WP:s ”Howdy” med följande kod 

Du kan ändra ”Du e bäst” mot vad du vill.

 


 

21: inget mer hoppa vid ”read more”

Vill du inte att WP ska hoppa ner så att du missar text efter att ha klickat/ tryckt på ”read more”?

 


 

22: ta bort admin påminnelsen om WP-uppdatering

Vill du slippa bli påmind om att du ska uppdatera/ uppgradera?

 


 

23: inkludera inlägg och kategorier i sök

Så här inkluderar du inlägg och de kategorier du själv väljer i WP:s ”Sök” funktion 

 


 

24: ändra favicon i admin

Oftast så har man en favikon och det är oftast bara en. Nu kan du få två 

Se till att du har favicon.png under images och att images ligger under ditt tema.

 




Det var allt :) Vill du ställa en fråga eller behöver du hjälp?
Vänligen lämna en kommentar eller kontakta mig på Facebook Messenger.



Om Bjornen

Jag är en hobbyförfattare & WP-nörd som försöker tömma hjärncellerna på kreativitet. När jag inte skriver så utökar jag mina WP-kunskaper genom att blogga och hänga på diverse sociala medier. Jag gör mitt bästa och min passion för WordPress enbart växer.

Kommentera


OBS: Alla kommentarer granskas innan dom blir publicerade. Ha en go dag!