Personlig texthållare för WordPress Post Editor

texthållare (placeholder) för WordPress inlägg

Skapa ny artikelJa, detta går hand i hand med min tidigare idé om etiketterna som har olika färg. Detta handlar om en personlig text. Om en texthållare för WordPress inläggsredigerare (post editor) som alla ser. En text som du kan ändra utifrån behov. ”Okej”, tänkte jag. ”Inga problem. Allt går att lösa.”

Först och främst; se till att du jobbar i ett barntema och att du är inloggad på ditt webbhotell och att du där – använder deras filhanterare. Att hålla på med FTP fram och tillbaka är inte bara tidskrävande, det är ineffektivt. Har du inte ett barntema så skapa ett. Jag visar dig gärna hur. Vi kommer att arbeta i ditt temas functions.php alternativt, om du hellre vill, skapa en plugin.


 

inledning

Byt ut texhållaren för inläggets titelOavsett om du är redaktör med ansvar för en bunte skribenter eller om du bara vill påminna dig själv om en del grejor så kan det vara en bra idé att ha en så kallad texthållare (placeholder).

Texthållare? Ja, alltså.. en text som visas men försvinner då man ger fokus åt själva editorn (inläggsredigeraren).

 

Så, jag tänkte visa dig hur du åstadkommer detta. Men innan dess, är det inte lite fel på bilden ovan?
Jo. Den har fel rubrik/ etikett.

Så här ska det se ut. Nu kör vi.Ny etikett vid skapande av ny artikel

 

 


 

steg 1: ändra menyn

ändring av wordpress meny text för inläggDet första jag vill gå igenom är WordPress menyn och med det så menar jag den där stora saken till vänster som alla har. Den vill jag ändra lite i.

Jag vill inte att det heter ”Inlägg” utan ”Artiklar” och så här fixar du det.

I din filhanterare, navigera till ditt temas functions.php fil.
Klistra in koden nedan 

Denna kod ändrar både menyvalet och alla rubriker/ etiketter.
Ändra till vad du vill att ”inlägg” ska heta på din webbplats.

 

VIKTIGT: du kan inte ändra några nummer. Då fungerar koden inte längre.

 


 

steg 2: ändra texthållaren för titeln

Inläggets titel ändrar du med koden nedan 

Låt mig förklara vad som händer här.

  1. Först så kollar vi om du befinner dig i Inlägg » Skapa nytt
  2. När vi vet att du är i ”Post” så går vi vidare och
  3. Ändrar titeln och efteråt så returnerar vi texten vi själva valt

Du kan givetvis byta ut ”Ange artikelns titel” mot vad du själv vill att där ska stå. Du väljer själv om du vill klistra in denna koden i din functions.php eller om du vill inkludera denna funktion i den plugin (tillägg) som vi snart ska skapa. The choice is yours..


 

steg 3: skapa javascript filen

För att uppnå resten så behöver vi lite hjälp av js (javascript), men oroa dig inte :) Vi kör på i lugn och ro, steg för steg. Det första du behöver är att skapa filen och för att göra det så behöver du ett program såsom Anteckningar eller Notepad++  för Windows, Textredigerare för Mac eller till exempel Text för Chromebook.

Öppna ett blank dokument och klistra in koden nedan 

Spara dokumentet med .js i slutet. Jag har döpt min till ”tinymceplaceholder.js”. Bra jobbat! Nu går vi vidare.


 

4: använd din js fil

Nu ska vi tillbaka till din functions.php fil och där ska vi, längst ner, klistra in följande kod 

Som du ser så har jag använt mitt namn i exemplet ovan. Heter din fil annorlunda så byter du helt enkelt bara ut mitt namn mot ditt egna. Du måste även byta ut URL till din egen.

 

Ta inte bort de två // i början. Har du inte två blir det fel.

Så här blir det om man gör ”fel”.

Placeholder felmeddelande


 

5: texthållaren och din text

Vi närmar oss! Bara ett steg kvar :)
Det sista vi ska göra är att lägga in den funktionen som gör att texten dyker upp och ja, texten är helt och håller upp till dig.

 

Här är koden 

Som du ser så kan du använda vissa HTML-taggar såsom H1, <br>, <i> och liknande.


 

BONUS

Vill du hellre skapa en plugin? Då tänkte jag att vi gör det enkelt för oss. Ladda ner plugin från mig (inkl. inte .js filen) och redigera allt så som du vill ha det. Skojar bara. Här komplett kod 

 

Det du ska tänka på här är egentligen bara en sak: har ditt tema en js mapp eller finns den under assets? Finns den inte alls så skapa en. Lägg sen din .js fil i den mappen och se till att sökvägen blir rätt. Vet du va?

Nu är vi klara! :)




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!