✅ WEB- och WordPress -nyheter, teman, plugins. Här delar vi tips och bästa webbplatslösningar.

Hur man manipulerar DOM med PHP

24

När det gäller att manipulera DOM är det första som många av oss troligen tänker på att använda JavaScript för att göra vad vi än behöver göra.

Språket stöder inte bara funktioner för att göra detta, nyare funktioner i ES6 ger oss kraftfullare sätt att bygga skript på klientsidan. Och om du använder jQuery med WordPress, så har du samma bibliotek med funktioner för, ahem, fråga efter DOM som vi har haft i flera år.

Men att manipulera DOM på klientsidan är inte alltid det bästa alternativet. Istället kanske du vill göra det på serversidan. Och på grund av några av funktionerna inbyggda i PHP, skiljer det sig inte mycket från hur vi gör saker med JavaScript.

Förutom, naturligtvis, gör vi det på servern.

Så om du någonsin arbetar med innehållet för ett inlägg (en inläggstyp eller en anpassad inläggstyp, för den delen) och du behöver manipulera taggar ungefär som du skulle göra med JavaScript, då är DomDocumentbiblioteket en av de mest kraftfulla verktyg är ditt förfogande.

Låt oss säga att du till exempel vill iterera igenom alla styckeelement som finns i innehållet i inlägget.

Det är lätt att göra detta med hjälp av nämnda bibliotek. Först vill du se till att du har konfigurerat biblioteket i din klass (eller bara i din samling av funktioner):

Skapa sedan en krok för innehållet:

<?php

add_filter('the_content', __NAMESPACE__. 'updateParagraphElements');

Och inom den funktionen, se till att läsa in innehållet i inlägget i biblioteket och leta sedan efter alla pelement ungefär som du skulle använda JavaScript (med en viktig anmärkning är att du måste koda informationen korrekt om upphöjda eller emojis är Begagnade):

<?php

function updateParagraphElements($content) 
{
    /* If we're not on a single page or it's not the main query, 
     * we won't do anything.
     */
    if (!is_single() || !is_main_query()) {
        return $content;
    }

    // Make sure there is content to parse (and properly encode the HTML entities).
    $domDocument = new DOMDocument();
    $domContent = $domDocument->loadHTML(mb_convert_encoding($content, 'HTML-ENTITIES'));
    if (false === $domContent) {
        return $content;
    }

    $paragraphs = $domDocument->getElementsByTagName('p');
    if (0 === count($paragraphs)) {
        return $content;
    }

    // More to come...
}

Härifrån kan du göra flera olika saker som att lägga till inläggs-ID till ett anpassat attribut för varje styckeelement. Den fullständiga funktionen skulle då se ut ungefär så här:

<?php

namespace Acme;

use DOMDocument;

add_filter('the_content', __NAMESPACE__. 'updateParagraphElements');
/**
 * Updates the content by locating all of the `p` elements in the content,
 * then adds a class attribute of the post ID to them.
 *
 * The gist of the work is done in this function.
 *
 * @param string $content the post content
 *
 * @return string the updated post content with the aforemented markup.
 */
function updateParagraphElements($content) 
{
    /* If we're not on a single page or it's not the main query, 
     * we won't do anything.
     */
    if (!is_single() || !is_main_query()) {
        return $content;
    }

    // Make sure there is content to parse (and properly encode the HTML entities).
    $domDocument = new DOMDocument();
    $domContent = $domDocument->loadHTML(mb_convert_encoding($content, 'HTML-ENTITIES'));
    if (false === $domContent) {
        return $content;
    }

    $paragraphs = $domDocument->getElementsByTagName('p');
    if (0 === count($paragraphs)) {
        return $content;
    }

    // If so, iterate through the elements and add the post ID as a custom attribute.
    $updatedContent = '';
    foreach ($paragraphs as $paragraph) {
        $paragraph->setAttribute('data-id', get_the_ID());
    }

    return wp_kses_post($domDocument->saveHTML());
}

Naturligtvis finns det andra saker du kan göra också. Det är en sak att manipulera uppmärkningen innan du skickar den till webbläsaren. Det är dock en annan sak att lägga till attribut till data om de inte redan finns.

Det vill säga, ingen ordlek avsedd – förutom kanske bara slags – innehåll för ett annat inlägg.

Inspelningskälla: tommcfarlin.com

Denna webbplats använder cookies för att förbättra din upplevelse. Vi antar att du är ok med detta, men du kan välja bort det om du vill. Jag accepterar Fler detaljer