نحوه اضافه کردن آیکون های سفارشی به فهرست های وردپرس به شکلی که در تصویر پایین میبینید رو آموزش خواهیم داد. ما در این مثال از قالب 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” رو تیک بزنید. سپس پیوندها رو مجددا ویرایش کنید و برای هر پیوند کلاس مورد نظر رو طبق تصویر وارد کنید

منبع : تک طرح

 

درباره نویسنده

محمد کرمانی هستم برنامه نویس و طراح وب سایت

دیدگاه خود را بنویسید

Time limit is exhausted. Please reload CAPTCHA.