✅ Notícias, temas e plug-ins da WEB e do WordPress. Aqui compartilhamos dicas e as melhores soluções para sites.

Modelos WordPress para Iniciantes: HTML Chamando PHP

21

Ontem, esbocei como conceituar quantos de nós provavelmente estão acostumados a trabalhar com modelos do WordPress.

Embora a separação de preocupações com CSS e JavaScript seja sólida, os modelos são problemáticos sempre que há muito PHP misturado com nossa marcação.

Para ser claro, não podemos deixar de incluir tags de modelo porque essa é a natureza de como o WordPress e os sistemas gerais de gerenciamento de conteúdo baseados em PHP funcionam.

O problema surge sempre que trabalhamos com templates que contêm código fazendo chamadas mais complexas para várias APIs. Embora eu tenha demonstrado isso usando WP_Query (e continuarei a fazê-lo), não é apenas essa consulta.

De qualquer forma, porém, o que devemos fazer com isso?

Modelos do WordPress: quando o HTML chama o PHP

Primeiro, é importante pensar por que misturar tanto PHP e marcação é uma má ideia.

É fácil dizer que torna mais difícil manter o código DRY (e há verdade nisso), mas e se formos usar apenas uma única consulta ou um único bloco de código uma vez? Ser DRY é realmente tão importante então?

Para ser claro, sim, acho que é importante manter o código DRY, mas se vamos usar uma chamada apenas uma vez, ainda acho que isso importa se por nenhum outro motivo além de manter o código do modelo tão limpo quanto possível.

Pense desta forma: sempre que quisermos exibir o título, o conteúdo e o autor do post, tudo o que precisamos chamar são três funções:

Então imagine adaptar o seguinte código (que é o que vimos no post anterior):

<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 -->

Para parecer algo assim:

<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 -->

Muito mais limpo, certo? Mas há mais no que você vê do que isso. Especificamente, se vamos trabalhar com HTML nos bastidores, precisamos ter certeza de que estamos limpando-o corretamente usando algo como 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(),
    );
  );
}

Agora, a ideia de ecoar o HTML do PHP em um template do WordPress é considerada um antipadrão por alguns desenvolvedores. E isso não é sem mérito.

No entanto, há um ato de equilíbrio a ser jogado durante o curso desta série: é uma questão de apresentar como as pessoas geralmente apresentam informações e depois limpá-las um pouco.

Para ir um pouco mais longe, é possível – e não uma má ideia – separar ainda mais a função WP_Query para usar get_template_part. Isso traz um código mais limpo, mas também exige que analisemos essa função em profundidade.

E isso é algo que eu não estou interessado em fazer nesta série em particular.

Como devemos visualizar isso?

Quando se trata de modelagem, podemos conceituar isso de duas maneiras diferentes.

  1. Em algumas linguagens de template, é útil pensar no PHP injetando as informações no template,
  2. No exemplo acima, é útil pensar no arquivo de modelo solicitando as informações do script PHP.

Portanto, no exemplo acima, temos uma função localizada em, digamos, functions.php e o arquivo de modelo chamando-a:

Faz sentido? Mas como isso é feito – em termos do código por trás dessa única chamada de função – é conteúdo para uma postagem própria.

E é isso que vou abordar no próximo post.

Fonte de gravação: tommcfarlin.com

Este site usa cookies para melhorar sua experiência. Presumiremos que você está ok com isso, mas você pode cancelar, se desejar. Aceitar Consulte Mais informação