web-dev-qa-db-fra.com

Ajouter google organigramme à la page wordpress

Comment afficher cette page sur un site Wordpress? Que dois-je ajouter ou supprimer? Ceci est pour une page statique pas un article de blog.

(Pour votre information, je souhaite utiliser ceci pour afficher un arbre généalogique sur mon site). Je suis un débutant wordpress alors s'il vous plaît expliquer cela à un niveau débutant si possible merci

<html>
  <head>
    <script type='text/javascript' src='https://www.google.com/jsapi'></script>
    <script type='text/javascript'>
      google.load('visualization', '1', {packages:['orgchart']});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Name');
        data.addColumn('string', 'Manager');
        data.addColumn('string', 'ToolTip');
        data.addRows([
          [{v:'Mike', f:'Mike<div style="color:red; font-style:italic">President</div>'}, '', 'The President'],
          [{v:'Jim', f:'Jim<div style="color:red; font-style:italic">Vice President</div>'}, 'Mike', 'VP'],
          ['Alice', 'Mike', ''],
          ['Bob', 'Jim', 'Bob Sponge'],
          ['Carol', 'Bob', '']
        ]);
        var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
        chart.draw(data, {allowHtml:true});
      }
    </script>
  </head>

  <body>
    <div id='chart_div'></div>
  </body>
</html>

modifier

Ok, j'ai donc recherché des modèles de page personnalisés. Je pense que j'ai besoin de quelque chose comme ça

    <?php
    /*
    Template Name: GoogleOrgChart
    */
    ?>

    <?php get_header(); ?>

<?php wp_enqueue_script( GoogleOrgChartScript, 'https://www.google.com/jsapi'); ?> 

<div id='chart_div'></div>

    <?php get_footer(); ?>

Est-ce correct?

alors est-ce que cela devrait ressembler?

    <?php
        /*
        Template Name: GoogleOrgChart
        */


        add_action('wp_print_scripts','chart_data');
        add_filter('the_content', 'chart_content');

    function chart_data() {

    ?>

    <script type='text/javascript' src='https://www.google.com/jsapi'></script>
    <script type='text/javascript'>
          google.load('visualization', '1', {packages:['orgchart']});
          google.setOnLoadCallback(drawChart);
          function drawChart() {
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Name');
            data.addColumn('string', 'Manager');
            data.addColumn('string', 'ToolTip');
            data.addRows([
              [{v:'Mike', f:'Mike<div style="color:red; font-style:italic">President</div>'}, '', 'The President'],
              [{v:'Jim', f:'Jim<div style="color:red; font-style:italic">Vice President</div>'}, 'Mike', 'VP'],
              ['Alice', 'Mike', ''],
              ['Bob', 'Jim', 'Bob Sponge'],
              ['Carol', 'Bob', '']
            ]);
            var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
            chart.draw(data, {allowHtml:true});
          }
    </script>
<?php
    }

    function chart_content() {

        return '<div id="chart_div"></div>';
    }
?>

    <?php get_header(); ?>

    <?php the_content(); ?>

    <?php get_footer(); ?>
customizationpages
1
user3657

Le moyen le plus rapide serait un plugin iframe (comme "Embed Iframe"), vous pouvez simplement copier le tout et croiser les doigts.

Vous pouvez également simplement copier/coller de la balise script vers/script dans l'éditeur html d'un message.

La meilleure méthode consiste à créer votre propre page de modèle personnalisé et à la jeter dans le code source à l'aide du script de mise en file d'attente wp.

http://codex.wordpress.org/Function_Reference/wp_enqueue_script

http://codex.wordpress.org/Stepping_Into_Templates

1
Wyck

Un exemple très basique serait d’ajouter ceci au-dessus de votre modèle de page personnalisé (juste après le bloc de commentaires):

add_action('wp_print_scripts','chart_data');
add_filter('the_content', 'chart_content');

function chart_data() {

    ?>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
      google.load('visualization', '1', {packages:['orgchart']});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Name');
        data.addColumn('string', 'Manager');
        data.addColumn('string', 'ToolTip');
        data.addRows([
          [{v:'Mike', f:'Mike<div style="color:red; font-style:italic">President</div>'}, '', 'The President'],
          [{v:'Jim', f:'Jim<div style="color:red; font-style:italic">Vice President</div>'}, 'Mike', 'VP'],
          ['Alice', 'Mike', ''],
          ['Bob', 'Jim', 'Bob Sponge'],
          ['Carol', 'Bob', '']
        ]);
        var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
        chart.draw(data, {allowHtml:true});
      }
</script>
    <?php
}

function chart_content() {

    return '<div id="chart_div"></div>';
}

Ajoutez également un appel the_content() entre l'en-tête et le pied de page.

Notez qu'il y a des tonnes de choses qui peuvent être retravaillées et améliorées, mais pas sans entrer dans beaucoup d'aspects plus complexes de WP qui sont hors de portée.

0
Rarst

Vous avez mentionné que vous vouliez dessiner un arbre généalogique dans wordpress.

J'ai développé un plugin pour cela et vous pouvez le télécharger à partir du site Web Wordpress.org.

Il existe également une page d'accueil pour le plugin de l'arbre généalogique .

HTH

0
user3720