WP: Come visualizzare il nostro albero genealogico

In questo articolo mostro lo snipper per visualizzare l’albero genealogico.
Per creare graficamente l’albero ho usato la libreria visjs (Link: https://almende.github.io/vis/), che permette di avere uno schema a nodi.

La prima funzione con add_action “wp_enqueue_script” serve per aggiungere i file js e css della libreria visjs alla visualizzazione.

La seconda funzione è la creazione di uno shortcode, in modo che posso usare questo codice in qualunque articolo o pagina che ho fatto. Al momento è poco utile perchè mi visualizza tutte le persone che ci sono nel CPT “Persone”, però qualora si volesse espandere aggiungendo più alberi genealogici diversi si può passare un parametro alla function printAllPersone_Shortcode( $atts ) e creare delle viste personalizzate.

Link utili:

https://developer.wordpress.org/plugins/post-types/registering-custom-post-types/

<?php
function wpse_load_plugin_css() {
    wp_enqueue_style( 'style for visjs', "https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css" );
    wp_enqueue_script('script for visjs', "https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js");
}
add_action( 'wp_enqueue_scripts', 'wpse_load_plugin_css' );

function printAllPersone_Shortcode( $atts )
{
  if(!is_user_logged_in())
    return "Login to view!";
  //I parametri li usero successivamente
   $a = shortcode_atts( array(
      'name' => 'world'
   ), $atts );

   //Qui stampo tutte le persone
   $Return="";

     $args = array(
       'post_type'   => 'persona',
        'numberposts'       => -1,
       );

     $ElencoPersone = get_posts( $args );

     $nodes="";
     $edge="";
     foreach ($ElencoPersone as $Persona)
     {
       if(get_post_meta($Persona->ID, "meta-box-genere",true)=="F")
        $Color= "#FFC0CB";
       else
        $Color="#9999ff";
       $nodes.="{id: " . $Persona->ID . ", label: '" . get_post_meta($Persona->ID, "meta-box-cognome",true)." ". get_post_meta($Persona->ID, "meta-box-nome",true). "', color:\"". $Color . "\"},";
       $edge.="{"." from: " . get_post_meta($Persona->ID, "meta-box-padre",true).", to: ".$Persona->ID."},";
       $edge.="{"." from: " . get_post_meta($Persona->ID, "meta-box-madre",true).", to: ".$Persona->ID."},";
      }

      $nodes="var nodes = new vis.DataSet([".$nodes."]);";
      $edge="var edges = new vis.DataSet([".$edge."]);";

      $Return = '<div id="mynetwork" style="height:1300px;"></div>
        <script type="text/javascript">
      ';
      $Return.= $nodes ."
      "
        . $edge;

      $Return.="
      var container = document.getElementById('mynetwork');

  // provide the data in the vis format
  var data = {
      nodes: nodes,
      edges: edges
  };
  var options = {
layout: {
  randomSeed: undefined,
  improvedLayout:true,
  hierarchical: {
    enabled:true,
    levelSeparation: 150,
    nodeSpacing: 300,
    treeSpacing: 400,
    blockShifting: true,
    edgeMinimization: true,
    parentCentralization: true,
    direction: 'UD',        // UD, DU, LR, RL
    sortMethod: 'directed'   // hubsize, directed
  }
}
}
var network = new vis.Network(container, data, options);
    </script>
      ";

      // Qui devo implementare visjs chart, esempio: http://albero.altervista.org/albero/ con pw su telegram --- doc ufficiale: https://visjs.org/
      //Iniziare stampando tutti le persone e "poi" (usando un seconda variabile) i collegamenti
      //Poi se si riesce trovare il modo di ordinarli prima di stampare, così da evitare problemi in visualizzazione

/* Questo era il codice per farlo con treant library
    $plugin_url = plugin_dir_url( __FILE__ );
    $Return.='
      <script src="'.$plugin_url.'treant-js-master/vendor/raphael.js"></script>
      <script src="'.$plugin_url.'treant-js-master/Treant.js"></script>
      ';*/


   return $Return;
}


add_shortcode( 'printAllPersone', 'printAllPersone_Shortcode' );