Шорткод 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
Я проверил ваш код, он работает ...
Используйте следующий код для шаблона:
<?php echo do_shortcode('[tb]'); ?>
Вы можете использовать приведенный ниже код в своих фоновых текстовых редакторах:
[tb]
Пожалуйста, проверьте ссылку, чтобы узнать больше: https://developer.wordpress.org/reference/functions/do_shortcode/
Не следует добавлять в функцию шорткода все, начиная с тега HTML body, 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');
Затем используйте шорткод, предложенный Сарбазом в его ответе.
Используйте следующий код для шаблона:
<?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;, чтобы увидеть влияние.
Вы напортачили, просто вставили полный html-код в вывод шорткода. Пожалуйста, проверьте Как включить js и css в wordpress и как написать шорткод.