How to avoid new paragraph tags before and after shortcode

  • Hi,

    I have created a custom template for textlinks to amazon products, which I want to show within my texts. In pages this is working fine, as expected.

    However, in blog posts the same short code gets a closing </p> tag before it and an opening <p> tag after it, so that my textlink, which is supposed to be in the same line as its surrounding text is now in a separate line.

    How can I make this work in blogposts, too, to keep the shortcode output in line with the surrounding text?

    Compare the blogpost
    https://hundebetten.shop/warum-kratzt-mein-hund-in-seinem-bett/#buchtipp (not working)
    with the page
    https://hundebetten.shop/bestseller/#comfort (working)

    Again, these links are created with the identical shortcode.

    I already tried to add the lines

    remove_filter('the_content', 'wpautop');
add_filter('the_content', 'wpautop', 12);

    to my functions.php, but the only effect was that it made the problem appear in the page, too.

    Thanks in advance
    Sascha

    The page I need help with: [log in to see the link]

Viewing 15 replies - 1 through 15 (of 17 total)
  • Thread Starter fjordkommission

    (@fjordkommission)

    For clarification.

    This is what my shortcodes look like:
    [asa tpl="custom_textlink" Comment="HUNTER Uppsala Hundemantel"]B01MV06XTQ[/asa]

    Here’s the template HTML

    <span class="asa_txt"><a href="{$AmazonUrl}" 
    	target="_blank" 
        rel="nofollow noopener" 
        title="Zum Produkt bei amazon.de">
        <img src="/wp-content/uploads/2017/03/amazon-16x16.png" height="12px" width="12px" alt="Diesen Artikel bei amazon.de kaufen"/>&nbsp;&nbsp;<b>"{$Comment}"</b></a></span>

    And here its CSS

    .asa_txt {
    /* Positioning elements in lines */
    display: inline;
     /* This is necessary for position:absolute to work as desired */
    position: relative;
   width:16px;
    height:16px;
}
.asa_txt img {
    -webkit-transition: all 0.3s ease; /* Safari and Chrome */
    -moz-transition: all 0.3s ease; /* Firefox */
    -ms-transition: all 0.3s ease; /* IE 9 */
    -o-transition: all 0.3s ease; /* Opera */
    transition: all 0.3s ease;
}
.asa_txt:hover * {
    -webkit-transform:scale(1.7); /* Safari and Chrome */
    -moz-transform:scale(1.7); /* Firefox */
    -ms-transform:scale(1.7); /* IE 9 */
    -o-transform:scale(1.7); /* Opera */
     transform:scale(1.7);
}

    No big thing, actually.

    Thread Starter fjordkommission

    (@fjordkommission)

    I believe the problem is that the shortcode resolves to HTML with surrounding div-tags by default (marked yellow), while my template only uses span-tags (marked green).


    Screenshot

    Is there a way to remove these div-tags from the template?

    Thread Starter fjordkommission

    (@fjordkommission)

    No, wrong. The additional div-tag does not explain why in the same single line where I added the shortcode a closing p-tag appears before the HTML, which the shortcode produces and another opening one behind it. ??

    @worschtebrot: Any idea what’s happening here?

    Plugin Author Timo

    (@worschtebrot)

    Hi Sascha,

    sorry for my late reply. My guess is that the paragraphs are created by placing the shortcodes on a separate line. Have you tried embedding them in the text flow yet?

    Like:

    Lorem ipsum [asa]ASIN[/asa] dolor sit amet

    Thread Starter fjordkommission

    (@fjordkommission)

    Uhm, yes, of course. ?? Else I would not be wondering about the paragraphs.

    In the page it’s working fine, in the blog posts it doesn’t.

    Plugin Author Timo

    (@worschtebrot)

    Sorry for the banal question, but I just wanted to make sure. According to your last statement, I suspect that different things happen in the background when you save posts than when you save pages.

    You have already dealt with the topic that the editor automatically inserts paragraphs, haven’t you? I would now like to test if it behaves the same way if you disable all plugins (except ASA). Because ASA doesn’t insert anything before and after its shortcodes, but maybe another plugin does this with shortcodes in posts.

    Thread Starter fjordkommission

    (@fjordkommission)

    I went into Troubleshoot mode and left ASA1 as the only plugin active.

    Still there’s a line break before and after the link.

    Even with twentynineteen as theme there’s the line breaks.

    So, if it’s neither the theme nor any other plugin, what else could cause this?

    By the way, I’m running PHP version: 7.3.5, in case that matters.

    Plugin Author Timo

    (@worschtebrot)

    Maybe this helps:
    https://stackoverflow.com/questions/32570351/shortcode-output-adding-br-after-new-line

    Another idea: If it is not already the case, please set the content of your template to only one line, so that there are no line breaks in your template.

    If that doesn’t help either, please try it without the CSS code that belongs to the template.

    Thread Starter fjordkommission

    (@fjordkommission)

    Hi Timo,

    thank you for your efforts.

    I already tried what they suggested in stackoverflow and mentioned it in my first post. But the p-tags are not inside the render result of the shortcode but outside around it.

    Though I didn’t see why putting the content of the span-tag into one line only would make any difference I did so. –> No change.

    Next, I renamed the CSS file to custom_textlink_inline.cssbak and refreshed the page. –> No change.

    Here’s how I use the shortcode:

    And this is the source code at the respective line in the rendered page:

    This is the view in the code inspector:

    You see the closing p-tag before the span-tag, which is in my template HTML. After that there’s another paragraph, which is not in the original source code. Both marked green.

    Looks like the result of the output is solely done by the jQuery (5th line from the bottom of the marked text). There’s nothing more I can do here. ??

    Cheers,
    Sascha

    Plugin Author Timo

    (@worschtebrot)

    Maybe it is due to the handling of the embedded script block. This is used for the Ajax mode. Have you ever tried it without it?

    By the way, I only get the two loading animations on the page where the products should appear.

    Thread Starter fjordkommission

    (@fjordkommission)

    I thought the script block was added by the plugin. Certainly not by me. How can I try this without the script?

    Which page does not load the products? It’s working here. Tried several browsers (Firefox, Opera, Brave, Chrome, Vivaldi), and all show the same result.

    Thread Starter fjordkommission

    (@fjordkommission)

    OK, I think the plugin itself is off the hook.

    I installed it on another WordPress instance (using the theme IMPREZA) and copied everything: template files, CSS, blog post. And there it looks as it’s supposed to.

    Now I need to investigate why it’s different on my first installation.

    Thank you for your assistance so far. If you have any further ideas how to narrow down the problem, let me know.

    Thread Starter fjordkommission

    (@fjordkommission)

    This issue is driving me nuts.

    I set up a local MAMP environment with a fresh new WordPress installation to reproduce the problem.

    The theme is Twentytwenty. ASA1 is the only plugin present. PHP version is 7.1.7.

    And the problem occurs again. I do not understand any of this any more. ??

    Thread Starter fjordkommission

    (@fjordkommission)

    I have found the reason:

    It’s when I enable “AJAX asynchronous mode” in the options, then it inserts a closing </p> tag between the </style> tag of the custom template CSS and the template HTML code.

    You might want to have a look into this.

    It’s reproducible. Async AJAX on –> line break, Async. AJAX off –> text inline.

    Plugin Author Timo

    (@worschtebrot)

    Yes, that’s what I meant. But the </p> tag does not come from ASA1. I guess it’s inserted automatically because there is a line break after or before the script tag.

    I’ll check it again and if there is something to optimize, I will do that for the next update.

Viewing 15 replies - 1 through 15 (of 17 total)
  • The topic ‘How to avoid new paragraph tags before and after shortcode’ is closed to new replies.