My theme contains a parallax header image. How can I change the URL of the header image so that it uses HTTPS
? I want to do it manually.
Currently the URL is:
.jpg
I want to change it to:
.jpg
Plugins are not helping me on this specific file (they are converting others). Chrome tells me the header is being loaded by jquery.js
. I have no idea how jQuery is doing this.
I believe editing functions.php
can help, but how can I do it?
My theme contains a parallax header image. How can I change the URL of the header image so that it uses HTTPS
? I want to do it manually.
Currently the URL is:
http://example.com/themes/abc/header.jpg
I want to change it to:
https://example.com/themes/abc/header.jpg
Plugins are not helping me on this specific file (they are converting others). Chrome tells me the header is being loaded by jquery.js
. I have no idea how jQuery is doing this.
I believe editing functions.php
can help, but how can I do it?
Have you considered Protocol Rewriting? The code below will convert all http:
and https:
to //
for each script, link, base, and image. Place this in your functions.php
:
add_action( 'plugins_loaded', 'wpse_232287_init' );
function wpse_232287_init() { // Initiate the function
ob_start( 'wpse_232287_remove_http' );
}
function wpse_232287_remove_http( $buffer ) {
// Check for a Content-Type header, only apply rewriting to "text/html" or undefined
$headers = headers_list();
$content_type = null;
foreach ( $headers as $header ) {
if (strpos( strtolower( $header ), 'content-type:' ) === 0 ) {
$pieces = explode( ':', strtolower( $header ) );
$content_type = trim( $pieces[1] );
break;
}
}
if ( is_null( $content_type ) || substr( $content_type, 0, 9 ) === 'text/html' ) { // Replace 'href'/'src' attributes within script/link/base/img tags with '//'
$return = preg_replace( "/(<(script|link|base|img|form)([^>]*)(href|src|action)=[\"'])https?:\\/\\//i", "$1//", $buffer );
if ( $return ) { // On regex error, skip overwriting content
$buffer = $return;
}
}
return $buffer;
}
To change the URL of the header image to use HTTPS
, you can use jquery to target the element that contains the header image and update its src attribute. You can add this jquery script to your themes js file or directly to your WordPress theme's footer.
WP themes already include jQuery, but if yours does not, you can enqueue it in your themes functions.php
file first.
function my_theme_enqueue_scripts() {
wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_scripts');
once jQuery is loaded, you can add a script to update the header image URL to use HTTPS. Use a functions.php
file inside your theme (or child theme if exists) template add this code below.
function add_this_script_footer() {
?>
<script>
jQuery(document).ready(function($) {
// Target the header image element using its class or ID
var headerImage = $('.parallax-header-image');
// Check if the header image exists
if (headerImage.length) {
// Get the current image URL
var imageUrl = headerImage.attr('src');
// Replace 'http://' with 'https://' in the image URL
var secureImageUrl = imageUrl.replace('http://', 'https://');
// Update the header image URL to use HTTPS
headerImage.attr('src', secureImageUrl);
}
});
</script>
<?php }
add_action('wp_footer', 'add_this_script_footer');
Replace .parallax-header-image
with the appropriate selector for your header image element.
str_replace
to change http to https in a specific string. First you will need to find the code responsible for adding this image. – Robert hue Commented Oct 24, 2015 at 5:12