php - How create a Shortcode with hover and complex options

admin管理员组

文章数量:1122826

I am wondering how do you do when you have to create a shortcode with multiple hover or complex options ( gradient, boxshadow etc, thing that can't be inline ). How do you generate the css.

I don't want to generate a <style></style> block because for a simple shortcode used 10 times in the page would generate 10 blocks.

All the shortcode are set from the page, by the user, so are created when the_content() is called.

I want to give the user the possibility to edit and custom the shortcode for exmample let the user choose what border-radius to use when button is hovered etc.

Looking for an option that would validate as html5 and in WC3.

Adding an ID to each shortcode and generate custom css is what I am looking to do but I can't find a way to do this properly ( without creating <style></style> block everywhere )

Any advice and examples are welcome.

Thanks in advance!

I am wondering how do you do when you have to create a shortcode with multiple hover or complex options ( gradient, boxshadow etc, thing that can't be inline ). How do you generate the css.

I don't want to generate a <style></style> block because for a simple shortcode used 10 times in the page would generate 10 blocks.

All the shortcode are set from the page, by the user, so are created when the_content() is called.

I want to give the user the possibility to edit and custom the shortcode for exmample let the user choose what border-radius to use when button is hovered etc.

Looking for an option that would validate as html5 and in WC3.

Adding an ID to each shortcode and generate custom css is what I am looking to do but I can't find a way to do this properly ( without creating <style></style> block everywhere )

Any advice and examples are welcome.

Thanks in advance!

• php
• shortcode
• css
• html

Share Improve this question edited May 28, 2016 at 5:42 Lucas Selsek asked May 24, 2016 at 8:21 Lucas SelsekLucas Selsek 5166 bronze badges 5

• Add a class with necessary styles. Am i missing something here? – bravokeyl Commented May 24, 2016 at 8:27
• Thanks for your reply. If you want the user to be able to change the hover color etc to custom color when creating the shortcode, having a class with the necessary styles won't be enough. – Lucas Selsek Commented May 24, 2016 at 8:50
• what is wrong with having 10 blocks of style? – Mark Kaplun Commented May 24, 2016 at 8:58
• inline <style> blocks don't validate as html5 (but work just fine) – cjbj Commented May 24, 2016 at 10:40
• Thanks for the reply, yes <style> blocks will not validate which, that's why I want to avoid this and find an other way. – Lucas Selsek Commented May 24, 2016 at 11:03

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Gradient and boxshadow are fine to put inline. Your trouble will be with the hover states. Luckily there is a trick. You can put the hover styles in an outer element and force inherit on hover. Like this:

<div class="myshortcode">
<a style="color:blue;"><span style="color:red;">Content</span></a>
</div>

In your style.css you add this generic line with a transition effect as bonus:

.myshortcode a span {transition:color 1s;}
.myshortcode a:hover span {color:inherit !important;}

本文标签： phpHow create a Shortcode with hover and complex options