Posted on 14 mai 2011 in Wordpress | 4 comments


Souvent, les thèmes dits premiums, gratuits ou payants, ont un logo par défaut unique. Ils vous obligent à créer et insérer le vôtre si vous ne voulez pas voir celui du créateur du thème s’afficher. Avec de tels thèmes, la seule alternative est le vide, et non le titre de votre blog. Or, on n’a pas forcément envie de mettre un logo, et laisser la case vide n’élimine pas ce logo étranger. C’est le cas pour les thèmes de Elegantthemes, Woothemes, WPShower et bien d’autres. Ce type de codage m’énerve et me fait perdre un précieux temps. Combien de fois suis-je amenée à installer un thème premium pour un client qui n’a pas nécessairement de logo, ou pas encore, et il faut tout de même, en attendant, au moins voir le titre de son blog. J’ai donc modifié l’entête de tous les thèmes premiums dont je dispose afin de proposer une plus grande liberté.

Pour permettre le chargement d’un logo ou rien, ajoutons aussi le titre et slogan habituel.

Évidemment, le code ci-dessous sera à adapter au cas par cas, mais le procédé est toujours le même.

Proposition 1 : logo + Titre

Exemple pour Elegantthemes, avec Envisioned.

Dans le header, remplacer la fonction

1
2
3
4
                        <a href="<?php bloginfo('url'); ?>">
                            <?php $logo = (get_option('envisioned_logo') <> '') ? get_option('envisioned_logo') : get_bloginfo('template_directory').'/images/logo.png'; ?>
                            <img src="<?php echo $logo; ?>" alt="Envisioned Logo" id="logo"/>
                        </a>
						<a href="<?php bloginfo('url'); ?>">
							<?php $logo = (get_option('envisioned_logo') <> '') ? get_option('envisioned_logo') : get_bloginfo('template_directory').'/images/logo.png'; ?>
							<img src="<?php echo $logo; ?>" alt="Envisioned Logo" id="logo"/>
						</a>

Par

1
2
3
4
5
6
                        <a href="<?php bloginfo('url'); ?>">
<?php if (get_option('envisioned_logo')) { ?>
                            <?php $logo = (get_option('envisioned_logo')) ; ?>
                            <img src="<?php echo $logo; ?>" alt="<?php bloginfo('name'); ?>" id="logo"/>
                        </a><?php }; ?>
<h1><?php bloginfo('name'); ?>&nbsp;<span><?php bloginfo('description'); ?><span></h1>
						<a href="<?php bloginfo('url'); ?>">
<?php if (get_option('envisioned_logo')) { ?>
							<?php $logo = (get_option('envisioned_logo')) ; ?>
							<img src="<?php echo $logo; ?>" alt="<?php bloginfo('name'); ?>" id="logo"/>
						</a><?php }; ?>
<h1><?php bloginfo('name'); ?>&nbsp;<span><?php bloginfo('description'); ?><span></h1>

Si vous utilisez un autre thème, il suffit de modifier le nom de l’option.

Voici une variante conditionnelle pour déterminer que ce logo n’ira qu’en page d’accueil (home.php) si logo

1
2
3
4
5
6
7
8
            <?php if ( is_home() && get_option('envisioned_logo')) { ?>
                            <?php $logo = (get_option('envisioned_logo')) ; ?>
                            <img src="<?php echo $logo; ?>" alt="<?php bloginfo('name'); ?>" id="logo"/>
                        </a>
            <h1 class="blogtitre"><?php bloginfo('name'); ?>&nbsp;&nbsp;&nbsp;&nbsp;<span><?php bloginfo('description'); ?><span></h1>
<?php } else { ?>
    <h1><?php bloginfo('name'); ?></h1></h2><?php bloginfo('description'); ?></h2>
<?php }; ?>
			<?php if ( is_home() && get_option('envisioned_logo')) { ?>
							<?php $logo = (get_option('envisioned_logo')) ; ?>
							<img src="<?php echo $logo; ?>" alt="<?php bloginfo('name'); ?>" id="logo"/>
						</a>
			<h1 class="blogtitre"><?php bloginfo('name'); ?>&nbsp;&nbsp;&nbsp;&nbsp;<span><?php bloginfo('description'); ?><span></h1>
<?php } else { ?>
	<h1><?php bloginfo('name'); ?></h1></h2><?php bloginfo('description'); ?></h2>
<?php }; ?>

Pour tout autre thème

De même dans les superbes thèmes gratuits que produit wpshower.

Ici "Sight" est une image logo du nom du thème et non le titre du blog.

Prenons le thème Sight par exemple. Le logo est codé, comme toujours, dans le header.php. Cherchez la ligne :

1
2
3
                <div class="logo">
                    <a href="<?php bloginfo('home'); ?>"><img src="<?php echo (get_option('logo_url')) ? get_option('logo_url') : get_bloginfo('template_url') . '/images/logo.png' ?>" alt="<?php bloginfo('name'); ?>"/></a>
                </div>
                <div class="logo">
                    <a href="<?php bloginfo('home'); ?>"><img src="<?php echo (get_option('logo_url')) ? get_option('logo_url') : get_bloginfo('template_url') . '/images/logo.png' ?>" alt="<?php bloginfo('name'); ?>"/></a>
                </div>

A remplacer par

1
2
3
4
5
6
7
8
9
    <div class="logo">
                        <a href="<?php bloginfo('url'); ?>">
<?php if (get_option('logo_url')) { ?>
                            <?php $logo = (get_option('logo_url')) ; ?>
                            <img src="<?php echo $logo; ?>" alt="<?php bloginfo('name'); ?>" id="logo"/>
                        </a><?php }; ?>
<h1><?php bloginfo('name'); ?></h1>
<h2><?php bloginfo('description'); ?></h2>
    </div>
    <div class="logo">
						<a href="<?php bloginfo('url'); ?>">
<?php if (get_option('logo_url')) { ?>
							<?php $logo = (get_option('logo_url')) ; ?>
							<img src="<?php echo $logo; ?>" alt="<?php bloginfo('name'); ?>" id="logo"/>
						</a><?php }; ?>
<h1><?php bloginfo('name'); ?></h1>
<h2><?php bloginfo('description'); ?></h2>
    </div>

A présent, avec ou sans logo chargé, c’est bien le titre donné à votre blog qui prime, et non le logo du créateur.

Proposition 2 :
Là on va avoir : si pas de logo indiqué, le tire + la description (slogan), et dans un style désiré (à paramétrer)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
            <!-- Start Logo -->
<?php if ( is_home() && get_option('sky_logo')) { ?>
            <a href="<?php echo home_url(); ?>">
                <?php $logo = '' != get_option( 'sky_logo' ) ? esc_attr( get_option( 'sky_logo' ) ) : get_template_directory_uri() . '/images/logo.png'; ?>
                <img src="<?php echo $logo; ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" id="logo" />
            </a>
 
<?php } else { ?>
    <div id="blog-title"><?php bloginfo('name'); ?></div>
    <p id="slogan"><?php bloginfo('description'); ?></p>
 
<?php }; ?> 
 
            <!-- End Logo -->
			<!-- Start Logo -->
<?php if ( is_home() && get_option('sky_logo')) { ?>
			<a href="<?php echo home_url(); ?>">
				<?php $logo = '' != get_option( 'sky_logo' ) ? esc_attr( get_option( 'sky_logo' ) ) : get_template_directory_uri() . '/images/logo.png'; ?>
				<img src="<?php echo $logo; ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" id="logo" />
			</a>

<?php } else { ?>
	<div id="blog-title"><?php bloginfo('name'); ?></div>
	<p id="slogan"><?php bloginfo('description'); ?></p>

<?php }; ?>	

			<!-- End Logo -->

Dans ce cas, penser à ajouter une classe dans la feuille de style style.css. Par exemple:

1
#blog-title,#blog-title a { font-size: 36px; float: left; margin:0px 15px 0px 0px; }
#blog-title,#blog-title a {	font-size: 36px; float: left; margin:0px 15px 0px 0px; }

Et ainsi de suite.