WordPress шорткод не работает должным образом - PullRequest
Новая
       25

WordPress шорткод не работает должным образом

0 голосов
/ 11 июня 2018

Сначала я подумал, что сам код кнопки неправильный, но он работает правильно на 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');

Ответы [ 2 ]

0 голосов
/ 11 июня 2018

Вы не должны добавлять в функцию шорткода все, начиная с тега 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');

Затем используйте шорткод, предложенный 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; , чтобы увидеть эффект.

0 голосов
/ 11 июня 2018

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

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

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

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

[tb]

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

...