css - wordpress css 图片链接

Question

你好——我正在尝试(并且惨败)使我的 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;
}

Answer 1

您没有任何实际链接(<a> 的)；供人们点击。您只需将背景图片应用到您的#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 文件旁边的图像文件夹的相对链接。