最全财神爷图片见者得福

書名： WordPress 2.7 Cookbook
作者名： Jean-Baptiste Jung
本章字數： 509字
更新時間： 2021-04-01 13:55:49

Integrating your own logo

By default, most WordPress themes display a header text—usually the name of the blog and blog description. This is a nice option for personal blogs. However, I personally believe that displaying your own personal logo will make your blog look even more professional.

In this recipe, we shall learn how we can add a logo instead of the default blog name and slogan on a WordPress theme. The following screenshot shows the logo integration on a default WordPress theme:

Getting ready

For this recipe, you'll need your own logo and a WordPress theme on which you'd like to integrate your logo. I shall be using the WordPress default theme for this recipe.

However, there are a few things to be kept in mind before getting on with this recipe:

Some recent themes don't display blog name and slogan anymore—instead, they display a default logo which can be changed by editing the code or even by defining a new logo in a custom WordPress control panel (which shall be covered in Chapter 3).
Due to the fact that each theme is coded differently, the result of this recipe may vary from one theme to another.

How to do it...

Open the header.php file and locate the part of code where the blog name and description are displayed. In the WordPress default theme, it looks like this:

<div id="header">
<div id="headerimg">
<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
<div class="description"><?php bloginfo('description'); ?></div>
</div>
</div>

We can just put an html image tag between the <h1> and </h1> tags, but there's a much better, SEO friendly, way to display our logo—by using CSS.
Upload your logo into your wp-content/themes/default folder. Once you're done, open the style.css file from the WordPress default theme. Go to line number 95. You'll see the CSS properties for the #headerimg .description element:
```
#headerimg .description {
font-size: 1.2em;
text-align: center;
}
```

Now, replace the preceding piece of code by the following piece of code:

#headerimg h1{
    background: transparent url(images/logo.png) no-repeat 50% 30px;
    text-indent:-9999px;
}
#headerimg .description 
{
    text-indent:-9999px;
}

Don't forget to change the image name and path if your logo isn't named logo.png or is not located at wp-content/themes/default/images.

How it works...

As you have seen, we haven't edited a single line of HTML to achieve our logo integration. We didn't have to, and it's better this way. Having h1, an html element, as the header text is good for your semantic and SEO. Due to the text-indent CSS property, we're able to hide the text by indenting it—this is the reason why we added this property to both #headerimg h1 and #headerimg .description.

We do not want our logo to be hidden, this is why we used the CSS background property to display it.

There's more...

Our logo looks good, but its usability can be improved even more by adding a link to the logo on the blog homepage.

Adding a link to the homepage

To add a link to the homepage, open the header.php and replace the following line of code on line 33:

<div id="headerimg">

With the following line of code:

<div id="headerimg" onclick="document.location.href='<?php echo get_option(\'home\'); ?>';">

官术网_书友最值得收藏!