Настройка — Добавление Организационной Диаграммы Google На Страницу Wordpress

Как отобразить эту страницу на сайте Wordpress? Что мне нужно добавить или удалить? Это для статической страницы, а не для записи в блоге.

(К вашему сведению: я хочу использовать это для отображения генеалогического древа на своем веб-сайте). Я новичок в WordPress, поэтому, пожалуйста, объясните это на начальном уровне, если возможно, спасибо

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

редактировать

Хорошо, я исследовал пользовательские шаблоны страниц. Я думаю, мне нужно что-то вроде этого

Это правильно?

так вот как это должно выглядеть?

#кастомизация #страницы

Самый быстрый способ - это плагин iframe (например, «Встроить Iframe»), затем вы можете просто скопировать все это и скрестить пальцы.

Вы также можете просто скопировать/вставить тег сценария в /script в HTML-редактор сообщения.

Альтернативный и лучший метод — создать собственную страницу шаблона и добавить ее в исходный код с помощью сценария wp enqueue.

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

http://codex.wordpress.org/Stepping_Into_Templates

Самый простой пример — добавить это поверх вашего пользовательского шаблона страницы (сразу после блока комментариев):

 the_content() 

Также добавьте 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>'; } call between header and footer.

Обратите внимание, что существуют тонны Здесь есть множество вещей, которые можно переработать и улучшить, но не без углубления во многие более сложные аспекты WP, которые выходят за рамки.

Вы упомянули, что хотите нарисовать генеалогическое древо в WordPress.

Для этого я разработал плагин, и вы можете скачать его с сайта Wordpress.org.

Также имеется домашняя страница плагин генеалогического древа.

ХТХ