Ty\u00f6kaluvinkki, joka tunnetaan my\u00f6s nimell\u00e4 CSS hover tooltip<\/strong>, n\u00e4ytt\u00e4\u00e4 vierailijan tiedot, kun he siirt\u00e4v\u00e4t hiiren tietyn elementin p\u00e4\u00e4lle.<\/p>\n Haluatko lis\u00e4t\u00e4 ty\u00f6kaluvihjeit\u00e4 my\u00f6s WordPressiisi? T\u00e4m\u00e4 opas n\u00e4ytt\u00e4\u00e4, kuinka ty\u00f6kaluvihje lis\u00e4t\u00e4\u00e4n WordPressiin.<\/p>\n Ty\u00f6kaluvinkki on pieni tekstiruutu, joka tulee n\u00e4kyviin, kun hiirt\u00e4 siirret\u00e4\u00e4n<\/strong> WordPress-sivuston alueen p\u00e4\u00e4lle. N\u00e4m\u00e4 laatikot sopivat erinomaisesti kent\u00e4n lis\u00e4tietojen lis\u00e4\u00e4miseen.<\/p>\n Tietojen siirt\u00e4minen laatikkoon est\u00e4\u00e4 sivuston ylikuormituksen.<\/p>\n Jotkut k\u00e4ytt\u00e4v\u00e4t niit\u00e4 esimerkiksi hinnoittelutaulukoissa<\/strong>. Tekstiss\u00e4 on lyhyt kuvaus ja hinta.<\/p>\n Viem\u00e4ll\u00e4 hiiren niiden p\u00e4\u00e4lle katsojat paljastavat kohteen yksityiskohtaisen kuvauksen. T\u00e4ll\u00e4 tavalla p\u00f6yt\u00e4 ei ole t\u00e4ynn\u00e4 liikaa teksti\u00e4.<\/p>\n Muita esimerkkej\u00e4 ovat sanan m\u00e4\u00e4ritelm\u00e4t, l\u00e4hteen antaminen<\/strong>, kommentit<\/strong> ja kartat<\/strong>. Periaatteessa kaikki elementit voidaan siirt\u00e4\u00e4 ty\u00f6kaluvihjelaatikkoon.<\/p>\n Toiset k\u00e4ytt\u00e4v\u00e4t ty\u00f6kaluvihjett\u00e4 saadakseen lis\u00e4tietoja valokuvasta viedess\u00e4\u00e4n hiiren osoittimen sen p\u00e4\u00e4lle. T\u00e4m\u00e4 voi sis\u00e4lt\u00e4\u00e4 ajan, paikan, valokuvaajan<\/strong> ja paljon muuta.<\/p>\n Tarkoituksena on selvent\u00e4\u00e4 asiaa tai antaa lis\u00e4tietoja.<\/p>\n Ty\u00f6kaluvihjeit\u00e4 kutsutaan my\u00f6s sanastotermeiksi<\/strong>, vihjeiksi<\/strong> tai viesteiksi<\/strong>. Ne ovat hy\u00f6dyllisi\u00e4 hiiriohjatuissa tietokoneissa ja WordPress-mobiilisivustoilla ja -lomakkeissa.<\/p>\n T\u00e4m\u00e4 on t\u00e4rke\u00e4\u00e4 ottaa huomioon. Suuri osa Internetin selailusta tapahtuu nyky\u00e4\u00e4n mobiililaitteella eik\u00e4 p\u00f6yt\u00e4tietokoneella.<\/p>\n Mobiililaitteen n\u00e4yt\u00f6ll\u00e4 oleva tila on paljon rajallisempi kuin suurella tietokoneen n\u00e4yt\u00f6ll\u00e4. Ty\u00f6kaluvinkit ovat vastaus t\u00e4h\u00e4n ongelmaan.<\/p>\n \u00c4l\u00e4 kuitenkaan laita liikaa tietoa ty\u00f6kaluvihjeeseen.<\/p>\n On kaksi tapaa lis\u00e4t\u00e4 ty\u00f6kaluvihje WordPress-verkkosivustolle. T\u00e4ss\u00e4 artikkelissa k\u00e4sitell\u00e4\u00e4n molempia tapoja.<\/p>\n Ensin tarkastellaan lis\u00e4osien<\/strong> k\u00e4ytt\u00f6\u00e4 ja sitten manuaalista<\/strong> menetelm\u00e4\u00e4. Manuaalinen menetelm\u00e4 sis\u00e4lt\u00e4\u00e4 hieman koodausta.<\/p>\n WordPress-laajennuksen etuna WordPress-ty\u00f6kaluvihjeiden lis\u00e4\u00e4miseen on, ett\u00e4 ne s\u00e4\u00e4st\u00e4v\u00e4t aikaa<\/strong>. Joten t\u00e4ss\u00e4 on luettelo viidest\u00e4 ty\u00f6kaluvihjeest\u00e4 WordPress-laajennuksesta, joita on helppo k\u00e4ytt\u00e4\u00e4.<\/p>\n Ensimm\u00e4inen ty\u00f6kaluvihje-laajennus on Shortcodes Ultimate. Se on helppok\u00e4ytt\u00f6inen ja yhteensopiva useimpien suosittujen WordPress-teemojen kanssa.<\/p>\n Se tekee muutakin kuin lis\u00e4\u00e4 ty\u00f6kaluvihjeit\u00e4 WordPressiin. Itse asiassa se tarjoaa yli 50 lyhytkoodia erilaisille toiminnoille, kaikki ilmaiseksi.<\/p>\n WordPress on helppok\u00e4ytt\u00f6inen. Se on pieni, kevyt ja nopea.<\/p>\n Se on jQuery-ratkaisu, joka lis\u00e4\u00e4 HTML-sis\u00e4lt\u00f6\u00e4 WordPress-editorissa WYSWYG. Se lis\u00e4\u00e4 muun muassa \u00e4\u00e4nt\u00e4, latauslinkkej\u00e4, kuvia, PDF-tiedostoja, sosiaalisen median yhteyksi\u00e4 ja videoita.<\/p>\n Sanasto luo automaattisesti sanaluettelot verkkosivuston sis\u00e4ll\u00f6n perusteella. Se ryhmittelee sanat ja m\u00e4\u00e4ritelm\u00e4t sanakirjaan.<\/p>\n Sanat ja m\u00e4\u00e4ritelm\u00e4t yhdistet\u00e4\u00e4n sitten kopion sanoihin. Sitten se luo ty\u00f6kaluvihjeen sanaston.<\/p>\n N\u00e4in k\u00e4ytt\u00e4j\u00e4t voivat lis\u00e4t\u00e4 ty\u00f6kaluvihjeit\u00e4 pelkk\u00e4\u00e4 teksti\u00e4 ja vastaavia linkkej\u00e4 viestiin tai verkkosivustoon. Se k\u00e4ytt\u00e4\u00e4 TinyMCE-lyhytkoodin graafista k\u00e4ytt\u00f6liittym\u00e4\u00e4.<\/p>\n Se opastaa k\u00e4ytt\u00e4j\u00e4\u00e4 koko prosessin l\u00e4pi. Laajaa tiet\u00e4myst\u00e4 koodauksesta ei siis tarvita.<\/p>\n T\u00e4m\u00e4 yksinkertaisesti lis\u00e4\u00e4 ylim\u00e4\u00e4r\u00e4isen painikkeen tekstieditoriin. Napsauttamalla t\u00e4t\u00e4 painiketta ty\u00f6kaluvihjeen lyhytkoodi lis\u00e4t\u00e4\u00e4n sis\u00e4lt\u00f6\u00f6n.<\/p>\n Sitten k\u00e4ytt\u00e4j\u00e4t lis\u00e4\u00e4v\u00e4t sis\u00e4lt\u00f6\u00e4 ty\u00f6kaluvihjeeseen ja m\u00e4\u00e4ritt\u00e4v\u00e4t elementin, joka k\u00e4ynnist\u00e4\u00e4 ty\u00f6kaluvihjeen.<\/p>\n Seuraavaksi painopiste siirtyy manuaaliseen CSS-menetelm\u00e4\u00e4n.<\/p>\n Edellisess\u00e4 osiossa k\u00e4siteltiin WordPress-laajennuksen k\u00e4ytt\u00f6\u00e4 ty\u00f6kaluvihjeiden lis\u00e4\u00e4miseen WordPress-sivustolle. Laajennukset tekev\u00e4t kulissien takana asettaa useita CSS-tyylej\u00e4.<\/p>\n Sen j\u00e4lkeen k\u00e4ytt\u00e4j\u00e4 voi valita asetusjoukosta ty\u00f6kaluvihjeen mukauttamista. T\u00e4m\u00e4n j\u00e4lkeen laajennus luo lyhytkoodin.<\/p>\n Tietenkin on mahdollista suorittaa kaikki n\u00e4m\u00e4 teht\u00e4v\u00e4t manuaalisesti. Se vaatii edistyneit\u00e4 HTML- ja jQuery<\/strong> -tietoja .<\/p>\n Kun koodi on jo luotu, se on vain lis\u00e4tt\u00e4v\u00e4.<\/p>\n Lis\u00e4temppu on CSS<\/strong> :n lis\u00e4\u00e4minen teemaan. Helpoin tapa tehd\u00e4 t\u00e4m\u00e4 on k\u00e4ytt\u00e4\u00e4 WordPress-muokkausohjelmaa.<\/p>\n T\u00e4m\u00e4 on se, mit\u00e4 kolmen CSS-luokan on teht\u00e4v\u00e4:<\/p>\n T\u00e4m\u00e4 koodi, joka tekee n\u00e4m\u00e4 asiat, n\u00e4ytt\u00e4\u00e4 suunnilleen t\u00e4lt\u00e4:<\/p>\n N\u00e4m\u00e4 koodijonot luovat tyhj\u00e4n laatikon ja sijoittavat sen suhteessa p\u00e4\u00e4tekstiin. Sitten se muodostaa tekstin ja m\u00e4\u00e4rittelee parametrit, kuten kohdistuksen, v\u00e4rin ja pehmusteen.<\/p>\n Viimeinen osa piilottaa laatikon, kunnes se tulee n\u00e4kyviin, kun osoitin vied\u00e4\u00e4n p\u00e4\u00e4elementin p\u00e4\u00e4lle.<\/p>\n Kun olet lis\u00e4nnyt CSS-luokat teemaan, muista tallentaa ne. Nyt WordPress-ty\u00f6kaluvinkit ovat valmiita lis\u00e4tt\u00e4v\u00e4ksi WordPress-sivustoille.<\/p>\n Voit lis\u00e4t\u00e4 ne seuraavasti:<\/p>\n Vaihda nimi, jos se sai toisen nimen, kun se lis\u00e4ttiin.<\/p>\n Muotoile WordPress-ty\u00f6kaluvihjeit\u00e4<\/strong> samalla tavalla kuin muut CSS-elementit.<\/p>\n Muuta v\u00e4ri\u00e4, mukauta laatikkoa ja niin edelleen. Tee siit\u00e4 sopivaksi muuhun sivuston suunnitteluun.<\/p>\n WordPress-ty\u00f6kaluvinkit sopivat erinomaisesti lis\u00e4tietojen lis\u00e4\u00e4miseen sotkematta visuaalista ulkoasua.<\/p>\n Jos vierailija ei vie hiiren osoitinta verkkosivuston tietyn osan p\u00e4\u00e4lle, tiedot eiv\u00e4t n\u00e4y. T\u00e4m\u00e4 lis\u00e4\u00e4 k\u00e4ytt\u00f6kokemusta.<\/p>\n Puhdas ja siisti ulkon\u00e4k\u00f6 on yh\u00e4 t\u00e4rke\u00e4mp\u00e4\u00e4. Yh\u00e4 useammat ihmiset k\u00e4ytt\u00e4v\u00e4t mobiililaitteita Internetin selaamiseen.<\/p>\n Pienell\u00e4 n\u00e4yt\u00f6ll\u00e4 ponnahdusikkunat ovat eritt\u00e4in \u00e4rsytt\u00e4vi\u00e4.<\/p>\n Toisaalta vierailijat arvostavat ty\u00f6kaluvinkkej\u00e4. He ilmestyv\u00e4t tarvittaessa ja tiedottavat sen sijaan, ett\u00e4 yritt\u00e4isiv\u00e4t myyd\u00e4.<\/p>\n T\u00e4ss\u00e4 artikkelissa k\u00e4sitellyt kaksi tapaa lis\u00e4t\u00e4 ty\u00f6kaluvihjeit\u00e4 WordPress-sivustoon ovat:<\/p>\n T\u00e4m\u00e4 edellytt\u00e4\u00e4 kolmen CSS-tyylin lis\u00e4\u00e4mist\u00e4 teemaan. Opas osoitti, kuinka mukauttajaa k\u00e4ytet\u00e4\u00e4n t\u00e4h\u00e4n.<\/p>\n Jos pidit t\u00e4m\u00e4n artikkelin lukemisesta WordPress-ty\u00f6kaluvihjeen lis\u00e4\u00e4misest\u00e4, sinun tulee tarkistaa t\u00e4m\u00e4 artikkeli WordPress-teemojen poistamisesta<\/a>.<\/p>\n Kirjoitimme my\u00f6s muutamista aiheeseen liittyvist\u00e4 aiheista, kuten kuvien vesileiman<\/a> tekemisest\u00e4, WordPress-version tarkistamisesta<\/a>, vertailutaulukon luomisesta WordPress-laajennuksilla<\/a>, HTML-tiedoston lataamisesta WordPressiin<\/a>, minne WordPress-sivut tallennetaan<\/a> ja miksi WordPressin k\u00e4ytt\u00f6 on niin vaikeaa. k\u00e4ytt\u00e4\u00e4<\/a>.<\/p>\nMik\u00e4 on WordPress tai CSS Hover Tooltip?<\/h2>\n
![\"WordPress](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-187133-61e88fb3268a3.jpg\")
<\/a><\/p>\nLis\u00e4\u00e4 WordPress-ty\u00f6kaluvinkki laajennuksella<\/h2>\n
Lyhytkoodit Ultimate<\/h3>\n
<\/a><\/p>\nWordPress-ty\u00f6kaluvinkit<\/h3>\n
<\/a><\/p>\nSanasto<\/h3>\n
<\/a><\/p>\nWordPress-ty\u00f6kaluvinkki<\/h3>\n
<\/a><\/p>\nYksinkertainen ty\u00f6kaluvihje-laajennus<\/h3>\n
<\/a><\/p>\nLis\u00e4\u00e4 WordPress-ty\u00f6kaluvinkki manuaalisesti<\/h2>\n
Siirry Teeman mukauttajaan<\/h3>\n
<\/a><\/p>\n\n
\n
Lis\u00e4\u00e4 CSS-luokat teemaan<\/h3>\n
\n
.tooltip {\nposition: relative;\ndisplay: inline-block;\nborder-bottom: 1px dotted\nblack;}\n\n.tooltip .tooltiptext {\nvisibility: hidden;\nwidth: 120px;\nbackground-color: black;\ncolor: #fff;\ntext-align: center;\nborder-radius: 6px;\npadding: 5px 0;\n\n\/* Position the tooltip *\/\nposition: absolute;\nz-index: 1;}\n\n.tooltip:hover .tooltiptext {\nvisibility: visible;}<\/code><\/pre>\nLis\u00e4\u00e4 ty\u00f6kaluvihjeit\u00e4 Block Editorilla<\/h2>\n
<\/a><\/p>\n\n
<div\n\nclass=\"tooltip-text\">Parent text\n\n\u00a0 <span class=\"tooltiptext\">Tooltip\n\ntext here!<\/span>\n\n<\/div><\/code><\/pre>\n\n
<\/a><\/p>\n<\/a><\/p>\n\n
<\/a><\/p>\nLopetetaan ajatukset WordPress-ty\u00f6kaluvihjeiden lis\u00e4\u00e4misest\u00e4<\/h2>\n
\n