امروزه بسیاری از مدیران سایت ها می خواهند آخرین مطالب سایت خود را در قالب اسلایدر نمایش دهند. اسلایدرها در سایت موجب زیبایی سایت و دسترسی سریع تر به مطالب می شوند.
بسیاری از سایت ها برای نمایش مطالب خود از افزونه استفاده می کنند اما افزونه ها باعث افزایش سرعت بارگذاری صفحه و در اصل سنگین شدن سایت می شوند. ما در این آموزش نشان می دهیم که چگونه آخرین مطالب در اسلایدر بدون افزونه داشته باشید. این آموزش را نمیتوان بهترین مرجع در این زمینه دانست اما می تواند مطلب مفیدی برای علاقه مندان باشد.
1- افزودن قابلیت “تصویر شاخص” به قالب:
در ابتدای کار، باید قالب وردپرسی خود را به ویژگی “تصویر شاخص” مجهز کنیم. برای اینکار به سراغ فایل functions.php قالب خود میرویم (در صورتی که قالب شما این فایل را ندارد، خودتان بسازید). سپس کد زیر را داخل آن قرار می دهیم:
<?php if ( function_exists( 'add_theme_support' ) ) { add_theme_support( 'post-thumbnails' ); set_post_thumbnail_size( 260, 220, true ); // تعیین طول و عرض تصویر } ?>
با کد بالا قابلیت تصویر شاخص به صفحه نوشته تازه اضافه شد. اگر وجود نداشت درست بودن کد را بررسی کنید.
2- تعریف اسلایدر در فایل functions.php:
قدم دوم برای ساخت اسلایدر این است که در فایل فانکشن تعریفش کنیم. به صورت زیر:
register_sidebar(array( 'name' => 'right', 'before_widget' => '<div class="blockr"><div class="pat1">', 'after_widget' => '</div>', 'before_title' => '<span>', 'after_title' => '</span></div><div class="iconb"><img src="/wp-content/themes/GoldMovie.ver2/images/topp.png"></div><br/><br/><br/>', ));
3- نمایش اسلایدر در سایت:
حال می بایست کد زیر را جایی که میخواهید اسلایدر نمایش داده شود قرار دهید:
<div class="footer_box"> <div id='holder' style='display:none;'> <ul id="text_ads"> <?php $my_query = new WP_Query('showposts=10&cat=0'); // 10 اسلایدر نمایش داده خواهد شد while ($my_query->have_posts()): $my_query->the_post(); $do_not_duplicate = $post->ID;?> <li class='objImgFrame' > <a href="<?php the_permalink() ?>/" title="<?php the_title(); ?>" class="image" target="_blank"> /* عنوان مطلب*/ <?php if ( has_post_thumbnail() ) { the_post_thumbnail( array(212,64) ); } else { echo '<img src="' . get_bloginfo( 'stylesheet_directory' ) . '/images/no.png" />'; // عکس مطلب } ?></a> <a href="<?php the_permalink() ?>/" title="<?php the_title(); ?>" class="title" target="_blank"><?php the_title(); ?></a> // عنوان </li> <?php endwhile; ?><?php wp_reset_query(); ?> </ul> <div class="srcoll_nav"> <a href"#" id="leftNav" > </a> <a href"#" id="rightNav" > </a> </div> </div> </div>
فایل را ذخیره کرده و سایت خود را بارگذاری کنید. میبینید که تصاویر بدون هیچگونه ترتیب و افکتی چیده شده اند و شبیه اسلایدر نیستند!!!!!
حال می بایست فایل های زیر را در هدر سایت خود برای فراخوانی قرار دهید.
دانلود فایل های JS
در زیر کد های CSS قرار داده شده است
body { font: 11px tahoma; margin: 0; padding: 0; background: #ccc; color:#000; } ul { margin: 0; padding: 0; list-style-type: none; list-style-position: outside; } div.footer_box { width:980px; float:right; margin-right:50px; position:relative } ul#text_ads { width:980px; float:right; margin:10px -5px 10px 0; } .objImgFrame { float: right; width: 228px; height: 200px; margin: 0px 15px 0px 0px; border-radius: 5px; box-shadow: 0px 0px 8px #000; } .objImgFrame .image { width:227px; height:146px; float:right; } .objImgFrame .image img { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px 5px 0 0; width:227px; height:146px; float:right; }.objImgFrame .image img:hover { opacity:0.8; filter:alpha(opacity=80); /* For IE8 and earlier */ } .objImgFrame .title { margin-top:8px; text-align:center; width:215px; float:right; color:#000; font-weight:bold; } .objImgFrame .descript { width:210px; float:right; margin:5px 5px 0 0; color:#000; font-weight:normal; } .objImgFrame a { transition-property:color; transition-duration:1s; -moz-transition-property:color; -moz-transition-duration:1s; -webkit-transition-property:color; -webkit-transition-duration:1s; -o-transition-property:color; -o-transition-duration:1s; } .simple_slider_hover { cursor:pointer; cursor:hand } .simple_slider_disabled { opacity : 0.2; filter: alpha(opacity=20); zoom: 1; } #leftNav { width:23px; height:85px; background:url(images/text_ads_arrow.png) no-repeat 0 0; position:absolute; top:65px; left:-40px; } #leftNav:hover { background-position:0 -85px; } #rightNav { width:23px; height:85px; background:url(images/text_ads_arrow.png) no-repeat -23px 0; position:absolute; top:65px; right:-30px; } #rightNav:hover { background-position:-23px -85px; }
دانلود عکس های استفاده شده در اسلایدر
آموزش امروز هم به پایان رسید.
موفق باشید
سلام
با تشکر از شما الناز خانم عزیز من تمام مراحل رو انجام دادم اما کدهای مربوط به فانکشن توی هدر نمایش داده می شن .. نه تصاویر … مشکل چیه؟
فایلهای جی اس و تصاویر رو باید توی پوشه خاصی قرار بدم ممنون می شم جواب بدین.
سلام دوست من. احتمالا کدهای مربوط به فانکشن را در جای مناسب قرار نمی دهید. دقت کنید که این کدها باید داخل قرار گیرد. در رابطه با فایل های js و css، شما در هر مسیری که آن را آپلود کنید فرقی ندارد و آن در header.php فراخوان می کنید
سلام
خسته نباشید
ببخشید یه سوال داشتم شاید به این موضوع ربطی نداشته باشه اما شاید بتونید کمکم کنید
یه ابزارک هست توی خود وردپرس به صورت پیش فرض که آخرین مطالب سایت رو نشون میده
مشکل من اینجاست که اگه یه مطلب با تیتر بلند بیشتر از ۴ کلمه داشته باشم از داخل ابزارک موقع نمایش میزنه بیرون و قالبم رو زشت میکنه!!
اگه کدی هست که بشه آخرین مطالب سایت رو بدون افزونه نشون بده و بتونه تعداد کلمات اون رو کنترل و کم و زیاد کرد ممنون میشم تو همین کامنت جواب بدید
امیدوارو منظورم رو فهمیده باشی
سلام دوست عزیز. ممنون
شما می توانید از طریق css مشکل بهم ریختگی را درست کنید. اما برای کم کردن تعداد کاراکترهای عنوان مطالب شاید کد زیر بتونه کمکتون کنه
اگر هم می خواهید آخرین مطالب سایتتون بدون افزونه نمایش داده بشه می تونید از کد زیر استفاده کنید
سلام. این کار تو رزبلاگ هم جواب میده؟
سلام یوسف جان. اگر با توابع رزبلاک آشنایی دارید می توانید این روش را برای مطالب وبلاگ خودتون استفاده کنید
سلام من همه ی این کار هارو انجام دادم-متاسفانه چیزی واسم نمایش داده نمیشه
سلام دوست من. این آموزش تست شده می باشد
لطفا از ابتدا بررسی کنید
کد ها کار نمیکنه
سلام. آموزش تست شده هستش دوست من
سلام یه مشکل داشتم واستون ایمیلش کردم-ممنون میشم باز کمکم کنید
سلام دوست من
ایمیلی دریافت نکرده ام
لطفا دوباره بفرستید
سلام دوست من. متاسفانه ایمیل دریافت نکرده ام
درود
ممنون بابت این آموزش
فقط سوالی که دارم اینه که آیا میشه هر اسلایدر دیگه ای رو با این روش اضافه کرد؟
برای نمونه BXSlider رو با همین کد ها توی function باید معرفی کرد؟
سلام. بله میشه
عالی بود ممنون از مطالب بسیار خوبتون
خیلی عالی و کاربردی بود ممنون
سلام الناز
ممنون از آموزش خوبتون
یه سوال داشتم
با استفاده از برنامه Amazing Slider یک اسلایدر برای سایت خود ایجاد کردم که به صورت افزونه نصب میشود
این افزونه را نصب کردم ولی نمیدونم چطور باید نمایشش بدم در قسمت ابزارک ها هم هست ولی جای دلخواهم در این قسمت وجود ندارد
قالب ورد پرس Sahifa هستش
بی زحمت کمکم کن تا این اسلایدر را در جایی که میخوام نمایش بدم
در ضمن قالب صحیفه خودش یه اسلایدر داره که خوشم نمیاد ازش
سلام عماد جان. شما برای این کار ۲ راه داری. ۱ اینکه یه جای ابزارک تعریف کنید و کدشو تو جایی که میخواهی اسلایدر نمایش داده بشه بزاری. بعد از قسمت ابزارک ها، ابزارک اسلایدر را قرار بدی. ۲- اینکه کد فراخوانی اسلایدر را در جای مورد نظرت بزاری. کد های نمایش اسلایدر رو هم جایی که پیشنمایش میگیری بهت میده. این لینکو ببین
http://amazingslider.com/how-to-create-wordpress-jquery-slider/
الناز عزیز از حسن توجه شما سپاسگذارم.
مشکل من هم دقیقا همینه که نمیدونم این شورت کد را کجا باید قرار بدم.
البته توی این زمینه بسیار مبتدی هستم.
این اولین سایتی هست که راه انداختم. وب سایت شخصی پسرم هست
www . parsasafari . ir لطفا ببین و نظرتو بگو. میدونم کار زیاد داره.
فعلا یه اسلایدر با امکانات قالب صحیفه توش راه اندازی کردم. ولی هنوز باهاش کنار نیومدم. به نظرت اسلایدر تمام صفحه باشه بهتره یا به این شکل بهتره؟
من سوال زیاد برام پیش میاد ممکنه زیاد مزاحمت بشم. پیشاپیش ببخش.
لینک زیر میتونه کمکت کنه
http://amazingslider.com/how-to-create-wordpress-jquery-slider/
وب سایتتو دیدم درست میگی کار زیاد داره موفق باشی
خواهش می کنم خواشحال میشم که بتونم به سوالاتتون جواب بدم
بازم منم. خوبی استاد؟
یه چند کیلو سوال دارم
۱. الان توی این سایت شما وقتی نظر میفرستم بالاش مینویسه نظر شما در انتظار تایید میباشد . چطور این جمله را تنظیم کنم؟ و کجا؟
۲. توی خبر نامه ایمیلی شما ثبت نام کردم یه پیغام زیبا و محترمانه نشون داد ولی تو سایت من مینویسه ایمیلی در راه است. کجا این جمله را عوض کنم؟
سلام عماد جان.
در خصوص سوال ۱ معمولا این جمله در فایل فانکشن پوسته تعریف میشه.من قالب صحیفه رو چک کردم تو مسیر زیره:
includes/wp_list_comments.php رو باز کن و جمله زیر را جستجو کن
Your comment is awaiting moderation
جای جمله بالا جمله مورد نظرتو قرار بده
در خصوص سوال ۲ از کدوم افزونه استفاده می کنی؟
محلی را که آدرس داده بودی پیدا نکردم.
من پوسته صحیفه رو دانلود کردم و از روی اون بهت آدرس رو گفتم. از کدوم نسخه صحیفه استفاده می کنی؟ لطفا لینک جایی که پوسته رو دانلود کردی بزار واسم
سلام
ممنون بابت وقتی که میگذارید
از افزونه Subscribe2 استفاده میکنم.
در ضمن لینکی را که فرستادی دیدم. واین شورت کد را هم بدست میاورم ولی نمیدونم کجا باید بکار ببرمش!
هر جا میذارم ارور میده.
تو عکس زیر ۲ تا کد بهت میده:
http://amazingslider.com/wp-content/uploads/2012/12/viewsliderplugin.png
اولی شورت کد هستش و زمانی می تونی از این کد استفاده کنی که بخواهی اسلایدر رو تو نوشته یا برگه نشون بدی.
کد دوم کد فراخوانی اسلایدر هستش و فقط می تونی داخل فایل های پوسته قرار بدی. اگر بخواهی تو صفحه اول نشون بدی باید تو فایل index.php بزاری. مقاله معرفی فایل ها در پوسته وردپرس جایگاه فایل ها رو بهت میگه.
با سلام. خسته نباشید عرض می کنم و کمال تشکر را از شما دارم
خیلی مرسی و سپاس از زحمات و مقالات بسیار خوبتون
سلام
من آموزش بالا را انجام دادم
فایهارا هم وصل کردم
به css هم تسلط کامل دارم
هیچ المان جی کویری دیگه م به صفحه وصل نیست
ترتیب فایها را هم چک کردم
jquery.min.js”
jquery.simple_slider.js
amazon_scroller.js
text_ads.js
وقتی دایو holder
را دستی نمایش میدم منضورم display هست
چون پیشفرض مخفی هست
عکس و مطالب را میبینم
ولی از حرکت خبری نیست
من قالب را خودم طراحی کردم کردم
چی کار کنم؟؟
سلام درست بود
مشکل از من بود
سلام.
مرسی مدرسه جان. واضح گفته بودین. مفید واقع شد
مرسی. مفید بود
سلام ممنون از آموزش خیلی خوبتون
نمونه این مثال در سایت
http://sarebezangah.com/
مشاهده کنید
سلام
منن نمونه کد دیگری در سایت
http://sarebezangah.com/
استفاده کردم
ممنون از آموزش خودتون
این را گفتم که کاربران شما سر در گم نشوند
عالی بود مرسی
سلام
خسته نباشید الناز خانم
بنده زیاد وارد نیستم؛ یک دومین و هاست خریدم از شرکت و خودش توی طراحی اولیش واسم یک اسلایدشو گذاشته که اخرین مطالب به طور خودکار توی اون اسلایدشو نمایش داده میشه؛ ولی بنده نمیخام که برای همه ی مطالبم این اتفاق بیفته و میخام خودم انتخاب کنم که کدوم مطلب داخل اسلایدشو قرار بگیره و کدام نگیره ممنون میشم اگه کمکم کنید.
و یک چیز دیگه؛ ایا بغیر از این اسلایدشویی که خود شرکت گذاشته بنده هم میتونم یک اسلایدشوی دیگه در همون صفحه اول سایتم داشته باشم اگه میشه؛بفرمایید چطوری میشه!؟
سلام دوست عزیز. برای این کار میتونید از روش های مختلفی استفاده کنید. هم پلاگین و هم کد. که البته استفاده از کد کمی پیچیده میشه
سایت خوبیه مرسی
مرسی خیلی کمکم کرد
سلام … ممنون از مطالب خوبتون،موفق باشید.
با سلام و سپاس بسیار عالی بود ممنون
سایت عالی دارید ، والبته با محتوای مفید. خسته نباشید
لاایک دارین واقعااااا
با سلام
ممنون از سایت خوبتون.
ممنون آموزش خوبی بود
مرسی از آموزش های خوبتون
بسیار عالی بود مرسی
ممنون برای آموزش خوبتون
موفق باشید
با سپاس و قدردانی فراوان مطلب مفید و ارزنده ای بود موفق و پیروز باشید
سلام
الناز جان
ممنون از این وقی که در اختیار ما کاربرا قرار میدی و با این صبر نظرات ما را میخونی
ممنون
سلام ممنون از آمکوزش خوبتون.
کاش یک نمونه آماده از این مثال رو برای دانلود می گذاشتید؟
تشکر
واقعا مفید بود
ممنون از شما
آموزنده بود ممنون از مطلبتون
خیلی خوب بود
با سپاس و قدردانی فراوان مطلب مفید و ارزنده ای بود موفق و پیروز باشید
مرسی از سایت فوق العادتون
سلام
ممنون از آموزشتون
اگه بخام فقط تصویر شاخص داخل اسلایدر نمایش داده بشه باید چطوری کار کنم؟
ممنون
سلام دوست عزیز. شما این خط رو میتونی حذف کنی:
/” title=”” class=”title” target=”_blank”> // عنوان
عالی بود
سلام
ممنون از پست خوبتون
عالی بود استفاده کردم
تشکر
سلام.خسته نباشید.من از کد زیر توی قسمت ایندکس برای نمایش پنج پست پربازدید استفاده میکنم:
۱, ‘meta_key’ => ‘wpb_post_views_count’, ‘orderby’ => ‘meta_value_num’, ‘order’ => ‘DESC’ ) );
while ( $popularpost->have_posts() ) : $popularpost->the_post();?>
<img id="sag" src="” >
حالا سوال من اینه.من میخوام کاری کنم که با این کد فقط یک پست نمایش داده بشه و اون پست پربازدیدترین پست نباشه.دومین پست بربازدید باشه.باید چیکار کنم؟بلدم چطور تبدیلش کنم به یک پست.باید post_per_page رو روی ۱ قرار بدم.ولی نمیدونم چطوری کاری کنم که به جای پربازدید ترین دومین پست پر بازدید رو نشون بده.ممنون میشم راهنمائیم کنید.
سلام دوست عزیز. این رو هم به کوءری اضافه کنید : ‘offset=1’
کانال تلگرام
عضویت در کانال
سایر مقالات
ورود به مدرسه وردپرس
عضویت در مدرسه وردپرس