admin管理员组

文章数量:1122846

For client I need to create a simple 3x4 article grid that needs to have ads on fixed places instead of articles

X .. X .. Y
Y .. X .. X
X .. X .. X
X .. Y .. X

in example above Y is ad, and X is article card.

Query loop easily can build grid - but for inserting ads on fixed places I haven't found solution.

Can someone please share how to achieve this.. because I'm going mad? - or is this not doable with block editor and FSE altogether?

p.s. hooking on render_block or other output filters doesn't work - I'd like blocks - FSE solution because that is in core now..

Thanks

p.s. as example here is a code that I created 10years+ ago - similar grid directly in template (rendered everything cool - wrapped in div for no layout issues) - and I've tried to recreate this in query-loop block - or FSE editor

Here is my code for output filter that failed miserably - because ad html is sometimes invalid (real-life usecase) - and DOMDocument can't render it then


function putadsthere( $cont, $block ) {
    // QUERY BLOCK  ===> INSERT ADS
    if ( $block['blockName'] === 'core/query' ) {

        $dom = new DOMDocument();
        $cont = mb_convert_encoding($cont, 'HTML-ENTITIES', "UTF-8");
        $dom->loadHTML($cont);
        // find article carts
        $finder = new DomXPath($dom);
        $classname="wp-block-post";
        $nodes = $finder->query("//li[contains(concat(' ', normalize-space(@class), ' '), ' $classname ')]");
        // make counter and insert ads
        $i = 0;
        $tmpDoc = new DOMDocument();
        $tmpDoc->loadHTML( adrotate_group(4) );
        foreach ($nodes as $node) {  
            if ( in_array( $i, [3, 5, 9] ) ) { // count posts
                // $node->insertBefore($tmpDoc->documentElement, TRUE);
            }
            $i++;
        }
        
        $html = $dom->saveHTML(); 
        $cont = preg_replace('/^<!DOCTYPE.+?>/', '', str_replace( ['<html>', '</html>', '<body>', '</body>'], '', $html ));
    }
    return $cont;
}
add_filter( 'render_block', 'putadsthere', 10, 2 );

ref: this

For client I need to create a simple 3x4 article grid that needs to have ads on fixed places instead of articles

X .. X .. Y
Y .. X .. X
X .. X .. X
X .. Y .. X

in example above Y is ad, and X is article card.

Query loop easily can build grid - but for inserting ads on fixed places I haven't found solution.

Can someone please share how to achieve this.. because I'm going mad? - or is this not doable with block editor and FSE altogether?

p.s. hooking on render_block or other output filters doesn't work - I'd like blocks - FSE solution because that is in core now..

Thanks

p.s. as example here is a code that I created 10years+ ago - similar grid directly in template (rendered everything cool - wrapped in div for no layout issues) - and I've tried to recreate this in query-loop block - or FSE editor

https://gist.github.com/mkdizajn/4843bf99ca55f905dd3b72a2c5118ff7

Here is my code for output filter that failed miserably - because ad html is sometimes invalid (real-life usecase) - and DOMDocument can't render it then


function putadsthere( $cont, $block ) {
    // QUERY BLOCK  ===> INSERT ADS
    if ( $block['blockName'] === 'core/query' ) {

        $dom = new DOMDocument();
        $cont = mb_convert_encoding($cont, 'HTML-ENTITIES', "UTF-8");
        $dom->loadHTML($cont);
        // find article carts
        $finder = new DomXPath($dom);
        $classname="wp-block-post";
        $nodes = $finder->query("//li[contains(concat(' ', normalize-space(@class), ' '), ' $classname ')]");
        // make counter and insert ads
        $i = 0;
        $tmpDoc = new DOMDocument();
        $tmpDoc->loadHTML( adrotate_group(4) );
        foreach ($nodes as $node) {  
            if ( in_array( $i, [3, 5, 9] ) ) { // count posts
                // $node->insertBefore($tmpDoc->documentElement, TRUE);
            }
            $i++;
        }
        
        $html = $dom->saveHTML(); 
        $cont = preg_replace('/^<!DOCTYPE.+?>/', '', str_replace( ['<html>', '</html>', '<body>', '</body>'], '', $html ));
    }
    return $cont;
}
add_filter( 'render_block', 'putadsthere', 10, 2 );

ref: this

  • block-editor
  • full-site-editing
Share Improve this question edited Jun 30, 2024 at 12:27 Kresimir Pendic asked Jun 22, 2024 at 10:29 Kresimir PendicKresimir Pendic 6535 silver badges12 bronze badges 2
  • Kresimir, do you need an answer regarding how to put the ads into a fixed spot or do you need help incorporating that functionality into the Query Loop Block? Can you include the code you're working with as that may help get an answer. – Tony Djukic Commented Jun 28, 2024 at 19:36
  • Dear @TonyDjukic I need to put ads into fixed position - that is what client need - and that is what pretty much what every web news portal or page has.. ads mixed with articles. I have code from previous classic theme and I'll update my question so that will mybe help – Kresimir Pendic Commented Jun 29, 2024 at 19:56
Add a comment  | 

1 Answer 1

Reset to default 1 +100

If you want to exclude output filters (which would be the normal way to do this) you are asking for a query that retrieves 9 posts and 3 ads (a separate post type or taxonomy?) in a specific order. The query block has limited querying abilities, but those can be extended to the full possibilities of WP_Query with the query_loop_block_query_vars filter. So, let's look into WP_Query.

With WP_Query you can ask for posts from different post types (or taxonomies), so you could retrieve, for instance, the 12 most recent posts and ads. But you could not specify that you want 9 of the one and 3 from the other. This is because WP_Query itself is a simplified querying system on the database. You can make more complex queries, but you need the wpdb class for that. Also, there is no obvious way to put the results in the right order.

In theory, you could use the filter to retrieve the 9+3 posts with wpdb, put the results in the right order (for instance by storing the order in a metafield, which you then use for the orderby argument), store them in a temporary post type and then make a query for the first twelve posts in that temporary type. In that way you won't need to post process the results of the query block, but it doesn't look like a very appealing option.

本文标签： full site editingExtending the Query Loop block

版权声明：本文标题：full site editing - Extending the Query Loop block 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1736302205a1931450.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。