无法在Wordpress中加载传单地图

Question

我已经在我的function.php中加载了样式和js (您可以在每个组的最后一组看到它)

function recursos_ah6studio(){
    wp_enqueue_style('bootstrap', get_theme_file_uri('/css/bootstrap.min.css'));
    wp_enqueue_style('slick', get_theme_file_uri('/slick/slick.css'));
    wp_enqueue_style('slick-theme', get_theme_file_uri('/slick/slick-theme.css'));
    wp_enqueue_style('magnific-popup', get_theme_file_uri('/magnific-popup/magnific-popup.css'));
    wp_enqueue_style('font-awesome', get_theme_file_uri('/fontawesome-5.5/css/all.min.css'));
    wp_enqueue_style('estilo_ah6studio', get_stylesheet_uri());
    wp_enqueue_style('leaflet_style', 'https://unpkg.com/leaflet@1.8.0/dist/leaflet.css'); //here!

    wp_enqueue_script('chartjs', 'https://cdn.jsdelivr.net/npm/chart.js', NULL, '1.0', true);
    wp_enqueue_script('chartdatalabel', 'https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0/dist/chartjs-plugin-datalabels.min.js', NULL, '1.0', true);
    wp_enqueue_script('jquery', get_theme_file_uri('/js/jquery-3.5.1.min.js'), NULL, '1.0', true);
    wp_enqueue_script('popper', get_theme_file_uri('/js/popper.min.js'), NULL, '1.0', true);
    wp_enqueue_script('boostrap', get_theme_file_uri('/js/bootstrap.min.js'), NULL, '1.0', true);
    wp_enqueue_script('slickJS', get_theme_file_uri('/slick/slick.min.js'), NULL, '1.0', true);
    wp_enqueue_script('magnific-popup', get_theme_file_uri('/magnific-popup/jquery.magnific-popup.min.js'), NULL, '1.0', true);
    wp_enqueue_script('easingJS', get_theme_file_uri('/js/easing.min.js'), NULL, '1.0', true);
    wp_enqueue_script('singlePageJS', get_theme_file_uri('/js/jquery.singlePageNav.min.js'), NULL, '1.0', true); 
    wp_enqueue_script('tool-tip', get_theme_file_uri('/js/tooltip.js'), NULL, '1.0', true);
    wp_enqueue_script('leaflet_js','https://unpkg.com/leaflet@1.8.0/dist/leaflet.js', NULL, '1.0', true); // and here

} 
add_action('wp_enqueue_scripts', 'recursos_ah6studio');

把代码放到我的index.php中，我甚至放了一些js，这是传单的官方快速启动告诉你的

<div id="map"></div>
<script>
var map = L.map('map').setView([51.505, -0.09], 13);
</script>

但它没有载入地图。我做错了什么吗？

我的footer.php看起来像这样(有人问)：

<div class="container">
<div class="tm-gallery-container">
    <div class="row">
        <div class="col-lg-2"></div>
        <div class="col-lg-8 footer_text"><p>Copyright © 2021  |  Todos los derechos reservados | By DALF</p></div>
        <div class="col-lg-2"></div>
        <div class="col-lg-4"></div>
        <div class="col-lg-4 social_icon">
                    <a href="https://www.facebook.com/ah6studio">
                        <img src="<?php echo get_theme_file_uri('/images/logo_fb.svg')?>" alt="facebook logo"></a>
                    <a href="https://www.youtube.com/channel/UCgPsU_qjhhbCFNETiT7OCWg">
                        <img src="<?php echo get_theme_file_uri('/images/logo_yt.svg')?>" alt="youtube logo"></a>
                    <a href="https://www.instagram.com/ah6studio/">
                        <img src="<?php echo get_theme_file_uri('/images/logo_ig.svg')?>" alt="instagram logo"></a>
                    <a href="https://www.linkedin.com/company/77211866/">
                        <img src="<?php echo get_theme_file_uri('/images/logo_Lin.svg')?>" alt="linkedin logo"></a>


        </div>
        <div class="col-lg-4"></div>
    </div>
</div>
</div>
<?php wp_footer(); ?>

 </body>

 
 </html>

Answer 1

在WordPress中，您不向index.php添加任何代码。页面顶部的注释以"This file doesn't do anything..."开头

要进行修改，您可以向主题的functions.php或任何一个模板文件添加代码。为了举例说明，我将使用您提供的footer.php模板文件。我还没有测试代码，但是这应该会在页面的页脚中显示地图：

<div class="container">
<div class="row">
        <div class="col-lg-10">
            <div id="map"></div>
            <script>
                var map = L.map('map').setView([51.505, -0.09], 13);
            </script>
        </div>
</div>
<div class="tm-gallery-container">
    <div class="row">
        <div class="col-lg-2"></div>
        <div class="col-lg-8 footer_text"><p>Copyright © 2021  |  Todos los derechos reservados | By DALF</p></div>
        <div class="col-lg-2"></div>
        <div class="col-lg-4"></div>
        <div class="col-lg-4 social_icon">
                    <a href="https://www.facebook.com/ah6studio">
                        <img src="<?php echo get_theme_file_uri('/images/logo_fb.svg')?>" alt="facebook logo"></a>
                    <a href="https://www.youtube.com/channel/UCgPsU_qjhhbCFNETiT7OCWg">
                        <img src="<?php echo get_theme_file_uri('/images/logo_yt.svg')?>" alt="youtube logo"></a>
                    <a href="https://www.instagram.com/ah6studio/">
                        <img src="<?php echo get_theme_file_uri('/images/logo_ig.svg')?>" alt="instagram logo"></a>
                    <a href="https://www.linkedin.com/company/77211866/">
                        <img src="<?php echo get_theme_file_uri('/images/logo_Lin.svg')?>" alt="linkedin logo"></a>


        </div>
        <div class="col-lg-4"></div>
    </div>
</div>
</div>
<?php wp_footer(); ?>

 </body>

 
 </html>