如果记录 wp，则显示按钮

如果你正在开发一个 WordPress 主题或插件，需要在特定条件下显示一个按钮，那么本文是为你而写。

实现方法

第一步：检查是否在 WordPress 环境下

在 PHP 文件的开头，添加以下代码：

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly.
}

上面的代码是用来检查是否在 WordPress 环境下运行的，如果不是就退出。

第二步：添加 CSS 和 JS 文件

在主题或插件的 functions.php 文件中，添加以下代码：

/**
 * Enqueue button CSS and JS.
 */
function my_enqueue_scripts() {
   wp_enqueue_style( 'my-button', get_template_directory_uri() . '/css/button.css' );
   wp_enqueue_script( 'my-button', get_template_directory_uri() . '/js/button.js', array( 'jquery' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );

上面的代码是用来加载按钮的 CSS 和 JS 文件的。你需要将 get_template_directory_uri() 替换为你的文件路径。

第三步：添加按钮

在你想要显示按钮的地方，添加以下代码：

if ( is_single() && has_tag( 'wp' ) ) {
   echo '<button class="my-button">Click me</button>';
}

上面的代码是用来检查当前页面是否是单篇文章页面，并且是否含有标签为 wp，如果是，则显示按钮。

效果演示

在 WordPress 后台新建一篇文章，给它打上 wp 标签，保存，然后预览文章，在页面中应该会看到一个名为 Click me 的按钮。

CSS 样式

.my-button {
  background-color: #f44336;
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  border: none;
  text-align: center;
}

JS 代码

jQuery(document).ready(function($) {
   $('.my-button').click(function() {
       alert('Hello, WordPress!');
   });
});

总结

以上就是实现在 WordPress 中添加按钮的全部流程了。在实际使用中，你可以根据需求自己设计按钮的样式，并添加相应的 JS 代码。