{"id":232960,"date":"2022-01-20T13:39:00","date_gmt":"2022-01-20T10:39:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=232960"},"modified":"2022-05-16T10:18:50","modified_gmt":"2022-05-16T07:18:50","slug":"epaselvan-logon-korjaaminen-wordpress-sivustollasi","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fi\/epaselvan-logon-korjaaminen-wordpress-sivustollasi\/","title":{"rendered":"Ep\u00e4selv\u00e4n logon korjaaminen WordPress-sivustollasi"},"content":{"rendered":"

Onko logosi ep\u00e4selv\u00e4 riippumatta siit\u00e4, mit\u00e4 yrit\u00e4t?<\/p>\n

Et ole yksin.<\/p>\n

Se on ongelma monille ihmisille.<\/p>\n

Ja t\u00e4st\u00e4 syyst\u00e4 se on edelleen ongelma\u2026<\/p>\n

Teemankehitt\u00e4jien, jotka l\u00e4hett\u00e4v\u00e4t teemoja wordpress.orgiin (kuten mekin), on k\u00e4ytett\u00e4v\u00e4 WordPressin sis\u00e4\u00e4nrakennettua logovaihtoehtoa. Mutta sis\u00e4\u00e4nrakennetulla logovaihtoehdolla ei ole logolle toista verkkokalvoversiota.<\/p>\n

Teemankehitt\u00e4j\u00e4n\u00e4 minulla ei ole aavistustakaan, milt\u00e4 logosi tulee n\u00e4ytt\u00e4m\u00e4\u00e4n, joten en voi luoda ennalta m\u00e4\u00e4ritetty\u00e4 kokoa pahentamatta tilannetta.<\/p>\n

Tuloksena on logo, joka n\u00e4kyy vain vakiotarkkuudella ja n\u00e4ytt\u00e4\u00e4 ep\u00e4selv\u00e4lt\u00e4 korkearesoluutioisilla n\u00e4yt\u00f6ill\u00e4.<\/p>\n

WordPressin on lis\u00e4tt\u00e4v\u00e4 verkkokalvoversio logoille Customizerissa, mutta toistaiseksi minulla on sinulle yksinkertainen ratkaisu.<\/p>\n

T\u00e4m\u00e4 r\u00e4\u00e4t\u00e4l\u00f6inti toimii kaikissa teemoissamme,<\/a> ja sen pit\u00e4isi toimia my\u00f6s useimmissa muissa WordPress-teemoissa.<\/p>\n

Kuinka korjata piksel\u00f6ity logo<\/h2>\n

T\u00e4m\u00e4 ratkaisu on hieman tekninen, mutta olen hahmotellut vaiheet mahdollisimman selke\u00e4sti.<\/p>\n

Lataat logostasi version, joka on 2x normaalikokoa suurempi, ja pienenn\u00e4 se sitten CSS:n avulla normaalikokoiseksi (kirjoitin koodin jo sinulle).<\/p>\n

Jos esimerkiksi t\u00e4ll\u00e4 hetkell\u00e4 n\u00e4ytett\u00e4v\u00e4 logokuva on 300 pikseli\u00e4 leve\u00e4, lataat 600 pikseli\u00e4 leve\u00e4n version. Kun kuvatiedostosi on t\u00e4sm\u00e4lleen kaksi kertaa niin suuri kuin se n\u00e4kyy sivustollasi, se n\u00e4kyy t\u00e4ydellisen ter\u00e4v\u00e4n\u00e4 korkearesoluutioisilla n\u00e4yt\u00f6ill\u00e4. Jos katsot t\u00e4ll\u00e4 sivustolla olevaa logoa juuri nyt, se on se, mit\u00e4 teen.<\/p>\n

Nyt menn\u00e4\u00e4n vaiheisiin.<\/p>\n

Selvit\u00e4 mik\u00e4 on ihanteellinen kokosi<\/h3>\n

Ensimm\u00e4inen askel on kirjautua sis\u00e4\u00e4n sivustollesi ja avata Live Customizer.<\/p>\n

\"Ep\u00e4selv\u00e4n<\/a><\/p>\n

N\u00e4in p\u00e4\u00e4set Live Customizeriin<\/p>\n

Kun olet mukauttajassa, napsauta Lis\u00e4\u00e4 CSS -osiota alareunassa.<\/p>\n

\"Ep\u00e4selv\u00e4n<\/a><\/p>\n

Kopioi ja liit\u00e4 seuraavaksi t\u00e4m\u00e4 koodi osioon:<\/p>\n

.custom-logo,\n.site-header .logo {\n  max-width: 100% !important;\n  width: 300px !important;\n  height: auto !important;\n}<\/code><\/pre>\n
Logosi p\u00e4ivittyy v\u00e4litt\u00f6m\u00e4sti 300 pikseli\u00e4 leve\u00e4ksi. J\u00e4t\u00e4 huomioimatta, onko se ep\u00e4selv\u00e4 vai ei juuri nyt \u2013 korjaamme sen seuraavassa vaiheessa.<\/p>\n
Muuta CSS:ss\u00e4 "300px"-arvoa, kunnes logosi n\u00e4kyy haluamassasi koossa. \u00c4l\u00e4 my\u00f6sk\u00e4\u00e4n ole huolissasi ep\u00e4selvyydest\u00e4, vaan muokkaa sit\u00e4, kunnes se vie tarpeeksi tilaa sivustolta.<\/p>\n
Tied\u00e4n, ett\u00e4 t\u00e4m\u00e4 saattaa olla ensimm\u00e4inen kerta, kun muokkaat koodia, joten t\u00e4ss\u00e4 on lyhyt esimerkki siit\u00e4, milt\u00e4 koodi n\u00e4ytt\u00e4isi, jos p\u00e4\u00e4t\u00e4t, ett\u00e4 logosi n\u00e4ytt\u00e4\u00e4 parhaalta 450 pikseli\u00e4 leve\u00e4n\u00e4:<\/p>\n
.custom-logo,\n.site-header .logo {\n  max-width: 100% !important;\n  width: 450px !important;\n  height: auto !important;\n}<\/code><\/pre>\n
K\u00e4yd\u00e4 j\u00e4rkeen?<\/p>\n
Kun logo vie tarpeeksi tilaa otsikossa, voit julkaista muutokset tai tallentaa sen luonnoksena toistaiseksi.<\/p>\n
Seuraava vaihe on muuttaa itse kuvatiedoston kokoa.<\/p>\n
Muuta kuvan kokoa<\/h3>\n
Jotta logosi n\u00e4kyy selke\u00e4sti sivustollasi, tarvitset version, joka on t\u00e4sm\u00e4lleen kaksi kertaa suurempi kuin CSS:\u00e4\u00e4n sy\u00f6tt\u00e4m\u00e4si koko.<\/p>\n
Jos CSS-koodi esimerkiksi tekee logosta 450 pikseli\u00e4 leve\u00e4n, haluat kopion logokuvastasi, jonka leveys on 900 kuvapistett\u00e4.<\/p>\n
Jos sinulla ei ole tarpeeksi suuri versio kuvatiedostostasi, sinun on otettava yhteytt\u00e4 logosuunnittelijaasi tai hankittava alkuper\u00e4inen suunnitteluasiakirja, jotta voit vied\u00e4 riitt\u00e4v\u00e4n suuren koon.<\/p>\n
Muussa tapauksessa, jos sinulla on vain 600 pikseli\u00e4 leve\u00e4 alkuper\u00e4inen kopio, kun venyt\u00e4t sen 900 pikseliin, kuva on ep\u00e4selv\u00e4, vaikka katsot sit\u00e4 tietokoneellasi.<\/p>\n
Kun sinulla on 2x kokoinen versio kuvasta, olet valmis viimeiseen vaiheeseen.<\/p>\n
Lataa uusi kuvasi<\/h3>\n
Etsi mukauttajasta logon latausvaihtoehto. Useimpien teemojen kohdalla se on Sivuston tunniste -osiossa.<\/p>\n
Lataa uusi 2x-versiosi logosta, niin se n\u00e4kyy sivustolla kauniina ja ter\u00e4v\u00e4n\u00e4.<\/p>\n
Yhteenvetona voidaan todeta, ett\u00e4 muutat logon kokoa CSS:ll\u00e4, kunnes se t\u00e4ytt\u00e4\u00e4 oikean m\u00e4\u00e4r\u00e4n tilaa otsikossa. Sitten lataat kuvan, joka on kaksi kertaa suurempi, ja se n\u00e4ytt\u00e4\u00e4 ter\u00e4v\u00e4lt\u00e4 korkearesoluutioisilla n\u00e4yt\u00f6ill\u00e4.<\/p>\n
T\u00e4m\u00e4 on pohjimmiltaan se, mit\u00e4 verkkokalvon tuki kuville verkossa tekee kulissien takana, ja t\u00e4m\u00e4 on yksinkertainen tapa toteuttaa se itse.<\/p>\n
Siin\u00e4 kaikki!<\/p>\n
Johtop\u00e4\u00e4t\u00f6s<\/h2>\n
On s\u00e4\u00e4li, ett\u00e4 WordPressill\u00e4 ei ole hyv\u00e4\u00e4 tapaa n\u00e4ytt\u00e4\u00e4 korkearesoluutioisia logoja, mutta kiertotapa on riitt\u00e4v\u00e4n helppo.<\/p>\n
Voit vaihtoehtoisesti ladata logostasi SVG-version, mutta t\u00e4m\u00e4 edellytt\u00e4\u00e4 my\u00f6s SVG-tuen lis\u00e4\u00e4mist\u00e4<\/a>.<\/p>\n
Vaikka et ehk\u00e4 tied\u00e4 mit\u00e4\u00e4n CSS:st\u00e4, t\u00e4ss\u00e4 kuvatut vaiheet vaativat p\u00e4\u00e4asiassa kopioimista ja liitt\u00e4mist\u00e4, ja toivon, ett\u00e4 nautit uusien teknisten taitojen hankkimisesta seuraamalla t\u00e4t\u00e4 opetusohjelmaa.<\/p>\n
Jos haluat lis\u00e4tietoja CSS:n k\u00e4ytt\u00e4misest\u00e4 sivustosi mukauttamiseen, katso t\u00e4m\u00e4 opetusohjelma:<\/p>\n
Teeman muokkaaminen mukautetulla CSS:ll\u00e4<\/a><\/p>\n
Ja jos t\u00e4m\u00e4 artikkeli auttoi sinua t\u00e4n\u00e4\u00e4n, harkitse sen jakamista jonkun muun kanssa ennen l\u00e4ht\u00f6\u00e4si.<\/p>\n
Kiitos lukemisesta!<\/p>\n
:  www.competethemes.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Mietitk\u00f6, miksi logosi on ep\u00e4selv\u00e4? T\u00e4m\u00e4 tapahtuu useimmille WordPress-k\u00e4ytt\u00e4jille. Korjaus on yksinkertainen, jos noudatat n\u00e4it\u00e4 ohjeita.<\/p>\n","protected":false},"author":1,"featured_media":259214,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[530],"tags":[843],"class_list":["post-232960","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-korjaa-ja-suojaa","tag-affiai-fi"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/posts\/232960","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/comments?post=232960"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/posts\/232960\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/media\/259214"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/media?parent=232960"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/categories?post=232960"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/tags?post=232960"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}