I'm using a studiopress theme with backstretch script already included. The site's background image is used but I'm using a content delivery network.
At present the image url is:
mysite.com/media/background-image.jpg
I want it to be:
cdn-url.com/media/background-image.jpg
The reason this matters is the site is hosted in Mid-West, US but has a UK audience. The CDN serves static content from London, UK.
I've posted on studiopress support forum but no reply as yet.
The current functions php code is:
//* Enqueue Backstretch script and prepare images for loading
add_action( 'wp_enqueue_scripts', 'agency_enqueue_backstretch_scripts' );
function agency_enqueue_backstretch_scripts() {
//* Load scripts only if custom background is being used
if ( ! get_background_image() )
return;
wp_enqueue_script( 'agency-pro-backstretch', get_bloginfo( 'stylesheet_directory' ) . '/js/backstretch.js', array( 'jquery' ), '1.0.0' );
wp_enqueue_script( 'agency-pro-backstretch-set', get_bloginfo( 'stylesheet_directory' ).'/js/backstretch-set.js' , array( 'jquery', 'agency-pro-backstretch' ), '1.0.0' );
wp_localize_script( 'agency-pro-backstretch-set', 'BackStretchImg', array( 'src' => str_replace( 'http:', '', get_background_image() ) ) );
}
Can this be altered to get the result I want?
Editing the last line as below works:
wp_localize_script( 'agency-pro-backstretch-set', 'BackStretchImg', array( 'src' => 'cdn_url_here' ) );
Related
I using Google reCaptcha v3 for contactform 7 to my Wordpress site. There is always a little fane in the lower right corner that shows the privacy term. But it is in Danish even the whole website is in English. How can I change the language of it?
add this code to function.php
add_action( 'wpcf7_enqueue_scripts', 'custom_recaptcha_enqueue_scripts', 11 );
function custom_recaptcha_enqueue_scripts() {
wp_deregister_script( 'google-recaptcha' );
$url = 'https://www.google.com/recaptcha/api.js';
$url = add_query_arg( array(
'onload' => 'recaptchaCallback',
'render' => 'explicit',
'hl' => 'en' ), $url );
wp_register_script( 'google-recaptcha', $url, array(), '2.0', true );
}
for English (UK) use en-GB on
'hl' => 'en' ), $url );
I've built an ACF block. As per the documentation, I've created the following via functions.php:
<?php
/**
* Register ACF Blocks
*/
add_action('acf/init', 'my_acf_init');
function my_acf_init() {
// check function exists
if( function_exists('acf_register_block') ) {
// Gallery block
acf_register_block(array(
'name' => 'gallery',
'title' => __('Gallery'),
'description' => __('A custom gallery block.'),
'render_callback' => 'my_acf_block_render_callback',
'category' => 'formatting',
'icon' => 'format-gallery',
'keywords' => array( 'gallery' ),
'enqueue_assets' => function() {
wp_enqueue_style( 'fancybox-style' );
wp_enqueue_script( 'fancybox-js', get_template_directory_uri() . '/js/fancybox/jquery.fancybox.min.js', array('jquery'), '1.0', true );
}
));
}
}
The 'enqueue_assets' function allows me to enqueue styles and scripts if the block is loaded.
The script loads in the footer as intended. However, the styles also load in the footer.
I've tried registering the style via functions and then enqueing it in the block, but it still loads in the footer. Here's how I'm registering the style.
wp_register_style( 'fancybox-style', get_template_directory_uri() . '/js/fancybox/jquery.fancybox.min.css');
Is there a way within WordPress to force styles to load in the header?
I am working on a plugin that bundles multiple custom gutenberg blocks and I am using the #wordpress/scripts npm module to build with webpack. Works great so far, but checking the console when working in the editor gives me errors about blocks being registered already. Currently I have 5 blocks and 4 errors for each, so I assume on each register function call in my plugin PHP all blocks try to register again. Each block has its own src-js file and all get bundled into a single build-js. Furthermore each block has its own register function with add_action in the PHP but the plugins_url is always the same build-js. I believe it's a problem with how my PHP file is handling the registration but I am honestly stuck on how to solve this. I am still struggling with all the changes developing with blocks brings. Maybe anybody has done this already and can point me in the right direction?
Example PHP code with 2 blocks
<?php
/*
Plugin Name: My Blocks Plugin
*/
/* Block 1 */
function register_my_block_1() {
wp_register_script(
'foo-my-block-1',
plugins_url( 'build/index.js', __FILE__ ),
array( 'wp-blocks', 'wp-element', 'wp-editor' )
);
register_block_type( 'foo/my-block-1', array(
'editor_script' => 'foo-my-block-1',
) );
}
add_action( 'init', 'register_my_block_1' );
/* Block 2 */
function register_my_block_2() {
wp_register_script(
'foo-my-block-2',
plugins_url( 'build/index.js', __FILE__ ),
array( 'wp-blocks', 'wp-i18n' )
);
register_block_type( 'foo/my-block-2', array(
'editor_script' => 'foo-my-block-2',
) );
}
add_action( 'init', 'register_my_block_2' );
It should be enough to define the build-JS with wp_register_script() and all dependencies and then register each block with register_block_type():
function plugin_slug_register_blocks() {
// Register build.js
wp_register_script(
'plugin-slug-blocks',
plugins_url( 'build.js', __FILE__ ),
array( 'wp-blocks', 'wp-element', 'wp-data' )
);
// Register Block 1
register_block_type( 'plugin-slug/block-name-1', array(
'editor_script' => 'plugin-slug-blocks',
) );
// Register Block 2
register_block_type( 'plugin-slug/block-name-2', array(
'editor_script' => 'plugin-slug-blocks',
) );
}
add_action( 'init', 'plugin_slug_register_blocks' );
Besides editor_script, register_block_type() also accepts style and editor_style as arguments for the CSS files. If it is a dynamic block, you can also pass a render function with render_callback.
can any one help to solve a problem?
Just For example:
If I have one site wpnpl.com.np
I wannt to give access to the files of a plugin like if they type
wpnpl.com.np/npl they will access the features of the plugin
How to do this???Any Idea
First create plugin short code in your plugin core file
function bartag_func( $atts ) {
$atts = shortcode_atts( array(
'foo' => 'no foo',
'baz' => 'default baz'
), $atts, 'bartag' );
return "foo = {$atts['foo']}";
}
add_shortcode( 'bartag', 'bartag_func' );
After that create a page in wp-admin with slug npl and content with
[bartag foo="bar"]
I am trying to fix an issue where my custom font (ArcaMojora) is not loading on HTTPS protocol and I have seen a ton of fixes everywhere for code that uses #font-face. After searching vigorously through my WP theme files I realized that my theme (Kleanity) doesn't use #font-face at all but rather below code.
How can I adjust the code so that the custom font loads with HTTPS as well as HTTP?
Any and all help appreciated!
// add filter to register custom fonts for font lists
add_filter('gdlr_core_custom_uploaded_font', 'kleanity_register_custom_uploaded_font');
if( !function_exists('kleanity_register_custom_uploaded_font') ){
function kleanity_register_custom_uploaded_font( $custom_fonts ){
$custom_font = kleanity_get_option('typography', 'font-upload');
if( !empty($custom_font) ){
foreach($custom_font as $font_option){
$custom_fonts[$font_option['name']] = array(
'eot' => $font_option['eot'],
'ttf' => $font_option['ttf'],
);
}
}
$custom_fonts['ArcaMojora'] = array(
'name' => 'ArcaMojora',
'eot' => get_template_directory_uri() . '/fonts/ArcaMajora/ArcaMajora3-Bold.eot',
'ttf' => get_template_directory_uri() . '/fonts/ArcaMajora/ArcaMajora3-Bold.ttf',
'font-weight' => 600
);
$custom_fonts['ArcaMojora-Heavy'] = array(
'name' => 'ArcaMojora',
'eot' => get_template_directory_uri() . '/fonts/ArcaMajora/ArcaMajora3-Heavy.eot',
'ttf' => get_template_directory_uri() . '/fonts/ArcaMajora/ArcaMajora3-Heavy.ttf',
'font-weight' => 800,
'varient' => true
);
return $custom_fonts;
} // kleanity_register_custom_uploaded_font
} // function_exists
Well, in the end it was #font-face all along, just hidden away in a file that my search tool wasn't reaching. Sorry about that and thanks for the help! Solution can be found here among other places: Google Web Fonts on HTTPS pages on Chrome