Can I make sure that fancybox.js doesn't work before loading? - fancybox-3

I'm a beginner in coding, and I'm using a translator to ask questions. I ask for your generous understanding.
I'm using fancybox version 3.5.7.
I using "jquery.fancybox.min.js" to make YouTube come out.
However, if there is a problem with the speed at which JS is called, click before js is loaded to go to the YouTube site.
To solve this problem, I put the js code in the header.php file as script. There are fewer problems than before, but problems are occurring intermittently.
Is there a way not to go to the YouTube site even if i click it before the fancybox js is loaded?
Thank you. Please give me a hint or tip that I can try.
It's a code that was made.
function.php
add_action( "wp_enqueue_scripts", "include_custom_style" );
function include_custom_style(){
wp_enqueue_style( "fancybox-css", get_stylesheet_directory_uri() . "/css/jquery.fancybox.min.css");
wp_enqueue_script( "fancybox-js", get_stylesheet_directory_uri() . "/js/jquery.fancybox.min.js");
blog-list.php
function blackvue_blog_list() {
global $content;
ob_start();
$paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
$args = array(
'post_type' => 'post',
'paged' => $paged,
'post_status' => 'publish',
'order' => 'DESC'
);
$loop = new WP_Query( $args );
?>
<div class="elementor-posts blog-archive">
<?php
if ( $loop->have_posts() ) {
while ( $loop->have_posts() ) : $loop->the_post();
$postID = get_the_ID();
$content = get_the_content();
$videourl = get_the_post_video_url( $postID );
$video_id = explode("?v=", $videourl);
$video_id = $video_id[1];
$imgyoutube = 'http://img.youtube.com/vi/'.$video_id.'/0.jpg';
$thumb = wp_get_attachment_image_src(get_post_thumbnail_id(), 'full');
?>
<div class="news-post elementor-post elementor-grid-item">
<div class="elementor-post__thumbnail__link" style="background-image: url(<?php echo $thumb[0];?>);">
<?php if(!empty($videourl)){
echo '<a data-fancybox href="'.$videourl.'">
<img alt="'.get_the_title().'" src="'.$thumb[0].'" class="elementor-post__thumbnail"/>
<div class="vdo">
<i class="fa fa-youtube-play" aria-hidden="true"></i>
</div>
</a>';
}elseif(has_post_thumbnail()){
$permlink = get_the_permalink();
echo '<img alt="'.get_the_title().'" src="'.$thumb[0].'" class="elementor-post__thumbnail"/>';
}
else{
}?>
</div>

The simplest solution would be to change href="URL" attribute to data-src="URL"

Related

How do I show custom recent posts in WordPress?

Now it's showing like this: now it's showing like this
I want it to look like this: I want it to look like this
There are two ways to do:
In your WordPress dashboard, go to Appearance » Widgets and add the ‘Recent Posts’ widget to your sidebar.
https://prnt.sc/1rhjdc4
Using wp query
$args = array(
'post_type' => 'product',
'posts_per_page' => 10,
);
$loop = new WP_Query($args);
while ( $loop->have_posts() ) {
$loop->the_post();
?>
<div class="entry-content">
<?php the_title(); ?>
<?php the_content(); ?>
</div>
<?php
}
wp_get_recent_posts( array $args = array(), string $output = ARRAY_A )
Please read this article
https://developer.wordpress.org/reference/functions/wp_get_recent_posts/
<?php
$recent_posts = wp_get_recent_posts();
foreach( $recent_posts as $recent ) {
printf( '<li>%2$s</li>',
esc_url( get_permalink( $recent['ID'] ) ),
apply_filters( 'the_title', $recent['post_title'], $recent['ID'] )
);
}
?>

Cannot get pagination working in Wordpress Page template, already tried and failed a lot

I'm trying to get pagination working in a page template that I am making. I have already been through multiple threads on this website and I've also been searching through the Wordpress.org documentation (and the comments). Every time I reload my page, there is nothing where the pagination should be.
I've tried both get_posts() and WP_query(). WP_query is the one I believe is needed so that's the one I'll be giving you examples from.
Things I've already tried:
Using $paged = ( get_query_var( 'page' ) ) ? absint( get_query_var( 'page' ) ) : 1;
Also tried that last one with 'paged' instead of 'page'.
Using this in the arguments: 'posts_per_page' =>6, 'paged' => $paged,
And using this in the arguments 'posts_per_page=6&paged=' . $paged, 'paged' => $paged,
Tried resetting the query of my loops with wp_reset_query();
There are some other things I've tried too but the above are the ones I see recommended most often.
This is my full code in its current state (I've removed some things to help you read it).
I have tried to make the first loop with get_posts() instead and that didn't make a difference. I've also tried positioning commands like the wp_reset_query() in several different places.
The eventual goal is to have several of these loops on the same page, all except the first with pagination under them (I will be using ajax to allow users to cycle through the different content).
<?php /* Template Name: Home */ ?>
<div>
<?php
/*
First Loop - This one will stay the same on every page. Uses the same categories as the second loop.
*/
$categories = '
category-name1,category-name2
';
$query = new WP_Query( array( 'posts_per_page' =>4, 'category_name' => $categories ) );
?>
<div>
<?php if ( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post(); ?>
<div>
<?php get_template_part( 'entry-boxes-1' ); ?>
</div>
<?php endwhile; wp_reset_query(); endif; ?>
</div>
</div>
<div>
<?php
$paged = ( get_query_var( 'page' ) ) ? absint( get_query_var( 'page' ) ) : 1;
$query = new WP_Query( array( 'posts_per_page' =>6, 'paged' => $paged, 'category_name' => $categories, 'offset' => '4' ) );
if ( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post();
?>
<div>
<?php get_template_part( 'entry-boxes-1' ); ?>
</div>
<?php
endwhile; endif;
pagination_bar();
?>
</div>
Try this
<?php /* Template Name: Home */ ?>
<div>
<?php
/*
First Loop - This one will stay the same on every page. Uses the same categories as the second loop.
*/
$categories = array('category-name1' , 'category-name2');
$query = new WP_Query( array( 'posts_per_page' =>4, 'category_name' => $categories ) );
?>
<div>
<?php if ( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post(); ?>
<div>
<?php get_template_part( 'entry-boxes-1' ); ?>
</div>
<?php endwhile; wp_reset_query(); endif; ?>
</div>
</div>
<div>
<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$query = new WP_Query( array( 'posts_per_page' =>6, 'paged' => $paged, 'category_name' => $categories, 'offset' => '4' ) );
if ( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post();
?>
<div>
<?php get_template_part( 'entry-boxes-1' ); ?>
</div>
<?php endwhile;
$total_pages = $query->max_num_pages;
if ($total_pages > 1){
$current_page = max(1, get_query_var('paged'));
echo paginate_links(array(
'base' => get_pagenum_link(1) . '%_%',
'format' => '/page/%#%',
'current' => $current_page,
'total' => $total_pages,
'prev_text' => false,
'next_text' => false,
));
}
wp_reset_postdata();
endif;
?>
</div>

ACF loop for grid, get/display custom field

I'm using this piece of code in my Wordpress template:
<?php
$args = array( 'numberposts' => '12', 'post_type' => 'training', 'post_status' => 'publish' );
$recent_posts = wp_get_recent_posts( $args );
foreach( $recent_posts as $recent ) {
echo '<div class="col-xs-12 col-md-4"><article><div class="kartel"><a href="' . get_permalink($recent["ID"]) . '">';
if ( has_post_thumbnail( $recent["ID"]) ) {
echo get_the_post_thumbnail($recent["ID"],'medium');
}
echo '</a></div><h3>' . $recent["post_title"].'</h3> ';
echo '<em>Doelgroep //</em>
<p>One-liner/super korte omschrijving</p>';
echo 'Tell me more ';
echo '</article></div>';
}
wp_reset_query();
?>
Thing is that I now want to add a custom field (let's say 'custom_field') that displays a custom excerpt underneath the thumbnail for the grid. I can get the usual fields (excerpt, title, etc.) but not the custom fields. For example the_field ('custom_field'); isn't working..
Any ideas/suggestions?
Hope to hear from you guys!
Filt
First of all change your approach to queries and Wordpress loops using the WP_Query class.
<?php
$args = array( 'numberposts' => '12', 'post_type' => 'training', 'post_status' => 'publish' );
$loop = new WP_Query($args);
if( $loop->have_posts() ) {
while( $loop->have_posts() ){
$loop->the_post(); ?>
<div class="col-xs-12 col-md-4">
<article>
<div class="kartel">
<a href="<?php the_permalink(); ?>">
<?php if( has_post_thumbnail("medium") ) {
the_post_thumbnail( "medium" );
}
?>
</a>
</div>
<a href="<?php the_permalink(); ?>">
<?php the_title("<h3>","</h3>"); ?>
</a>
<em>Doelgroep //</em>
Tell me more
</article>
</div>
<?php }
}
wp_reset_postdata();
?>
Later, in the loop of your posts, you can recall the custom field using:
the_field ('custom'); //which prints the result on screen
$var = get_field ('custom'); //or echo get_field ('custom') which returns the content in a variable.
If you want to recall a specific custom field inserted in a post or page or custom post type, you must use the following syntax:
the_field ('custom', $ post_id);
get_field ('custom', $ post_id)
That's all :)

How can you loop through wordpress posts and using posts_per_page with no duplicates on the last page?

In wordpress i am creating a custom loop/query throughwhich i pass certain parameters. As i click through pages however the last page duplicates some posts/products inorder to satisfy the posts_per_page variable however i would like to specify that i dont want any repetitions. Is there a standard way to do this? It would seem like a pretty obvious point.
<?php
$args = array( 'post_type' => 'product', 'posts_per_page' => 5, 'product_cat' => 'products', 'orderby' => 'rand' );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post(); global $product; ?>
<li class="product">
<a href="<?php echo get_permalink( $loop->post->ID ) ?>" title="<?php echo esc_attr($loop->post->post_title ? $loop->post->post_title : $loop->post->ID); ?>">
<?php woocommerce_show_product_sale_flash( $post, $product ); ?>
<?php if (has_post_thumbnail( $loop->post->ID )) echo get_the_post_thumbnail($loop->post->ID, 'shop_catalog'); else echo '<img src="'.woocommerce_placeholder_img_src().'" alt="Placeholder" width="300px" height="300px" />'; ?>
<h3><?php the_title(); ?></h3>
<span class="price"><?php echo $product->get_price_html(); ?></span>
</a>
<?php woocommerce_template_loop_add_to_cart( $loop->post, $product ); ?>
</li>
<?php endwhile; ?>
<?php previous_posts_link('« Previous', $loop ->max_num_pages);
next_posts_link(' Next »', $loop ->max_num_pages); ?>
<?php wp_reset_query();?>
It would seem like a pretty obvious point.
Not if you're using 'orderby' => 'rand' on your query, which is also very expensive by the way on large tables.
If you want to make sure that the items which already have been displayed will be excluded in the upcoming queries you'll need to save the post_ids which already has been displayed and pass them to the post__not_in parameter, see the codex page an search for post__not_in .
You could do something like this which should help you get the idea:
...
// don't forget to initialize the session somewhere
$already_displayed_post_ids = [];
if ( ! isset( $_SESSION['already_displayed_post_ids'] ) {
$_SESSION['already_displayed_post_ids'] = $already_displayed_post_ids;
} else {
$already_displayed_post_ids = array_merge( $already_displayed_post_ids, $_SESSION['already_displayed_post_ids'] );
}
$args = [
'post_type' => 'product',
'posts_per_page' => 5,
'product_cat' => 'products',
'orderby' => 'rand',
'post__not_in' => $already_displayed_post_ids
];
$loop = new WP_Query( $args );
...

More then one Post Type Failing with Pagination

I have been searching for two days now and have not found a solution. Hopefully someone out there can help. Whenever I add an additional post_type the pagination will not work beyond the first page.
Example:
mywebsite.com/myreport/ works fine and 10 content are displayed
mywebsite.com/myreport/page2/ leads to a 404 error.
Code Inside archive-myreport.php
<?php
$paged = 1;
if(get_query_var('paged')) {
$paged = get_query_var('paged');
} elseif(get_query_var('page')) {
$paged = get_query_var('page');
}
$temp = $wp_query;
$wp_query=null;
$args = array(
'post_type' => array ( 'annual-reports', 'current-reports'),
'post_status' => 'publish',
'paged' => $paged,
);
$wp_query = new WP_Query( $args );
while ($wp_query->have_posts()) : $wp_query->the_post();
?>
<a target="blank" href="<?php the_permalink(); ?>">My Report</a>
<?php
endwhile;
previous_posts_link('Previous 10'); ?> <?php next_posts_link('Next 10');
//clear again
$wp_query = null;
//reset
$wp_query = $temp;
?>
Tried Alternative via pre_get_posts:
I tried adding to functions.php, after doing so, the page would redirect to index.php:
function wpa_post_types( $query) {
if ( is_post_type_archive( 'myreport' )) {
$query->set( 'post_type', array( 'annual-reports', 'current-reports' ) );
}
}
add_action( 'pre_get_posts', 'wpa_post_types' );
Instead of WP_query try using query_posts and see if this solves your problem.

Resources