web-dev-qa-db-fra.com

Comment convertir les résultats de WP_Query (de type publication personnalisée avec champs personnalisés) en JavaScript?

J'utilise DataTables sur cette page .

Cela fonctionne très bien, sauf que j'ai eu du mal à faire fonctionner les files d'enfants.

Je crois que ce que je dois faire est de convertir les résultats de WP_Query avec les champs personnalisés associés en un tableau JavaScript.

Il est assez facile d'obtenir les résultats de WP_Query de cette manière, mais lorsque vous ajoutez des champs personnalisés au mélange, je suis bloqué.

Des idées sur la façon dont cela peut être accompli? Vous pouvez voir le code source de la page ici .

wp-queryjqueryjavascriptjson
1
davemackey

comment écrire un WP_Query qui retourne les données du champ personnalisé

Ce n'est généralement pas nécessaire. Vous pouvez simplement accéder aux métadonnées pour chaque message de la requête individuellement (comme vous le faites déjà). Vous pouvez également parcourir plusieurs fois la requête dans une page (il rembobine pour démarrer automatiquement, c'est ce que fait while( have_posts() ) part).

Si vous êtes préoccupé par l’aspect performance - l’accès aux métadonnées est fortement mis en cache dans la mémoire (ou le cache d’objets). Récupérer les métadonnées plusieurs fois lors du chargement de la page ne causera pas de requêtes en double, elles ne seront récupérées qu'une seule fois et réutilisées.

1
Rarst

Voici un exemple simplifié de ce que vous voudrez peut-être faire: Utilisez le JsonSerializable :

class \JsonQuery extends \WP_Query implements \JsonSerializable
{
    public function jsonSerialize()
    {
        return array_map( function( \WP_Post $post ) {
            return array_merge( 
                $post->to_array(),
                get_post_custom( $post->ID )
            );
        }, $this->get_posts() )
    }
}

C'est aussi simple que ça (… ci-dessus). Maintenant, interrogez tout ce dont vous avez besoin et

// Enqueue script here!
$query = new \JsonQuery( [
    /* arguments you use in normal \WP_Query */
] );
wp_localize_script( 'script-handle', 'globalJsVarName', json_encode( $query ) );

Ensuite, vous avez votre requête codée JSON avec toutes les données de publication personnalisées.

Remarque:

  1. Le code ci-dessus n’est pas testé (en fait j’ai eu deux appels téléphoniques entre eux, donc il se peut qu’il soit légèrement décalé ici et là)
  2. Assurez-vous de mettre le script en file d'attente au préalable afin de pouvoir localiser les données le concernant.
  3. Assurez-vous de mettre le JS dans le pied de page (dernier argument lors de l'enregistrement) ou d'interroger suffisamment tôt - vous n'êtes pas sûr que cela fonctionne.

Modifier

Vous voudrez peut-être écrire un décorateur pour \WP_Query au lieu de l'étendre. Internet vous renseignera sur les avantages/inconvénients, inutile de le répéter ici.

1
kaiser

D'accord, je pense que je comprends ce que vous demandez, n'hésitez pas à me dire que je suis dans le champ gauche.

Tout d'abord, vous voudrez jeter un coup d'œil à ceci: https://aarontgrogg.com/blog/2015/12/16/getting-to-know-and-adding-json -ld-to-a-wordpress-site/

Maintenant, je l'utilisais spécifiquement pour obtenir des données de schéma, mais je pense que vous pourriez fournir d'autres types de charges utiles, telles que javascript.

La question principale est alors de savoir comment intégrer les données de champ personnalisées dans votre charge utile, ce que je pense être ce que vous demandez réellement.

Quoi qu'il en soit, en utilisant la méthode décrite dans ce lien pour créer mon JSON, j'ai ceci dans ma tête -

<?php include('json-ld.php');?>
<script type="application/ld+json"><?php echo json_encode($payload); ?></script>

Ensuite, dans mon fichier json-ld.php, j'ai ceci:

<?php 
// JSON - LD for Reaction 

// Global Call

function get_post_data() {
    global $post;
    return $post;
}


$post_data = get_post_data();
$payload["@context"] = "http://schema.org/";

//blog posts

if (is_singular('post')) {

    //variables for the post

    $post_url = get_permalink();
    $post_thumb = wp_get_attachment_url(get_post_thumbnail_id($post->ID));
    $excerpt= get_the_excerpt($post->ID); //  grab the post excerpt.
    $author_select = get_field('author', $post->ID);
    $moddatetime = new DateTime($post_data->post_date); 


    // getting the team member


    if ($author_select == 'reaction') {

        $postauthor = 'Reaction';

    } 

    else if ($author_select == 'guest') { 

         $postauthor = get_field('guest_writer_name', $post->ID);

    } else {

        $author = get_field('team_member', $post->ID);
            foreach($author as $member) {               
            $postauthor = $member->post_title;
        }

    }

    // getting the tags

    $posttags = get_the_tags();
    if ($posttags) {
      foreach($posttags as $tag) {
       $value .= $tag->name . ', '; 
      }
    }
    $value = rtrim($value,', ');


    //payload

    $payload["@type"] = "blogPost";
    $payload["url"] = $post_url;
    $payload["creator"] = array(
        "@type" => "Person", 
        "name" => $postauthor, // outputs my post author as per the calls above
        ); 

    $payload["headline"] = $post_data->post_title; // works
    $payload["datePublished"] = $moddatetime->format(DateTime::ISO8601);  // works
    $payload["image"] = $post_thumb;
    $payload["description"] = $excerpt; // works
    $payload["about"] = $value; // works

}


// home page

if (is_front_page()) {

    $logourl = get_site_url();


    $payload["@type"] = "Organization";
    $payload["name"] = "Reaction Marketing";
    $payload["logo"] = $logourl . '/reaction-logo.png';
    $payload["url"] = get_site_url();
    $payload["sameAs"] = array("http://Twitter.com/reaction", "https://www.facebook.com/ReactionMarketing", "http://www.linkedin.com/company/reaction-marketing");
    $payload["contactPoint"] = array(array("@type" => "ContactPoint", "telephone" => "+1 403 346 6580", "email" => "[email protected]", "contactType" => "sales"));
}

?>

Mon résultat final est un schéma approprié à la page et à la publication. Exemple de sortie de page d'accueil ici:

<script type='application/ld+json'>{"@context":"http:\/\/schema.org","@type":"WebSite","url":"http:\/\/reaction.ca\/","name":"Reaction","alternateName":"Reaction","potentialAction":{"@type":"SearchAction","target":"http:\/\/reaction.ca\/?s={search_term_string}","query-input":"required name=search_term_string"}}</script>
<script type='application/ld+json'>{"@context":"http:\/\/schema.org","@type":"Organization","url":"http:\/\/reaction.ca\/","sameAs":["https:\/\/www.facebook.com\/ReactionMarketing","https:\/\/www.instagram.com\/reaction","https:\/\/www.linkedin.com\/company\/reaction-marketing","https:\/\/Twitter.com\/reaction"],"name":"Reaction Marketing","logo":"http:\/\/reaction.ca\/uploads\/REACTION-RGB.jpg"}</script>

Évidemment, ceci est spécifique au schéma, mais vous pouvez voir que j'ai appelé des données spécifiques à divers champs personnalisés (à l'aide d'ACF). Vous pouvez voir précisément comment mes variables sont appelées dans les articles de blog.

Est-ce que cela semble correspondre à ce que vous demandez?

0
Faye