WordPress 短代码无法正常工作

Question

一开始我以为是按钮代码本身不对，但是在Codepen上运行正常。查看差异：

CodePen http://codepen.io/Bogette/pen/QxdJgP

WPhttp://testnewbogetterihtnow.000webhostapp.com

在 Wordpress 中，按钮有一个不稳定的悬停动画。悬停时也不会改变文本的颜色，尽管它是拼写出来的。

需要您的帮助。原因？我拼错了简码吗？

短代码：

    function text_button() {
return '
<style type="text/css">
.button {
  position: absolute;
  left: 0;
  top: 0;
  border: 1px solid #fff;
  border-radius: 30px;
  background-color: transparent;
  -webkit-transition: all 500ms ease, background-color 500ms ease;
  transition: all 500ms ease, background-color 500ms ease;
}

.button:hover {
  background-image: -webkit-linear-gradient(270deg, #fff, #fff);
  background-image: linear-gradient(180deg, #fff, #fff);
  -webkit-transform: translate(0px, -10px);
  -ms-transform: translate(0px, -10px);
  transform: translate(0px, -10px);
  color: #000;
}
</style>

<html>
<title>Spectacular Project</title>
<meta content="width=device-width, initial-scale=1"name="viewport"/>
<meta content="Bogette" name="button"/>
<link href="https://uploads-ssl.webflow.com/5ad2f0250e93f375ebdb98dc/css/bogdans-spectacular-project-1a670d.webflow.f1a16b2d4.css" rel="stylesheet" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js" type="text/javascript"></script><script type="text/javascript">WebFont.load({  google: {    families: ["Oswald:200,300,400,500,600,700"]  }});
</script>
<script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);
</script>
<link href="https://daks2k3a4ib2z.cloudfront.net/img/favicon.ico" rel="shortcut icon" type="image/x-icon"/>
<link href="https://daks2k3a4ib2z.cloudfront.net/img/webclip.png" rel="apple-touch-icon"/>
</head>
<body class="body">
  <a href="#" class="button w-button">Button Text</a>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" type="text/javascript" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous">
  </script>
</body>

</html>
';
}
add_shortcode('tb', 'text_button');

Answer 1

我已经测试了你的代码，它的工作...

请使用以下模板代码：

<?php echo do_shortcode('[tb]'); ?>

您可以在后端文本编辑器中使用以下代码：

[tb]

更多请查看link：https://developer.wordpress.org/reference/functions/do_shortcode/

Answer 2

您不应该将从 HTML body 标签、CSS、scripts 标签等开始的所有内容都添加到短代码的功能中。

而是将它们分开并放入相应的部分，如

例如：将CSS放入主题文件夹下的style.css。并根据需要将脚本添加到 header/footer 或在 function.php 文件中排队。

Ref link 用于脚本排队：https://developer.wordpress.org/reference/functions/wp_enqueue_script/

为了让短代码正常工作，只需将此代码添加到主题文件夹下的 function.php 文件中。

function text_button() {
   return '<a href="#" class="button w-button">Button Text</a>';
}
add_shortcode('tb', 'text_button');

然后使用 Sarbaz 在他的回答中建议的短代码

请使用以下模板代码：

<?php echo do_shortcode('[tb]'); ?>

您可以在后端文本编辑器中使用代码：

[tb]

以及您希望在悬停效果时更改的文本颜色。为此，

中没有提及文本颜色

.button {
  position: absolute;
  left: 0;
  top: 0;
  border: 1px solid #fff;
  border-radius: 30px;
  background-color: transparent;
  -webkit-transition: all 500ms ease, background-color 500ms ease;
  transition: all 500ms ease, background-color 500ms ease;
}

及以下

.button:hover {
  background-image: -webkit-linear-gradient(270deg, #fff, #fff);
  background-image: linear-gradient(180deg, #fff, #fff);
  -webkit-transform: translate(0px, -10px);
  -ms-transform: translate(0px, -10px);
  transform: translate(0px, -10px);
  color: #000;
}

即color: #000; 给定的文本颜色为黑色，这是您主题下文本的默认颜色，在 codepen.io 的情况下为白色。因此，您可以在 codepen.io 中看到更改，但在您的主题下看不到。

因此您可以尝试将其更改为任何其他颜色代码，例如 color: #ff0000; 以查看效果。

WordPress 短代码无法正常工作

WordPress shortcode not working properly

css

wordpress

shortcode

wordpress-shortcode