Incorporar gráficos Chart.js passo a passo no WordPress

Mas, como entendo que nem todos os seus projetos exigem esse layout específico, primeiro exploraremos como criar um gráfico WordPress dinâmico simples. E o mais importante, sem usar um único plugin de gráfico WordPress!

Implementação

Para a parte de implementação, trabalharei com meu costume habitual Parque infantil tema.

Estrutura do Tema

Vamos discutir os arquivos importantes:

• O single-chart.php arquivo que irá registrar o Página de gráfico único modelo personalizado será associado ao single-chart.js arquivo. Ambos serão responsáveis ​​por mostrar um único gráfico.
• O tabs.php arquivo que irá registrar o Página de guias modelo personalizado será associado ao multiple-charts.js arquivo. Ambos serão responsáveis ​​por mostrar as abas do Bootstrap que conterão gráficos.
• Dentro o functions.php arquivo, incluirei os arquivos Bootstrap e Chart.js necessários – as mesmas versões da demonstração CodePen do tutorial anterior. Dentro desta função estará a lógica para geração dos dados gráficos necessários.
• Dentro de acf pasta, exportarei em dois métodos todos os campos extras que irei utilizar para que você possa reutilizá-los em seus temas – você verá, em um momento, do que estou falando.

Aqui está a estrutura do tema:

Para sua conveniência, como sempre, todos os ativos do tema estarão disponíveis em um repositório GitHub.

Criando campos extras

Se você observar o tutorial mencionado, notará que cada dado do gráfico é representado como um objeto; este é o formato que também manteremos para nossos dados dinâmicos.

1

{

2

  bars: {

3

    bar1: ["25", "76", "64", "33", "85", "46", "25"],

4

    bar2: ["32", "68", "77", "29", "88", "65", "60"]

5

  },

6

    rótulos: [

7

    "Label 1",

8

    "Label 2",

9

    "Label 3",

10

    "Label 4",

11

    "Label 5",

12

    "Label 6",

13

    "Label 7"

14

  ],

15

  legends: { legend1: "Male", legend2: "Female" },

16

  title: "Gender Comparison Graph"

17

}

Para criar os dados, precisaremos de alguns campos. Muitos plugins podem nos ajudar a criar campos extras, como o Campos personalizados avançados (ACF) plug-in, o Vagens plugin, etc. Para este exercício, escolherei o Versão ACF PRO para aproveitar seu campo de conteúdo flexível.

Embora eu utilize um plugin premium aqui para facilitar a manipulação de dados, independentemente do plugin de sua escolha, a lógica permanecerá a mesma. Criaremos alguns campos, depois usaremos as funções do plugin para capturá-los e, finalmente, formataremos os dados antes de enviá-los em JavaScript.

Novamente, como mencionado acima, todos os campos ACF serão exportados como JSON e PHP e ficarão dentro do acf pasta do tema.

Como spoiler, para provar que apesar dos plugins do WordPress, outras ferramentas nos permitem igualmente criar campos de página adicionais, vou mostrar como criar um Configurações de tema página usando Campos de Carbono em um próximo tutorial.

Crie um único gráfico

Começaremos mostrando como incorporar um gráfico de barras verticais em uma página WordPress.

Usando o ACF, criaremos um novo grupo de campos e mapeá-lo-emos para a página que desejamos – no meu caso, esta será a página com o Página de gráfico único modelo.

Dentro desse grupo, definiremos três subcampos.

Dentro de Legendas subcampo, especificaremos dois campos adicionais para rotular os conjuntos de dados que aparecerão na parte inferior do gráfico.

O Linhas O campo de conteúdo flexível nos permitirá criar um número infinito de linhas onde cada linha representará um único conjunto de barras verticais – considere-o como um repetidor com linhas que podem ser recolhidas.

Após definir os campos, navegaremos até o administrador da página de destino e os preencheremos com os dados.

No single-chart.php arquivo, já temos uma referência ao necessário canvas elemento que Chart.js espera:

1

2

/*

3

Template Name: Single Chart Page

4

*/

5

get_header();

6

?>

7

8

 class="site-main">

9

10

    if ( have_posts() ) :

11

        while ( have_posts() ) :

12

            the_post();

13

            ?>

14

             id="post- the_ID(); ?>"  post_class(); ?>>

15

                 class="container my-5">

16

                     id="myChart">

17

18

19

20

        endwhile;

21

    endif;

22

    ?>

23

24

25

26

get_footer();

A partir daí, passaremos para o functions.php arquivo e crie uma função, que será executada apenas para páginas cujo modelo é o Página de gráfico único um, para gerar os dados do gráfico no formato desejado:

1

function get_single_chart() {

2

    $chart_single  = (object) array(

3

        'legends' => (object) array(),

4

        'labels'  => array(),

5

        'bars'    => (object) array(

6

            'bar1' => array(),

7

            'bar2' => array(),

8

        ),

9

        'title'   => '',

10

    );

11

    $chart         = get_field( 'chart' );

12

    $chart_legends = $chart['legends'];

13

14

    $chart_single->title            = esc_html( $chart['title'] );

15

    $chart_single->legends->legend1 = esc_html( $chart_legends['legend1'] );

16

    $chart_single->legends->legend2 = esc_html( $chart_legends['legend2'] );

17

18

    foreach ( $chart['rows'] as $row ) :

19

        array_push( $chart_single->labels, esc_html( $row['label'] ) );

20

        array_push( $chart_single->bars->bar1, esc_html( $row['bar1'] ) );

21

        array_push( $chart_single->bars->bar2, esc_html( $row['bar2'] ) );

22

    endforeach;

23

24

    return $chart_single;

25

}

Aqui está um exemplo dos dados gerados:

Passaremos esses dados pelo wp_localize_script() funcionar com a ajuda do global_obj objeto ao arquivo JavaScript associado.

1

function playground_scripts_and_styles() {    

2

    ...

3

    if ( is_page_template( 'page-templates/single-chart.php' ) ) :

4

        wp_enqueue_script( 'playground-script-single-chart', $theme_uri . '/assets/js/single-chart.js', array(), null, true );

5

        wp_localize_script(

6

            'playground-script-single-chart',

7

            'global_obj',

8

            array(

9

                'chart' => get_single_chart(),

10

            )

11

        );

12

    endif;

13

}

14

add_action( 'wp_enqueue_scripts', 'playground_scripts_and_styles' );

A seguir, no single-chart.js arquivo, pegaremos os dados do PHP usando o global_obj.chart propriedade e imprima o gráfico de barras verticais com o seguinte código:

1

Chart.defaults.font.family = "Poppins, sans-serif";

2

Chart.defaults.color = "#073b4c";

3

4

const chart = global_obj.chart;

5

6

const data = {

7

  labels: chart.labels,

8

  conjuntos de dados: [

9

    {

10

      label: chart.legends.legend1,

11

      data: chart.bars.bar1,

12

      backgroundColor: "#dc3545",

13

    },

14

    {

15

      label: chart.legends.legend2,

16

      data: chart.bars.bar2,

17

      backgroundColor: "#198754",

18

    },

19

  ],

20

};

21

22

const config = {

23

  type: "bar",

24

  data,

25

  options: {

26

    plugins: {

27

      title: {

28

        display: true,

29

        text: chart.title,

30

        position: "top",

31

        font: {

32

          size: 25,

33

        },

34

        padding: {

35

          top: 15,

36

          bottom: 15,

37

        },

38

      },

39

      legend: {

40

        position: "bottom",

41

        labels: {

42

          padding: 30,

43

          font: {

44

            size: 14,

45

          },

46

        },

47

      },

48

      tooltip: {

49

        enabled: false,

50

      },

51

    },

52

    scales: {

53

      y: {

54

        ticks: {

55

          crossAlign: "left",

56

          callback: function (val) {

57

            return `${val}%`;

58

          },

59

        },

60

      },

61

    },

62

  },

63

};

64

65

const ctx = document.getElementById("myChart").getContext("2d");

66

new Chart(ctx, config);

Integre guias Bootstrap com gráficos

Vamos agora dar um passo adiante e recriar o layout do tutorial anterior.

Usando o ACF, criaremos um novo campo de conteúdo flexível e mapeá-lo-emos para a página que desejamos – no meu caso, esta será a página com o Página de guias modelo.

Para cada aba definiremos dois campos: seu nome e os dados do gráfico incorporado.

Os subcampos do Gráfico campo do grupo são iguais aos campos do Gráfico campo de grupo do Página de gráfico único modelo.

Após definir os campos, navegaremos até o administrador da página de destino e criaremos quantas abas quisermos.

Cada guia ficará assim:

No tabs.php arquivo, percorreremos as guias e, para cada uma, criaremos o apropriado canvas elemento que Chart.js espera:

1

2

/*

3

Template Name: Tabs Page

4

*/

5

get_header();

6

?>

7

8

 class="site-main">

9

10

    if ( have_posts() ) :

11

        while ( have_posts() ) :

12

            the_post();

13

            $tabs = get_field( 'tabs' );

14

            ?>

15

             id="post- the_ID(); ?>"  post_class(); ?>>

16

                 class="container my-5">

17

                     class="nav nav-tabs" id="myTab" role="tablist">

18

19

                        foreach ( $tabs as $key => $tab ) :

20

                            $active_class  = 0 === $key ? ' active' : '';

21

                            $aria_selected = 0 === $key ? true : false;

22

                            $number        = ++$key;

23

                            ?>

24

                             class="nav-item" role="presentation">

25

                                 class="nav-link echo $active_class; ?>" id="chart echo $number; ?>-tab" data-bs-toggle="tab" data-bs-target="#chart echo $number; ?>-tab-pane" type="button" role="tab" aria-controls="chart echo $number; ?>-tab-pane" aria-selected=" echo $aria_selected; ?>">

26

                                     echo esc_html( $tab['title'] ); ?>

27

28

29

                         endforeach; ?>

30

31

                     class="tab-content mt-5" id="myTabContent">

32

33

                        foreach ( $tabs as $key => $tab ) :

34

                            $active_class = 0 === $key ? ' show active' : '';

35

                            $number       = ++$key;

36

                            ?>

37

                             class="tab-pane fade echo $active_class; ?>" id="chart echo $number; ?>-tab-pane" role="tabpanel" aria-labelledby="chart echo $number; ?>-tab" tabindex="0">

38

                                 id="myChart echo $number; ?>">

39

40

                         endforeach; ?>

41

42

43

44

45

        endwhile;

46

    endif;

47

    ?>

48

49

50

51

get_footer();

A partir daí, passaremos para o functions.php arquivo e crie uma função, que será executada apenas para páginas cujo modelo é o Página de guias um, para gerar os dados do gráfico no formato desejado:

1

function get_multiple_charts() {

2

    $charts = array();

3

    $tabs   = get_field( 'tabs' );

4

    foreach ( $tabs as $tab ) :

5

        $chart_single  = (object) array(

6

            'legends' => (object) array(),

7

            'labels'  => array(),

8

            'bars'    => (object) array(

9

                'bar1' => array(),

10

                'bar2' => array(),

11

            ),

12

            'title'   => '',

13

        );

14

        $chart         = $tab['chart'];

15

        $chart_legends = $chart['legends'];

16

17

        $chart_single->title            = esc_html( $chart['title'] );

18

        $chart_single->legends->legend1 = esc_html( $chart_legends['legend1'] );

19

        $chart_single->legends->legend2 = esc_html( $chart_legends['legend2'] );

20

21

        foreach ( $chart['rows'] as $row ) :

22

            array_push( $chart_single->labels, esc_html( $row['label'] ) );

23

            array_push( $chart_single->bars->bar1, esc_html( $row['bar1'] ) );

24

            array_push( $chart_single->bars->bar2, esc_html( $row['bar2'] ) );

25

        endforeach;

26

        array_push( $charts, $chart_single );

27

    endforeach;

28

29

    return $charts;

30

}

Aqui está um exemplo dos dados gerados:

Passaremos esses dados pelo wp_localize_script() funcionar com a ajuda do global_obj objeto ao arquivo JavaScript associado.

1

function playground_scripts_and_styles() {

2

    ...

3

    if ( is_page_template( 'page-templates/tabs.php' ) ) :

4

        wp_enqueue_script( 'playground-script-multiple-charts', $theme_uri . '/assets/js/multiple-charts.js', array(), null, true );

5

        wp_localize_script(

6

            'playground-script-multiple-charts',

7

            'global_obj',

8

            array(

9

                'charts' => get_multiple_charts(),

10

            )

11

        );

12

    endif;

13

}

14

add_action( 'wp_enqueue_scripts', 'playground_scripts_and_styles' );

A seguir, no multiple-charts.js arquivo, pegaremos os dados PHP usando o global_obj.charts propriedade e imprima os gráficos de barras verticais com o mesmo código que usamos no tutorial anterior.

1

const tabEls = document.querySelectorAll('button[data-bs-toggle="tab"]');

2

3

Chart.defaults.font.family = "Poppins, sans-serif";

4

Chart.defaults.color = "#073b4c";

5

6

initializeSingleChart(0);

7

8

tabEls.forEach(function (tabEl) {

9

  tabEl.addEventListener("shown.bs.tab", function (event) {

10

    const index = Array.from(tabEls).indexOf(event.target);

11

    initializeSingleChart(index);

12

  });

13

});

14

15

function initializeSingleChart(index) {

16

  const chart = global_obj.charts[index];

17

  const chartEl = `myChart${++index}`;

18

  const chartInstance = Chart.getChart(chartEl);

19

20

  if (chartInstance !== undefined) {

21

    chartInstance.destroy();

22

  }

23

24

  const data = {

25

    labels: chart.labels,

26

    conjuntos de dados: [

27

      {

28

        label: chart.legends.legend1,

29

        data: chart.bars.bar1,

30

        backgroundColor: "#dc3545"

31

      },

32

      {

33

        label: chart.legends.legend2,

34

        data: chart.bars.bar2,

35

        backgroundColor: "#198754"

36

      }

37

    ]

38

  };

39

40

  const config = {

41

    type: "bar",

42

    data,

43

    options: {

44

      plugins: {

45

        title: {

46

          display: true,

47

          text: chart.title,

48

          position: "top",

49

          font: {

50

            size: 25

51

          },

52

          padding: {

53

            top: 15,

54

            bottom: 15

55

          }

56

        },

57

        legend: {

58

          position: "bottom",

59

          labels: {

60

            padding: 30,

61

            font: {

62

              size: 14

63

            }

64

          }

65

        },

66

        tooltip: {

67

          enabled: false

68

        }

69

      },

70

      scales: {

71

        y: {

72

          ticks: {

73

            crossAlign: "left",

74

            callback: function (val) {

75

              return `${val}%`;

76

            }

77

          }

78

        }

79

      }

80

    }

81

  };

82

83

  const ctx = document.getElementById(chartEl).getContext("2d");

84

  new Chart(ctx, config);

85

}

Conclusão

Feito! Esse foi um tutorial muito grande, pessoal, mas espero que vocês tenham aprendido muito e agora tenham um bom entendimento de como incorporar gráficos Chart.js no WordPress em layouts personalizados sem ter que incorporar um plugin de gráfico do WordPress.

Claro, aqui trabalhamos com o framework Bootstrap e o plugin ACF, mas a metodologia permanece a mesma independente do framework front-end/CSS ou plugin de campos que você vai usar.

Como sempre, muito obrigado pela leitura!