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');
Источник

2 ответа

Решение

Вы не должны добавлять все, начиная от тега HTML body, CSS, тега scripts и т. Д. К функции шорткода.

Скорее разделите их и поместите в соответствующие сегменты

Например: поместите 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');

Затем используйте шорткод, предложенный Сарбазом в его ответе.

Пожалуйста, используйте следующий код для шаблона:

<?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; чтобы увидеть влияние.

Источник

Я проверил ваш код, он работает...

Пожалуйста, используйте следующий код для шаблона:

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

Вы можете использовать приведенный ниже код в ваших внутренних текстовых редакторах:

[tb]

Пожалуйста, проверьте ссылку для получения дополнительной информации: https://developer.wordpress.org/reference/functions/do_shortcode/

Источник
Другие вопросы по тегам