WordPress : changer le titre du blog en une image en utilisant la fonction de filtre dans le thème enfant

Salut les gars, j’essaie de changer le titre du blog en image.

C’est ce que j’essaie d’atteindre

J’ai essayé d’ajouter ce code au css et ça marche.

.rh-content {
text-indent: -9999px;
background: url(http:file-location.png) 10px 10px no-repeat;
/* height: 100%; */
}

Mais c’est le résultat

L’image ne s’affiche pas assez. Aussi, je veux l’ajouter au functions.php dans mon thème enfant. j’ai essayé ce code

add_filter('the_title', function($title){
$title = '<img src="'. get_template_directory_uri() .'/images/blah.png">' .
$title;
return $title;
}); ?>

mais c’est le résultat. C’est ce que je vois quand j’ajoute la fonction de filtre

Ceci est le code brut

<div class="rh-content">
        <?php if (is_author() || is_archive() || is_day() || is_tag() || is_category() || is_month() || is_day() || is_year()): ?>
            <h1 style="<?php echo esc_attr($styles_title); ?>">
                <?php if (is_category()): ?>
                    <?php echo single_cat_title("", true); ?>
                <?php elseif(is_tag()): ?>
                    <?php echo single_tag_title("", true); ?>
                <?php elseif(is_day()): ?>
                    <?php echo get_the_date('F dS Y'); ?>
                <?php elseif(is_month()): ?>
                    <?php echo get_the_date('Y, F'); ?>
                <?php elseif(is_year()): ?>
                    <?php echo get_the_date('Y'); ?>
                <?php elseif(is_author()): ?>
                    <?php $userdata = get_userdata($GLOBALS['author']); ?>
                    <?php echo esc_html__("Articles posted by", 'thebuilders'); ?> "<?php echo esc_attr($userdata->first_name)." ".esc_attr($userdata->last_name); ?>"
                <?php else: ?>
                    <?php echo esc_html__("Posts", 'thebuilders'); ?>
                <?php endif ?>
            </h1>
            <div style="<?php echo esc_attr($styles_breadcrumbs); ?>" class="nz-breadcrumbs nz-clearfix"><?php thebuilders_ninzio_breadcrumbs(); ?></div>
        <?php else: ?>
            <?php if (isset($GLOBALS['thebuilders_ninzio']['blog-title']) && !empty($GLOBALS['thebuilders_ninzio']['blog-title'])): ?>
                <h1 style="<?php echo esc_attr($styles_title); ?>"><?php echo esc_attr($GLOBALS['thebuilders_ninzio']['blog-title']); ?></h1>
            <?php else: ?>
                <h1 style="<?php echo esc_attr($styles_title); ?>"><?php echo esc_html__("Posts", 'thebuilders'); ?></h1>
            <?php endif ?>
            <div style="<?php echo esc_attr($styles_breadcrumbs); ?>" class="nz-breadcrumbs nz-clearfix"><?php thebuilders_ninzio_breadcrumbs(); ?></div>
        <?php endif; ?>
    </div>

Ceci est le lien URL. https://harborllc.wpengine.com/blogs/

Merci beaucoup les gars

Solution n°1 trouvée

je viens de modifier le contenu

 jQuery(function($) {
 $('.rh-content h1').replaceWith(function(){
return $('<img src="https://harborllc.wpengine.com/wp-content/uploads/2018/01/Harbor-Enterprises-Logo-Transparent-White-Outline-Revised-2.png"/>', {
    html: this.innerHTML
})
})
});

Solution n°2 trouvée

Le problème avec votre utilisation du the_titlefiltre est que le filtre est appliqué sur toutes les utilisations de n’importe quel titre n’importe où, donc vous définissez le titre de chaque article et page sur l’image. Vous devez utiliser le 2ème argument passé au filtre, $id, pour n’appliquer vos modifications qu’au titre souhaité :

function wpse_294263_title_image( $title, $id ) {
    if ( $id === 2 ) {
        $title = '<img src="'. get_template_directory_uri() .'/images/blah.png">';
    }

    return $title;
}
add_filter( 'the_title', 'wpse_294263_title_image' );

2doit être l’ID de la page à laquelle appartient le titre. S’il s’agit de la page définie sur la page Messages dans Paramètres> Lecture , vous pouvez la définir dynamiquement avec get_option( 'page_for_posts' ).

Le problème avec votre implémentation CSS était que vous avez défini l’image comme arrière-plan mais que vous n’avez pas adapté l’arrière-plan à l’élément ou redimensionné l’élément en fonction de l’arrière-plan. Vous voulez probablement faire un mélange des deux :

.rh-content {
    text-indent: -9999px;
    background: url(http:file-location.png) left center / contain no-repeat;
    height: 100px;
}

La containvaleur in backgroundgarantit que l’image d’arrière-plan est dimensionnée pour s’adapter à l’arrière-plan quelle que soit la taille des éléments, tandis height: 100pxqu’ajuste cette taille afin que l’image devienne alors une taille raisonnable.