BenSibley / Period

Period WordPress Theme
https://www.competethemes.com/period/
5 stars 1 forks source link

Excerpts of posts with <!--more--> ends weird #3

Open barisunver opened 7 years ago

barisunver commented 7 years ago

It's better if I show it first:

image

The problem arises when you have a (!--more--) tag inside a post. Period first takes the whole text before the more tag, and shows it all. Then, it takes the last paragraph and crams the whole paragraph into a single line, because of this CSS rule (line 520):

image

BenSibley commented 7 years ago

WordPress always wraps the more tag in a class-less paragraph tag, so that's the only way I can get the comments link to sit beside it in the excerpts. Otherwise, it has to be like this: http://pics.competethemes.com/14402R0W1r2a. Outputting a link with the use of the more tag requires using the_content which always outputs the link in a paragraph.

I'm not sure how to address this without affecting the other types of excerpt handling :/

That said, this is only an issue when the more tag is inserted within a paragraph in the editor which causes the link to then share the same paragraph. It doesn't occur when inserted after a paragraph in the editor.

If that's not an option for your excerpt, I would suggest overriding that CSS in a child theme since the comments link isn't being displayed, or using a custom excerpt instead.

barisunver commented 7 years ago

Inspired by your ct_period_excerpt() function, I wrote a "more tag checker" and hooked it to post_class() so it adds a post class if the post includes a more tag. Would this function help with the issue?

function if_has_more( $classes ) {
    global $post;
    if( strpos( $post->post_content, '<!--more-->' ) ) {
        $classes[] = 'has-more-tag';
    }

    return $classes;

}

add_filter( 'post_class', 'if_has_more' );
BenSibley commented 7 years ago

I'm afraid not because that won't make a distinction between a more tag being in its own paragraph VS being included in the excerpt paragraph.

Easier to explain I think if I show it: http://pics.competethemes.com/1o0M183m0h0G

I haven't found a way to always include the more link in its own paragraph regardless of how it is included.

barisunver commented 7 years ago

I think I found a solution:

  1. When the more tag is inlined, we need to wrap it with another element inside the the_content() functions in your ct_period_excerpt() function.
  2. When the more tag has its own paragraph, even better, you already have full control over it in your ct_period_excerpt_read_more_link() function.

The first one was problematic, but I found a solution in the Codex. When I did that, the second part was even easier so I rewrote your code a bit.

First off, I got rid of the CSS between lines 520 and 530 altogether.

Second, I wrote a modify_read_more_link() function:

if ( ! function_exists( 'modify_read_more_link' ) ) {
    function modify_read_more_link() {
        $read_more_text = get_theme_mod( 'read_more_text' );
        return '<div class="more-link-wrapper"><a class="more-link" href="' . get_permalink() . '">' . esc_html( $read_more_text ) . '<span class="screen-reader-text">' . esc_html( get_the_title() ) . '</span></a></div>';
    }
}
add_filter( 'the_content_more_link', 'modify_read_more_link' );

Third, I rewrote the ct_period_excerpt() function:

if ( ! function_exists( 'ct_period_excerpt' ) ) {
    function ct_period_excerpt() {

        global $post;
        $show_full_post = get_theme_mod( 'full_post' );
        $ismore         = strpos( $post->post_content, '<!--more-->' );

        if ( ( $show_full_post == 'yes' ) && ! is_search() ) {
            the_content();
        } elseif ( $ismore ) {
            the_content();
        } else {
            the_excerpt();
        }
    }
}

(I didn't work on the if-else statements, you could write it better than I do.)

And there you have it! The "read more" link now ALWAYS has its own div.

BenSibley commented 7 years ago

Thanks man, that looks like a good solution. Separating the more link markup into a new function on the the_content_more_link hook - nice!

I'll implement this in the next update.

barisunver commented 7 years ago

Glad to be of help :) Oh I wish I know how to git.

BenSibley commented 7 years ago

Me too haha

BenSibley commented 7 years ago

I had to make a special exception for manual excerpts (the excerpt_more filter doesn't affect them >:o) , but it came out working well and a little cleaner than before.

Commit link.

I'll be submitting the update tomorrow.