首页 问答 正文

如何为WordPress主题添加社交媒体图标?

注册会员 / 悠然自学 / 2023-06-11/ 浏览 54 次

  1. 首先,在主题文件夹中创建一个新的文件夹,名为“social-media-icons”。

  2. 在这个文件夹中创建一个新的PHP文件,名为“social-media-icons.php”。

  3. 在这个文件中添加以下代码,用于在主题中显示社交媒体图标:

<?php

function social_media_icons() { ?>

    <ul class="social-media-icons">
        <li><a href="#" target="_blank"><i class="fab fa-facebook"></i></a></li>
        <li><a href="#" target="_blank"><i class="fab fa-twitter"></i></a></li>
        <li><a href="#" target="_blank"><i class="fab fa-instagram"></i></a></li>
        <li><a href="#" target="_blank"><i class="fab fa-linkedin"></i></a></li>
        <li><a href="#" target="_blank"><i class="fab fa-youtube"></i></a></li>
    </ul>

<?php } 

请注意,你需要使用适当的链接替换“#”。

  1. 接下来,在主题中添加以下代码,以将社交媒体图标添加到你的页面中:
<?php 
    if ( function_exists( 'social_media_icons' ) ) {
        social_media_icons();
    }
?> 
  1. 最后,在你的CSS文件中添加以下代码,以样式化社交媒体图标:
.social-media-icons {
    list-style: none;
    margin: 0;
    padding: 0;
}

.social-media-icons li {
    display: inline-block;
    margin-right: 10px;
}

.social-media-icons li:last-child {
    margin-right: 0;
}

.social-media-icons a {
    color: #000;
    display: block;
    font-size: 18px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    width: 40px;
}

.social-media-icons i {
    margin-right: 0;
} 

请注意,你可能需要修改样式以匹配你的主题。

大家谈论
    我的见解