问题
Looking to place a graphic on the same line/row as an h3 title like this:
<h3 style="display:inline;">Graphic Advantage</h3><img style="max-width: 50px; width: 100%;" src="https://sgdesign.com/images/SGDadvantage.png" alt="SGD Advantage" />
First I make the h3 display = inline so it only occupies it's actual width rather than the full row. I could float the h3 and the graphic left and then do a clearfix but it seems excessive. The goal is to simply place both the h3 and small graphic on the same line.
It fails because of Wordpresses auto formatting function wpautop() which sets automatically, a paragraph tag < p >
But yet this works when the secondary content (graphic) is wrapped in a shortcode:
<h3 style="display: inline;">Advantage SGDesign</h3>
[tooltip text="Throughout our site you'll see this icon that will help identify significant differences between SGDesign and other companies"]<img style="max-width: 50px; width: 100%;" src="https://sgdesign.com/images/SGDadvantage.png" alt="SGD Advantage" />[/tooltip]
QUESTION: Best practice to thwart the wpautop() function within a wrapped tag of some type?
Maybe creating a null shortcode like
function no_wp_autoformat_shortcode() {
return null;
}
add_shortcode('nowpautop', 'no_wp_autoformat_shortcode');
This will work but now it hides the wrapped < img ...
So the question changes to how to make an image show when wrapped by a Shortcode ?
<h3 style="display:inline;">Graphic Advantage</h3>[nowpautop]<img style="max-width: 50px; width: 100%;" src="https://sgdesign.com/images/SGDadvantage.png" alt="SGD Advantage" />[/nowpautop]
回答1:
There is a way to stop Wordpress editor to automatically add in <p>
element using remove_filter( 'the_content', 'wpautop' );
. The down side of this will disable all the <p>
elements in wordpress which is not good when comes to paragraphing your text. (It also gets problematic when people cut and paste text from word documents...)
Yes using shortcode seems good to me without having to overwrite the Wordpress core functionalities
回答2:
Solved by creating a Shortcode that uses the linked file src as an Attribute. Details here: How to create a Wordpress Shortcode that does nothing?
The primary problem was that Shortcodes REPLACE content so could not simply "wrap" an element to create the desired effect of disabling the auto format wpautop() function.
来源:https://stackoverflow.com/questions/46596672/create-shortcode-in-wordpress-that-disables-wpautop-on-wrapped-content