0

您好——我正在尝试（但失败得很惨）让这些社交媒体图标位于我的 Wordpress 博客 (www.doublecrossxx.com) 导航的右上角。我设法添加代码以正确放置它们，但我无法弄清楚如何在图像周围创建可点击区域。

#access {

background: black;
background-image: url("http://doublecrossxx.com/images/sm_dcxx.jpg");
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 599pt 2pt;
height: 27px;
width: 23px;
display: inline-block;

    float: left;

    margin: 0;

    width: 845px;
}
4

2 回答 2

0

您没有任何实际链接（<a>'s）；供人们点击。您只需将背景图像应用于您的#access div。

因此，您必须以某种方式将链接添加到您的#access div。我看不到您的主题文件，但如果我不得不猜测，请查看名为header.php的文件。这通常用于构建 wordpress 页面的顶部。

您应该能够很快找到#access div，并且可以添加链接，如下所示：

<div id="access">
   <!-- some php stuff for your menu -->
   <a id="fb_link" href="(link to facebook)"></a>
   <a id="twitter_link" href="(link to twitter)"></a>
</div>

然后，在您的 CSS（可能是 style.css）中，使用该图像作为这两个链接的背景，而不是 #access：

#fb_link, #twitter_link {
    background: url("images/sm_dcxx.jpg") no-repeat top left;
    width: 25px;
    height: 25px;
 }
#twitter_link {
    background-position: top -25px;
 }

（您将不得不调整 25px 的数量，这只是我的猜测）

这种技术的缺点是，如果您需要更改链接，则必须手动更改 header.php。没什么大不了的，但你应该意识到这一点。

另外，我注意到您的图片网址是这样的：

http://doublecrossxx.com/images/sm_dcxx.jpg

这告诉我您在 wordpress 安装的顶层创建了一个名为 /images/ 的文件夹。你不应该那样做。您添加到 WP 安装中的所有文件至少应放在 /wp-content/ 中。作为演示文稿一部分的图像（如此处所讨论的）绝对应该在您的主题文件夹中。在上面的 CSS 中，我使用了指向位于 CSS 文件旁边的图像文件夹的相对链接。

于 2012-05-02T18:03:01.160 回答
0

我为您创建了一个 js fiddle，它可以让您的链接可点击，如果您有任何问题，请告诉我。

http://jsfiddle.net/trickeedickee/PYTnm/

于 2012-05-02T18:10:35.497 回答