it-swarm.com.de

Fügen Sie Google Organigramm zur WordPress-Seite hinzu

Wie zeige ich diese Seite auf einer Wordpress-Site an? Was muss ich hinzufügen oder entfernen? Dies ist für eine statische Seite kein Blogeintrag.

(Zu Ihrer Information: Ich möchte dies verwenden, um einen Stammbaum auf meiner Website anzuzeigen.) Ich bin ein WordPress-Anfänger, bitte erkläre dies auf Anfängerebene, wenn möglich, danke

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

bearbeiten

Ok, ich habe nach benutzerdefinierten Seitenvorlagen gesucht. Ich glaube, ich brauche so etwas

    <?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(); ?>

Ist das richtig?


so sollte es also aussehen?

    <?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(); ?>
1
user3657

Der schnellste Weg wäre ein Iframe-Plugin (wie "Embed Iframe"), Sie können dann einfach alles kopieren und die Daumen drücken.

Möglicherweise können Sie auch einfach vom Skript-Tag nach/script in den HTML-Editor eines Posts kopieren/einfügen.

Die alternative und beste Methode besteht darin, eine eigene benutzerdefinierte Vorlagenseite zu erstellen und diese mit dem wp-Enqueue-Skript in den Quellcode zu werfen.

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

http://codex.wordpress.org/Stepping_Into_Templates

1
Wyck

Ein sehr einfaches Beispiel wäre das Hinzufügen dieses Elements zu Ihrer benutzerdefinierten Seitenvorlage (direkt nach dem Kommentarblock):

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>';
}

Fügen Sie außerdem einen the_content()-Aufruf zwischen Kopf- und Fußzeile hinzu.

Beachten Sie, dass es hier Tonnen Dinge gibt, die überarbeitet und verbessert werden können, aber nicht, ohne auf viel komplexere Aspekte von WP einzugehen. die außerhalb des Anwendungsbereichs liegen.

0
Rarst

Sie erwähnten, dass Sie einen Stammbaum in WordPress zeichnen wollten.

Ich habe ein Plugin dafür entwickelt und Sie können es von der Wordpress.org-Website herunterladen.

Es gibt auch eine Homepage für das Stammbaum-Plugin .

HTH

0
user3720