时间戳

首页 > 解决方案 > WordPress短代码无法正常工作

css - WordPress短代码无法正常工作

问题描述

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

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

WP http://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');

标签： csswordpressshortcodewordpress-shortcode

解决方案

您不应该将所有内容从 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 中看到更改，但在您的主题下看不到。

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

推荐阅读