Question

起初我认为按钮代码本身是错误的，但它在Codepen上正常工作。看到差异：

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

WP http://testnewbogetterihtnow.000webhostapp.com

在Wordpress中，按钮有一个生涩的悬停动画。同样在悬停时不会改变文本的颜色，尽管它已拼写出来。

需要你的帮助。原因？我拼错了短信吗？

SHORTCODE：

    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]

请查看相关链接：https://developer.wordpress.org/reference/functions/do_shortcode/

Answer 2

您不应该从HTML正文标记，CSS，脚本标记等开始添加所有内容到短代码的功能。

而是将它们分开并将其放置在各自的段中，如

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

脚本入队的参考链接：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;
}

即。 颜色：＃000; 的文本颜色为黑色，这是主题下文本的默认颜色，如果是codepen.io，则为白色。因此，您可以在codepen.io中看到更改，但不能在主题下看到。

因此，您可以尝试将其更改为任何其他颜色代码，例如颜色：＃ff0000; 以查看影响。

WordPress短代码无法正常工作

2 个答案: