0

Seems that others would have had this same problem with WordPress "Read More" but looking through previous questions with that tag did not help, so posting here.

As a new self-hosted WordPress user, I selected a wordpress.com theme I liked (Isola) but now have a "bad user experience" with it. The problem: with a WP "Read More" tag in the post, clicking the link jumps into the full post at a place below the expected position, giving several unread lines above the screen view and so hidden. This behavior is screen width dependent - all works as expected for a narrow screen, as on a mobile device, but as the screen widens first one, then two, then three lines are hidden.

The hidden text confuses to the reader, since things suddenly begin in mid sentence - he somehow has to figure out that (1) there are missing lines in what he is reading and (2) he needs to scroll upward to read them. FWIW the post begins with a narrow image with text flowing to its right and I am inserting the "read more" tag after the first paragraph. I am unsure if browser formatting might be a factor - but this behavior occurs for both Chrome and Firefox and IE.

I do not want my blog readers to have this bad experience! I don't know PHP but know coding so thought it would not be too difficult to create a better experience - by having the jump go to the top of the text (and also inserting a "hr" tag at the break point to make that more obvious). This requires (1) altering the "more" link tag and (2) inserting a new anchor tag. I have successfully created php to do the first. But my attempt at (2) is not working.

I looked over the WP "hooks" to find something relevant - but there are nearly 2700 "hooks". I tried to insert the anchor tag where I see a ".entry-header" html comment in the page source with the following code. But I there is no change in the full post page source. So I am doing something wrong and am looking for some more experienced help here.

function add_more_tag($content) {
        $content = preg_replace('/<!-- *\.entry-header *-->/', '<span id="more-000"></span>', $content);
        return $content;
}
add_filter('the_content', 'add_more_tag', 20, 1);

Alternatively, I'd like to know if anyone has another way of correcting the basic "bad user experience" I described! Personally I am very disappointed with the way that this aspect of this theme works (and I've been told this behavior also occurs for other wordpress.com themes).

PS: I know there is a plugin which removes the "more" link - that is the first thing I tried. But the jump then goes to the top of the post, i.e. above the banner. The banner is large and takes up much room, so I'd prefer the jump to go below the banner, i.e. at the top of the text.

  • Looking around some more, found content-single.php and seems like I could simply hard-wire a '<span id="more-000"></span> into that. Will experiment with that. – user48297 Jul 6 '17 at 2:10
  • Later - found that the above works, but would like to hear comments by others more knowledgeable than I before marking this "solved". FYI current result is at blog.bigsurtrailmap.net Note that now the "more" anchor at top of text and for a wide display the first text line(s) are hidden - but the "after the jump" paragraph is fully displayed, which is what I wanted to achieve. – user48297 Jul 6 '17 at 2:21
0

Here is the solution I used to force the "continue reading" link to jump to the top of the text, just below the title

I first modified an existing "more" tag to a specified one - in my style's functions.php, at its end I added

// ALTER MORE TO JUMP TO SPECIFIED TAG (which is above post text in content-single.php)
function alter_more_jump_link($link) {
    $moreoffset = strpos($link, '#more-');
    if ($moreoffset) { 
      $link = preg_replace( "/#more-[0-9]+/", "#more-jump", $link );
    }
    return $link;
}
add_filter('the_content_more_link', 'alter_more_jump_link', 20,1);

To insert the specified "more" tag after the title, in my style's content-single.php, after line

</header><!-- .entry-header -->

I added

<span id="more-jump"></span>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.