Amongst all the new features and improvements that the recent WordPress 3.4 release has introduced, there is a hidden gem. Kaikista uusista ominaisuuksista ja parannuksista, jotka WordPress 3.4 -versio on tuonut esiin, on piilotettu jalokivi. WordPress on tukenut Custom Header Image -ominaisuutta jo jonkin aikaa, mutta aikaisemmin sen kiinteät mittasuhteet tekivät sen liian liikkumattomaksi, jotta se olisi paljon hyötyä reagoivan suunnittelun aikakaudella.

Uusi julkaisu tekee siitä joustavan ja tuo helpomman ja puhtaamman koodin tähän suosittuun vaihtoehtoon. Teemakehittäjinä voimme nyt mennä pidemmälle ottaen huomioon tarpeen optimoida mobiilivierailijoille.

Aiemmin otsikkokuvan mitat olivat ennalta määritetyt ja niitä hallittiin HEADER_IMAGE_HEIGHT ja HEADER_IMAGE_WIDTH vakiot ja ladatut tiedostot leikattiin näiden rajoitusten mukaiseksi. Mutta versiosta 3.4 alkaen mukautettu otsikkokuva tukee joustavia leveyksiä ja korkeuksia ja vapauttaa meidät näistä rumaista vakioista. Kuulostaa kiehtovaa, vai mitä? Katsotaanpa, miten se voidaan tehdä.

Mitä aiomme saavuttaa

Ensinnäkin meidän pitäisi päättää, mikä käytettävissä oleva (ja laajasti keskusteltu) reagoiva kuva tekniikoista sopii meille. Voimme varaa itsellemme minkä tahansa kuvan omat merkinnät, kun otetaan huomioon sen merkitys sivuston brändille ja samalla sen riippumattomuus postin rakenteesta tai merkinnästä. Tästä näkökulmasta "noscript" -tekniikka näyttää todella lupaavalta. Yhteenvetona tekniikkaan se toimii seuraavasti:

Määritämme vaihtoehtoiset kuvaviitteet valitulle erottelukohdalle a

Sen mukana pitäisi olla sopiva CSS-muoto ja skripti, joka asettaa jQuery-kuvan toimimaan. Sen lisäksi, että haluamme valita joukon ennalta määritettyjä otsikkokuvaa (samalla tavoin kuin Twenty Eleven teema). Lisäksi haluamme antaa käyttäjälle mahdollisuuden lähettää oma kuva hallintapaneeliin. Olettaen, että ladataan täysikokoinen versio, luodaan tarvittavat välikoot sisäänrakennetulla WordPress-pienoiskuvakkeella yhdistettynä otsakkeen joustaviin koihin. Oman mukautetun otsikon pitäisi lopulta näyttää tältä:

Header view

Riittävää puhetta, haastakaa koodi.

Vaihe 1: rekisteröi oma otsikko teemasi kanssa

$default_url = get_template_directory_uri().'/_inc/img/city-large.jpg';$args = array('default-image'          => $default_url,'random-default'         => false,'width'                  => 1000,'height'                 => 300,'flex-height'            => true,'flex-width'             => true,'header-text'            => false,'default-text-color'     => '','uploads'                => true,'wp-head-callback'       => 'frl_header_image_style','admin-head-callback'    => 'frl_admin_header_image_style','admin-preview-callback' => 'frl_admin_header_image_markup',);add_theme_support('custom-header', $args);

Tämä on uusi rekisteröintikoodi, joka on otettu käyttöön WordPress 3.4: ssa. Voit nähdä koko joukon parametrejä sen kohdalle Codex , mutta tehtävästämme seuraavat ovat tärkeimmät:

  • default-image - url oletuskuvan täysikokoiseksi teeman kansioon
  • width , height - teemamme tukemat enimmäisarvot
  • flex-height , flex-width - asetetaan "tosi" -asetuksiksi, joten kuvasta voi olla joustavia kokoja
  • header-text - emme näytä teemaamme tekstiä yli kuvan
  • uploads - voit ladata administa
  • wp-head-callback - toiminto kutsutaan teemapääosastoon
  • admin-head-callback - toiminto, jota kutsutaan esikatselusivun osassa
  • admin-preview-callback - toiminto tuottamaan esikatselun merkintä admin-näytöllä

Jos olet aiemmin käyttänyt muokattua otsikkokuvaa teemaan ja mietitkö tekniikoiden vertailua, tässä on luettelo vanhojen vakioiden ja uusien parametrien (taulukon avaimet) vastaavuuksista:

HEADER_IMAGE        -> 'default-image'HEADER_IMAGE_WIDTH  -> 'width'HEADER_IMAGE_HEIGHT -> 'height'NO_HEADER_TEXT      -> 'header-text'HEADER_TEXTCOLOR    -> 'default-text-color'

Vaihe 2: rekisteröi oletuskuvia, joista voit valita

Esimerkissämme annamme kaksi etukäteen määritettyä kuvaa otsakkeen vaihtoehtona, ja jokaisessa niistä on oltava kolme vaihtoehtoa: -large.jpg , -medium.jpg ja -thumb.jpg vastaavan ikkunan leveyden alueelle. Pienintä kokoa käytetään myös pienoiskuvana admin-käyttöliittymässä.

register_default_headers(array('city' => array('url' => '%s/_inc/img/city-large.jpg','thumbnail_url' => '%s/_inc/img/city-thumb.jpg','description' => 'City'),'forest' => array('url' => '%s/_inc/img/forest-large.jpg','thumbnail_url' => '%s/_inc/img/forest-thumb.jpg','description' => 'Forest')));

Koodi on täysin itsestään selvä, vain tarkka yksityiskohti on kuvien oikea url: -large.jpg täysikokoisena ja -thumb.jpg thumbnail ( %s - on aktiivisen teeman kansion paikkamerkki, joka korvataan automaattisesti WordPressillä).

Vaihe 3: rekisteröidä lisää kuvakokoja

add_image_size('header_medium', 600, 900, false);add_image_size('header_minimal', 430, 900, false);

Näiden ylimääräisten koon tallentaminen teemamme avulla antaa WordPressille mahdollisuuden luoda jokin versio niistä, kun lataat kuvan mukautetulle otsakkeelle. Sopiva variantti voidaan myöhemmin saada käyttämällä nimen. Hitti on määritellä melko suuri korkeusarvo, joten se pakottaa kuvan muuttamaan leveydellä ja jättää sen korkeuden kuvasuhteesta johdetuksi.

Vaihe 4: merkintä etupäähän

function frl_header_image_markup(){/* get full-size image */$custom_header = get_custom_header();$large = esc_url($custom_header->url);$mininal = $medium = '';/* get smaller sizes of image */if(isset($custom_header->attachment_id)){ //uploaded image$medium_src = wp_get_attachment_image_src(intval($custom_header->attachment_id), 'header_medium', false);if(isset($medium_src[0]))$medium = esc_url($medium_src[0]);$minimal_src = wp_get_attachment_image_src(intval($custom_header->attachment_id), 'header_minimal', false);if(isset($minimal_src[0]))$mininal = esc_url($minimal_src[0]);}else{ //default image$medium = esc_url(str_replace('-large', '-small', $custom_header->url));$mininal = esc_url(str_replace('-large', '-thumb', $custom_header->url));}/* fallback for some unexpected errors */if(empty($medium))$medium = $large;if(empty($mininal))$mininal = $large;?>

Jälleen kaikki on suoraviivaista. Kanssa frl_header_image_markup toiminto luodaan merkintä, joka tarvitaan, jotta reagoiva tekniikka toimisi. Mielenkiintoisin osa tässä on saada kuva-URL-osoitteet suurille, keskisuurille ja pienille valtioille. WordPress 3.4 -toiminto get_custom_header palauttaa mukautetun otsikkobootin, joka sisältää kaikki tarvittavat tiedot. Jos $custom_header on oikein asetettu attachment_id ominaisuus, käsittelemme lähetetyn kuvan ja saamme välikokoja käyttämällä wp_get_attachment_image_src . Jos tällaista ominaisuutta ei ole, käsittelemme jonkin oletuskuvamme, jotta voimme hankkia keskikokoja omasta nimeämiskokouksestamme.

Kanssa frl_header_image_style injektoimme CSS: n ja JavaScriptin, jotka tekevät kuvasta reagoivan. Tämä toiminto kutsutaan automaattisesti, koska olemme määritelleet sen mukautetuksi otsikkorekisteröintiparametriksi. Mutta _markup toiminto olisi kutsuttava suoraan teemaa - ilmeisesti jonnekin sisällä header.php

Tämän vaiheen jälkeen meillä oli jo ensimmäinen oletushakemisto kuva näyttävällä tavalla.

Header testing

Vaihe 5: merkintä admin-esikatselulle

Alivalikossa -> Yläosassa on nyt näyttö, jonka avulla voimme muuttaa mukautettua otsikkokuvaa valitsemalla jonkin ennalta määritetyistä vaihtoehdoista tai lähettämällä uuden kuvan. Aion olla otsikko näyttää yksinkertaiselta.

Header admin
function frl_admin_header_image_markup() {$image = get_header_image();?>
#header-image {max-width: 1000px;max-height: 400px; }#header-image img {vertical-align: bottom;width: 100%;height: auto; }

Hallinnoijassa käytämme vain yhtä kuvakokoa (täysiä) merkinnöissämme ja saamme sen URL-osoitteen get_header_image toiminto ( frl_admin_header_image_markup on vastuussa siitä). Mutta meidän pitäisi tarjota sopiva muotoilu esikatselulle niin, että se edustaa reagoivaa käyttäytymistä ( frl_admin_header_image_style on vastuussa siitä). Molemmat toiminnot kutsutaan automaattisesti, koska olemme määrittäneet ne mukautetuiksi otsikkorekisteröintiparametreiksi. Nyt voimme nauttia täydellisestä vapaudesta ja luoda mukautetun otsikkokuvan.

Header admin

Varoituksen sana

Vapaudesta tulee vastuu. Käyttäjän joustavuuden antaminen mukautettujen kuvien lataamiseksi meillä ei ole valtaa kuvan koosta ja osuuksista. Jos lähetetty kuva ylittää antamamme leveyden ja korkeuden rajat, se on rajattava. Mutta jos kaikki tämä tapahtuu uudessa Live-teemakokonaisuudessa Appearance -> Header -näytön sijasta, otsikkokuvaa ei leikata (ainakin tällä hetkellä). Live Theme Customizer on melko uusi ominaisuus, joten tulevat parannukset näyttävät todennäköisiltä, ​​mutta nyt meidän on oltava varovaisia.

Toinen ongelma voi ilmetä, jos lähetetyllä kuvastolla on pienempi leveys kuin teemasuunnitelmamme tarkoittama. Koodimme venyttää sen täyttämään koko säiliön leveyden, jotta kuvan laatu voisi kärsiä. Totuus on mitä tahansa muokattavissa olevaa, sen luonteeltaan rikki. Käyttäjien kiinteiden ohjeiden tarjoaminen auttaa, mutta jossain määrin sinun on annettava heidän tehdä niin kuin he haluavat.

johtopäätös

Yhteenvetona: olemme nyt toteuttaneet uudet toiminnot, jotka on otettu käyttöön lähettämässä WordPress 3.4 -ohjelmassa tukemaan mukautettua otsikkokuvaa. Teimme sen herkästi käyttämällä noscript-tekniikkaa, jonka avulla voimme säätää kuvan kokoa vain selaimen leveyden mukaisesti, mutta tarjoamme myös eri kokoisia kuvia eri leveydelle. Tarjoamme teemamme kahdella ennalta määritellyllä muunnelmalla, mutta mikä tahansa kuva voidaan ladata admin-käyttöliittymän kautta ja otsikko on edelleen herkkä.

Voit ladata tässä artikkelissa käytetyn koodin ja näytekuvia täältä .


Oletko työskennellyt WordPressin mukautettujen otsikoiden kanssa? Mitä parannuksia versiossa 3.4 vaikuttaa siihen, miten työskentelet WordPressin kanssa? Liity alla olevaan keskusteluun.