Otsikkomääritteen lisääminen WordPressin navigointivalikkoon. Mukautettu menusuunnittelu
Useimmat verkkosisältö sisältää kuvia, mutta harvat verkkosivustojen omistajat optimoivat kuvat paremman hakusijoituksen saavuttamiseksi. WordPress tarjoaa mahdollisuuden lisätä vaihtoehtoisen tekstin ja kuvan otsikon asianmukaisiin tunnisteisiin. Katsotaanpa eroa alt- ja title-attribuuttien välillä ja kuinka niitä käytetään sivuston kuvien käsittelyyn.
Mikä on kuvien alt-tunniste - kuvien kuvaus
Alt tai vaihtoehtoinen teksti on attribuutti, joka lisätään kuvan lisäystunnisteeseen HTML-koodissa. Tällainen teksti näkyy kuvasäiliön sisällä, kun sitä ei jostain syystä voida näyttää sivulla. Se auttaa hakukoneet ymmärtää, mitä tässä graafisessa elementissä on esitetty.
alt-attribuutti käytetään myös parantamaan verkkosivustojen saavutettavuutta vammaisille huono näkö tai ne, jotka käyttävät näytönlukulaitteita. Lukijaohjelma lukee tekstiartikkelin, ja kun se tulee kuvaan, se lukee alt-attribuutissa olevan tekstin. Näin käyttäjät voivat tietää, mitä kuvassa on, vaikka he eivät näe sitä.
Virtuaalinen verkkosivuston isännöinti suosituille sisällönhallintajärjestelmille:
Suosituksia tämän tagin täyttämiseen, mitä kirjoittaa WordPressiin
WordPress antaa sinun lisätä kuviin alt-attribuutin, kun ne ladataan sisäänrakennetun medialatausohjelman avulla. Kun luot sivua tai viestiä, työkalupalkissa on "Lisää mediatiedosto" -painike. Kun napsautat sitä, sisäänrakennettu kirjastoikkuna avautuu, jossa sinun täytyy ladata tai yksinkertaisesti vetää haluamasi kuva hiirellä.
Kun lataat kuvan sisäänrakennetun WordPress-sisällönlatausohjelman avulla, ikkunan oikealla puolella on useita kenttiä, joihin voit täyttää kuvan attribuutit. Otsikkokenttää ei pidä sekoittaa otsikko-attribuutin kanssa, jota käytetään kuvatunnisteessa. Latauksen aikana lisättyä otsikkoa käyttää vain WordPress-mediakirjasto näyttääkseen luettelon mediatiedostoista.
Aseta alt-attribuutti sopivaan kenttään - se koostuu yleensä 2-3 sanasta ja sen tulee kuvata suoraan kuvassa näkyvää. Voit halutessasi täyttää kuvan allekirjoituksen ja kuvauksen kentät samassa latausikkunassa.
Mikä on kuvien otsikko-attribuutti WordPressissä
Otsikko on toinen attribuutti, joka voidaan lisätä kuvatunnisteeseen HTML-koodissa. Sitä käytetään otsikossa graafinen elementti ja osoittaa sen nimen. Otsikko näkyy työkaluvihjeessä, kun käyttäjä vie hiiri kuvan päälle. Otsikon sisään syötetty teksti ei näy käyttäjälle, jos kuvaa ei näy sivulla.
Otsikko tulee antaa mielekkäästi kuvassa esitetyn tiedon mukaan. Samanaikaisesti tämän tekstin on oltava erilainen kuin alt-attribuutin sisältämä teksti. Otsikon otsikko voidaan kirjoittaa venäjäksi tai käyttää translitterointia, joka usein lisätään siihen SEO-optimointia varten avainsanoja.
otsikon attribuutti lisätään kuvaan WordPressissä sen jälkeen, kun se on lisätty tekstiin. Jos käytät visuaalinen editori Suunnittele sivu klikkaamalla kuvaa. On ilmestynyt lisäpaneeli työkalut, napsauta muokkauspainiketta kynäkuvakkeella.
Tämän seurauksena avautuu ponnahdusikkuna, jossa voit määrittää kuvaparametrit, jossa sinun on avattava " Lisäasetukset" Näkyviin tulee kenttä otsikkomääritteen lisäämistä varten, johon sinun on kirjoitettava kuvan nimi. Samassa ikkunassa voit määrittää alt-attribuutin siltä varalta, että unohdat syöttää sen kuvan ladatessasi. Säädä molempia kenttiä ja napsauta Päivitä-painiketta.
Niille käyttäjille, jotka osaavat muokata HTML-koodia, vaihda visuaalisesta tekstiin tekstieditori ja lisää otsikko- ja alt-attribuutit vastaavaan kuvatunnisteeseen.
Sivuston optimoimiseksi on suositeltavaa käyttää kuville sekä alt- että title-attribuuttia. Ilmeinen etu Tämän vaiheen tarkoituksena on auttaa hakukoneita löytämään kuvat sivustoltasi ja näyttämään ne kuvahakutuloksissa.
Tässä tapauksessa sivusto vastaanottaa lisäliikennettä hakukoneista. Toinen arvokas tekijä on, että nämä ominaisuudet parantavat sivustosi käytettävyyttä henkilöille, joilla on erityistarpeita.
) on tärkeä ja kätevä asia monella tapaa.
Yksi sen käyttövaihtoehdoista on luoda linkkilohko, joista jokaisella on oma suunnittelu Tässä on esimerkiksi kategoriat:
Linkkien esto ainutlaatuisilla kuvakkeilla
Samanlainen ominaisuus on saatavilla monissa premium-teemoissa. Uskon, että on olemassa myös laajennuksia, jotka luovat samanlaisen valikon. Ratkaisuni sopii mihin tahansa WP-teemaan, se ei ole tarpeeton tai sisällä mitään lisäkuormitus palvelimelle, kuten joskus laajennusten kanssa. Sen toteuttamiseksi tarvitset vain vähän css- ja html-taitoja ( voit lukea siitä täältä – htmlbook.ru) ja jokin html-editori, esim. ilmainen muistilehtiö++ (offsite – notepad-plus-plus.org).
Joten ensimmäinen asia, joka sinun on tehtävä, on luoda mukautettu valikko - Konsoli > Ulkonäkö> Menu ( jäljempänä polku WP:n virallisesti lokalisoidussa versiossa). Jos käytät sitten mukautettua valikkowidgetiä Konsoli > Ulkoasu > Widgetit, vedä widget sivupalkin lohkoon ja valitse aiemmin luomasi mukautettu valikko. Mielestäni nämä vaiheet ovat yksinkertaisia eivätkä vaadi kuvakaappauksia. "Twenty Ten" -teemaan ( wordpress.org/extend/themes/twentyten) tulos näyttää tältä:
Mukautetun valikon ulkoasu "Twenty Ten" -teemassa Kohteiden tyylittämiseen ei vaadita paljoa, vain itse kuvakkeet, jotka on esiladattu käytetyn teeman kuvakansioon, ja pieniä muokkauksia teeman tyylitiedostoon - style.css. Piktogrammikuvakkeet löytyvät seuraavasti: google.com/search?q=free+icons. Tyylitiedosto sijaitsee yleensä teemakansion juuressa.
Linkkien personoimiseksi sinun on korostettava jokainen niistä jollakin tavalla, ts. tee siitä ainutlaatuinen minkä tahansa valittavissa olevan vaihtoehdon mukaan css:n avulla merkkejä. WordPress-konsolissa voit lisätä nimimääritteen (htmlbook.ru/samhtml/ssylki/atributy-ssylok) mukautettuihin valikkolinkkeihin. Juuri tätä ominaisuutta ehdotan käytettäväksi. Määrittääksesi tämän määritteen arvon, sinun on täytettävä Otsikkomäärite -kenttä, kun muokkaat linkkiä Konsoli > Ulkoasu > Valikko > Oma valikko, katso kuvakaappaus:
Kenttä "Title-attribuutti", johon sinun on syötettävä yksilöllinen arvo Arvoa täytettäessä tästä kentästä On tärkeää käyttää vain latinalaisia merkkejä!
"Viestit"-kohdassa käytän arvoa "posts", ts. Niin:
"Title-määrite" -kenttä on täytetty Ominaisuuksia on vielä muutettava tästä elementistä, tätä varten kirjoitamme seuraavan tekstin style.css-tiedostoon:
Widget_nav_menu a ( listatyyli: ei mitään; tausta: url(images/posts.png) ei toistoa vasen keskellä; )
Anna minun selittää. .widget_nav_menu – mukautettu valikkoluokka; a – linkin valitsin otsikkomääritteellä, jonka arvo on posts; listatyyli: ei mitään; – poista valikon merkintä; tausta: url(images/posts.png) ei toistoa vasen keskellä; – määrittelemme taustakuva– tämän kohteen kuvake, ts. Mukautetaan se. Viimeinen ominaisuus ja sen arvot löytyvät linkistä - htmlbook.ru/css/background, selitän vain, että images/posts.png on suhteellinen linkki sen kuvakkeen tiedostoon, jonka haluat nähdä tälle linkille, ja vasemmalla keskellä on tämän kuvakkeen sijainnin säännöt.
Nykyään kuvat muodostavat melkoisen osan kaikesta verkkosisällöstä. hieno paikka. Kaikki käyttäjät eivät kuitenkaan optimoi niitä saadakseen koko sivuston paremman sijoituksen. WordPress tarjoaa muiden ominaisuuksiensa ohella käteviä työkaluja lisätäksesi vaihtoehtoisen tekstin ja kuvan otsikon asianmukaisiin tunnisteisiin. Tässä materiaalissa tarkastellaan attribuuttien välistä eroa alt/otsikko ja niiden käyttöalueet.
Miksi kuviin tarvitaan alt-attribuutti?
Vaihtoehtoinen teksti tai alt on HTML-attribuutti lisätty kuvan lisäystunnisteeseen
. Tämä teksti näytetään, jos kuvaa ei jostain syystä ladata ja näytetä sivulla. Tämä liike tarjoaa tietoa hakurobotteja siitä, mitä kuvassa tarkalleen ottaen näkyy. Yleensä tagissa alt kirjoita lyhyt kuvaus kuvasta. Lisäksi määrite auttaa myös parantamaan sivuston saavutettavuutta näkörajoitteisille tai näytönlukuohjelmia käyttäville. Lukijaohjelma lukee sivun tekstiosan, ja kun se saavuttaa kuvan, lukee myös sivulla olevan tekstin. alt. Tämän ansiosta käyttäjät tietävät aina, mitä kuvassa on piirretty, vaikka he eivät näe sitä.
Miten ja minne täytetään alt WordPressissä?
WordPress tarjoaa varsin käteviä työkaluja määritteen täyttämiseen alt. Voit siis määrittää sen jo kuvaa ladattaessa. Voit tehdä tämän avaamalla viestin tai sivun, lisäämällä kohdistimen kuvan lisäyskohtaan ja napsauttamalla painiketta Lisää mediatiedosto.
Kun painiketta painetaan, ikkuna avautuu Mediakirjastot WordPress, jossa sinun on määritettävä kuvatiedoston paikallinen sijainti. Tämän seurauksena näet sivupalkin, jossa on ladatun tiedoston parametrit.
Kuten näet, paneelissa on kenttä alt-attribuutti. Oletuksena se on tyhjä. Attribuutin tekstin tulee olla 2-3 sanaa pitkä, ja niiden tulee kuvata tarkasti, mitä kuvassa on. Lisää kuva sivustolle napsauttamalla -painiketta Lisää viestiin.
Miksi kuvissa tarvitaan otsikko-attribuutti?
Otsikko- toinen ominaisuus HTML-kuvan lisäystunniste
. Sitä käytetään kuvan otsikkona ja se yleensä osoittaa sen otsikon. Huomaa myös, että teksti sisällä otsikko ei näytetä käyttäjälle, jos kuvaa ei näy sivulla.
Miten ja minne otsikko täytetään WordPressissä?
Attribuutti täytetään, kun kuva on ladattu sivustolle. Voit tehdä tämän sisään Mediakirjasto WordPressin tulee korostaa kuva, jonka jälkeen tulee tuttu kuva sivupalkki.
Otsikko tai otsikko on asetettava mielekkäällä tavalla kuvassa esitetyn tiedon mukaan. Samanaikaisesti tekstin on oltava erilainen kuin attribuutti alt. Otsikko voidaan kirjoittaa venäjäksi tai käyttää translitterointia. Usein sivustojen omistajat käyttävät sitä SEO-optimointi merkitsemällä avainsanat sinne. Voit myös asettaa määritteen ollessasi tekstin tai sivun muokkaussivulla. Voit tehdä tämän napsauttamalla kuvaa ja napsauttamalla näkyviin tulevassa lisätyökalurivissä muokkauspainiketta, jossa on kynäkuva. Yleisesti ottaen sivuston optimoimiseksi on suositeltavaa käyttää molempia määritteitä kuville. Attribuutti alt on yksi etu - se auttaa hakukoneita löytämään kuvia sivustostasi ja näyttämään ne kuvahakutuloksissa. Samaan aikaan sivusto saa lisäliikennettä hakukoneilta. Toinen molempien ominaisuuksien etu on sivuston parempi saavutettavuus henkilöille, joilla on erityistarpeita.
Otsikko-attribuutin automaattinen lisäys mahdollistaa kuvien optimointiajan lyhentämisen, kun niitä lisätään blogiartikkeleihin. Siksi jälleen kerran sinun ei tarvitse ryhtyä muokkaamaan kuvaa ja lisätä otsikkomääritettä manuaalisesti. Tätä varten meidän on suoritettava joitain toimia ja sitten nautittava tuloksesta.
otsikon attribuutti
Ihana. Nyt "Otsikkomääritteemme" lisätään automaattisesti, eikä meidän tarvitse lisätä sitä manuaalisesti. Tämä säästää arvokasta aikaamme artikkeleita kirjoitettaessa.
Kun olemme lisänneet kuvan.
Valmis kuva "Title-attribuutilla"
Näemme, että "title-attribuutti" lisätään automaattisesti (kuva 8). Tämä näkyy, kun siirrät hiiren kuvan päälle, minkä jälkeen näkyviin tulee kuvaus "Kuvamme" (kohta 1).
IN uusin versio WordPress, kun tekstieditoria vaihdettiin, ei ole "title-attribuuttia" eikä se toimi siellä, mikä on erittäin surullista. Koska "title-attribuuttia" käytetään blogin ja tekstin ulkoasun optimointiin, kun viet hiiren osoittimen kuvan päälle.
Vaikka uusi editori aika mielenkiintoinen ja tulee mieleen. Vaikka tietysti siihen pitää tottua.
Käytän vanhaa editoria, koska mielestäni uusi on vielä kostea. Jotta voit palata vanhaan editoriin, sinun tarvitsee vain käyttää Classic Editoria ja työskennellä tavallisessa editorissasi. Missä tämä koodi toimii loistavasti.
No, voit käyttää uutta lohkoeditoria, kun se on saatettu oikeaan kuntoon.
Ihana! Joten tutustuimme erinomaiseen mahdollisuuteen lisätä "Title Attribute" -kenttä automaattisesti.
Hyödynnä ja säästä aikaasi.
Näen mielelläni kysymyksesi ja kommenttisi
Onnea sinulle
Ystävällisin terveisin Vladimir Shishkov
Vastaanottaa määritetyn liitteen kuvan tunniste (liitteenä tiedostopostaukseen).
Jos liitettä ei löydy, palautetaan tyhjä merkkijono.
Jos liite on kuva, sille palautetaan määritettyä kokoa vastaava koodi (katso parametri $size).
Muuntyyppisille liitetiedostoille kuin kuville (.zip, .xls, .flv) palautetaan tätä tyyppiä vastaava kuvake (WordPress havaitsee sen automaattisesti). Oletuksena tätä kuvaketta ei näytetä, jotta se voidaan näyttää, sinun on asetettava 3. parametri ($icon) arvoon true.
Koukut funktiosta
Palauttaa
Linja. Kuvan HTML-koodi sisään tag.
Käyttö
$img = wp_get_attachment_image($liitteen_tunnus, $koko, $kuvake, $attr); $liitteen_tunnus(numero) (pakollinen) Sen liitteen tunnus, jonka kuvan haluat saada.$koko
- (merkkijono/taulukko)
- Kuvan koko. Voidaan määrittää muodossa:
Merkkijonojen pikkukuva , keskikoko , suuri , täysi tai käytettävissä olevan koon nimi
2 elementin taulukon muodossa, jotka määrittävät näytettävän kuvan sivujen mitat: array(32,32) .
Mittojen määrittäminen taulukon kautta ei pienennä kuvaa fyysisesti, se pienennetään vain visuaalisesti sopivimmasta valmiista pikkukuvasta (lataukset). Kokojen määrittäminen ei vaikuta tiedostojen näytettävien kuvakkeiden kokoon, ne näytetään aina alkuperäisessä koossa (32x32). Taulukon käyttämisen sijaan on joskus järkevämpää rekisteröityä
uusi koko
kuvat (add_image_size()) ja käytä sitä jo asennettujen kuvien kanssa (pikkukuva, keskikokoinen, suuri tai täysi). Tämä lähestymistapa on tehokkaampi, koska ei tarvitse jatkuvasti tarkistaa, mikä saatavilla olevista kooista sopii paremmin. Oletus: "pikkukuva"$kuvake
(looginen) Käytetäänkö mediakuvakkeita liitteiden esittämiseen. Oletusarvoisesti tiedostotyyppisille liitteille (ei kuville) kuvaketta ei näytetä, jos haluat näyttää tämäntyyppisten liitteiden kuvakkeet, aseta tämä parametri arvoon tosi. Oletus: false
$attr (joukko)
Array("class" => "foo bar", "title" => "kuvan otsikko")
Esimerkkejä
#1. Näytämme HTML-valmiuden kuvan
Näytetään kuva liitteenä olevan kuvatiedoston keskikoko 651:
Se tulostaa jotain tämän kaltaista HTML-koodia:
vaihtoehtoinen teksti täytetään vain, jos se on määritetty liitettäviksi erityiskenttään (alt text). Alt ei sisällä tekstiä kuvan otsikosta, kuvauksesta tai kuvatekstistä...
#2. Esimerkki mukautetulla koolla
Näytetään kuva määritetty koko 20x20 pikseliä "kuva"-tyyppisille liitteille ja vastaava kuvake muun tyyppisille liitteille (3. parametri):
ID, array(20,20), tosi); ?>
$post->ID - ID:n dynaaminen lähetys silmukassa. Voit luoda tällaisen silmukan get_posts()-funktiolla (get_posts("post_type=attachment")).
