Kuidas manipuleerida DOM-iga PHP abil

Viimati uuendatud dets. 7, 2022

Kui rääkida DOM-i manipuleerimisest, siis esimene asi, millele paljud meist ilmselt mõtlevad, on JavaScripti kasutamine, et teha kõik, mida me vajame.

Keel mitte ainult ei toeta selle jaoks funktsioone, vaid ES6 uuemad funktsioonid annavad meile võimsamaid viise kliendipoolsete skriptide loomiseks. Ja kui kasutate jQueryt koos WordPressiga, on teil DOM-i päringute tegemiseks sama funktsioonide kogu, mis meil on olnud aastaid.

Kuid kliendipoolne DOM-i manipuleerimine ei ole alati parim valik. Selle asemel võiksite seda teha serveri poolel. Ja mõnede PHP-sse sisseehitatud funktsioonide tõttu ei erine see palju sellest, kuidas me JavaScripti kasutame.

Peale selle, et me teeme seda muidugi serveris.

Nii et kui töötate kunagi postituse sisuga (postituse tüüp või kohandatud postituse tüüp) ja teil on vaja silte manipuleerida sarnaselt JavaScriptiga, on DomDocumentteegi kasutamine üks võimsamaid. tööriistad on teie käsutuses.

Oletame näiteks, et soovite korrata läbi kõik postituse sisus olevad lõiguelemendid.

Seda on lihtne teha, kasutades nimetatud teeki. Esiteks peaksite veenduma, et teek on oma klassis (või lihtsalt funktsioonide kogus) seadistatud:

Järgmisena seadistage sisu jaoks konks:

<?php

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

Ja selle funktsiooni raames laadige kindlasti postituse sisu teeki ja seejärel otsige üles kõik pelemendid sarnaselt JavaScriptiga (ühe oluline märkus on see, et ülaindeksite või emotikonide korral peate teabe õigesti kodeerima kasutatud):

<?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...
}

Siit saate teha mitmeid erinevaid toiminguid, näiteks lisada postituse ID iga lõigu elemendi kohandatud atribuudile. Täielik funktsioon näeks siis välja umbes selline:

<?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());
}

Muidugi saate teha ka muid asju. Üks asi on märgistuse manipuleerimine enne selle brauserisse saatmist. Teine asi on aga andmetele atribuutide lisamine, kui neid veel pole.

See tähendab, et pole mõeldud – välja arvatud võib-olla ainult omamoodi – sisu mõnele teisele postitusele.

: tommcfarlin.com