WordPress-在PHP页面中包含JavaScript

Question

How can i include javascript in php?

I'm trying to use an JavaScript inside WordPress to make possible use Isotope code. So, for it tried to include a "call" for the .js file in the page.php in the html.

And I need to load only in this specific page.

But it didn't work. What am I doing wrong?

This is my php file:

<?php // The default template for displaying pages ?>

<?php get_header(); ?>

<div class="bnt-container">

    <div class="content content-page">
        <main class="site-main">

            <?php 
            // Start the Loop
            if ( have_posts() ) { 
                while ( have_posts() ) { 
                    the_post(); 
                    // Include the page content
                    get_template_part( 'content', 'page' );     

                    // If comments are open or the page has at least one comment, load the comments template.
                    if ( comments_open() || get_comments_number() ) {
                        comments_template();
                    }

                // End the Loop
                } 
            }


            ?>
<?php global $post; ?>
<?php if(is_page('Projetos e Agentes')){ ?>
<script type="text/javascript" src="/includes/isotope/isotope.pkgd.js"></script>

<div class="grade2">
    <div class="column-21">
        <p><strong>CLASSIFICAÇÃO DO PROJETO</strong></p>
        <div id="filters"><button class="btn is-checked" data-filter="*">todos</button>
        <button class="buttonppp" data-filter=".ppps">parcerias público-privadas</button>
        <button class="buttonlicitacao" data-filter=".licitacoes">licitações</button>
        <button class="buttonopu" data-filter=".opeurb">operações urbanas</button>
        <button class="buttonemp" data-filter=".empr">empreendimentos privados</button>
        </div>
        <p><strong>ORDENAR POR</strong></p>
        <div id="sorts"><button class="btn is-checked" data-sort-by="name">ordem alfabética</button>
        <button class="btn" data-sort-by="number">ordem cronológica</button>
        <button class="btn" data-sort-by="category">classificação</button>
        </div>
    </div>
    <div class="column-22">
        <div class="grade3">
            <div class="column-31">
            <!--Criando um "grid" para indicar que os elementos que estão inseridos nessa div que serão filtrados e ordenados-->
                <div class="grid"> 
            <!--Filter2 é o filtro dos projetos com os agentes-->
                      <div id="filters2">
                      <div id="alphavillemgproj" class="element-item emp empr privado publico alphavillemg alphavilleurb vespasiano" data-category="4emp">
                          <button class="buttonproj" data-filter=".alphavillemg">Alphaville MG</button>
                              <div class="name">Alphaville MG</div>
                              <div class="number">2014</div>
                      </div>
                      <div id="brtantproj" class="element-item licitacao licitacoes privado publico brtant beltrao andrade ata codemig conata constran barbosa cowan delta consol marins tecnotran mab oficina utc wtr smobi" data-category="3licitacao">
                          <button class="buttonproj" data-filter=".brtant">BRT Antônio Carlos/Pedro I</button>
                              <div class="name">BRT Antônio Carlos/Pedro I</div>
                              <div class="number">2008</div>
                      </div>
                      <div id="brtcristianoproj" class="element-item licitacao licitacoes privado publico brtcristiano ata caixa cgp constran convap comim cowan delta tecnotran logit oficina sudecap wtr rmg smobi" data-category="3licitacao">
                          <button class="buttonproj" data-filter=".brtcristiano">BRT Cristiano Machado</button>
                             <div class="name">BRT Cristiano Machado</div>
                             <div class="number">2010</div>
                      </div>
                       <div id="catedralproj" class="element-item emp empr privado publico catedral andrade arquidiocese mendes oscar pbh" data-category="4emp">
                           <button class="buttonproj" data-filter=".catedral">Catedral Metropolitana</button>
                                 <div class="name">Catedral Metropolitana</div>
                                 <div class="number">1922</div>
                       </div>
                       <div id="ciaarproj" class="element-item licitacao licitacoes privado publico ciaar depens fab diniz orgctcea lagoasanta schahin" data-category="3licitacao">
                           <button class="buttonproj" data-filter=".ciaar">Centro de Instrução e Adaptação da Aeronáutica (CIAAR)</button>
                                 <div class="name">Centro de Instrução e Adaptação da Aeronáutica (CIAAR)</div>
                                 <div class="number">2008</div>
                       </div>
                       <div id="ctcaproj" class="element-item ppp ppps privado publico ctca azul codemig embraer embry fiemg fdc feluma lider mec sede lagoasanta" data-category="1ppp">
                       <button class="buttonproj" data-filter=".ctca">Centro de Tecnologia e Capacitação Aeroespacial (CTCA)</button>
                         <div class="name">Centro de Tecnologia e Capacitação Aeroespacial (CTCA)</div>
                         <div class="number">2014</div>
                       </div>
                       </div>
                       </div>
                       </div>
                </div>
            </div>


    </div>
</div>
</div>
<?php } ?>

        </main>
    </div>

    <?php get_sidebar(); ?>

</div>

<?php get_footer(); ?>

Answer 1

您应遵循Wordpress模板层次结构规则为页面创建单独的模板文件，并使用wp_enqueue_script函数包含JavaScript代码。