How to Customize your Social Media (Facebook, Twitter, Google+ .etc)

Here are the steps:  (Also you can see each steps in the Image below)

1. Install Dot-B theme
2. Come to WordPress Admin Dashboard and click [Appearance]->[Menu]
3. *important*  Click on TopRight of the page [Screen Option] dropdown item and mark [Css Class]
4. Click “+”，create a Menu with any name you like，e.g. “Social-Media-Test456“
5. Click on left [Theme Location] – [Custom Social Media] and choose “Social-Media-Test456“
6. Input URL and Label in [Custom Links] and then click Add, then you can see the item in the Right place
7. *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 )
8. Adjust the order as you like and Save it.

一直以来，主题作者都为如何给用户提供好的自定义社交媒体按钮的方法犯愁。

下面提供一个我的解决方案，希望这种思路可以帮助开发者和使用者。

效果图：

1. 确认你的 Theme 支持这个功能，比如 Dot-B
2. 登录到WordPress后台，点击 [Appearance]->[Menu]
3. *重要* 点击右上角的 [Screen Option]下拉选项，勾选[Css Class]
4. 点击”+”，新建一个Menu，输入名称随意，如：”Social-Media-Test456“
5. 在左侧[Theme Location]中为 [Custom Social Media]选择使用刚刚创建的 “Social-Media-Test456“
6. 在[Custom Links]中输入 URL 和 Label 之后点 Add添加，会发现右侧出现了此项
7. *重要* 在右侧点击展开此项，为其设置  Css 样式，也就是主题作者预先定义过的样式，见文末
8. 调整成你喜欢的顺序和类别保存即可

// Register nav_menu
 if ( function_exists('register_nav_menu') ) {
      register_nav_menus(
           array(
             'primary' => 'Header Menu',
             'social_media' => 'Custom Social Media'
           )
      );
 }

<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>

.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}