Wordpress 插件 HTML Bootstrap + PHP

Posted 2023-03-05

【中文标题】Wordpress 插件 HTML Bootstrap + PHP

【英文标题】：Wordpress Plugin HTML Bootstrap + PHP

【发布时间】：2020-10-06 21:44:07

【问题描述】：

我正在创建我的第一个 wordpress 插件来在 wp-admin-page 上显示一些仪表板数据，但是当我编辑我的插件时只有我的 php 代码被识别，我写的任何 html 标记都被省略了。

我想为前端使用 HTML+bootstrap 制作我的插件，但使用 PHP 进行一些计算，但我不明白我该怎么做。

在我的第一次尝试中，我只能回显 html 标记：

<?php
add_action( 'admin_menu', 'test_plugin_setup_menu' );

function test_plugin_setup_menu()
    add_menu_page( 'Page Title', 'Menu title', 'manage_options', 'test-plugin', 'test_init' );


function test_init()
    echo "<h1> Hello World! </h1>"; 

?>/*THIS OUTPUT ON MY WP ADMIN PAGE AS EXPECTED WITH A HELLO WORLD

但是，我需要使用 Bootstrap 编写大量 HTML 标记，并且只在某些区域使用 PHP，但是我在 ?> 之后编写的任何 HTML 代码都不会显示在页面上。

第二种方法：我用 PHP 引用了我的 HTML 文件

<?php
add_action( 'admin_menu', 'test_plugin_setup_menu' );

function test_plugin_setup_menu()
    add_menu_page( 'Page Title', 'Menu title', 'manage_options', 'test-plugin', 'test_init' );

function test_init()
    $file = file_get_contents('index.html', FILE_USE_INCLUDE_PATH);
    if($file == false)
    
        echo 'file not found';
    
    else
    
        echo $file;
    

?>

最后一次尝试确实显示了我所有的 HTML 登录，我的引导程序在 wp-admin-page 上的样式完美，但我不能在这个 HTML 文件上使用我需要的 PHP 逻辑或 DB 连接..

我的问题是：如何在我的 PHP 插件中同时使用我的 HTML 标记？

额外信息

我对 PHP 和 Wordpress 很陌生，所以我不知道我在代码中做错了什么，因此 HTML 标记无法显示在页面上，除非我将它们引用到外部文件。

非常感谢任何帮助。

【问题讨论】：

在关闭函数前需要结束php标签。 ?>HTML CODE <?php 类似的东西。如果你想在 wp-admin 中使用 bootstrap，你还需要在后端将 bootstrap 加入队列

我不确定您是否只能在单个自定义插件页面上应用引导程序，但您绝对可以使用另一个文件。不是file_get_contents

我尝试在关闭 php 标记的末尾使用 th html 代码，但仍然没有显示，只有 php 代码或里面的回显显示我仍然不知道为什么，可能是因为它被覆盖了主要的 wp-admin 但我对 wordpress 的了解还不够

【参考方案1】：

另一种选择是 include 你的 php 文件。想法是这样的：

add_action( 'admin_menu', 'test_plugin_setup_menu' );

function test_plugin_setup_menu() 
    add_menu_page( 'Page Title', 'Menu title', 'manage_options', 'test-plugin', 'test_init' );


function test_init() 
    ob_start();
    include_once 'file-that-i-want-to-include.php';
    echo ob_get_clean();

然后当然是你的file-that-i-want-to-include.php。像往常一样创建你的页面：

<?php

include_once 'mydatabaseconnction.php';

// ... and so on php codes of sorts

?>

<div class="container">
    <div class="row">
        <div class="col">
            my contents whatever
        </div>
    </div>
</div>

此外，如果您愿意，您可以在特定的管理设置页面中加载引导程序：

add_action('admin_enqueue_scripts', function() 

    if (get_current_screen()->id === 'toplevel_page_test-plugin')  // the prefix is "toplevel_page_"
        $css_path = plugins_url('assets/vendor/bootstrap/bootstrap.min.css'); // just change the path going to your css and js
        $js_path = plugins_url('assets/vendor/bootstrap/bootstrap.min.js');
        wp_enqueue_style('latest-bootstrap-css', $css_path, [], '4.5.0');
        wp_enqueue_script('latest-bootstrap-js', $js_path, [], '4.5.0');
    

);