2

I am creating a new Wordpress website that will contain thousands of online books and articles to read, in addition to other media, like videos.

I don't want to bloat my database by pasting tens of thousands of pages worth of text, so I want to create the books chapters as html, then embed these html files in the Wordpress posts. I believe that this will reduce the database size significantly.

I uploaded a test html file here. The file can be read by browsers, so there is no errors in the file.

I installed the latest version of Gutenberg, and tried to embed this url in the Embed URL block, but when I click Embed, I get this message: Sorry, we could not embed that content.

I followed the answer to this StackExchange question (question #238330), and the the answer to this other StackExchange question (question #277163), but without luck.

When I used the code in question #238330 answer, i was able to embed videos from forbes.com successfully, using Gutenberg and the default WordPress post editor.

However, when I changed the code to read from my website, nothing happens (i.e. the url shows as a line of text in the post), so obviously I did something wrong in the code.

Here is the code I modified:

    /**
 * Embed support for Coptic Treasures Texts
 *
 * Usage Example:
 *
 *     https://coptic-treasures.com/html-test-filed/02.html
 */
add_action( 'init', function()
{
    wp_embed_register_handler( 
        'coptic-treasures', 
        '#http://www\.coptic-treasures\.com/?#i', 
        'wp_embed_handler_coptic_treasures' 
    );

} );

function wp_embed_handler_coptic_treasures( $matches, $attr, $url, $rawattr )
{
    $embed = sprintf(
        '<iframe class="coptic-treasures-texts" src="https://coptic-treasures.com/html-test-filed/%1$s.html" width="600" height="400" frameborder="0" scrolling="no"></iframe>',
        esc_attr( $matches[1] ) 
     );

    return apply_filters( 'embed_coptic_treasures', $embed, $matches, $attr, $url, $rawattr );
}

My questions are:

1- Can someone please guide me to what are the errors in the modified code?

2- can I embed without an iFrame? My website is responsive, and I want the text to be seamless in the page, and discoverable by Google.

I tried a plugin that achieves the required results before, but ended up not using it as it had an error in its code that leads to consuming all the server resources, if one url is wrong. It was also an unmaintained plugin.

Thanks in advance.

EDIT

I modified the code a bit, and it is now embeding he text, however, I am still facing a problem in the code.

The problem is that for me to embed this url: https://coptic-treasures.com/html-test-filed/02.html, I have to use this code https://coptic-treasures.com/02.html

This is because this part html-test-filed/ is added in the function I am using. I tried to replace it by a variable, but could not do this successfully.

I want to be able to change the url of the embeded files.

Thanks.

/**
 * Embed support for Coptic Treasures Texts
 *
 * Usage Example:
 *
 *     https://coptic-treasures.com/html-test-filed/02.html
 */
add_action( 'init', function()
{
    wp_embed_register_handler( 
        'coptic-treasures', 
        '#https://coptic-treasures.com/([a-z0-9_-]+)\.html$#i', 
        'wp_embed_handler_coptic_treasures' 
    );

} );

function wp_embed_handler_coptic_treasures( $matches, $attr, $url, $rawattr )
{
    $embed = sprintf(
        '<iframe class="coptic-treasures-texts" src="https://coptic-treasures.com/html-test-filed/%1$s.html" width="1200" height="1200" frameborder="0" scrolling="no"></iframe>',
        esc_attr( $matches[1] ) 
     );

    return apply_filters( 'embed_coptic_treasures', $embed, $matches, $attr, $url, $rawattr );
}

1 Answer 1

2

Fixing the regex pattern

To match an url of the type:

https://coptic-treasures.com/
{Some string with a mix of a-z letters and hyphen}/{Some number}.html

like this example:

https://coptic-treasures.com/html-test-filed/02.html

you can try this kind of pattern:

'#https://coptic-treasures.com/([a-z-]+)/([0-9]+)\.html$#i'

and then you have to update the iframe output accordingly:

... src="https://coptic-treasures.com/%1$s/%2$s.html" ...

with the corresponding matches.

Demo

Here's a test run:

text

that generates:

embed

Some notes

As far as I remember the embeds write some post meta data, so your approach does not avoid database actions.

But many WordPress installations have tens of thousand of non-hierarchical custom posts without major problems, so I would not rule that option out. Make sure you have a good hosting provider, that provides you with the latest PHP version etc. If the search becomes too slow, there are some third party solutions and services available out there.

Note that it could be a problem with the WordPress admin interface having so many hierarchical posts, because the parent dropdowns fetch all pages.

It's also probably much easier to edit the data in the WordPress backend (utilizing things like revisions and taxonomies), instead of finding the corresponding bare file each time, open it and modify it that way. Unless it's exported from another system you have in place.

Another approach might to use e.g. Vue/React/... JS and fetch the pure data as json(p) resources and format it as needed, but I'm not sure about the search engine visibility in that case.

4
  • much appreciated @birgire. I can't thank you enough. getting there. I still can't adjust the code to reflect the%2$ variable. I tried esc_attr( $matches[1][2], esc_attr( $matches[1],[2] and esc_attr( $matches[1]/[2]. None worked. can you please help me adjusting this last part, so I can get the code working? thanks.
    – Atef Wagih
    Nov 17, 2018 at 4:34
  • this worked: esc_attr( $matches[1] ), esc_attr( $matches[2] ), but if there is a better way, please let me know. thanks @birgire.
    – Atef Wagih
    Nov 17, 2018 at 4:38
  • That sounds correct and the reason for %2$s instead of %2$d was to allow zero prefixes like 02 or 00002. You could pheraps look into that, how to handle such a support with a digit placeholder. Glad to hear it helped.
    – birgire
    Nov 17, 2018 at 7:51
  • thanks a lot. Are you available to help me on paid basis? I am now trying to solve the iframe height issue. I have a responsive website, and the content of each chapter varies. When I specify a certain height, some text might not appear, and if I made it very long, the pages appear very bad. Also, the acceptable height on desktop is not enough for mobile..etc. I read a lot of threads on how to fix this for iframe, but can't find a solution yet.
    – Atef Wagih
    Nov 17, 2018 at 9:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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