miten muokata otsikoita WordPress: Aloittelijan opas

Etsitkö helppoa tapaa muokata WordPress-otsikkoa?

koska otsikkosi on jokaisen sivun yläreunassa, sillä on tärkeä rooli verkkosivustosi brändäämisessä, vierailijoiden navigoinnissa ja tärkeimmän sisältösi mainostamisessa.

saadaksesi eniten hyötyä sivustosi otsikosta, tarvitset kuitenkin tavan muokata sitä, mitä monet teemat eivät tarjoa.

tässä viestissä jaamme joitakin erilaisia taktiikoita, joiden avulla voit muokata otsikkoa WordPress käyttäen sekä yksinkertaisia vedä ja pudota-rajapintoja että omaa koodiasi.

helpoin vaihtoehto on käyttää Astra-teemaa ja sen drag-and-drop header Builderia, mutta jaamme myös muita taktiikoita, jotka toimivat minkä tahansa WordPress-teeman kanssa.

mikä on WordPress-Otsikko?

WordPress-otsikko on se osa sivustoasi, joka näkyy jokaisen sivun yläreunassa. Tyypillisesti se sisältää vähintään kaksi elementtiä minimissään:

  • sivuston tunnus / identiteetti
  • navigointivalikko(s)

näin esimerkiksi Astra-blogin otsikko näyttää. Näet, että se sisältää Astra-logon sekä kaksi erillistä navigointivalikkoa:

Astra-otsake

tarpeistasi riippuen voit myös sisällyttää muita elementtejä, kuten sosiaalisen median kuvakkeet, hakukentän, tarjouksia, puhelinnumerosi ja muita tietoja.

jos haluat joskus nähdä, miten se toimii, WordPress-otsikko sisältyy otsikkoon.php tiedosto WordPress teema.

miten muokata WordPress Otsikko Astra

jos haluat täyden kontrollin WordPress otsikko, ilmainen Astra teema antaa sinulle vedä ja pudota, ei-koodi tapa täysin muokata WordPress otsikko.

voit nähdä muutoksesi heti verkkosivustosi live-esikatselussa ja voit helposti lisätä erilaisia sisältöjä, kuten painikkeita, sosiaalisia kuvakkeita, hakukentän ja paljon muuta.

aloittaaksesi Astra-teeman asentamisen ja aktivoimisen. Voit myös tuoda yksi sadoista valmiiksi rakennettu demo sivustoja saada nopeasti vauhtiin. Jos tarvitset auttavaa kättä jollakin näistä vaiheista, meillä on runsaasti oppaita auttamaan sinua ulos:

  • Astran asentaminen
  • aloitussivustojen tuonti

kun perussivustosi on valmis, voit mukauttaa otsikkosi Astran avulla.

Sujay Pawar

Hei! Nimeni on Sujay ja olen Astran toimitusjohtaja.

tehtävänämme on auttaa pienyrityksiä kasvamaan verkossa edullisten ohjelmistotuotteiden ja menestymiseen tarvittavan koulutuksen avulla.

jätä kommentti alla, jos haluat liittyä keskusteluun, tai klikkaa tästä, jos haluat henkilökohtaista apua tai keskustella tiimimme yksityisesti.

1. Avaa Astra Header Builder

päästäksesi alkuun, siirry ulkoasuun → muokkaa WordPress-kojelautaasi käynnistääksesi alkuperäisen WordPress-muokkaajan. Sitten, valitse Header Builder vaihtoehto:

Astra Header builder

kun käynnistät header Builderin, näet uudet asetukset, joissa voit hallita otsikkosi asettelua:

Astra Header builder mukauttajan asetukset

2. Lisää ja järjestä Otsikkosisältö

nyt hauskaa osalisäystä varten. Näet, että sinulla on kolme riviä header builder. Jokainen rivi ohjaa otsikon eri osan sisältöä:

  1. otsikon
  2. pääotsikko – tähän laitat ”pääotsikon” sisällön.
  3. otsikon alla
Astra Header Builderin sisältö

haluat ehdottomasti sisällyttää sisällön ensisijaiseen otsikkoon, ja sitten sinulla on mahdollisuus lisätä sisältöä sen ylä-tai alapuolelle tarpeidesi mukaan.

voit lisätä sisältöä napsauttamalla kohtaa, johon haluat lisätä sisältöä. Tämä avaa joukon vaihtoehtoja:

  • perusvalikko
  • ylävalikko
  • Logo
  • nappula
  • haku
  • sosiaalinen
  • HTML 1
  • HTML 2

huomaa, että kun lisäät sisältöä, näet vähemmän vaihtoehtoja. Voit esimerkiksi lisätä logosi vain kerran, joten tämä vaihtoehto katoaa, kun olet jo lisännyt logon otsakkeeseesi:

Astra Header builder lisää sisältöä

kun olet lisännyt sisältöä, voit klikata kyseistä sisältöä avataksesi sen asetukset. Esimerkiksi, jos lisäät painiketta, voit hallita painiketta tekstiä ja linkki.

Voit myös avata Suunnitteluasetukset muokataksesi asioita edelleen:

Astra Header builder Muokkaa sisältöä

jos haluat järjestää sisältösi uudelleen tai siirtää sen toiselle riville, sinun tarvitsee vain vetää ja pudottaa se:

Astra vedä ja pudota header builder

3. Mukauta otsikon asettelu

edellä näytimme, miten voit muokata yksittäisiä elementtejä otsikon sisällä. Sinulla on myös useita vaihtoehtoja muokata otsikkoa kokonaisuutena.

aluksi voit siirtyä pääotsikon rakentajan suunnittelu-välilehteen ohjaamaan otsikkosi leveyttä ja välejä. Voit myös klikata kunkin otsakerivin vaihdekuvaketta mukauttaaksesi sen korkeutta ja muotoilua:

Astra Header builder Mukauta asettelua

4. Kokeile erityyppisiä otsakkeita

riippuen siitä, käytätkö Astran ilmaista vai Astra Pro-versiota, saat käyttöösi myös muita otsakkeita, kuten läpinäkyvät otsakkeet (vapaa) ja tahmeat otsakkeet (Pro).

voit käyttää yllä olevaa ylä-ja alatunnisteen rakentajaa läpinäkyvän tai tahmean otsikon suunnitteluun. Näet nämä vaihtoehdot otsikon tyypit-osiossa. Voit klikata niitä laajentaaksesi asetuksia ja suunnitellaksesi eri otsaketyypit:

Astra Header builder transparent header

kolme muuta tapaa muokata WordPress Header

vaikka Astran vedä ja pudota header builder tarjoaa helpoin tapa muokata WordPress header, on myös muita taktiikoita, joita voit käyttää, ei väliä mitä teemaa käytät.

Tässä muutamia parhaita strategioita …

1. Käytä teeman Customizer Asetukset

useimmat WordPress teemoja antaa sinulle jonkin verran valvoa sivuston otsikko native WordPress Customizer. Et todennäköisesti saa Astran antamaa yksityiskohtaisuutta, mutta saat joitakin vaihtoehtoja, joilla voit hallita otsakkeesi ulkonäköä ja toimintoja.

nämä vaihtoehdot vaihtelevat teemasi mukaan, mutta voit yleensä avata ne klikkaamalla sinistä lyijykynäkuvaketta otsikon elementtien vieressä. Esimerkiksi Uudessa Twenty Twenty-One oletusteema, voit nähdä, että voit muokata:

  • Logo
  • sivuston otsikko
  • valikko
teeman otsikoiden oletusasetukset

jos tarvitset lisäapua, voit tutustua teeman kehittäjän dokumentaatioon.

2. Käytä Elementoria ja Free Custom Header Plugin

jos et tunne Elementoria, se on visuaalinen, vedä ja pudota-suunnittelutyökalu, jolla voit luoda sisältöä sivustollesi. Vapaa Elementor-Header, alatunniste & Blocks Template custom header WordPress plugin, voit käyttää ilmainen versio Elementor suunnitella oman WordPress custom header.

tämä plugin toimii täydellisesti ilmainen Astra teema, sekä kaikki muut WordPress teema saatat käyttää.

voit aloittaa, asentaa ja aktivoida ilmaisen liitännäisen WordPress.org. sinun täytyy myös asentaa Elementorin ilmainen versio, Jos et ole jo tehnyt niin.

kun olet tehnyt sen, siirry kohtaan ulkoasu → otsikon alatunniste & lohkot ja valitse Lisää uusi:

otsikon alatunniste ja otsakkeen suunnittelulohkot

Anna mallille nimi ja valitse otsikko Mallipohjatyypin alta. Voit myös käyttää Display On-tai User Role-asetuksia kohdentaaksesi otsikkosi tiettyyn sisältöön / käyttäjiin.

Julkaise sitten otsikkosi ja avaa visuaalinen rakentaja napsauttamalla Muokkaa Elementorilla:

otsikon alatunniste ja estää otsikon asetukset

nyt, voit täysin muokata otsikkoa käyttäen Elementor visuaalinen vedä ja pudota käyttöliittymä. Plugin antaa sinulle myös uuden otsikon, alatunnisteen & estää widgetit, joita voit käyttää lisätä tärkeitä sivuston elementtejä, kuten sivuston logo tai navigointivalikko:

Elementor muokkaa otsikkoa otsikon alatunnisteella ja palikoilla

lisätietoja Elementorin käytöstä löytyy kokonaisuudessaan Elementor-opetusohjelmasta tai Elementor-arvostelustamme.

3. Käytä Custom Code (Advanced)

lopuksi, jos olet edistynyt käyttäjä, voit myös muokata WordPress-otsikkoa omalla koodillasi. Voit tehdä tämän, tarvitset ainakin työ tietoa HTML, PHP, ja CSS, joten tämä ei ole vaihtoehto ei-tekniset käyttäjät.

jos et osaa näitä koodauskieliä, kannattaa pitää kiinni jostakin tämän listan aiemmasta menetelmästä.

otsikon muokkaamiseen on kaksi osaa:

  • HTML / PHP – tämä ohjaa todellista sisältöä otsikon.
  • CSS-tämä ohjaa otsikkosi muotoilua.

kuten aiemmin mainittiin, sivustosi otsikon sisältö sijaitsee otsikossa.php-tiedosto. Jotta voit muokata otsikkosi sisältöä, sinun on työskenneltävä suoraan tämän tiedoston kanssa. Tai jotkut teemat, kuten Astra, tarjoavat myös koukkuja, joilla voit lisätä sisältöä otsikkoon.

Astra visual hooks-oppaasta näkee, että otsikkoa voi muokata useilla vaihtoehdoilla:

Astran koukut

jos haluat muokata teeman otsikkoa.php tiedosto suoraan, sinun pitäisi käyttää lapsi teema varmista, että et korvaa muutoksia, kun päivität teema.

toisaalta, jos käytät koukkuja, sinun ei tarvitse käyttää lapsiteemaa, kunhan käytät liitännäistä, kuten Astra-koukkuja tai koodinpätkiä. Jos lisäät koukut suoraan teeman toimintoja.php-tiedosto, sinun pitäisi silti käyttää lapsi teema, vaikka.

Astra Prolla on myös mahdollisuus lisätä koukkuja Astra Pron Custom Layout-ominaisuuden avulla.

Astra Pron muokatuissa ulkoasuissa on se siisti puoli, että näyttösääntöjen avulla voi ohjata juuri sitä, milloin vaihtuvat näytöt. Voit esimerkiksi lisätä otsikkoihisi mukautettua sisältöä, joka näkyy vain kirjautuneille käyttäjille.

näin voit muokata otsikkosi sisältöä-mutta entä tyyli?

voit muokata otsikkosi tyylittelyä muokkaamalla tyyliä.CSS-tiedosto suoraan, jos käytät lapsi teema. Tai voit käyttää ylimääräisiä CSS alue WordPress Customizer lisätä omia mukautettuja tyylejä otsikkoon.

muokkaa WordPress-otsikkosi tänään

WordPress-otsikkosi on oleellinen osa sivustosi menestystä. Se auttaa brändäämään sivustosi, ohjaamaan kävijöitäsi keskeiseen sisältöön, edistämään tärkeitä tietoja tai sosiaalisia profiileja ja paljon muuta.

helpoin tapa saada sivustosi otsikko täysin hallintaansa on käyttää vapaata Astra-teemaa. Astran avulla saat käyttöösi visuaalisen, vedä ja pudota-otsikon rakentajan. Et tarvitse mitään koodia tai ulkoisia plugins – saat 100% control oman otsikon suoraan sisällä WordPress Customizer.

muissa tilanteissa voit käyttää myös eri teeman muokkausasetuksia, Elementor-otsikkoa, alatunnistetta & Blocks Template-liitännäistä tai omaa koodiasi, jos sinulla on teknistä osaamista.

Write a Comment

Sähköpostiosoitettasi ei julkaista.