Sildipilved: see asi külgribal, mille paljud paigaldavad ja unustavad. Mehaaniliselt, „lihtsalt et oleks". See on viga: hästi kujundatud pilv kogub sisemisi navigeerimisklikke sama tõhusalt kui navigeerimismenüü. Eriti saitidel, kus on sadu postitusi ja kategoorianavigatsioon enam ei jaksa.

Probleem on selles, et tavaline „Sildipilve" vidin on vaevu seadistatav. Fondi suurus, maksimaalselt. Värvid, puuduvad. Kuju, lame linkide nimekiri, mida on piinlik näidata. Kui teema pole sellele stiile kirjutanud, on tulemus masendav.

Õnneks pakub WordPress kahte teed: wp_tag_cloud() käsitsi väljakutsumine otse teemafailides ja Gutenbergi sisseehitatud „Sildipilve" plokk. Esimene annab täieliku kontrolli märgendi üle, teine toimib, kui vajad midagi kiiret ja koodivaba. Käsitleme allpool mõlemat koos töötavate näidete, ekraanipiltide ja videoga.

💡 Kiirülevaade:

• Lisa wp_tag_cloud() faili sidebar.php või footer.php, et saada sildipilv ükskõik kuhu
• Kujunda väljund CSS-i abil: taustavärvide, ümarate nurkade ja hõljumisefektidega nupud
• Kasuta Gutenbergi redaktoris plokki „Sildipilv" (kolm klikki, null koodi)
• Vaata videoõpetust seadistamise kohta otse WordPressi administraatori paneelist

Käsitsi väljastamine funktsiooniga wp_tag_cloud()

WordPress sisaldab funktsiooni wp_tag_cloud() alates versioonist 2.3. See kogub kõik saidi sildid, loendab kasutussageduse ja genereerib pilve, kus iga sildi fondi suurus on võrdeline seda sisaldavate postituste arvuga. Väljakutse sisestatakse otse teemafaili, sinna, kus pilv peaks ilmuma.

Põhiline näide failide sidebar.php, footer.php või kohandatud malli jaoks:

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
) );

Mida parameetrid tähendavad (täielik loetelu WordPressi dokumentatsioonis):

smallest ja largest: minimaalne ja maksimaalne fondi suurus. Vaikimisi on 8 ja 22 punkti. Kui vahemik tundub rabav, kitsenda seda (näiteks 10 ja 18).

unit: mõõtühik. Vaikimisi on pt, kuid see aktsepteerib mis tahes CSS-i ühikut: px, em ja rem. Ekraanide puhul on pikslid tavalisemad.

number: kui palju silte kuvada. Null tähendab „kõik". Praktikas on 45-50 täiesti piisav; vastasel juhul muutub pilv sadade erineva suurusega linkide segaduseks.

orderby: sorteerimisviis. name annab tähestikulise järjekorra, count näitab kõige sagedasemat esimesena. Kombineerides orderby => 'count' ja order => 'DESC', tõstab populaarsed sildid üles.

taxonomy: taksonoomia. Vaikimisi on post_tag, kuid võid asendada selle category või veebipoe kohandatud taksonoomiaga, et saada kategooriate või tootesiltide pilv.

format: väljundi formaat. flat (tühikutega eraldatud lingid), list (täpploend) või array (massiiv edasiseks PHP-töötluseks).

Funktsiooni võib julgelt paigutada ükskõik kuhu teemas. Kui vajad eraldi lehemalli koos pilvega, loo page-tagcloud.php, lisa wp_tag_cloud() väljakutse get_header() ja get_footer() vahele ning määra see mall administraatori paneelis lehele.

Siltide kujundamine CSS-i abil

Funktsioon väljastab töötlemata HTML-i: sildid <a> elementide sees, ümbritsetuna <div class="tagcloud"> elemendiga. Ilma CSS-ita on see virn erineva suurusega linke. Allolevad stiilid muudavad need korralikeks nuppudeks:

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 minimaalne ja sihitud: inline-block hoiab nupud reas, margin-bottom kompenseerib reavahetusi ja border-radius ümardab nurgad. Hall taust ja summutatud tekst ei lähe vastuollu ühegi brändipaletiga. Hõljumisel nupp tumeneb pehmelt.

Lisa see kood oma alamteema faili style.css või kohandaja väljale „Lisatud CSS" („Välimus" → „Kohanda" → „Lisatud CSS"). Teine variant on turvalisem: stiilid ei kao pärast järgmist teemavärskendust.

Näpunäide: kui külgriba ja kohandatud malli pilv peaksid välja nägema erinevalt, ümbritse väljakutse täiendava <div class="custom-tagcloud"> elemendiga ja määra stiilid topeltspetsiifilisusega: .custom-tagcloud .tagcloud a { ... }.

Sisseehitatud „Sildipilve" plokk Gutenbergis

Kui sul pole soovi teemafaile redigeerida, pakub WordPress sisseehitatud lahendust. Alates versioonist 5.8 sisaldab plokiredaktor plokki „Sildipilv", mida saab lisada igasse postitusse või lehele ilma ühegi koodireata.

Selle lisamine on tavapärane: redaktoris klõpsa „+", otsi „Sildipilv" ja lohista see soovitud kohta. Plokk korjab automaatselt üles kõik saidi sildid, sorteerib need tähestikuliselt ja skaleerib fondi suuruse proportsionaalselt kasutussagedusega. Külgriba paneel pakub järgmisi seadeid:

• siltide arv (vaikimisi 45, maksimaalselt 100)
• postituste loenduri lubamine iga sildi kõrval
• lülitumine siltide ja kategooriate vahel taksonoomia rippmenüü kaudu

Plokk töötab igas kaasaegses teemas, toetab gruppe ja veerge ning seda kujundatakse samade CSS-reeglitega esimesest osast. See on lihtsaim viis saada sildipilv lehele: ava redaktor, lisa plokk, avalda. Ei mingeid pluginaid, ei functions.php faili.

📺 Video: sildipilve seadistamine WordPressis

Lühike õpetus sildipilve lisamise ja seadistamise kohta otse WordPressi administraatori paneelist:

⁉️🤔 Korduma kippuvad küsimused

Kas ma saan sildipilve kuvada ilma PHP-faile redigeerimata?

Jah, mitmel viisil. Lihtsaim on sisseehitatud „Sildipilve" plokk Gutenbergi redaktoris: lisa see kolme klikiga „+" kaudu, ilma pluginate või functions.php failita. Teine võimalus on tavaline „Sildipilve" vidin jaotises „Välimus" → „Vidinad", mis töötab igas teemas, kus on külgriba või jaluse ala. Mõlemad meetodid kasutavad sisemiselt sama wp_tag_cloud() funktsiooni.

Kuhu peaksin paigutama wp_tag_cloud() väljakutse: faili functions.php või mallifaili?

Otse mallifaili: sidebar.php, footer.php, page-tagcloud.php või mis tahes muusse märgendi eest vastutavasse faili. Funktsiooni wp_tag_cloud() ei kutsuta välja failis functions.php, mis on koht loogika määratlemiseks; väljund toimub mallides. Kui sul on vaja funktsiooni käitumist kohandada, kasuta wp_tag_cloud filtrit failis functions.php.

Mis vahe on siltidel ja kategooriatel pilves?

Kategooriad on hierarhiline taksonoomia, sildid on lamedad. Visuaalselt erinevus kaob, kuid tehniliselt erineb väljakutse: siltide puhul kasuta taxonomy => 'post_tag', kategooriate puhul taxonomy => 'category'. Funktsioon jääb samaks: wp_tag_cloud(), lihtsalt anna kaasa sobiv võti.

Kuidas piirata kuvatavate siltide arvu?

Parameetriga number massiivis wp_tag_cloud(). Väärtus 0 näitab kõiki silte; enamiku saitide jaoks on mõistlik 30-50 (pilv jääb loetavaks ega muutu lõputuks linkide vooks).

Kas ma saan lisada postituste loenduri iga sildi kõrvale?

Jah, parameeter show_count => 1 (saadaval alates WordPress 4.8) kuvab postituste arvu sulgudes pärast sildi nime. Näiteks: „wordpress (42)". Gutenbergi plokis lubatakse see valik külgriba paneeli lüliti kaudu.

Mis siis, kui tavaline vidin on liiga igav?

Sul on kontrolli suurendamiseks kaks võimalust. Esiteks, kutsu wp_tag_cloud() välja käsitsi koos kohandatud parameetrite ja oma CSS-kujundusega, nagu 1. osas. Teiseks, kasuta Gutenbergi plokki samade CSS-reeglitega, kui sa ei soovi teemafaile puudutada. Mõlemad lähenemised annavad täieliku vabaduse: värvid, vahed, ümarad nurgad, hõljumisefektid (kõik on sinu kätes).

Käsitsi meetod või plokk: kumb oma ülesande jaoks valida?

Kui sinu sait kogub hoogu ja siltide arv on ületanud kolm tosinat, tasub kohandatud pilv end ära. See hoiab külastajaid kaasatuna: keegi klõpsab sildil, jõuab kureeritud postituste kogumikku sellel teemal ja loeb veel ühe või kaks artiklit. Lehe sügavus kasvab ilma lisakuludeta.

Lähenemine on lihtne. Kui vajad sildipilve kohe, ilma koodiga jändamata, ava redaktor, lisa plokk „Sildipilv" ja avalda. Kolm klikki ja tulemus ei sõltu teemast. Kui soovid lihvida iga detaili ja saada täieliku kontrolli märgendi üle, kopeeri PHP näide esimesest osast, kujunda see CSS-i abil ja pilv muutub disaini osaks, mitte tavaliseks kohahoidjaks. Mõlemad lähenemised töötavad igas kaasaegses teemas ega lähe omavahel vastuollu.

Kui see postitus aitas sul asjadest aru saada, salvesta see oma järjehoidjatesse. Ja kommentaarides räägi meile, kuidas sa sildipilve oma saidil kuvad: vidin, plokk või käsitsi väljakutse?