یکی از مواردی که طراحان در تبدیل کردن قالب بوت استرپ به وردپرس ، داینامیک کردن منو بوت استرپ است. اگر به کد های منوی بوت استرپ دقت کنید متوجه میشید که به سادگی داینامیک نخواهد شد. افزونه ی WP Bootstrap Menu نیز برای این مورد طراحی شده اما اگر بخواهیم قالبمان به افزونه خاصی وابسته نباشید در ادامه با ما همراه باشید …
در ابتدا فایل wp_bootstrap_navwalker.php را از لینک زیر دانلود و در فولدر قالبتان (کنار فایل style.css) قرار بدید:
| لینک دانلود | 0.1 مگابایت |
منبع فایل : https://github.com/twittem/wp-bootstrap-navwalker/tree/For-Bootstrap-2.3.2
سپس فایل functions.php قالبتان را باز کرده و کد زیر را به انتهای آن اضافه کنید:
|
1 |
require_once('wp_bootstrap_navwalker.php'); |
اگر قالبتون از قبل از منو وردپرس پشتیبانی نمیکرد کد زیر را نیز به functions.php اضافه نمایید :
|
1 2 3 |
register_nav_menus( array( 'primary' => __( 'Primary Menu', 'THEMENAME' ), ) ); |
با استفاده از دستور زیر در فایل header.php امکان استفاده از منو را اضافه کنید :
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<?php wp_nav_menu( array( 'menu' => 'primary', 'theme_location' => 'primary', 'depth' => 2, 'container' => 'div', 'container_class' => 'collapse navbar-collapse navbar-ex1-collapse', 'menu_class' => 'nav navbar-nav', 'fallback_cb' => 'wp_bootstrap_navwalker::fallback', 'walker' => new wp_bootstrap_navwalker()) ); ?> |
مثال ساده استفاده در header.php به صورت زیره :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <!-- Brand and toggle get grouped for better mobile display --> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="<?php bloginfo('url'); ?>"> <?php bloginfo('name'); ?> </a> </div> <?php wp_nav_menu( array( 'menu' => 'primary', 'theme_location' => 'primary', 'depth' => 2, 'container' => 'div', 'container_class' => 'collapse navbar-collapse navbar-ex1-collapse', 'menu_class' => 'nav navbar-nav', 'fallback_cb' => 'wp_bootstrap_navwalker::fallback', 'walker' => new wp_bootstrap_navwalker()) ); ?> </div> </nav> |
دم شما گرم خیلی عالیه این آموزش 🙂
خواهش میکنم
یعنی من دستی از تابعش استفاده میکنم بعد استایل میدم غیر استاندارده؟
مبین جان متوجه نمیشم منظورتون رو !!!
هیچی من از تابع من از این تابع برای برگه ها استفاده میکنم حواسم نبود گفتین منو
ممنون
نه به این صورت مشکلی نداره اما اگه برای منو خواستید زیر منو داشته باشید مشکل پیش میاد
عالیه منتظر همین آموزش بودم راستی منم اینترنت و شبکه های گسترده میخونم
خواهش میکنم 😉
like AmirDrikvand(Danger 1875)
?php wp_list_pages(‘title_li=&sort_column=menu_order’); ?>
درود…من این کد امتحان کردم ولی کار نمی کنه …ولی من مشکل رو حل کردم باید یه سری کد این توابع رو حذف کنی تا کار منو کار کنه….
اینم کد زیر اصلاح شده:
‘primary’,
‘depth’ => 2,
‘container’ => ‘false’,
‘menu_class’ => ‘nav navbar-nav’,
‘fallback_cb’ => ”,
‘walker’ => new wp_bootstrap_navwalker())
);
?>
موفق باشید…
درود
این کدی بود که نویسنده این اسکریپت خودش برای نمونه گذاشته بود
در هر صورت متشکر
واقعا ممنون
خیلی فکرمو مشغول کرده بود نمی خواستم بوت استرپش کنم
اما الان که اومدم دیدمش دارم میرم ….
ممنونننننننن
خواهش میکنم ، موفق باشید
من تو قسمت drop down مشکل پیدا کردم پس از اینکه این کارو انجام دادم.
سورستو در انجمن بزار برسی میکنم
سلام
سایت خوب و آموزنده ای دارین
خسته نباشید
تشکر ، لطف دارین
خسته نباشین اموزش هاتون فوق العادست . در بوت استرپ بیشتر فایل هام جاوا داره مثل منو ولی هر کاری میکنم تو ورد پرس بالا نمیان . بعد استایل هام چند تاست نمیدونم چجوری باید تعریفشون کنم تو وردپرس ؟؟؟؟؟
تشکر . متوجه منظورتون نمیشم !
در ورد پرس قالبی که طراحی کردم با بوت استرپ فایل های css و javascript بالا نمیان . قالب بدون استایل بالا میاد . فایل های جاوا اسکریپت هم که همونطوره بالا نمان . با چه کدی باید فراخوانی کنم در ورد پرس ؟؟؟؟/
شما باید از تابع bloginfo کمک بگیرید.
سلام استاد من دارم یه قالب وردپرس طراحی می کنم اما متاسفانه برای صفحات single.php مشکل پیش میاد.
وقتی در صفحه اصلی روی یکی از پست ها کلیک می کنم صفحه سینگل باز نمیشه و فقط یه صفحه سفید نمایش داده میشه.
کد های php رو تیکه تیکه از single.php پاک کن ببین با حذف کدوم بخش مشکل حل میشه !
نه استاد کلا با قالب های خود وردپرس هم مشکل داره و صفحات سینگل باز نمیشه
وردپرس را یکبار دستی بروز رسانی کن …
بروز رسانی کردم ولی هنوز هم مشکل داره متاسفانه 🙁
افزونه ها را غیر فعال و حذف کن
سلام و خسته نباشی. مهندس یکی از مشکلات بوت استرپ نیز تبدیل قالب طراحی شده کامنت ها بوت استرپی به قالب وردپرس است که به خاطر زیاد بودن کد های این بخش نیاز به یک اموزش داره که انشاله در سایت قرار بدی.
لطفا به فایل زیر نگاهی بنداز و کدهای کامنت رو برام بزار. کد اضافی اصلا نمیخوام که وقت شما هم گرفته نشه. فقط دیدگاه رو بگیره و کشویی مثل عکس قالب بزاره.
s6.picofile.com/file/8237117726/coment.zip.html
اشکان عزیز من نمیرسم انجامش بدم ، بهتره تو فروم های وردپرس مطرح کنی
میگم شما که این همه زحمت کشیدی این همه فیلم رکورد کردی این هم فیلم رکورد میکردی دیگه 🙂
راستی فونت استفاده شدتون داخل قالب چیه ؟ فونت جذابیه
ویدیو این رو هم ضبط میکنم حتما 😉
از فونت Homa استفاده شده
سلام
اگه میشه آموزش اضافه کردن بوت استرپ به وردپرس رو بگذارید توی سایت
سلام اگر امکان داره به صورت کلیپ این آموزش رو قرار بدید ممنون
خیلی ممنوم از زحماتتون اقای شفیعی
سلام
معذرت می خوام استاد میشه طرز ساخت فایل comments.php
رو که به وسیله ی بوت استرپ طراحی شده باشه را آموزش دهید
خواهش میکنم استاد
ممنونم از زحمات شما
سلام.
کارنمیکنه که 🙁
مهندس لطفا دوره طراحی قالب وردپرس رو آموزش بدین ممنون از لطف شما
سلام از آموزشتون استفاده کردم و کار کرد اما در رزولوشن های پایین تر دکمه تاگل کار نمیکنه و منو رو نشون نمیده باید چیکار کنم؟؟؟؟؟؟؟؟؟؟؟
سلام منم قالب رو به وردپرس تبدیل کردم اما منو تو روزلیشن پایین مشکل داره لطفا اگه راهی برای این مشکل پیدا کردین به من هم خبر بدین با تشکر
سلام برادر.
دوره طراحی قالب وردپرس نمیذاری؟
با سلام و احترام
من دنبال یه کد هستم واسه اینکار !
شما کدی نمیدونید واسه این کار ؟
یه کد جی کوئری میخوام ک وقتی روی سر منو ها کلیک شد ، زیر منو ها باز بشن و در صورت کلیک بعدی دوباره بسته بشن !
شما کدی ندارید واسه این کار ؟
سلام مهندس شفیعیان اگر یک فیلم آموزشی مرتبط با طراحی قالب وردپرس بصورت ریسپانسیو بذاری واقعا ممنونت میشم
سلام
آموزش ووکامرس هم میذارین؟؟
سلام ، بله
خیلی عالیه
چیجوری میشه از دوتا منو استفاده کرد؟؟؟ یعنی کجایه کد هارو باید تغییر بدم
باید 2 تا آیدی مختلف بهشون بدی
ُلام استاد ببخشید من یه مشکل دارم نمیدونم چیجوری حل میشه من یه صفحه ورود کاربران طراحی و کد کردم ولی الان نمیدونم وقتی رویه منو رویه ورود کاربران کلیک میکنم چیجوری باید لینک بهش بدم ک بره به اون صفحه لوگینی ک کد کردم چیکار کنم؟؟
باید از توابع وردپرس و دستوزات شرطی پی اچ پی استفاده کنید
فایل funcation .php تو قالب کدومه ؟ همون قالبی که با بوت استرپ طراحی کردیمو میخام تبدیلش کنم
بله
سلام و خسته نباشید
برای drop down ها (زیر منو ها) رو چه کنیم ؟
سلامت باشید
نمونه سورس که هست ! مشکل چیه ؟
سلام
ممنون که بفکر هستید ولی منم با منوی dropdown مشکل دارم!
سلام دوست من ایمیل بزن راهنمایت کنم. منم مشکلات زیادی با تبدیل منو بوت استرپ به وردپرس داشتم اما با صبر و حوصله و کمک از سایت های خارجی موفق شدم هم منو بالا که شامل برگها میشه و هم منو پائین رو با کلی ور رفتن و سر کله زدن به طور کامل داینامیک کنم خوشحال میشم کمک کنم.
shahrokhinaser@gmail.com
خیلی ممنون از آموزشتون
سلام دوست من ایمیل بزن راهنمایت کنم. منم مشکلات زیادی با تبدیل منو بوت استرپ به وردپرس داشتم اما با صبر و حوصله و کمک از سایت های خارجی موفق شدم هم منو بالا که شامل برگها میشه و هم منو پائین رو با کلی ور رفتن و سر کله زدن به طور کامل داینامیک کنم خوشحال میشم کمک کنم.
shahrokhinaser@gmail.com
داداچ دستت درد نکنه
ولی اسم فایل wp-bootstrap-navwalker.php اینظوریه شما تو کد هات آندرلاین زدی
ارور میده اینطوری
خاهش
اجازه بدین یه ویدیو براش ضبط میکنم…
سلام دوست من ایمیل بزن راهنمایت کنم. منم مشکلات زیادی با تبدیل منو بوت استرپ به وردپرس داشتم اما با صبر و حوصله و کمک از سایت های خارجی موفق شدم هم منو بالا که شامل برگها میشه و هم منو پائین رو با کلی ور رفتن و سر کله زدن به طور کامل داینامیک کنم خوشحال میشم کمک کنم.
shahrokhinaser@gmail.com
ممنون از این آموزش 🙂
سلام داداش خوبی خیلی سایتتون عالیه مخصوصا آموزش ها
العان لینک دانلود کار نمیکنه
خیلی گیرم ممنون میشوم سریعا درستش کنید
سلام آقا شفیعیان عزیز
من میخام تو منو اصلی، لینک صفحه جاری اکتیو بشه، به نظرتون باید چیکار کنم؟
مرسی
سلام
لطفا این قسمت رو هم بصورت ویدئو قرار بدید
این دوره آموزشی خیلی عالی بود
تشکر
پروژه دانلود نمیشه و منم خیلی لازمش دارم
خیلی عالی بود
دینامیک کردن ساید بار ها تو بوت استرپ رو اگه میشه تو دوره طراحی قالب وردپرس آموزششو بدین . ممنون با تشکر از شما
مرسی
حتما
سلام آقای مهندس
من بوت استرپ را از شما یادگرفتم…واقعا ممنون
خدا قوت…..
چرا پیام ها من نمیاد؟؟؟؟صدتا نظر دادم.
اما من به مشکل برخوردم برای تبدیل به وردپرس تمام مراحل را درست انجام دادم اما خطا میده در صورتی که مسیرهام درسته
Fatal error: Class ‘WP_Bootstrap_Navwalker’ not found in C:\xampp\htdocs\wordpress\wp-content\themes\bootstrap\header.php on line 40
چیکار کنم؟؟؟؟؟؟؟
فقط منوهام مشکل داره.
سلام
به نظر میرسه فایل wp_bootstrap_navwalker.php رو لود نکرده ، یا اشتباه تایپی دارید یا آدرسی ها رو درست وارد نکردید
سلام
من آدرس دهی ام دقیقا درسته.دقیقا عین سایت github عمل کردم حتی.
میشه شما زحمت بکشید برا من فایل wp-bootstrap-navwalker.php را بفرستید.یا لینک را برام بدین .فک کنم مشکل از این باشه.ممنون بابت راهنمایی هاتون.
مشکل بنده برطرف شد.مچکرم بابت سایت گران بهاتون:)
ببخشیدا
منوها من چرا نمیاد؟مینویسه add menu
واقعا درست انجام دادم.فک میکنم بوت استرپ منو فراخوانی نمیکنه.
ممنون میشم اگه بتونید راهنمایی کنید.
اگه اجازه بدین تو دوره طراحی قالب بوت استرپ این مورد رو توضیح میدم
مشکل من برطرف شد خواستم نتیجه را اعلام کنم شاید شاید اگه کسی مشکل منو داشت تو وقت کمتری بتونه برطرف کنه.
دوستایی که منوشون درست نمایش داده نمیشه و یا اصلا نمایش داده نمیشه باید داخل فایل functionخود ریجستری های جاوااسکریپت و جی کوئری را انجام بدهند.
function wpt_register_js() {
wp_register_script(‘jquery.bootstrap.min’, get_template_directory_uri() . ‘/js/bootstrap.min.js’, ‘jquery’);
wp_enqueue_script(‘jquery.bootstrap.min’);
}
add_action( ‘init’, ‘wpt_register_js’ );
function wpt_register_css() {
wp_register_style( ‘bootstrap.min’, get_template_directory_uri() . ‘/css/bootstrap.min.css’ );
wp_enqueue_style( ‘bootstrap.min’ );
}
add_action( ‘wp_enqueue_scripts’, ‘wpt_register_css’ );
در مرحله بعد کدهای اتصال به فایل wp_bootstrap_navwalker.php را انجام دهند.
در گام بعدی باید کدهای php مربوط به منو که داخل فایل header میباشد را دقت کنند که کلاس های به کار رفته شده فراخوانی شده باشند.
‘menu_class’ => ‘nav navbar-nav’,
کلاس ها در این قسمت فراخوانی شوند.
باتشکر از سایت آقای برنامه نویس داااات نت.
سلام ممنونم بابت آموزشی که گذاشتین
امکانش هست تبدیل carousel بوت استرپ در وردپرس رو هم بگذارید؟
حتما