✅ WEB- ja WordPress -uutiset, -teemat, -laajennukset. Täällä jaamme vinkkejä ja parhaita verkkosivustoratkaisuja.

WordPress-mallit aloittelijoille: HTML-kutsu PHP

22

Eilen hahmottelin, kuinka monet meistä ovat todennäköisesti tottuneet työskentelemään WordPress-mallien kanssa.

Vaikka huolenaiheiden erottelu CSS:n ja JavaScriptin kanssa on vakaata, mallit ovat ongelmallisia aina, kun merkintöihimme on sekoitettu paljon PHP:tä.

Selvyyden vuoksi emme voi olla sisällyttämättä mallitunnisteita, koska se on WordPressin ja yleisten PHP-pohjaisten sisällönhallintajärjestelmien toimintatapa.

Ongelma ilmenee aina, kun käytämme malleja, jotka sisältävät koodia, joka tekee monimutkaisempia kutsuja eri sovellusliittymille. Vaikka esitin tämän käyttämällä WP_Queryä (ja aion tehdä niin edelleen), se ei ole vain tämä kysely.

Joka tapauksessa, mitä meidän pitäisi tehdä tämän kanssa?

WordPress-mallit: Kun HTML kutsuu PHP:tä

Ensinnäkin on tärkeää pohtia, miksi niin paljon PHP:n ja merkinnän sekoittaminen on huono idea.

On helppo sanoa, että koodin pitäminen KUIVANA on vaikeampaa (ja siinä on totuus), mutta entä jos aiomme käyttää vain yhtä kyselyä tai yhtä koodilohkoa kerran? Onko KUIVANA oleminen todella niin tärkeää?

Selvyyden vuoksi kyllä, mielestäni se on tärkeää koodin pitämisen kuivana, mutta jos aiomme käyttää puhelua vain kerran, uskon silti, että sillä on merkitystä, jos ei mistään muusta syystä kuin pitää mallikoodi yhtä puhtaana kuin mahdollista.

Ajattele asiaa näin: Aina kun haluamme näyttää otsikon, sisällön ja viestin kirjoittajan, tarvitsemme vain kolme toimintoa:

Joten kuvittele seuraavan koodin mukauttamista (jota tarkastelimme edellisessä viestissä):

<div id="content-container">

  <p>
    Oh! The garbage chute was a really wonderful idea. What an incredible smell you've discovered! Let's get out of here! 
    Get away from there... No! wait! Will you forget it? I already tried it. It's magnetically sealed! Put that 
    thing away! You're going to get us all killed.
  </p>

  <h2>List of Post Titles For Acme Post Type</h2>
  <?php
  $args = array(
    'post_status'    => 'publish',
    'post_type'      => 'acme',
    'posts_per_page' => '10'
  );
  $custom_query = new WP_Query( $args );

  if ($custom_query->have_posts()) {
    echo '<ul>';
    while ($custom_query->have_posts()) {
      $custom_query->the_post();
      echo '<li>'. get_the_title(). '</li>';
    }
    echo '</ul>';
    wp_reset_postdata();
  }
  ?>

  <p>
    Absolutely, Your Worship. Look, I had everything under control until you led us down here. You know, it's not 
    going to take them long to figure out what happened to us. It could be worst... It's worst. 
    There's something alive in here! That's your imagination. Something just moves past my leg! 
    Look! Did you see that? What? Help!
  </p>

</div><!-- #content-container -->

Jos haluat näyttää jotain tältä:

<div id="content-container">

  <p>
    Oh! The garbage chute was a really wonderful idea. What an incredible smell you've discovered! Let's get out of here! 
    Get away from there... No! wait! Will you forget it? I already tried it. It's magnetically sealed! Put that 
    thing away! You're going to get us all killed.
  </p>

  <h2>List of Post Titles For Acme Post Type</h2>
  <?php acme_get_titles(); ?>

  <p>
    Absolutely, Your Worship. Look, I had everything under control until you led us down here. You know, it's not 
    going to take them long to figure out what happened to us. It could be worst... It's worst. 
    There's something alive in here! That's your imagination. Something just moves past my leg! 
    Look! Did you see that? What? Help!
  </p>

</div><!-- #content-container -->

Paljon siistimpää, eikö? Mutta näkemäsi on muutakin kuin tämä. Erityisesti, jos aiomme työskennellä HTML:n kanssa kulissien takana, meidän on varmistettava, että desinfioimme sen oikein käyttämällä jotakin, kuten wp_kses :

<?php

/**
 * Runs a custom query to get the most recent ten published articles of the
 * acme post type and then prints a sanitized list of the the titles.
 */
function acme_get_titles()
{

  $args = array(
    'post_status'    => 'publish',
    'post_type'      => 'acme',
    'posts_per_page' => '10'
  );
  $custom_query = new WP_Query( $args );

  if ($custom_query->have_posts()) {
    $html = '<ul>';
    while ($custom_query->have_posts()) {
      $custom_query->the_post();
      $html .= '<li>'. get_the_title(). '</li>';
    }
    $html .= '</ul>';
    wp_reset_postdata();
  }

  echo _acme_sanitize_titles($html);
}

/**
 * Uses the WordPress wp_kses() API to sanitize and echo the incoming markup.
 *
 * @param string $html The HTML to sanitize.
 */
function _acme_sanitize_titles($html) {

  if(empty($html)) {
    echo $html;
  }

  echo wp_kses(
    $html,
    array(
      'ul' => array(),
      'li' => array(),
    );
  );
}

Jotkin kehittäjät pitävät nyt ajatusta HTML:n toistamisesta PHP:stä WordPress-malliin. Ja tämä ei ole turhaa.

Tämän sarjan aikana on kuitenkin tehtävä tasapainoilu: Kyse on siitä, miten ihmiset usein esittävät tietoa, ja sitten siivotaan sitä hieman.

Jos haluat viedä tätä hieman pidemmälle, on mahdollista – eikä ollenkaan huono idea – erottaa WP_Query-funktio vielä enemmän käyttämään get_template_part -funktiota. Tämä sisältää hieman puhtaampaa koodia, mutta vaatii myös, että tarkastelemme tätä toimintoa perusteellisesti.

Ja se on jotain, mitä en ole kiinnostunut tekemään tässä sarjassa.

Kuinka meidän pitäisi visualisoida tämä?

Mitä tulee malliin, voimme käsittää tämän parilla eri tavalla.

  1. Joissakin mallikielissä on hyödyllistä ajatella, että PHP syöttää tiedot malliin,
  2. Yllä olevassa esimerkissä on hyödyllistä ajatella mallitiedostoa, joka pyytää tietoja PHP-skriptistä.

Joten yllä olevassa esimerkissä meillä on funktio, joka sijaitsee esimerkiksi tiedostossa functions.php ja sitä kutsuva mallitiedosto:

Käydä järkeen? Mutta miten tämä saavutetaan – tuon yhden funktiokutsun takana olevan koodin suhteen – on julkaisun sisältöä.

Ja sitä aion tarkastella seuraavassa postauksessa.

Tämä verkkosivusto käyttää evästeitä parantaakseen käyttökokemustasi. Oletamme, että olet kunnossa, mutta voit halutessasi kieltäytyä. Hyväksyä Lisätietoja