Tägipilvet: se sivupalkin juttu, jonka moni asentaa ja unohtaa. Mekaanisesti, "kunhan nyt on." Se on virhe: hyvin suunniteltu pilvi kerää sisäisiä navigointiklikkauksia yhtä tehokkaasti kuin navigointivalikko. Varsinkin sivuilla, joilla on satoja artikkeleita ja joilla kategorianavigointi ei enää pysy perässä.

Ongelma on, että tavallinen "Tägipilvi"-widget on hädin tuskin muokattavissa. Fonttikoko, korkeintaan. Värit, ei lainkaan. Muoto, lattea linkkilista, jota häpeää näyttää. Jos teema ei ole kirjoittanut sille tyylejä, lopputulos on masentava.

Onneksi WordPress tarjoaa kaksi reittiä: wp_tag_cloud()-funktion kutsumisen suoraan teematiedostoissa ja natiivin "Tägipilvi"-lohkon Gutenbergissa. Ensimmäinen antaa täyden hallinnan merkintäkielestä, toinen toimii, kun tarvitset jotain nopeaa ja kooditonta. Käsittelemme molemmat alla live-koodinpätkien, kuvakaappausten ja videon kera.

💡 Pikakatsaus:

• Lisää wp_tag_cloud() tiedostoon sidebar.php tai footer.php saadaksesi tägipilven minne tahansa
• Tyylittele tulos CSS:n avulla: painikkeet taustaväreillä, pyöristetyillä kulmilla ja hover-efekteillä
• Käytä "Tägipilvi"-lohkoa Gutenberg-editorissa (kolme klikkausta, nolla koodiriviä)
• Katso video-opastus asennuksesta suoraan WordPressin hallintapaneelista

Manuaalinen tulostus wp_tag_cloud()-funktiolla

WordPress on sisältänyt wp_tag_cloud()-funktion versiosta 2.3 lähtien. Se kerää kaikki sivuston tägit, laskee käyttötiheyden ja luo pilven, jossa kunkin tägin fonttikoko on verrannollinen sen sisältävien artikkeleiden määrään. Kutsu lisätään suoraan teematiedostoon, sinne missä pilven halutaan näkyvän.

Peruskoodinpätkä tiedostoihin sidebar.php, footer.php tai mukautettuun pohjaan:

1
<?php
2
wp_tag_cloud( array(
3
    'smallest' => 8,
4
    'largest'  => 22,
5
    'unit'     => 'pt',
6
    'number'   => 45,
7
    'orderby'  => 'name',
8
    'order'    => 'ASC',
9
    'taxonomy' => 'post_tag',
10
    'format'   => 'flat',
11
) );

Mitä parametrit tarkoittavat (täysi lista WordPressin dokumentaatiossa):

smallest ja largest: pienin ja suurin fonttikoko. Oletus on 8 ja 22 pistettä. Jos vaihteluväli näyttää riitasointuiselta, kavenna sitä (esimerkiksi 10 ja 18).

unit: mittayksikkö. Oletus on pt, mutta se hyväksyy minkä tahansa CSS-yksikön: px, em ja rem. Näytöille pikselit ovat yleisempiä.

number: kuinka monta tägiä näytetään. Nolla tarkoittaa "kaikki". Käytännössä 45-50 on runsaasti; muuten pilvi muuttuu satojen erikokoisten linkkien sekamelskaksi.

orderby: lajittelutapa. name antaa aakkosjärjestyksen, count näyttää yleisimmät ensin. Yhdistämällä orderby => 'count' ja order => 'DESC' asetat suositut tägit kärkeen.

taxonomy: taksonomia. Oletus on post_tag, mutta voit korvata sen arvolla category tai verkkokaupan mukautetulla taksonomialla saadaksesi pilven kategorioista tai tuotetägeistä.

format: tulostusmuoto. flat (välilyönnein erotellut linkit), list (luettelomerkein varustettu lista) tai array (taulukko jatkokäsittelyä varten PHP:ssä).

Funktion voi turvallisesti sijoittaa minne tahansa teemassa. Jos tarvitset erillisen sivupohjan pilvelle, luo page-tagcloud.php, lisää wp_tag_cloud()-kutsu get_header()- ja get_footer()-kutsujen väliin ja määritä tämä pohja sivulle hallintapaneelissa.

Tägien tyylittely CSS:llä

Funktio tulostaa raakaa HTML:ää: tägit <a>-elementtien sisällä, käärittynä <div class="tagcloud">-elementtiin. Ilman CSS:ää se on sekamelska erikokoisia linkkejä. Alla olevat tyylit muuttavat ne siisteiksi painikkeiksi:

1
.tagcloud a {
2
    display: inline-block;
3
    padding: 4px 10px;
4
    margin-right: 7px;
5
    margin-bottom: 7px;
6
    background: #f0f0f0;
7
    color: #555;
8
    font-size: 11px;
9
    font-weight: bold;
10
    text-transform: lowercase;
11
    border-radius: 5px;
12
    border: 1px solid #ccc;
13
    text-decoration: none;
14
}
15
.tagcloud a:hover {
16
    background: #e0e0e0;
17
    color: #000;
18
    text-decoration: none;
19
}

CSS on minimaalista ja kohdennettua: inline-block pitää painikkeet rivissä, margin-bottom kompensoi rivinvaihdot ja border-radius pyöristää kulmat. Harmaa tausta ja hillityt tekstit eivät riitele minkään brändipaletin kanssa. Hover-tilassa painike tummenee pehmeästi.

Lisää tämä koodi lapsiteemasi style.css-tiedostoon tai mukauttimen "Lisä-CSS"-kenttään ("Ulkoasu" → "Mukauta" → "Lisä-CSS"). Jälkimmäinen vaihtoehto on turvallisempi: tyylit eivät katoa seuraavan teemapäivityksen yhteydessä.

Vinkki: jos sivupalkin ja mukautetun pohjan pilven pitäisi näyttää erilaiselta, kääri kutsu ylimääräiseen <div class="custom-tagcloud">-elementtiin ja aseta tyylit kaksinkertaisella tarkkuudella: .custom-tagcloud .tagcloud a { ... }.

Sisäänrakennettu "Tägipilvi"-lohko Gutenbergissa

Kun et halua muokata teematiedostoja, WordPress tarjoaa sisäänrakennetun ratkaisun. Versiosta 5.8 alkaen lohkoeditori sisältää "Tägipilvi"-lohkon, jonka voi lisätä mihin tahansa artikkeliin tai sivuun ilman yhtäkään koodiriviä.

Lisääminen on vakiokäytäntö: klikkaa editorissa "+", etsi "Tägipilvi" ja vedä se haluttuun paikkaan. Lohko poimii automaattisesti kaikki sivuston tägit, lajittelee ne aakkosjärjestykseen ja skaalaa fonttikoon käyttötiheyden mukaan. Sivupaneeli tarjoaa nämä asetukset:

• tägien määrä (oletus 45, maksimi 100)
• artikkelilaskurin käyttöönotto kunkin tägin vieressä
• vaihto tägien ja kategorioiden välillä taksonomian pudotusvalikosta

Lohko toimii missä tahansa modernissa teemassa, tukee ryhmiä ja sarakkeita, ja se tyylitellään samoilla CSS-säännöillä kuin ensimmäisessä osiossa. Tämä on helpoin tapa saada tägipilvi sivulle: avaa editori, lisää lohko, julkaise. Ei lisäosia, ei functions.php-tiedostoa.

📺 Video: tägipilven määrittäminen WordPressissä

Lyhyt opastus tägipilven lisäämisestä ja määrittämisestä suoraan WordPressin hallintapaneelista:

⁉️🤔 Usein kysytyt kysymykset

Voinko näyttää tägipilven muokkaamatta PHP-tiedostoja?

Kyllä, usealla tavalla. Helpoin on sisäänrakennettu "Tägipilvi"-lohko Gutenberg-editorissa: lisää se kolmella klikkauksella "+"-painikkeen kautta, ilman lisäosia tai functions.php-tiedostoa. Toinen vaihtoehto on tavallinen "Tägipilvi"-widget kohdassa "Ulkoasu" → "Vimpaimet", joka toimii missä tahansa teemassa, jossa on sivupalkki- tai alatunnistealue. Molemmat tavat käyttävät samaa wp_tag_cloud()-funktiota taustalla.

Mihin minun pitäisi sijoittaa wp_tag_cloud()-kutsu: functions.php-tiedostoon vai teemapohjaan?

Suoraan teemapohjatiedostoon: sidebar.php, footer.php, page-tagcloud.php tai mihin tahansa muuhun merkintäkielestä vastaavaan tiedostoon. wp_tag_cloud()-funktiota ei kutsuta functions.php-tiedostossa, joka on logiikan määrittelyä varten; tulostus tapahtuu pohjissa. Jos haluat mukauttaa funktion toimintaa, käytä wp_tag_cloud-suodatinta functions.php-tiedostossa.

Mitä eroa on tägeillä ja kategorioilla pilvessä?

Kategoriat ovat hierarkkinen taksonomia, tägit ovat tasainen. Visuaalisesti ero katoaa, mutta teknisesti kutsu eroaa: tägeille käytä taxonomy => 'post_tag', kategorioille taxonomy => 'category'. Funktio pysyy samana: wp_tag_cloud(), anna vain sopiva avain.

Miten rajoitan näytettävien tägien määrää?

number-parametrilla wp_tag_cloud()-taulukossa. Arvo 0 näyttää kaikki tägit; useimmille sivustoille 30-50 on järkevä (pilvi pysyy luettavana eikä muutu loputtomaksi linkkivirraksi).

Voinko lisätä artikkelilaskurin jokaisen tägin viereen?

Kyllä, parametri show_count => 1 (saatavilla WordPress 4.8:sta alkaen) näyttää artikkelimäärän suluissa tägin nimen jälkeen. Esimerkiksi: "wordpress (42)". Gutenberg-lohkossa tämä asetus otetaan käyttöön sivupaneelin kytkimellä.

Entä jos tavallinen widget on liian tylsä?

Sinulla on kaksi vaihtoehtoa hallinnan lisäämiseksi. Ensinnäkin, kutsu wp_tag_cloud() manuaalisesti mukautetuilla parametreilla ja omalla CSS-tyylittelyllä, kuten osiossa 1. Toiseksi, käytä Gutenberg-lohkoa samoilla CSS-säännöillä, jos et halua koskea teematiedostoihin. Molemmat lähestymistavat antavat täyden vapauden: värit, välit, pyöristetyt kulmat, hover-efektit (kaikki on sinun käsissäsi).

Manuaalinen tapa vai lohko: kumpi valita tehtävääsi?

Jos sivustosi on saamassa vauhtia ja tägien määrä on ylittänyt kolme tusinaa, mukautettu pilvi maksaa itsensä takaisin. Se pitää kävijät sitoutuneina: joku klikkaa tägiä, päätyy kuratoidulle artikkelikokoelmalle kyseisestä aiheesta ja lukee yhden tai kaksi artikkelia lisää. Sivusyvyys kasvaa ilman lisäkustannuksia.

Lähestymistapa on yksinkertainen. Jos tarvitset pilven heti ilman koodin kanssa säätämistä, avaa editori, lisää "Tägipilvi"-lohko ja julkaise. Kolme klikkausta, eikä lopputulos riipu teemasta. Kun haluat hioa jokaisen yksityiskohdan ja saada täyden hallinnan merkintäkielestä, kopioi PHP-koodinpätkä ensimmäisestä osiosta, tyylittele se CSS:llä, ja pilvestä tulee osa designia eikä vain vakiotäyte. Molemmat lähestymistavat toimivat missä tahansa modernissa teemassa eivätkä ole ristiriidassa keskenään.

Jos tämä artikkeli auttoi sinua pääsemään jyvälle, tallenna se kirjanmerkkeihisi. Ja kerro kommenteissa, miten näytät tägipilven sivustollasi: widgetillä, lohkolla vai manuaalisella kutsulla?