[For English Users]
How to Customize your Social Media (Facebook, Twitter, Google+ .etc)
Here are the steps: (Also you can see each steps in the Image below)
- Install Dot-B theme
- Come to WordPress Admin Dashboard and click [Appearance]->[Menu]
- *important* Click on TopRight of the page [Screen Option] dropdown item and mark [Css Class]
- Click “+”，create a Menu with any name you like，e.g. “Social-Media-Test456“
- Click on left [Theme Location] – [Custom Social Media] and choose “Social-Media-Test456“
- Input URL and Label in [Custom Links] and then click Add, then you can see the item in the Right place
- *important* Spread it and fill in a CSS name. (you can find the CSS Style Name for Dot-B in the end of this post )
- Adjust the order as you like and Save it.
————————- updated 2011.11.29
一直以来，主题作者都为如何给用户提供好的自定义社交媒体按钮的方法犯愁。
没有听懂？其实就是调整 类似Faceb/ook Twii/tter 这些按钮图标种类和顺序的问题，因为不同的用户使用的社交媒体种类和数量都是不同的
下面提供一个我的解决方案，希望这种思路可以帮助开发者和使用者。
效果图：
首先，用户使用教程：附 流程图
- 确认你的 Theme 支持这个功能，比如 Dot-B
- 登录到WordPress后台，点击 [Appearance]->[Menu]
- *重要* 点击右上角的 [Screen Option]下拉选项，勾选[Css Class]
- 点击”+”，新建一个Menu，输入名称随意，如：”Social-Media-Test456“
- 在左侧[Theme Location]中为 [Custom Social Media]选择使用刚刚创建的 “Social-Media-Test456“
- 在[Custom Links]中输入 URL 和 Label 之后点 Add添加，会发现右侧出现了此项
- *重要* 在右侧点击展开此项，为其设置 Css 样式，也就是主题作者预先定义过的样式，见文末
- 调整成你喜欢的顺序和类别保存即可
———————————————For developers below.
然后，开发者添加教程：
1.在 function.php 中注册Menu
// Register nav_menu
if ( function_exists('register_nav_menu') ) {
register_nav_menus(
array(
'primary' => 'Header Menu',
'social_media' => 'Custom Social Media'
)
);
}
2.在需要调用的地方添加如下代码，如在 header.php
<div id="social">
<?php if(has_nav_menu( 'social_media' )) : wp_nav_menu(array('theme_location' => 'social_media','depth' => '1', 'fallback_cb' => false)); else : ?>
<div>
<ul id="menu-default">
<li><a target="_blank" href="http://#">google</a></li>
<li><a target="_blank" href="http://#">delicious</a></li>
</ul>
</div>
<?php endif;?>
</div>
3.为这些社交每天设置预定的样式，在 style.css 中添加如下
.delicious a {background:url("images/delicious .png") no-repeat scroll 0 0 transparent}
.flickr a {background:url("images/flickr.png") no-repeat scroll 0 0 transparent}
4.现在，你就可以使用开篇的教程来自定义网站上显示图标的顺序和种类了。
—————————–
PS: hzlzh 为 Dot-B 主题Icons 预设了如下的css 样式，若要调用，请务必填写对应名称！(见下图)
沙发！
这……其实还可以命名为“WP自定义菜单使用方法之一”
@zwwooooo: 当然，这样命名不错
其实除了最基本的自定义菜单的功能之外，唯一有亮点的就是给单独的菜单项加class的功能。
学习了。
3.的自定义菜单
这个创意用法还真不错哟
不错，转发。
呵呵，这个很有必要哈
还在博客上放像推特之类的链接不怕？
@Harid: 很怕，已经很注意了
Dot-B公开了?
@yesureadmin: 这个主题已经发布
不错的主意，活用自定义菜单
这个设计相当棒啊
不懂代码啊
很有用，流程很详细，我试了一下~成了~
呵呵，这个很有必要哈哈
不过，这些按钮貌视用处不大。还是直接递交到各大书签引来的流量大。
Nice theme…. i have used it for my blog. See Green Home
@choirul: It looks good in your site, also you can change the FB and Tvvitter links by reading this post.
用上啦，哈哈。
为什么我添加之后回事RSS的图标的，就是裂纹的那个RSS
发现了，原来是sina
@lrxianed: 是的，要按照本文结尾正确填写 CSS 的 Class 名称
好像真没这个必要吧，现在不是有很多社会化应用吗？
Very nice work on this theme, wish I had used it on my free android blog. Much appreciated.
*重要* 点击右上角的 [Screen Option]下拉选项，勾选[Css Class]
勾选了以后无效…
@刘无伤: 不可能无效的，勾选之后会出现填写class的项目框，都和图里一样。
呵呵~现在用的就是这个主题~挺喜欢的~
好喜歡這個主題，但發覺少了plurk的圖示，不知道之後還會不會補上?
@others: 可以啊，那我抽空做一个 plurk 的 icon 发布
主题上不是自带了F和T两个吗？怎么直接修改他们的链接呢？
@Young Free!: 你按照这个页面的教程就能修改了
木有新浪微博图标啊,好可惜啊…
你好,我在你另外一篇文章里看到有新浪微博的Logo了,请问添加 xlwb ,咋没用?是不是没有添加在这个主题里?
@佐小白: 在主题中，添加class=”sina”，而不是xlwb
Hi
I updated my social media but it’s showing up in two places. Above and below the banner. I just want it above the bannder what am I doing wrong?
@wendi: You need to make sure the 5th step(in the step-by-step image this post) was set correctly, and then the social media links and Icons will only show up above as your wish. (try to create another menu for site navigation bar)