Muokkaa kuvasäiliöitä palvelinpuolella WordPressissä

Last updated 9. November 2022

Inhalt

Aina kun rakennat mukautettuja ratkaisuja muille ihmisille, saatat joutua käsittelemään vivahteita, kuinka WordPress renderöi sisältöä.

Tämä johtuu yleensä teemasta, vähintään yhdestä laajennuksesta tai molempien yhdistelmästä. Ja jos sinun on työskenneltävä kuvien kanssa erikseen, se voi olla pieni haaste. Ongelma edes yrittää kirjoittaa tällaista viestiä on, että on vaikea edes kuvata tilannetta, jossa saatat tarvita jotain tällaista.

Silti aion tehdä parhaani. Toisin sanoen haluan kertoa kuinka muokata kuvasäilöjä palvelinpuolella ennen niiden renderöimistä asiakaspuolella ja tehdä se PHP:n DOMDocument-kirjaston avulla.

Kuulostaako paljon? Toivottavasti pystyn rikkomaan tämän riittävän helposti.

Oletetaan ennen koodiin perehtymistä, että sinulla on ne, jotka renderöivät kuvat yhdessä kappaleelementissä (tai missä tahansa lohkotason elementissä) ja sinun on käärittävä jokainen elementti jonkin tyyppiseen luokkaan, jotta voit käyttää niitä se CSS:n tai JavaScriptin kautta.

Missä olemme

Joten aluksi, oletetaan, että kuvat näkyvät seuraavasti:

Ja sinun täytyy hahmontaa ne näin:

Nyt saatat tarvita tai et tarvitse tilaa niiden väliin. Sillä ei ole väliä, koska voit hallita tätä CSS:n kautta. Mutta voit hallita sitä, kuinka tämä lähetetään langan kautta asiakaspuolelle.

Tätä varten tarvitset muutaman asian:

Pääsy PHP:n DOMDocument-kirjastoon,
Ymmärtää kuinka käsitellä sisältöä WordPressin the_content koukun avulla,
Strategia siitä, miten haluat kääriä kuvat.

Käyn läpi kaikki nämä koodissa, mutta riittää, kun sanon, että aion kääriä jokaisen kuvan kappaleelementtiin. Voit tietysti valita tehdä mitä haluat.

Kuinka tehdä se

Varmista ensin, että olet ilmoittanut käyttäväsi DOM-asiakirjan sisältöä luokkasi yläpuolella :

<?php

namespace Acme;

use DOMDocument;

class AcmeContentSubscriber
{
  // ...
}

Siirry seuraavaksi ja luo koukku the_content -tiedostoon. Kuinka teet tämän, riippuu siitä, kuinka olet järjestänyt koodisi (olipa se sitten OOP tai ei). Tässä esimerkissä aion näyttää hyvin yksinkertaisen esimerkin siitä, kuinka se tehdään :

<?php

public function contentSubscriber()
{
  add_action( 'the_content', [$this, 'addImageAttributes']);
}

Sen jälkeen sinun on tehtävä vähän työtä (joka kaikki on alla, mutta tämän viestin ulkopuolella). Tämä sisältää:

muuntaa HTML-kokonaisuuksien koodausta,
luoda DOM-asiakirjan esiintymä,
lataamalla viestin HTML-koodi saapuvasta sisällöstä

Koodissa sen pitäisi näyttää tältä :

<?php

public function addImageAttributes($content)
{

    $content  = mb_convert_encoding($content, 'HTML-ENTITIES', "UTF-8");
    $document = new DOMDocument();

    libxml_use_internal_errors(true);
    $document->loadHTML(utf8_decode($content));

    // ...
}

Seuraavaksi sinun on toistettava img – elementit ja varmistettava, että asetat oikean määritteen. Voit valita luokan käytön, dataattribuutin tai jonkin muun käytön. Tällä osuudella ei ole väliä.

Huomaa, että tietyn kuvan kohdalla sinun kannattaa tarkistaa, että seuraava elementti ei ole kappaleelementti, koska olen valinnut kuvan rivityksen sen. Toisin sanoen, jos seuraava elementti ei ole kappale, käärimme elementin kappaleelementtiin.

Tätä varten päätoiminnon rungon tulisi näyttää tältä :

<?php

public function addImageAttributes($content)
{

    $content  = mb_convert_encoding($content, 'HTML-ENTITIES', "UTF-8");
    $document = new DOMDocument();

    libxml_use_internal_errors(true);
    $document->loadHTML(utf8_decode($content));

    $images = $document->getElementsByTagName('img');
    foreach ($images as $image) {
        $image->setAttribute('class', 'acme-iamge');
        if ($image->nextSibling->tagName !== 'p') {
            $this->wrapImage($document, $image);
        }
    }

    // ...
}

Tällöin elementin käärimisestä kappaleelementtiin vastaavan funktion pitäisi näyttää tältä :

<?php

/**
 * This function is used to wrap individual images in a paragraph element.
 *
 * @param $document The DOM Document which is to be rendered.
 * @param $image    The image to wrap with the new paragraph element.
 */
private function wrapImage($document, $image)
{
    if (null === $image) {
        return;
    }
    $wrapper = $document->createElement('p');
    $wrapper->setAttribute('class', 'acme-image');

    $image->parentNode->replaceChild($wrapper, $image);
    if (null !== $image) {
        $wrapper->appendChild($image);
    }
}

Muista lukea koodin DocBlock ymmärtääksesi, kuinka toiminto toimii. Yksinkertaisesti sanottuna:

se hyväksyy asiakirjan esiintymän ja kuvaelementin,
luo kappaleelementin,
lisää luokkaattribuutin
korvaa alkuperäisen kuvaelementin kappaleella,
ja lisää kuvan lapsielementiksi

Ja koska olemme perustaneet asiakirjaobjektin menetelmään, meidän ei tarvitse palauttaa mitään.

Alkuperäisen funktion lopullisen version pitäisi näyttää tältä :

<?php

public function addImageAttributes($content)
{

    $content  = mb_convert_encoding($content, 'HTML-ENTITIES', "UTF-8");
    $document = new DOMDocument();

    libxml_use_internal_errors(true);
    $document->loadHTML(utf8_decode($content));

    $images = $document->getElementsByTagName('img');
    foreach ($images as $image) {
        $image->setAttribute('class', 'acme-image');
        if ($image->nextSibling->tagName !== 'p') {
            $this->wrapImage($document, $image);
        }
    }

  return $document->saveHTML();
}

Ja tulostesi pitäisi näyttää yllä olevalta kuvalta. Muista kuitenkin; Sinun on palautettava asiakirjainstanssin tulokset WordPressiin, jotta se hahmontaa HTML-koodin oikein. Ja sitä saveHTML- toiminto tekee yllä olevassa koodissa.

: tommcfarlin.com