در این آموزش کوتاه نحوه اضافه کردن آیکون های سفارشی به فهرست های وردپرس به شکلی که در تصویر بالا میبینید رو یاد میگیریم. ما در این مثال از قالب Twenty Eleven استفاده میکنیم که برای قالب های دیگر هم میتونید با یک سری تغییرات جزئی در کد و تصاویر نتیجه مشابهی رو داشته باشید. با ما همراه باشید

برای شروع کد زیر رو در فایل functions.php پیدا کنید:

register_nav_menu( 'primary', __( 'Primary Menu', 'twentyeleven' ) );

و این کد رو زیر کد بالا اضافه کنید:

register_nav_menu( 'alter', __( 'فهرست اضافی', 'twentyeleven' ) );

حالا این کد

<?php wp_nav_menu( array( 'theme_location' => 'alter' ) ); ?>

رو پایین کد زیر اضافه کنید:

<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>

سپس این کدها رو به فایل style.css اضافه کنید:

#access .twitter, #access .rss, #access .facebook {
    float: left;
}
#access .twitter a, #access .rss a, #access .facebook a {
    background: transparent url(images/social-sprite.png) 0 0 no-repeat;
    padding: 0;
    text-indent: -9999px;
    width: 70px;
}
#access .rss a { background-position: 0 0; }
#access .facebook a { background-position: 0 -96px; }
#access .twitter a { background-position: 0 -48px; }
#access .rss a:hover, #access .rss a:focus, #access .rss a:active {
    background: transparent url(images/social-sprite.png) 0 -144px no-repeat;
}
#access .twitter a:hover, #access .twitter a:focus, #access .twitter a:active {
    background: transparent url(images/social-sprite.png) 0 -192px no-repeat;
}
#access .facebook a:hover, #access .facebook a:focus, #access .facebook a:active {
    background: transparent url(images/social-sprite.png) 0 -240px no-repeat;
}

و این تصویر رو در فولدر twentyeleven/images آپلود کنید

در این مرحله باید آیکون های مورد نظرتون رو از منوی “فهرست ها” اضافه کنید. در ابتدا دو فهرست با نام های “فهرست اول” و “شبکه های اجتماعی” اضافه کنید. منوهای موجود در قالبتون رو به “فهرست اول” اضافه کنید و از سمت راست این فهرست رو بعنوان فهرست اصلی تعیین کنید

حالا از قسمت سمت راست در جعبه “پیوندهای دلخواه” پیوندهای مورد نظرتون رو اضافه کنید. حالا روی دکمه “تنظیمات صفحه” در بالای صفحه کلیک کنید و گزینه “کلاس CSS” رو تیک بزنید. سپس پیوندها رو مجددا ویرایش کنید و برای هر پیوند کلاس مورد نظر رو طبق تصویر وارد کنید

تمام شد! برای موارد مختلف میتونید با اعمال تغییرات جزئی در کدها و تغییر آیکون ها به نتیجه مورد نظر برسید