Sådan tilføjes en WordPress værktøjstip (2 måder: Gratis plugin eller CSS)
Der er tidspunkter, hvor du er nødt til at give dit websteds brugere mere information, men simpelthen ikke har nok sideejendommer. Du kan altid inkludere links til andre sider, men i mange tilfælde er den mest praktiske tilgang at tilføje en simpel WordPress-værktøjstip, der viser alle de oplysninger, brugere har brug for.
Med en WordPress-værktøjstip, også kaldet en CSS-hover-værktøjstip, er alle de oplysninger, besøgende har brug for, lige der ved at “mouse” det rigtige element.
I denne artikel viser vi dig nogle af vores foretrukne eksempler på værktøjstip til CSS-hover i aktion. Så lærer vi dig, hvordan du tilføjer dem til dit websted med og uden plugins.
Lad os grave dig ind!
Contents
En introduktion til CSS-svejeværktøjstip
Konceptet med en WordPress-værktøjstip er enkel. De flyder containere, der ‘pop-up’, når du muser over bestemte elementer.
Normalt giver svejse-værktøjstip yderligere oplysninger, som du ikke ønsker at medtage i det originale design.
For eksempel, hvis du bygger en prissætningstabel, kan værktøjstip hjælpe dig med at opdele, hvad hver funktion gør uden at bulke op designet:
Andre anvendelsessager inkluderer orddefinitioner, tilføjelse af kilder til dit indhold, redaktionelle kommentarer, kort og stort set ethvert andet element, du kan tænke på.
To måder at tilføje en WordPress-værktøjstip på
WordPress giver dig mulighed for at bruge flere tilgange, når det kommer til at tilføje værktøjstip til dit websted. Du kan enten gøre det manuelt (hvilket indebærer tilføjelse af nogle kode) eller Brug et plugin.
Vi starter med at vise dig, hvordan du tilføjer værktøjstip med et gratis WordPress-værktøjstip-plugin. Derefter graver vi ind i den manuelle CSS-metode.
1. Brug et WordPress værktøjstip-plugin
Hele pointen ved at bruge plugins er at spare dig for tid at tilføje en funktion manuelt. Med dette i tankerne tilbyder Shortcodes Ultimate en af de nemmeste implementering af værktøjstip til WordPress-brugere.
Når du har aktiveret plugin, får du adgang til snesevis af kortkoder, du kan bruge til at tilføje alt fra knapper, til skyder, billedkaruseller, skillelinjer osv..
Værktøjstip er naturligvis blandt listen over elementer, der understøttes af Shortcodes Ultimate. Endnu bedre er hver kortkode fuldt ud tilpasselig ved hjælp af indbyggede indstillinger og CSS.
For at komme i gang skal du åbne Block Editor for den side, hvor du vil tilføje din første WordPress værktøjstip. Så kig efter den nye Indsæt kort kode på en hvilken som helst eksisterende bloks menu:
Med det samme ser du en liste over tilgængelige kortkoder. Vælg tooltip mulighed:
Nu får du chancen for at tilpasse din værktøjstips stil. Vi har besluttet at gå efter et grundlæggende mørkt design og placere det oven på det element, du holder musen over:
Rul ned, indtil du når Værktøjstip Indhold felt, og indtast den tekst, du vil have, at elementet skal vise:
Bemærk, at du også kan konfigurere den måde, din værktøjstip skal opføre sig på. Standardindstillingen skjuler beholderen og teksten, indtil du holder musen over det overordnede element. Du kan også konfigurere værktøjstip, så de ikke vises, medmindre du klikker på det overordnede element, men det har en tendens til at skabe et besvær for besøgende.
Sådan ser din nye shortcode ud i Block Editor:
Og hvis du forhåndsviser dette i frontend, er det sådan, hvordan værktøjstipet fungerer:
Husk, at du kan tilføje værktøjstip næsten hvor som helst du vil bruge den rigtige kortkode. Dette gælder for almindelig tekst, tabeller, ikoner og andre elementer.
Som tommelfingerregel ønsker du imidlertid at tilføje en visuel indikator for at lade brugerne vide, at de skal holde musen over det overordnede element. Understregning eller farvevariationer fungerer godt. Du kan også bruge informationsemoji (ℹ️).
2. Opsæt CSS-svejeværktøjstip manuelt
I det foregående afsnit talte vi om, hvordan man tilføjer svejset værktøjstip ved hjælp af et plugin. Plugin opretter i det væsentlige flere CSS-stilarter til dig. Dette betyder, at du ville vælge fra en liste med indstillinger, og plugin genererede den nødvendige kortkode.
Der er dog ingen grund til, at du ikke kan gøre dette manuelt med kode. Den nemmeste måde at tilføje nogle nye CSS-klasser til dit tema er at bruge WordPress Customizer.
Gå til Customizer for at få adgang til Customizer Udseende> Temaer fra dit betjeningspanel og kig efter Yderligere CSS fanen nederst i menuen til venstre:
Tilføj derefter tre CSS-klasser til dit tema:
- En til beholdertypebeholderen
- En anden til teksten
- En sidste til at skjule alt
Her er et grundlæggende eksempel på, hvordan koden kan se ud:
.værktøjstipkasse {
position: relativ;
display: inline-block;
}
.tooltip-box .tooltip-text {
synlighed: skjult;
bredde: 100px;
baggrundsfarve: sort;
farve: #fff;
tekstjustering: center;
polstring: 6px 0;
position: absolut;
z-indeks: 1;
}
.tooltip-box: hover .tooltip-text {
synlighed: synlig;
}Kort sagt genererer denne kode en tom beholder og indstiller sin position i forhold til overordnede element. Dernæst tilføjer det noget styling til den tekst, du vil medtage, såsom polstring, justering, farve og samlet bredde. Endelig indstiller den beholderen til at forblive skjult, indtil du holder musepekeren over det overordnede element.
Når du gemmer denne brugerdefinerede CSS til dit tema, kan du hente værktøjstip fra enhver side på dit websted. For at gøre det skal du åbne Block Editor for den side, hvor du vil tilføje en værktøjstip.
Vælg den blok, hvor du vil tilføje din første værktøjstip, og gå til Rediger som HTML mulighed:
Tilføj nu en div der indeholder den overordnede tekst til din værktøjstip og de oplysninger, du vil have den skal indeholde:
Overordnet tekst
Værktøjstiptekst her!
Sørg for at tilføje værktøjstip-tekst CSS klasse til din div. Dette er CSS-klassen, som du føjede til dit tema ved hjælp af tilpasseren. Hvis du indstiller et andet navn til din klasse, skal du gå videre og ændre det.
Sådan ser vores værktøjstip ud fra editoren:
Hvis du gemmer ændringerne på din side og går mod frontend, kan du se ændringerne:
Når du har muset over den overordnede tekst, vises værktøjstipen:
Det er det!
Husk, at du kan style dine CSS-hover-værktøjstip, som du kan også andre sideelementer. Det betyder, at du bruger forskellige farver, ændrer containeren med mere, så de alle passer til dit websteds stil.
For at gøre det, skal du muligvis lære nogle grundlæggende CSS. Codecademy har et godt CSS-kursus.
Konklusion
Tilføjelse af WordPress-værktøjstip til dit websted kan hjælpe dig med at forbedre dit websteds brugeroplevelse ved at inkludere nyttige oplysninger.
Når det gælder tilføjelse af CSS-hover-værktøjstips i WordPress, er der to tilgange, du kan tage:
- Brug et WordPress-værktøjstip-plugin, der tager sig af opsætningen for dig.
- Konfigurer CSS-svejeværktøjstip manuelt ved hjælp af tilpasseren.
På nogle andre måder at oprette et mere brugervenligt WordPress-sted, kan du også tjekke vores guider til forbedring af WordPress-navigation og fjerne rod fra dit websted.
Har du spørgsmål til, hvordan du tilpasser dine WordPress-hover-værktøjstip? Lad os gennemgå dem i kommentarfeltet nedenfor!
